veamcamp HTML+CSS 재미있게 입문하기 3주차

2주차엔 과제가 있었다. 배운 내용을 가지고 해보는 자유과제 였는데 그냥 하기엔 좀 심심할 것 같아서 자바 스크립트를 사용해서 간단한 대화 기능을 만들었다. 의식적으로 제이쿼리나 다른 프론트엔드 프레임워크를 쓰지 않고 하려니 생각보다 시간이 걸렸다. 아래는 결과물.

업무 시간 외에 뭔가 만들어본건 오랜만이라 완성도를 떠나서 꽤나 신선한 경험이었다. 3주차엔 선택자에 대한 심화(?) 내용과 display 속성에 대해 배웠다.

마진 병합, CSS의 우선순위

마진과 마진이 만나면 자동으로 병합이 된다는 내용. 예를 들어 연속된 두개의 요소에 각각 margin이 20px를 지정하면 두 요소 사이의 간격이 40px가 아니라 20px가 된다는 내용이다.

CSS의 우선순위. 나중에 선언될수록, 구체적일수록 높은 우선순위가 높다. 선택 구문마다 일종의 score가 메겨진다고 보면 되는데, 당연히 score가 높을수록 우선순위는 높다.

<h1 class="wow wow2"/>를 가장 구체적으로 선택해보자.
 → h1.wow.wow2
.wow.wow2는 어색한 표현이지만 아무튼 저렇다고 한다. h1:hover에서 'hover'도 클래스의 범주에 들어가므로 h1:hover는 좀 더 구체적인 h1.wow.wow2에 의해 무시된다는 점을 이해할 수 있어야 한다.

.section.skill:hover h2 { ... }
 → section이면서 skill 클래스를 갖는 태그에 hover가 되면 그 하위의 h2 스타일이 변경된다.

.section.skill :hover { ... }
 → section이면서 skill 클래스를 갖는 태그 내 모든 자식에 hover가 되면 스타일이 변경된다.

다시 정리하는 페이지 만들기 순서

1. 덩어리를 구성한다.
2. CSS를 담백하게 만들고 시작하자. (CSS RESET)
 → 브라우저마다 지정되는 기본 스타일이 조금씩 다르므로 동일한 기준에서 동작하도록 한다.
3. 각 덩어리의 백그라운드를 지정한다.
 → 요소가 차지하는 영역을 확인하기 위함이다.

서체 지정

구글 웹폰트 (https://fonts.google.com/)
전문가가 미리 만들어놓은 웹 폰트를 따다 쓰는 쪽으로 많이 한다고 한다. 구글 웹폰트 기준으로, script를 로드하고 css만 해당 서체를 지정해주면 폰트를 쉽게 적용할 수 있다.

Span

인라인 태그를 감싸는 용도로 span이 권장된다. 인라인 태그는 완전한 박스모델을 따르지 않으므로 사용법이 다름에 주의할 필요가 있다. 예를 들면 span에 width는 적용되지 않는다. (span에는 width 대신 길이의 개념이 적용된다.) 그리고 span엔 margin, padding을 지정할 순 있지만 top, bottom 값이 동작하지 않는다.

Display

각 요소에 대해 display css 속성을 이용해 다른 성격을 줄 수 있다. 예를 들어, 인라인 태그에 display: block 값을 주면 해당 요소는 블록 엘리먼트 처럼 동작하게 된다. a 태그 같은거에 inline-block이나 block 같은 속성을 지정해주면 a 링크가 갖는 크기를 키울 수 있는 것이 주 활용 예다.
display: inline-block은 블록 엘리먼트의 가로 배치를 하는데 자주 쓰인다. inline 속성까지 같이 부여되기 때문에 inline 특성상 원치않는 여백이 포함되는데 이러한 부분에 대해선 float나 grid 같은 대안이 있는 듯 하다.

3주차까지 마치면 다음과 같은 웹 페이지를 만들 수 있다. 뽀록 없이 기계적으로 만들어 낼 수 있다는데서 의미가 있다. 여타 UI Framework에서 자주 쓰곤하는 margin에 음수 값을 주는 trick은 html/css에서도 유효하다.

>> 취미와 업무의 접점에서 스트레스가 찾아온다. 취미 생활에서 스트레스를 받는다면 곤란하겠지만 경험상 취미와 업무가 애매하게 걸치는 경우엔 목표를 약간 높게 설정하는 것이 좋았던 것 같다. 다음주부턴 꽤 어려워질거라 하는데 이번 기회에 잘 배워서 React나 Vue까지 연계해 볼 생각이다.