CSS box model 이란?
HTML 요소를 하나의 사각형(박스)라고 가정하고 어떻게 표현할지를 정리한 하나의 규정
모든 HTML 요소는 box 형태의 영역을 가지고 있는데 content, padding, border, margin 으로 구성됩니다. content는 실제 내용이 위치하는 영역, padding은 border 안쪽에 위치하는 요소의 내부 여백 영역, border는 테두리 영역, margin은 테두리 바깥에 위치하는 요소의 외부 영역입니다.
간단한 로그인 폼 컴포넌트를 가운데 위치시키고자 한다면, CSS를 어떻게 작성해야 하는가? (centering)
저는 flex-box를 사용합니다. 해당 컴포넌트를 감싸는 wrapper 요소가 있다면, 그 요소에 display 속성값을 flex로 지정하고 justify-content 속성값은 center, align-items 속성값도 center로 지정합니다.
이때 flex-container 의 item 이 하나 이상으로 늘어나면, 가운데 정렬이 되지 않기 때문에 주의해야 합니다.
블로그에서 아래와 같은 레이아웃을 구성하려면 CSS 를 어떻게 작성해야 하는가?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+컴포넌트를 각각의 위치에 배치하기 위해서는 중간에 빈칸이 필요합니다. 이를 구현하기 위해서는 flexbox를 이용해야 합니다.
div.author-container가 flexbox-container가 되어야 하고 display: flex 적용, 아이템 간 간격을 위해 justify-content: space between 을 적용해 주어야 합니다. 또한 각 아이템에 flex-grow를 0으로 주면 요소가 늘어나지 않고, 컨텐츠가 필요한 만큼만 공간을 차지해서 깔끔하게 배치할 수 있습니다.
CSS 전처리기와 CSS in JS
CSS 전처리기 (CSS preprocessor)
CSS와 유사하지만 중첩, 조건문, 반복문 등의 기능을 제공
CSS를 좀 더 효율적으로 작성할 수 있게 해준다.
렌더링 시 브라우저에서 구동 가능한 CSS로 컴파일된다.
예 : SCSS, Sass, Less, Stylus ...
CSS-in-JS
자바스크립트 코드로 CSS를 작성
컴포넌트 기준으로 스타일을 모듈화 함 (컴포넌트 기반 개발작업에 용이)
동적으로 스타일을 적용할 수 있다.(자바스크립트의 함수, 값을 공유)
클래스명을 지정하지 않음
CSS 전처리기를 내장함
CSS가 컴포넌트에 종속되어 있기 때문에 컴포넌트가 렌더링 되었을 때만 해당 스타일을 적용
CSS 가상요소란?
선택자로 선택한 요소의 뒤에 붙여 표기하는 "미리 약속 된 키워드"
가상요소 키워드 별로 미리 기능이 정의 되어 있으며, 다양한 CSS속성을 적용할 수 있습니다. 따라서 하나의 하위요소처럼 사용할 수 있어서 가상요소라고 합니다.
| 가상 요소 | 설명 |
|---|---|
| ::before | 요소 내용 앞쪽에 새 컨텐츠를 추가 |
| ::after | 요소 내용 끝에 새 컨텐츠를 추가 |
| ::selection | 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택 |
| ::marker | 목록 아이템 앞에 붙는 마커를 선택 |
| ::first-letter | 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택 |
| ::first-line | 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택 |
::before, ::after 만 새 컨텐츠를 추가하는 가상요소이고, 나머지 4개는 콘텐츠의 특정 부분을 선택하는 가상요소입니다.
사용예시
선택자::가상요소 {
속성: 속성 값;
}
p::before {
content: "■ ";
}
article.content::selection {
color: #00ff00;
}inline과 inline-block의 차이
display: inline;
<span>태그의 성질. content/text의 크기만큼만 점유합니다.- width/height 적용 불가
- margin/padding-top,bottom 적용 불가
- line-height 적용 불가
cf) display: block;
- 한 줄을 점유합니다.
display: inline-block;
- inline 과 block의 특징을 합친 것입니다.
- inline의 단점을 커버합니다.
- width/height 적용 가능
- margin/padding-top,bottom 적용 가능
- line-height 적용 가능
class 와 id 선택자
class: 복수 선택이 가능합니다. 조금 더 자주 사용되는 스타일에 적용하는 것이라 생각하면 됩니다.
id: HTML 문서 안에서 하나의 요소만 선택할 때 사용합니다.(한 페이지에서 한번만 사용가능)
우선순위는 포괄적인 것 < 구체적인 것 입니다.
따라서 여기서 우선순위는 tag < class < id 입니다.
