[핸드북] CSS 질문

Css Box Model

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML 요소를 padding, border, margin, 그리고 content으로 구분한다.

content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
padding : 내용과 테두리 사이의 간격
border : 내용와 패딩 주변을 감싸는 테두리
margin : 테두리와 이웃하는 요소 사이의 간격

margin, padding

• margin: border 바깥쪽을 차지. 주변 요소와 거리를 두기 위한 영역
• padding: content와 border 사이의 여백을 나타낸는 영역이며 content 영역이 배경색이나 배경 이미지를 가질 때, 이 padding 영역까지도 영향. 즉, padding 영역도 content의 연장

Css Position

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.

static(기본 값)

• 요소를 일반적인 문서 흐름에 따라 배치
• position이 static인 경우 top, right, bottom, left, z-index 속성들이 효과 X

relative

• 요소를 일반적인 문서 흐름에 따라 배치
• 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용(자신의 static 위치에서 상대적인 위치에 배치)
• 오프셋은 다른 요소에는 영향을 주지 않음

absolute

• 요소가 일반적인 문서 흐름을 따르지 않으며, 가장 가까운 위치에 있는 조상 요소에 대해 상대적 위치로 배치
• 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준
• 최종 위치는 top, right, bottom, left 값이 지정

fixed

• 요소가 일반적인 문서 흐름을 따르지 않음
• 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
• 최종 위치는 top, right, bottom, left 값이 지정
• 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됨

sticky

• 요소를 일반적인 문서 흐름에 따라 배치
• 컨테이닝 블록을 기준으로 top, right, bottom, left 값에 따라 오프셋을 적용(컨테이닝 블록에 대한 상대적 위치에 배치)
• 오프셋은 다른 요소에는 영향을 주지 않음

fixed와 sticky의 차이점

• fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 이 두 position의 차이점은 fixed는 문서의 흐름 을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면, sticky는 문서의 흐름을 따르면서 컨테이닝 블록을 기준으로 상대적인 위치에 배치된다.
• 즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있지만, sticky를 쓰면 그러한 상황을 예방할 수 있다.

Css Display

CSS에서 Display은 요소를 어떻게 보여줄지 레이아웃을 결정하는 속성입니다.

None

요소를 렌더링하지 않도록 설정하고 visibility 속성을 hidden으로 설정한 것과 달리 영역도 차지하지 않는다.

Block

• div태그, p태그, h태그, li태그, form태그 등
• 부모 컨테이너의 너비를 기준으로 가로 영역을 모두 차지하며, 항상 줄 바꿈이 되어 새로운 라인에서 시작한다.
  -width와 height, padding, margin 속성을 지정할 수 있다.

Inline

span태그, a태그, b태그, i태그, img태그 등

• block과 달리 줄 바꿈이 되지 않고, width와 height 지정할 수 없으며, 내용만큼의 크기를 갖는다.
• margin과 padding은 수평 방향만 설정 가능,세로방향을 지정하면 레이아웃에 영향을 주지 않는다.

Inline-block

• 요소 자체는 inline 요소처럼 동작하지만, 해당 요소 내부에서는 블록 요소처럼 동작한다.
• width와 height, padding, margin 속성을 지정할 수 있다.

Flex

• 주로 단일 축 방향의 1차원 레이아웃을 구성하는 데 사용되며, 주로 수평 방향으로 레이아웃을 정렬한다.
• 아이템들의 크기가 자유로워 유동적으로 변할 수 있다.
• 유동적인 레이아웃 변화를 구성하기 적합하다.

justify-content - 수평선 상에서의 정렬 방식 (위치)

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
center : 요소들을 컨테이너의 가운데로 정렬
space-between : 요소들 사이에 동일한 간격을 둠
space-around : 요소들 주위에 동일한 간격을 둠

align-items - 수직선 상에서의 정렬 방식 (위치)

flex-start : 요소들을 컨테이너의 꼭대기로 정렬
flex-end : 요소들을 컨테이너의 바닥으로 정렬
center : 요소들을 컨테이너의 수직선 상의 가운데로 정렬
baseline : 요소들을 컨테이너의 시작 위치에 정렬
stretch : 요소들을 컨테이너에 맞도록 늘림

flex-direction - 컨테이너 내 요소들의 정렬 방향

row : 요소들을 텍스트의 방향과 동일하게 정렬 (가로)
row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
column : 요소들을 위에서 아래로 정렬 (세로)
column-reverse : 요소들을 아래에서 위로 정렬

flex-wrap - items의 줄 바꿈 설정

nowrap: 모든 요소를 한 줄에 정렬
wrap: 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse: 요소들을 여러 줄에 걸쳐 '반대로' 정렬

flex-flow - flex-direction와 flex-wrap의 단축 속성

< flex-direction인자 > < flex-wrap인자 >

order - flex item의 순서 결정

정수 (숫자가 작을수록 앞으로, 클수록 뒤에 위치하게 됨 )

* align-self

• 해당 아이템의 세로선 상에서의 정렬 방식 , align-self를 개별 요소에 적용할 수 있는 방식(자식 요소에 설정)
  baseline : 교차축 기준으로, 부모 컨테이너의 기본선에 위치
  initial : 이 속성의 기본값으로 설정
  inherit : 부모 요소의 속성값 상속

