생활코딩 WEB2 강의를 토대로 정리하여 개발 경험을 덧입힌 글입니다.
1. 개요 - 웹이 작동하는 방식
처음에는 HTML과 CSS가 다른 줄 알았었는데, 왜냐하면 티스토리 스킨 에디터에서는 HTML과 CSS를 구분하기 때문입니다. 자바스크립트도 마찬가지. 하지만 <style> 태그에는 CSS가, <script> 태그에는 자바스크립트가 들어가는 걸 알게 되고서는 웹 시스템 자체가 굉장히 간결하게 구성되어 있음을 알 수 있었습니다.
저번에 웹은 기본적으로 n:n 연결을 사용한다고 했었습니다. 각각의 노드에서 하는 역할에 따라 웹 브라우저가 될 수도 있고, 웹 서버가 될 수도 있죠. 중요한건 이들이 어떻게 통신하는가 입니다. 웹 서버에서는 하나의 폴더에 웹사이트에 대한 모든 정보를 저장하고, 웹 브라우저는 이 파일들에 접근하여 시각화합니다.
그리고 index.html은 이 웹사이트를 읽는 지도가 됩니다. 브라우저 입장에서는 index.html의 해석부터 합니다. "여기엔 무슨 버튼이 있고, 이 버튼을 누르면 뭐랑 연결되고, 또 여기엔 사진을 띄워야 하고..." 이걸 해석하고 나면 필요한 파일과 그 경로를 알 수 있고, 이를 다운로드 받아 웹사이트를 로딩합니다.
그렇기 때문에 더더욱, HTML과 CSS, 자바스크립트를 구분하는 것은 오히려 헷갈리게 할 수 있습니다. 웹 브라우저는 그냥 index.html이 하라는 대로 했을 뿐이니까요. 적어도 html 문서에 작성하는 CSS와 자바스크립트는 HTML의 작성방식과 태그에서는 불편하거나 할 수 없는 것을 보완해주는 장치라 생각합시다.
2. CSS의 기본 구조
우리는 이제 단순한 문서에 구조를 입힐 것입니다. html은 글과 태그라는 단순한 문법으로 이루어져 있지만, 이 '단순함' 때문에 굉장히 작은 단위로 쪼개져 있습니다. 예를 들어,
<태그1> 글 </태그1>
<태그2> 글 </태그2>
...
이런 작은 단위들이 수백~수천개 있으면 관리 효율성이 굉장히 떨어지기 때문에, 같은 그룹끼리 묶고 같은 효과를 주기 위해 CSS가 탄생했습니다. 그래서 같은 그룹으로 묶어주는 태그의 옵션 하나와 그 옵션에 같은 효과를 주는 영역이 필요합니다.
같은 그룹으로 묶어주는 태그의 옵션은 <태그 (css)>이고, 같은 효과를 주는 영역은 Html 내에서 <style></style>로 구분합니다. 한가지 효과를 줄 때는 html과 별반 다를게 없어보이지만, 페이지를 꾸미려면 한 속성당 여러가지 효과를 줘야 하고, 그럴때 CSS의 효과는 엄청나지겠죠? 그럼 코딩으로 넘어가봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css를 배워봅시다!</title>
<!-- style 태그를 통해 각 태그에 붙일 스타일들을 변수로 치환합니다. -->
<style>
a {
color: red;
text-decoration: underline;
border-width:2px;
border-color: rgb(136, 136, 136);
border-style:solid;
}
h1 {
font-size: 65px;
text-align:left;
border-width:2px;
border-color: red;
border-style:solid;
}
.i {
color:gray;
margin-top: 40px;
}
.j, #j {
margin-top:40px;
}
.k {
margin-top: 20px;
}
</style>
<!--
a는 하이퍼링크, h1은 제목 태그였습니다. 이는 각 제목이나 하이퍼링크의 속성을 일괄적으로 이렇게
쓰겠다는 뜻입니다. 각 속성은 디자이너가 줍니다! (적어도 adobe XD에서는요.) 아니면 검색하거나,
에디터에서도 속성에 대한 값을 표시해줍니다.
i 앞에 붙는 점(.)은 html의 태그가 아니고, class 안에 들어가는 변수임을 의미합니다.
-->
</head>
<body>
<ol> <!-- 항목을 숫자로 표시하는 목차 태그, 점으로는 <ul> -->
<li><a href="1.html"><font color="blue">하이퍼링크를 </font>통해 1번 html을 엽니다.</a></li>
<li><a href="2.html" color:red>a 태그에 옵션으로 color:red를 추가했습니다.</a></li>
<li><a href="3.html">헤드의 스타일 태그, 즉 css를 통해 a 태그의 스타일을 일괄지정합니다.</a></li>
<li><a href="3.html">3, 4번은 따로 태그를 추가하지 않아도 빨간 색으로 표시됩니다.</a></li>
</ol>
<h1>제일 큰 제목입니다.</h1>
<h2>두 번째로 큽니다. h6까지 있습니다.</h2>
<p><!-- 단락 표시용 태그, 줄바꿈+띄움 역할 -->
<a href="index.html" target="_blank", title="마우스에 올려놓으면 표시되는 태그">
target="_blank"는 새 탭에서 열기 옵션을 설정합니다. href 태그가 없으면 링크가 안열리겠죠?</a>
<br> a 태그를 벗어난 문자이고 br로 줄바꿈 됩니다.
</p>
<p class="i">이 단락의 margin-top: 40px와 color: gray를 css의 class를 통해 적용했습니다.</p>
<p class="j k">class는 2개를 적용할 수 있습니다. 띄어쓰기로 구분합니다.</p>
<p>그러나, 2개의 스타일에 상충되는 값이 있을 경우 덮어쓰기 됩니다. style을 위부터 아래로(순차쓰기)읽는다고
생각해 봅시다. 그럼 margin-top값이 40px 후 20px로 덮어쓰기되겠죠? 따라서 위의 줄바꿈은 20px로 됩니다.</p>
<p class="k" id="j">하지만!! 우선순위가 높은 선택자 id=""를 사용하면 강제로 j 클래스를 적용할 수 있습니다.
단, id에 들어가는 변수명은 .j가 아닌 #j로 써야 합니다. 변수명은 쉼표로 구분해 같은 내용을 담을 수 있습니다.</p>
<p>
h1과 a의 테두리를 보면 h1은 화면 전체를 쓰고, a는 글자 부피 만큼만 씁니다. 이를 각각 block level element와
inline element라고 합니다. 이는 속성 display를 설정해줌으로써 바꿀 수 있습니다.
</p>
</body>
</html>이 코드의 프리뷰는 아래 링크에 나와있습니다.
https://ghyeongl.github.io/WEB_Training/
연구노트 예제파일입니다.
ghyeongl.github.io
박스모델과 그리드, 쿼리 등은 다음 편에서 하도록 하겠습니다.
'프로젝트 > 설명' 카테고리의 다른 글
| 디스코드봇 6. 코드의 원리 파악하기 (3) 객체 지향과 공식문서 활용법 (0) | 2020.12.20 |
|---|---|
| 디스코드봇 5. 코드의 원리 파악하기 (2) 데코레이터 (0) | 2020.12.20 |
| 디스코드봇 4. 코드의 원리 파악하기 (1) 비동기 처리 (0) | 2020.12.01 |
| 디스코드봇 3. 파이썬 가상환경 구축, 라이브러리 추가, 실행 (0) | 2020.11.28 |
| 디스코드봇 2. 시작을 위한 환경설정 (0) | 2020.11.28 |
