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

빔캠프(veamcamp.com)란 곳에서 HTML+CSS 무료강의를 하길래 신청해서 듣기 시작했다. 집에서 가까운 곳이기도 했고, HTML과 CSS에 대해 기초를 쌓고 싶어서 고민없이 신청했다. 빔캠프는 웹디자인 코딩 강의를 하는 곳으로 상수역 근처에 위치해 있다.

신청한 강의는 토요일 오후 5시부터 8시까지 3시간씩 5주 과정으로 HTML과 CSS에 대해 초심자가 꼭 알아야 하는 내용에 대한 강의로 구성되어 있다. 5주간 배울 수 있는 것은 다음과 같다.
a. 박스모델
b. 선택자
c. 블록과 인라인 태그 구분
d. float와 position과 관련된 레이아웃

정규 강좌는 아니고 일종의 맛보기 강좌이기 때문에 깊이 있는 주제를 다루진 않는 듯 하다. 그래서 어찌보면 검색 엔진에서 쉽게 찾을 수 있고 충분히 혼자서 익힐 수 있는 내용이긴 하다. 하지만 이 강의가 괜찮게 느껴지는건 잘 짜여진 틀 안에서 직접 실습해보며 익힐 수 있기 때문에 쉽게 안잊어버릴 것 같단 생각이 든다. 그리고 강사 분 강의 실력이 참 괜찮다. 유머도 있으시고, 완전 초보까지 다 끌고가면서도 정해진 시간안에 나가야 하는 진도를 다 끝마치시는 걸 보면 말이다.

정리 차원에서 간단하게나마 기록은 해두자.

1주차 후기.

개발 환경을 구성했다.

brackets를 설치했고, 자동 들여쓰기와 tab 자동완성 기능을 제공하는 emmet과 indent guide라는 확장 기능을 설치하였다. atom과의 비교는 잘 모르겠고, sublime text와 비교했을 땐 brackets가 web 개발 환경만큼은 live view를 제공하기 때문에 좀 더 편한듯 하다. 현재 줄을 복사 붙여넣기 하는 단축키(Ctrl + D)와 색상 선택 단축키(Ctrl + E)는 기억해두자.

HTML 문서의 기본 골격과 컨텐츠를 표현하는 태그에 대해 실습하였다.

* 박스 모델: width + height + padding + border + margin.
* HTML은 구조, CSS는 인테리어. 구조를 잡는다는 것은 태그를 이용해 컨텐츠에 성격을 부여하는 것. 각 컨텐츠 요소는 부모-자식의 관계를 갖으면서 확장해 나간다.

. CSS에선 UI Framework에서 흔히 제공되는 center align 속성이 없다. width를 지정해 주고, margin-left: auto; margin-right: auto;와 같이 지정해 주어야 가운데 정렬이 된다. text 요소엔 text-align이란 요소가 있긴 하다.
. padding은 안쪽 여백에 대한 것, margin은 바깥쪽 여백에 대한 공간인데 padding은 컨텐츠의 크기에 영향을 주고 margin은 영향을 주지 않는다.
. border-width, border-style, border-color는 border라는 단축 속성으로 한 번에 표현할 수 있다. border: 5px solid blue; // margin 속성도 마찬가지로 상-우-하-좌 순서로 각 margin을 하나의 속성에 구분해서 지정해줄 수 있다.