Grid

• 2차원 레이아웃(그리드 시스템)을 구성하는 데 사용되며, 수평과 수직 방향으로 모두 레이아웃을 정렬할 수 있다.
• 아이템들의 크기를 미리 정의하여 각 셀의 크기를 일정하게 유지한다.
• Grid는 미리 정의된 2차원 그리드 구조를 유지하기 때문에 레이아웃 변화가 적은 경우에 적합하다.

grid-template

grid-template-rows: 그리드 컨테이너의 행의 비율을 정의
grid-template-columns : 그리드 컨테이너의 열의 비율을 정의
grid-template-columns : 1fr 1fr 1fr;
*fr은 fraction으로 숫자 비율대로 트랙의 크기를 나누는 것

gap

gap : 그리드 컨테이너와 그리드 아이템들의 간격을 설정
row-gap : 그리드 행의 간격을 설정
column-gap : 그리드 열의 간격을 설정

table

요소를 table의 성질을 갖게 한다는 뜻한다.

CSS box-sizing

기본적으로, 요소들에 box-sizing: content-box가 적용되면, 내용의 크기만 고려된다. box-sizing: border-box는 요소의 width와 height가 어떻게 계산되는지를 변경하여, border와 padding도 계산에 포함된다.

px, em, rem, vw, vh

• px: 가장 기본적으로 사용되는 단위. 픽셀 단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말한다.
• em: em은 부모 요소를 기준으로 자식 요소의 크기를 지정하는 것을 말한다.
• rem: rem은 root em의 약자. 최상위 태그 html에 정의된 사이즈를 기준으로 사이즈를 지정한다.
• vw, vh: 각각 vertical width, vertical height의 약자. viewport(화면의 크기)의 높이와 너비에 비례합니다. 반응형 페이지를 만들 때 유용하게 사용된다.

reset.css, nomalize.css

브라우저마다 서로 다른 스타일링이 있을 때, reset은 기본 스타일의 대부분을 제거하고 새롭게 정의하는 스타일을 조금 추가하며, normalize는 브라우저마다 일관되지 않는 스타일링만 제거한다.

reset CSS : 브라우저마다 다르게 설정된 요소의 기본 스타일링을 모두 초기화하는 방식이고 크로스 브라우징을 위해 필요한 속성을 임의로 지정하여 파일로 통합한 것이다.

normalize CSS : 사용하기 좋은 기본 값들은 초기화하지 않고 유지하고 부분적으로 개선하는 방식이기 때문에 reset CSS보다 성능 면에서 유리하다.

Css-Module, Css-in-Js, Scss/Sass

전통적인 방법으로는 CSS를 별도의 파일로 저장하고 HTML의 link태그를 이용해 적용한다. 리액트에서는 컴포넌트 기반 라이브러리이기 때문에 컴포넌트 간의 의존성을 최소화하고, 내부 응집도를 높히는게 좋다. 따라서 Css-Module과 Css-in-Js로 자바스크립트를 이용해 CSS를 만드는 게 좋다.

Css-Module

Css-Module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다. 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 유용하다. 클래스명에 hash값이 붙어 고유한 값으로 인식되기 때문에 클래스명이 같더라도 덮어씌워지지 않는다.

Css-in-Js

CSS코드를 자바스크립트 파일 안에서 작성한다. 자바스크립트 내에서 관리하기 때문에 내부 응집도가 올라가고, 동적으로 CSS를 변경하기도 쉽다.

Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크다. 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공한다.

Styled Components 장점

• CSS-in-JS는 JavaScript 환경을 최대한 활용
• 자바스크립트와 CSS 사이의 상수와 함수를 공유
• 현재 사용 중인 스타일만 DOM에 포함

Styled Components 단점

• 별도의 라이브러리 설치에 따른 번들 크기 증대
• CSS에 비해 느린 속도

Scss/Sass

Css 전처리기로 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이다.

• 변수의 사용: ex) break-point, 자주 사용되는 색상 코드, 폰트 등
• 조건문과 반복문
• Import
• Nesting: html의 시각적 계층 방식과 동일하게 Css를 중첩하여 작성할 수 있다. Css코드가 구조화 되어 가독성이 높아지며 유지보수가 편리해진다.
• Mixin: 코드를 재사용하기 위해 만들어진 기능이다.
• Extend: 연관 있는 요소들끼리 스타일 코드가 중복될 때 사용한다.

Sprite Image

스프라이트 이미지는 여러 이미지를 하나의 큰 이미지로 결합한 것이다. 일반적으로 아이콘에 많이 사용된다. 각 이미지는 background-image, background-position, background-size 속성이 정의된 해당 CSS 클래스를 갖고, 해당 이미지를 사용하기 위해 요소에 해당 클래스를 추가합니다.

반응형 디자인과 적응형 디자인

반응형과 적응형 디자인은 모두 서로 다른 뷰포트 사이즈, 해상도, 사용 컨텍스트, 제어 메커니즘 등을 조정하여 다양한 장치에서 사용자 경험을 최적화해준다.

반응형 웹 디자인은 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식이다. 반면, 적응형 웹 디자인은 브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형이다.

미디어 쿼리

미디어 쿼리는 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공한다. 미디어 쿼리는 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분이다.