Achievement Goals
- HTML 구조를 programmable하게 기획할 수 있다.
- CSS를 HTML에 적용할 수 있다.
- w3school 등의 reference 사이트를 이용해 CSS 속성을 검색하고 이해할 수 있다.
- 기초적인 selector 규칙을 이해할 수 있다.
- CSS를 이용해 간단한 레이아웃을 만들 수 있다.
- element에 class를 사용해야 할 때와 id를 사용해야 할 때를 구분할 수 있다.
HTML/CSS
HTML과 CSS는 사이트 혹은 웹 앱의 보여지는 부분을 표현하는 도구이다. 각 영역을 구분할 줄 알고, 의미를 담아내는 것은 잘 구조화된 HTML을 만드는 과정이다. 이를 통해 프론트엔드 개발을 위한 설계를 배울 수 있다. CSS는 기본적인 스타일링을 하기 위해 Selector라는 개념을 반드시 이해해야 한다.
HTML
웹 페이지의 툴을 만드는 마크업 언어. HTML은tag의 집합으로 이루어져 있다.
<tag>Text Content</tag>자세한 용어는 다음과 같다.
tag는 여는 태그와 닫는 태그의 쌍으로 이루어져 있다. 이러한 tag가 구조를 이뤄서 '트리 구조'라 부른다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Practical CSS</title>
</head>
<body>
<h1>Hello, world!</h1>
<div>Content here
<span>Description</span>
</div>
</body>
</html><!DOCTYPE html>의 경우처럼 닫는 태그가 필요 없을 수 있다. 이러한 경우 스스로 닫는 것처럼 표현할 수도 있다.
<img src="image.png"></img>
<img src="image.png" /> <!-- self-closing tag -->
<img src="image.png"> <!-- 생략해도 무관 -->하지만 닫는 태그가 필요하다면 그 순서를 반드시 지켜야 한다.
<!DOCTYPE html>이 HTML 문서의 시작을 알려주고, html이라는 가장 상위의 태그와 그 자식 태그로 head, body가 있다. 이처럼 부모, 자식 태그로 이루어져 있고 각 태그 사이에 내용이 들어간다.
각 태그에는 속성을 추가할 수 있다. 여는 태그에 포함된다.
<div class="view page1" id="header">Header</div>CSS
웹 페이지 구성요소의 스타일을 정의하는 언어. HTML에 CSS를 적용하는 방법은 세 가지가 있다.
-
Inline
HTML 태그에 직접
style이라는 속성을 통해 적용한다.<h1 style="color: red; font-style: italic">Hello, world!</hi> -
HTML 내부에 스타일시트 작성
<style>태그를<head>태그 안에 삽입한다.<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Practical CSS</title> <style> h1 { color: red; font-style: italic; } </style> </head> <body> <h1>Hello, world!</h1> <div>Content here <span>Description</span> </div> </body> </html> -
HTML 외부에 스타일시트 작성
<link>태그의href속성을 이용해css확장자로 저장된 스타일시트를 가져온다./* style.css */ h1 { color: red; font-style: italic; }<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Practical CSS</title> <link rel="stylesheet" type="text/css" href="./style.css" /> </head> <body> <h1>Hello, world!</h1> <div>Content here <span>Description</span> </div> </body> </html>
CSS 선택자
CSS에서 요소를 선택하는 규칙. id 혹은 class를 부여할 수 있다. id는 고유한 속성이므로 하나의 id는 단 하나의 요소만 가질 수 있다. 하나의 class는 여러 요소가 동시에 가질 수 있다. 하나의 요소가 여러 id와 class를 지닐 수 있다. 공백문자를 통해 구분한다.
<h1 class="red underline" id="header1">First Page</h1>
<h1 class="impact" id="header2">Second Page</h1>CSS에서 id와 class를 이용해 요소를 선택할 때, id는 #을, class는 .을 통해 선택할 수 있다.
#header1 {
font-size: 2em;
}
.impact {
font-weight: bold;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}class는 스타일을 분류하고, id는 특정 요소에 이름을 붙이는 데 사용한다.
Layout 만들기
좌표계
요소는 위에서 아래로, 왼쪽에서 오른쪽으로 확장한다. 왼쪽 상단의 좌표가 (0, 0)이 된다. 좌표계를 바탕으로 절대적 혹은 상대적인 위치에 요소를 배치할 수 있다.
display
요소가 한 줄을 모두 차지하는 block, 자신의 크기만큼만 차지하는 inline, inline-block이 있다. div 태그는 block 특성을 지니고, span 태그는 inline 특성을 지닌다. inline-block은 height를 가질 수 있다.
Box Model
Box는 margin, border, padding, 내용으로 구성된다. 이 때, box-sizing: border-box;로 설정하면 위의 4가지를 모두 포함한 크기가 곧 Box 크기가 되기 때문에 계산하기 쉽다.
Positioning
position 속성은 static(default), relative, fixed, absolute, sticky를 가진다.
static은 왼쪽에서 오른쪽으로, 위에서 아래로 쌓인다.
relative는 자신의 위치가 static일 때의 기준으로, top, right, bottom, left 속성을 이용해 원하는 위치에 배치할 수 있다.
absolute는 static 속성을 가지고 있지 않은 부모를 기준으로 배치된다.
fixed는 (0, 0)을 기준으로 배치된다.
sticky는 기본적으로 relative처럼 동작하지만, 스크롤 영역을 벗어나면 fixed처럼 작동한다.
