[Vim Camp] 2주차 수업 회고

[출처] https://veamcamp.com/camp/css-nextstep/ 빔 캠프

빔 캠프의 수업 내용을 간단하게 정리해보려고 한다.

수업이 끝나고 스스로 복기하는 시간이 굉장히 중요하다는 생각이 들었기 때문이다.

 

강사님께서는 특히 용어에 대한 중요성을 강조하셨는데 내가 너무 대답을 못해서 많이 부끄러웠다.

질문을 굉장히 많이 해주시는데, 그 중에서 한 두 개밖에 대답을 못했던 것 같다...ㅠㅅㅠ

 

매 주차별로 회고 해봐도 좋겠지만, 1주차에는 정신이 없어서 제대로 수업 내용 정리를 못한 탓에 2주차부터 정리해보려고 한다.

 

유지보수가 용이한 CSS 코드 작성하기

 

 

빔 캠프의 수업 목표이자, 나의 목표이기도 하다.

물론, pixel perfection (정확한 디자인_가로 세로 길이 및 간격 등)을 맞추는 것도 중요하지만 실제 서비스는 끊임없이 변화하기 때문에 그에 대응하는 것이 더 중요하다고 생각한다.

 

CSS의 기본 원리 및 개념을 깊게 이해하고, CSS를 의도대로 조작하는 능력을 기르면 위의 키워드를 지키는 코드를 작성 할 수 있을 거라고 생각한다.

 

수업에서 언급하고 넘어갔던 용어들을 정리해보았다.

• property (프로퍼티) : CSS의 속성
• * : universal-selector (유니버셜 셀렉터) : 전체 선택자
• : hover (가상 클래스) : pseudo class
• ::before / ::after (가상 요소) : pseudo element
• div { } : type selector / tage selector
• em : 현재 요소의 폰트 사이즈
• .class .element : descendant combinator을 이용한 descendant selector
• <img src="" /> : attribute 속성

용어는 한 번 익히더라도 자주 들여다보지 않으면 쉽게 잊혀지는 만큼, 정리해두고 두고두고 들여다봐야겠다.

 

그럼 본격적으로 배운 개념을 복기해보자 !

Negative Margin

Margin : 보여지는 공간과, 차지하는 공간을 분리하는 개념

콘텐츠 영역과 마진으로 조작할 수 있는 영역(차지하는 공간)을 분리해서 레이어의 개념으로 이해하면 네거티브 마진에 대한 이해를 조금 더 깊게할 수 있다.

이 두 영역을 분리한 이유는, 마진값을 음수로 조절 해도 보여지는 영역, 즉 콘텐츠 영역에는 영향을 줄 수 없기 때문이다.

 

Margin Collapse

margin collapse의 정의는 이 현상이 일어나는 조건으로 설명할 수 있다.

(1) block level element이고, (2) 인접한 요소이면서, (3) 공간을 구분짓는 경계가 없을 때 

=> **상/하단 마진**이 더 큰 크기로 통합되는 현상

 

부모 자식 간에도 위의 조건에 부합한다면 margin collapse는 일어난다. 심지어는, 조상 요소가 아주 여러 개여도, 조상의 조상, 조상의 조상의 조상까지 계속 일어날 수도 있다.

 

그렇다면 왜 이런 현상이 일어날까?

=> CSS는 기본적으로 레이아웃을 위한, 아름다운 디자인을 만들어야한다는 대전제에서 비롯되었기 때문에 그 관점에서 바라보았을 때 이 같은 현상은 오히려 자연스러운 현상이라고 볼 수 있다.

 

하지만, 이런 현상이 달갑지 않을 수도 있다.

특히 부모 자식 간의 margin collapse는 달갑지 않은 경우가 많은데, 이를 피해갈 수 있는 방법이 있다.

이는 margin collapse의 정의를 찬찬히 읽어보면 알 수 있다.

 

(1) block level element이고,

display : inline;
display : flow-roote;

말 그대로, block level element가 아니게 만들어주면 된다.

inline은 보면 알겠지만, flow roote는 뭐지? 싶을 수 있다.

 

display : flow-roote는 root element의 성질을 띄도록 해주는 것이다.

root element는 자식 요소의 margin 값들을 다 표현해줘야 하는 의무가 있기 때문에 위와 같은 설정을 해주면, margin collapse 현상을 피할 수 있다.

 

(2) 인접한 요소이면서,

.class::before,
.class::after {
	content : " ",
	display : table,
}

가상 요소를 이용하여, 인접하지 않도록 만들어주는 방법이다. 이 방법은 과거에 margin collapse를 해결할 수 있는 방법이 많지 않았을 때 사용하던 방법이라고 한다. 

 

(3) 공간을 구분짓는 경계가 없을 때

padding : 10px;
border : 1px solid #000;
overflow : hidden or ...;

공간을 구분 짓는 경계를 만들어주면 된다.

