빔캠프VEAMCAMP 이종찬 대표님께서 CSS특강을 해주셨다.
그 중 내게 공부가 필요한 내용들을 정리해보았다.!
- 웹페이지를 만들 때 가장 먼저 해야 할 일 (작업순서)
- Size의 두 가지 개념 - width와 height
- CSS를 바라보는 관점(feat. 문화권 차이)
- initial과 inherit
- CSS box model - block & inline (+ 마진겹침현상)
- CSS selector - type, class (feat. 결합자)
- text-align: center;와 margin: 0 auto;는 어떻게 다른가
웹 페이지를 만들 때 가장 먼저 해야 할 일(작업순서)
작업순서!
기본 스타일 리셋 중요함! 걍 Reset CSS를.. 쓰는게 어떨까 라고 생각했지만..!!!!
지금 공부하는 상황에서는 하나 씩 써보면서 기본 스타일이 어떻게 먹혀있는지 보고, 눈으로 직접 확인해보며 리셋시키는 것이 좋다고 하셨다.
- 전체적인 덩어리 먼저 구분하기(가장 큰 덩어리로) header contents footer
- background-color를 이용해서 header contents footer가 차지하는 공간을 시각적으로 확인을 해야한다.
- 각 컨텐츠 덩어리 만들기, 레이아웃관련(margin, padding, width)스타일만 짠다.
- 여백 정리하기, 타입셀렉터 초기화해주기 -> 가장 담백한 상태로 만들어주기 (initial, inherit, unset)
- footer 작업 하기
→ header와 footer는 대부분 정해져있기 때문에 작업 초반에 먼저 작업하기도 한다. 다만 개인 취향이다. - contents(main)으로 넘어가기
→ 전체적인 레이아웃을 위해 margin, padding 잡아주기 - 초기화, 검사 여백 정리하기 margin, padding 기본 설정된 것들.
- class를 사용하여 스타일 작업 시작하기 -
웹페이지를 만들 때 가장먼저 내가 만들려는 웹의 전체 구조(덩어리)를 먼저 보는 것이 중요하다고 말씀하셨다.!
이건 정말 공감이 가는게, 요소를 안나누면 나중에 마크업도 꼬이고, 마크업이 난리나면 클래스를 부여해서 스타일 작업할때,, 스타일 작업을 할 수 없게 될 정도로 구조 정리가 안될 수도 있다.
혼자 이것저것 만들다가 저거때문에 갈아엎고 다시 시작한 경우가 많았다.! 이렇게 다시 작업 순서를 되짚어볼 수 있어서 넘 좋았다.
Size의 두 가지 개념 - width와 height
width(너비): 직접 지정해주지 않으면 auto, 자신의 부모요소 기준으로 가득 찬다.
height(높이): 직접 지정해주지 않으면 auto, 자신의 자식요소 기준으로 가득 찬다.
CSS 작업시, width만 지정하고 height는 지정해주지 않는 것이 좋다.
height는 어차피 자식요소 기준으로 px을 먹기 때문에 미리 지정을 해놓으면 컨텐츠를 넣는데 방해될 수 있다.는 개인적인 생각이 든다.
+ <width: 100%;> 와 <width: auto;>는 같을까? 같지 않다.
auto는 margin을 포함하여 계산해 부모 크기 만큼 꽉 차게 된다. 100%보다 유연한 개념이다.
말해보자면, <width: auto;>가 좀 더 좋은 개념이라고 할 수 있다고 하셨다.
예시의 box1은 <width: auto;>를 주었고, box2는 <width: 100%;>를 주었다.
각자 box의 width와 height는 모두 500px을 주었고, 이렇게는 이해가 잘안가서 개발자 도구를 봤다.
왼쪽 이미지가 <width: 100%;>를 준 box2이고, 오른쪽이 <width: auto;>를 준 box1이다.
이미지와 개발자 도구에서 확인할 수 있듯이 <width: auto;>를 준 box1은 margin을 포함해 고려하여 content값이 500px에서 480px으로 줄어든 것을 확인 할 수 있다.!
반면, <width: 100%;>를 준 box2는 margin값 고려없이 적용되어 이미지에서도 보이듯이 content가 부모요소를 벗어난 것을 확인할 수 있다.
CSS를 바라보는 관점(feat. 문화권 차이)
CSS는 관점이 중요하다. 브라우저에 표시되는 모든 것들을 관심있게 바라보아야 한다는 말씀!
최종 결과물이 어떠한 결론이 있는지 보는 것이 중요!
맞다,, 결국 디자인 시안을 받아서 마크업하고, css를 할때, 완성된 시안에 나오는 요소를 모두 마크업 해줘야하기 때문에, 브라우저에서 최종 결과가 어떤지 보는 것이 중요하다고 생각된다.
+ 여담..ㅋㅋ 우리가 마크업을 할 때 기본으로 요소들이 왼쪽 정렬이 되는 것은 우리가 왼쪽부터 오른쪽으로 글을 작성하는 문화권이라 왼쪽이 기준이어서 그렇다고 한다. 아랍권은 오른쪽 부터라고 ~~@@ 신기하다!
initial과 inherit
initial 초기값, 각 property에 따라 지정된 initial값이 다르다.
inherit 부모 속성을 상속 받는다.
| 상속O 속성 | 상속X 속성 |
|---|---|
| inherit | initial |
initial은 아직 쓰기에는 이르기 때문에 그냥 '0'을 사용하라고 하셨다.(IE😈)
CSS box model - block & inline (+ 마진겹침현상)
css box model에는 block요소와 inline요소가 있다.(inline-block요소도 있다.)
| block요소 | inline요소 |
|---|---|
| 한 줄에 하나 씩 나타난다. 기본적으로 block요소의 width값은 부모요소 전체를 차지하게 된다. 따로 width 지정을 해주면 남는 공간만큼 margin으로 채워진다. | 한 줄에 여러 요소가 배치될 수 있다. 자신의 content영역만을 width로 가지며 margin, padding, border속성의 top, bottom은 사용할 수 없다. left와 right는 사용가능하다. |
block level element의 각 요소들이 인접하면 상 하단 margin이 의도적으로 겹치게 되어있다.
순수한 block level element 사이에서만 일어나는 일이다.
margin이 큰 쪽으로 병합된다.
CSS selector - type, class (feat. 결합자)
type selector는 너무 광범위한 선택자이기 때문에 그냥 쓰기에는 위험이 크다. css초기화 설정할 때만 쓰는 것이 좋다.
브라우저가 셀렉터의 구체성을 두고 중요한 정보를 가치판단한다. -> css작성 순서와 상관이 없어진다..!
+ id selector는 시각적인 요소를 체계적으로 컨트롤하는 컨셉과 적합하지 않다. 따라서 단순히 요소의 우선순위를 높이기 위해 사용하는 것은 좋지 않다.
css의 결합자는 셀렉터 명시도에 영향을 주지 않는다.
> : 자식 결합자 : 직계 자식을 선택
.a .b : 하위 선택 descendant 후손 모두
.a > .b : child 직계 자식
→ 뭘 써야될까? 도구일 뿐 상황에 맞춰서 선택하면 됨 위 예시가 일반적이긴 함(하위선택)
text-align: center;와 margin: 0 auto;는 어떻게 다른가
text-align을 그동안 쓰면서 block요소를 정렬하는데 쓰는구나 하면서도 생각대로 안움직이는 경우가 있었다.
오늘 수업에서 그 명쾌한 답을 찾을 수 있었다.!
The text-align CSS property sets the horizontal alignment of the content inside a block element or table-cell box. (출처: mdn)
text-align은 block요소나 table-cell box의 내부 컨텐트의 수평 정렬을 설정할 수 있는 property이다.
즉, block element 자체를 중앙 정렬하는 것은, margin: 0 auto;에 의한 설정인 것이고, block 요소 안의 텍스트 content들은 text-align: center;에 의한 설정인 것이다.
즉, 요소 박스 자체가 이동한 것이 아니라 요소 박스 자체 안의 텍스트가 이동된 것이다.
혼자 할때, text-align: center;를 썼는데 텍스트만 가운데로와서 왜 안될까 하다가 걍 요소 전체를 flex를 써서 중앙정렬 해버렸던 적이 종종 있었다. 이게 그 이유였구만, margin:0 auto;도 필요했었던 것이다..!
이번에 CSS를 이론적으로, 개념으로 배우니 그동안 그냥 써왔던 속성들을 더 자세히 알 수 있었고,
몇몇 속성은 제대로 알지도 못하고 써왔구나,, 하는 것도 알게 되었다. 제대로 알 수 있는 기회여서 너무 좋았다.
이번 단 한번인게 너무 아쉬웠을 정도로 강사님의 특강은 정말정말정말 좋았다.
