[웹 프로그래밍(풀스택)] HTML CSS를 마치며

HTML

HTML은 그 용도에 맞게 사용해야 하며, 비록 표시하는 바는 같을 수 있어도 브라우저에서 인식할 때 다르게 인식하기 때문에(h1과 글자수를 키운 본문은 보기엔 같아 보이지만 어마어마한 차이가 있다) semantic하게 사용해야 한다.

HTML 구조

맨 윗줄을 차지하는 header태그, 본문에는 대개 메뉴를 장식하는 navigation태그, 하단의 footer태그가 있다. 그러나 호환이 되지 않는 경우도 있기 때문에 <div id = 'header'>이런 식으로 설정하여 사용한다.

클래스와 id

id는 한 페이지에서 고유한 속성이다(하나 이상에 사용할 수 있지만 권장하지 않는다). 클래스는 비슷한 속성을 가진 여러 element를 묶기 위해 사용하는 것으로, 여러 번 중복되어 선언될 수 있다. 

CSS

선언 방법

크게 3가지로 나뉘는데 inline, internal, external이다. inline은 html코드 안에 바로 적용하는 것이다. 우선순위에서 최우선으로 적용되지만 수리 보수가 어렵다는 단점 때문에 잘 사용하지 않는다. internal은 head안에 <style>태그를 이용하여 선언하는 것이다. 별도의 css파일이 필요하지 않아 브라우저가 css파일을 불러올 필요가 없다는 장점이 있다. 마지막 external은 별도의 css파일을 만들어 브라우저가 렌더링을 할 때 링크로 보내는 것이다. 이 방법을 제일 많이 쓴다고 한다. 그러나 입력 순위(브라우저가 받는 입력)는 앞에서 설명한 순서대로 우선순위를 차지한다.

상속/우선순위

HTML은 계층적인 구조를 갖기 때문에 각 element들이 부모와 자식 관계로 이루어져 있다. 여기서 color, font같은 style은 부모로부터 상속을 받는다. 그러나 border, padding등의 간격을 설정하는 style은 상속받지 않는다. 같은 element의 스타일이 동시에 설정되었을 때, 점수제로 우선순위를 정한다. id는 class보다 점수가 높아, 항상 id가 우선순위에 있다. 같은 class일 경우 더 구체적으로 선언된(ex: body > div .class) style이 적용된다.

CSS selector

CSS 스타일을 어떤 element를 입힐지 설정할 때, class는 .class, id는 #id로 불러올 수 있다. 또한 어떤 엘리먼트 예하에 있다는 >기호와(ex: body > div) 바로 아래에 있는 자식이면 띄어쓰기로 나타내고 한다(div .class). 그룹 선택은 한 그룹에 동일한 스타일을 입히고 싶을 때 h1, h2, span { color : red }로 그룹을 만들어 나타낼 수도 있다.

nth-child, nth-of-type

어떤 element예하에 있는 n번째 자식에게 style을 입히고 싶을 때, 둘을 사용할 수 있다. 둘의 차이점은 nth-child는 부모 element의 모든 자식 중에 카운트하는 것이고, 후자는 p:nth-of-type처럼 찾으려는 태그 타입(<p>)중에서 카운트하는 것이다.

CSS Layout

layout에는 크게 3가지 요소가 있는데, display, position, float이다. display는 block과 inline으로 나뉘는데, block은 한 영역 전체를 다 차지하고(ex:<div>), inline은 필요한 영역만 사용한다(ex:<span>). 블록 특징을 가지고 있는 element여도 css style에 display : inline;으로 설정하면 인라인으로 바뀐다(vice versa). 

position

position은 static, relative, absolute, fixed으로 나뉘는데, 기본값은 static이다. 순서대로 위에서 아래로 쌓이는 구조이다. relative는 원래 자기가 있어야 할 위치를 기준으로 top, left, bottom, right가 주어지는대로 이동한다. absolute는 상위에 있는 position 중 static이 아닌 것을 참고로 이동을 한다. 특정 위치에 놓고 싶으면 absolute를 사용하는 것이 좋다. relative를 설정한 다음 left, top값을 주지 않으면 아무런 변화가 없다(static이랑 같다). 

float

float은 element에 구애받지 않고 위를 둥둥 떠다니는 요소라고 생각하면 된다. float:left를 선언함으로써 페이지를 두개의 float으로 채울 수 있다. 일단 블록 element는 box 형태인 것을 기억하고 가자. element의 간격으로 padding, border, margin이 있는데, padding은 콘텐츠와 엘리먼트 박스의 간격을 조절하는 값이다. 여기서 padding값을 늘리면 원래는 element의 크기가 늘어난다. 그러나 box-sizing : border box;를 설정하면 컨텐츠를 담아낼 수 있을만큼은 박스의 크기가 늘어나지 않는다. border은 테두리로, 박스의 두꼐를 늘릴 수 있다. margin은 element 사이의 간격이다.

디버깅:

크롬의 개발자툴(ctrl shift i)를 들어가면 element가 나오는데 여기에서 html 페이지를 볼 수 있다. inspector를 사용하여 특정 부분의 html 코드를 살펴보고, style 탭에서 그 element가 사용하는 css코드를 볼 수 있다. Computed는 최종 결과를 보는 탭이다.