패딩 값, 테두리 등으로 구분을 짓도록 만들어주거나, overflow 속성을 통해 요소 간의 경계를 확실하게 인지할 수 있도록 해주면 margin collapse가 일어나지 않도록 해줄 수 있다.

 

 

Display

Inline Element

모든 요소의 display 초기값은 inline이라는 사실을 아는가?

"div는 block인데요!?"

"아니다" 

 

그렇게 알고 있는 이유는, 우리가 임의로 스타일을 주기 전에 벌써 useragent stylesheet가 속성값을 입혀주었기 때문이다.

아마 지금까지 알고 있었던 block 태그들은 모두 위와 같은 원리로 inline을 초기값으로 가지고 있다.

그렇기 때문에 inline element의 특징에 대해서 알아보는 것은 굉장히 중요하다.

 

Inline Element 의 특징

1. html에서 줄바꿈은 하나의 띄어쓰기로 간주된다.

<a href="">Link<a>
<a href="">Link<a>
<a href="">Link<a>

 

띄어쓰기는 현재 폰트 크기의 약 4분의 1정도에 해당하는 크기를 가진다.

<a href="">Link<a><a href="">Link<a><a href="">Link<a>

그렇기 때문에 이와 같이 붙여서 작성하게 되면, 띄어쓰기 없이 세 개의 태그가 맞닿아 있게 된다.

 

  2. 상하단 Margin은 적용되지 않음

  3. padding은 상하좌우 모두 적용 됨 (상하단은 공간을 차지하지 않음)

  4. border도 먹히긴 하지만, inline 내부의 요소가 여러 줄일 경우 다음 줄로 이어져서 생긴다.

 

inline element는 텍스트와 같은 배치 흐름을 가지는데, 이때 배치되는 기준이 되는 것은 baseline이다.

기본적인 baseline은 g 와 p 처럼 아래로 기준점 아래로 내려가는 글자도 배치되기 위해서 아래에도 약간의 공간을 가진다.

• 텍스트가 두 줄로 이루어져있으면, 아랫줄에 맞춰서 배치가 된다.
• 참조할 만한 text가 없으면, 요소의 아래 라인에 baseline이 맞춰진다.
• baseline을 바꿀 수도 있다.

vertical-align : //초깃값 baseline;

 

img 태그도 inline 태그인데, 아래 다른 요소를 붙여서 배치해보면 baseline 공간이 있다는 것을 확인할 수 있다.

 

Inline-block / Inline-flex

바깥에서 봤을 때의 배치는 inline이고, 스스로의 관점에서 바라보는 배치는 block

= baseline에 배치되면서 block의 특성을 가지는 것

 

디자이너는 가운데 정렬에 미쳐있다

.class {
	text-align : center; //수평 가운데 정렬
	line-height : height값만큼 주면 됨 // 수직 정렬 **트릭**
}

line-height

• height는 상자는 높이이지만, line-height는 baseline을 감싸고 있는 한 줄의 높이다.
• initial-value는 normal => font-family에 종속적인 것으로, 폰트마다 다른 line-height를 가진다.
• 고정값으로 주기도 하지만, 디자이너의 의도를 유지하기 위해서는(폰트 디자이너) font-size를 100px로 만든후 기본 line-hgith가 몇으로 되어 있는지 알아낸 후, 맞춰 주기도 한다.
• baseline을 기준으로, 상 하단으로 공평하게 나누어져 들어간다.

.class {
  line-height : 300px;
  font-size : 150px;
    /** 텍스트의 위 아래의 공간이 각 각 75px 생긴다. */
    
  line-height : 2 / 2em 
  /** line-height를 주는 가장 일반적인 방법 */
}

 

em 단위가 동작하는 방식

em은 현재 요소의 font-size만큼을 의미한다.

body {
	font-size : 20px;
	ling-height : 1em; /**(1)*/
	ling-height : 1; /**(2)*/
}

.wrapper.unitless {
	font-size : 24px;
	line-height : 20px; /**(1)*/
	ling-height : 1; /** 24px (2)*/
}

.wrapper.em {
	font-size : 32px;
	line-height : 20px; /**(1)*/
	ling-height : 1; /** 32px (2)*/
}

em은 값이 계산된 후, 상속되기 때문에 의도한 것과 다른 결과를 나타낼 수 있다.

=> 그냥 숫자만 쓰자 !

 

 

---

마무리

분명히 수업을 들으면서 열심히 정리를 했는데, 강사님의 말이 오버랩되서 추가로 내용 정리를 많이 했던 것 같다.

확실히 개념 복기 시간은 정말 중요한 것 같다.

혼자서 정리하면서 다른 사람이 읽을 때도 이해가 잘 갈까 고민하며 정리하니, 내 머릿속에서도 확립시킬 수 있었다.

 

이번 주차 과제도 잘 수행해서, 좋은 피드백을 받고 싶다.

그럼 이만~ 안녕 !