빔캠프의 CSS 첫걸음!!! 기대하던 첫 번째 오프라인 강의를 참여했다.
강의를 듣고 정리를 해봤는데 정리하기 위해선 크게 두 분류로 나눠 이론과 css를 구분지어야 한다.
물론 이론도 나눠진다 첫 번째는 용어 정의고 두 번째는 css 작업 순서이다.
이 글과 다음 글에선 이론에 대한 내용을 정리하고 먼저 용어 정의부터 시작하겠다.
HTML Element(요소)
보통 Element와 Tag를 구분 못 하는 사람이 많은데 Tag는 <section></section>, <article></article>과 같이 start tag와 end tag로 짝지어 사용하는 Tag 또는 <img />, <input />과 같이 start tag로만 구성된 Tag로 크게 두 형태가 있다. 짝지어 사용하는 Tag인 경우 children element(하위 요소)들을 가질 수도 있고 Text Element라고 불리는 요소들도 가질 수 있는데 start tag와 end tag 사이에 있는 모든 하위 요소들을 통틀어 Element라는 용어를 사용한다.
<!doctype html>
html 확장자 파일의 최상단에 파일의 타입을 명시하는 요소이다. 어떻게 보면 css작업 시 제일 중요하게 봐야 하는 부분인 것 같은데 실수로 해당 요소를 제거하고 실행 시 브라우저(크롬, 사파리, 파이어폭스 같은 것)는 해당 파일이 어떤 타입인지 모르기 때문에 quiks mode로 해석한다. quiks mode의 예시로는 html 요소의 너비와 높이는 viewport의 값을 갖게 된다. 이번 강의에서 처음 알게 된 내용인데 오늘날 html5라고 부르는 것은 잘 못된 것이다. HTML5보다 HTML Living Standard가 더 맞는 표현인데 그 이유는 HTML의 발전 역사를 알면 이해할 수 있는 내용이다. 요약하자면 W3C와 WHATWG(Apple, Mozilla 및 Opera)라는 두 그룹이 합의를 걸쳐 HTML5를 만들었지만 2011년에 W3C는 HTML5의 완성된 버전으로 끝낼라 했고 WHATWG는 계속 사양을 유지하면서 HTML 단일 버전용 Living Standard 작업을 계속하길 원했으므로 두 그룹의 목적이 달라져 개발 작업을 멈췄고 시간이 흘러 W3C는 2019년에 WHATWG와 같이 단일 버전인 HTML로 합의했다.라고 나와있다. 그래서 HTML5라고 말하기보단 HTML(Living Standard)가 더 맞는 말이다.
Style syntex
강의에서 Style syntex라고 말하진 않았지만 제목으로 쓰기엔 적합한 것 같다. Style syntex는 Tag 명이나 class나 id와 같은 HTML Element의 attribute를 사용하여 대상을 선택 후 css를 추가하는 문법을 이야기한다. 때문에 syntex는 간단한데 css를 주입할 대상을 선택하고 목적에 맞게 css의 properties를 명시하면 된다.
Selector(선택자)의 종류는 여러 가지 있는데 이건 따로 정리하겠다. 가장 중요한 점은 declaration block의 기호인 curly bracket({})과 property와 value를 명시 후 마지막을 알리는 semi-colon(;)이다. semi-colon은 꼭! 꼭! 꼭! 명시하자.
리뷰
용어를 정의하면서 아는 것도 있었지만 모르는 내용도 있었다. 용어를 확실히 정리함으로써 앞으로의 강의에 참여할 때 더 많은 내용을 쉽게 소통할 수 있을 것 같다는 생각이 든다. 예를 들어 css syntex에서 declaration block을 scope라 말했었는데 mdn엔 declaration block으로 설명하고 있다. 개발을 오래 하거나 깊이 있게 공부하는 사람이라면 scope라 해도 얼추 declaration block을 연상할 수 있겠지만 말 그래도 얼추 알아듣는 거지 확실하게 알아듣진 못할 것 같다. 이 강의에서 가장 좋았던 점은 앞서 말한 용어의 혼동이 최대한 없도록 용어 정리를 해준다는 점인 것 같다.
강의와 관계없는 내용이지만 강사님께서 엄청 많은 배려를 해주셨다. 인원이 부족한 경우 강의가 미뤄질 수 있었지만 강의를 개강해 주셨고 1:1 개인 강의가 됐다. ㅎㅎ(오히려 좋아 매우 좋아~) 그리고 css를 어느 정도 알고 있었던 본인을 배려해주셔서 바로 2주 차로 강의 난이도를 조정해주셨는데 너무 좋을 것 같다. 본인이 생각하기에 보답하는 방법은 열심히 배워서 오해 없이 잘 이해하고 써먹을 수 있도록 성장하는 거 겠죠?? ㅎㅎ;;
'web publishing > CSS-veamcamp' 카테고리의 다른 글
| CSS 첫걸음 - 첫 번째 강의(3) [수정] (0) | 2022.10.09 |
|---|---|
| CSS 첫걸음 - 첫 번째 강의(2) (0) | 2022.10.09 |
