HTML + CSS가 막막한 이유는 '작업 순서가 정립되지 않아서'이다.
컨텐츠에 집중하지 말자. 전체적인 틀과 구조부터 작업한다.
혼자 작업하면서도 어떤 단계로 넘어가야할지 스스로에게 질문해야 한다.
▶ HTML + CSS 작업 순서
1. 레이아웃 만들기
- 전체적인 틀과 구조(header, contents, footer)를 만들어준다.
- header부터 차근차근 CSS를 작성한다 (background, padding, margin).
- 높이는 컨텐츠를 넣으면 알아서 잡힌다. 높이를 정하는 건 추후에.
2. 마크업 추가하기
- 레이아웃에 컨텐츠를 넣어준다.
3. 속성 초기화
- 공부를 위해 전체 초기화를 지양한다.
└ * : Universal Selector (전체 선택자)
▶ 개념 정리
- 당연하게 보이는 현상을 자세히 설명할 수 있어야 기초가 단단한 것이다.
- MDN 공식문서를 자주 활용하자.
- 용어를 알아야 다른 공부가 진행된다.
div {
background-color: orange;
}
div.header h1 {
padding: 20px
}div : Type Selector (타입 선택자)
background-color: property (속성)
orange: value (값)
▷ descendant (자손)
descendant combinator (자손 결합자)
- div.header h1 : header와 h1 사이의 공백을 descendant combinator라고 한다.
- 자손 + Selector와 Selector 사이에 들어갈 수 있는 옵션이라는 뜻(콤비네이션 피자처럼).
descendant selector (자손 선택자)
.section {
background-color: white;
}
.section h2 {
color: orange;
}
.section h3 {
color: green;
}- 관리가 용이하고 명시적이다. CSS 코드 정리를 위해 사용하기도 한다.
- 섬세한 선택을 위해 사용하기도 한다.
▷ initial value (초기값)
- 내가 세팅하지 않아도 기본으로 세팅된 값이 존재한다.
- backgournd-color의 기본값은 transparent. 모든 프로퍼티는 값 설정을 주지 않으면 이런 기본값으로 설정된다.
- div가 왼쪽 정렬되는 이유 또한 우리가 모르는 디폴트값이 있기 때문이다. initital valuse는 상황에 따라 달라진다.
- text의 initial value는 검은색이다. 그러나 black이 아닌 canvas text로 되어있다.
- 내가 주지 않았는데 들어가있는 style 값은 initial value가 아니다
└ 사용자 에이전트 스타일 시트 (브라우저 제공 스타일 시트). 이는 property에 설정되어 있는 것.
▷ width
- width: auto와 width: 100%는 같지 않다.
- auto는 margin, heading, border와 같은 것들이 고려되어 가득 채운다 (브라우저가 계산함).
└ 해당 요소의 직계 부모가 제공하는 contents 영역만큼 가득차게 만드는 것 : containging block
└ auto는 조심해야 하는 값이다. auto가 어떻게 계산되는 것인지 알아야 한다.
- 100%는 부모가 제공한 컨텐츠 영역의 크기를 '가져오기만' 한다.
▷ height
- 컨텐츠 양이 많아지면 알아서 조정될 수 있게 구성해야 한다. 직접 지정을 피하는 것이 좋다.
- 고정값을 줘야하는 케이스도 있지만 모든 상황에서의 우선순위가 고정값이 되면 안 된다.
▷ block
- block level elements는 '한 줄을 전부 차지한다'는 특징을 가진다.
- block 요소에서 비어있는 공간은 '사용 가능한 공간의 크기'이다(쓰지 않았을 뿐 확보하고 있음).
▷ class
- 시각적인 컨트롤은 id보다 class가 원탑.
- div.header: div이면서 header인 요소를 가진 것.
- 똑같은 디자인은 하나의 class로 관리하는 것이 행복하다.
▷ padding
- header에 상하단 고정값을 주는 것보다 상하단 padding을 줘서 안 깨지게 하는 편이 좋다.
- 단, 고정값에 대한 디자이너의 요청이 있을 때는 제외.
▷ margin
- 마진 병합 현상은 block 레벨끼리 일어난다.
- 인접해있는 상하단 margin만 겹친다. 이는 의도된 동작이다. (안 겹치면 우리가 노력해서 겹쳐줘야 할 것임)
▷ inheritance (상속)
- 상속은 추상적인 개념이 아니다. 상속이 지원되는 property가 있다.
- 강제로 부모의 property value를 받아올 때는 inheritance를 사용한다. 이 경우 후손에게는 상속되지 않는다.
- 부모의 width, padding과 같은 값은 상속되지 않는다. 부모의 값을 가져올 뿐.
└ 이는 box-shadow 등을 통해 어떻게 공간을 차지하고 있는지 힌트를 얻음으로서 파악하기가 쉬워진다.
└ box-shadow를 사용하는 이유 : 경계면이 있고 공간을 차지하지 않기 때문에
▷ text-align
- 다른 말로 inline-align이라고 말할 수 있다 (block 요소 안에 있는 inline 요소를 정렬한다).
- 하위 요소에 전파되는 특성이 있다(상속 가능).
- h1에 적용이 되지만, 엄밀히 따지면 h1 내부의 텍스트가 정렬되었을 뿐 h1이 정렬되는 것은 아니다.
▷ selector 우선 순위
- 얼마나 구체적으로 작성되어 있는지에 따라서 우선 순위가 결정된다.
/* 6순위 */
.wow {
background-color: purple;
}
/* 5순위 */
body h1.wow2 {
background-color: blue;
}
/* 4순위 */
body h1.wow.wow2 {
background-color: orange;
}
/* 3순위 : 구체적인 순서 */
body h1.wow.wow2:hover {
background-color: red;
}
/* 2순위 : 이름을 여러 번 부르면 빨리 돌아보는 것처럼! */
body h1.wow.wow.wow.wow {
background-color: brown;
}
/* 1순위 : 클래스 id (html에서 style을 넣으면 2순위가 된다.) */
#wow {
background-color: yellow;
}- :hover : pseudo class, 가짜 '클래스'라고 부른다.
- 반영이 되지 않으면 selector 우선순위에 밀렸거나 오타가 났거나 둘 중에 하나.
- !important를 넣으면 1순위가 되지만 흐름을 깨트려서 좋지 않다.
- 우선 순위라는 이 자체가 CSS의 의미를 보여준다.
└ 위에서부터 아래로. 구체적인 이름일수록 밑에 작성해 최종적으로 값이 더해지는 것.
└ 코드의 조각이 한 곳에 모이는 폭포식 동작. (cascading : 계단식).
일일 회고
불타는 금요일.. 멋사 3기 선배님과 빔캠프 이종찬 강사님의 CSS 특강이 있었다
멋사 1일차부터 느낀 점이었지만 오늘 특강으로 정말... 쌓아가야할 기초가 많다는 것을 다시 한번 절실하게 느꼈다! 😂
매일 배운 내용을 블로그에 정리하며 복습하고는 있지만 이전에 적은 내용을 완벽하게 이해하고 있지는 못한 느낌 ㅠ (질문을 받아도 바로 대답이 나오지 못하는 걸 보면) 음... 어떻게 해야 이전 내용을 완전하게 익힐 수 있을까 싶은데 역시 지속적인 반복만이 답이겠지 싶다. 하루하루 쌓여가는 기록들을 돌아오는 내일마다 머리에 차곡차곡 집어넣도록 하자.
