CSS의 단위 CSS at-rules 레이아웃 선택자와 속성

Description: CSS에서 사용되는 프로그래밍적인 요소 단위, @규칙 레이아웃 선택자와 속성등에 대해 기록해 놓은 글입니다.

현재 노트: KR-010.10 c
상위 분류: KR-010.10 HTML,CSS,JavaScript

#CSS

글 작성 이유

중요한 단위 rem과 em같은 단위, @keyframe과 같은 CSS at-rules, flexbox와 같은 레이아웃, 선택자와 속성등 디자인 요소보다는 CSS의 프로그래밍 요소 중 직접 써서 나중에도 볼만한 것들을 기록해 놓기 위하여 글을 작성합니다.

단위

CSS에서 사용되는 단위에 대해 정리해봅니다. 가장 기본이면서도 알아두면 쓸데가 많아서 해당 개념을 학습하고 사용한 후 정리해봅니다.

단위>폰트

em

my parent element's font-size 로서 폰트사이즈의 상대적인 크기를 의미합니다.
폰트의 경우 모든 요소마다 하드코딩된 px값을 사용한다면 일관성 유지가 매우매우 어렵기 때문에 위와 같은 상대적인 단위를 사용하는 것이 편합니다.

부모 엘레멘트의 폰트 사이즈를 1을 기준으로 표기됩니다.

단위이기때문에 font-size를 기준으로 한다 뿐이지 width, height등에 적용가능

font-size: 0.5em /*부모 요소의 0.5배 사이즈*/

width: 2em /*부모 폰트사이즈의 2배 사이즈 */

rem

The root element's font-size로서 em과 유사한 폰트사이즈의 상대적인 크기를 의미합니다. em과 다른 점은 html태그의 font-size를 기준으로 선정되는 점입니다. 즉 부모 컨테이너에 영향을 받지 않게됩니다.



font-size: 0.5em /*html font-size의 0.5배 사이즈*/

width: 2em /*html font-size의 2배 사이즈 */
em과 rem 중 무엇을 사용해야하는지?

일반적으로는 rem을 사용하고 국소적으로 특별한 곳에는 em을 사용하는 방식이 관리하기 쉽다고 생각합니다. em의 경우 부모 컨테이너의 영향을 받다보니 깊이가 깊어질수록 그 영향을 짐작하기 힘들고 관리하기 어려워집니다. 하지만 rem의 경우 html의 폰트 사이즈가 고정되니 변경하기가 어렵습니다. 그래서 운영관리를 생각한다면 rem으로 통일된 값을 사용하고 rem사용이 어려운 경우에만 특별히 em을 사용하는 것이 적절해보입니다.

CSS at-rules

@가 붙은 특수한 규칙입니다. 주로 @media, @keyfraems 등

레이아웃

아이템을 배치하기 위한 방법입니다. 주로 1차원인 flexbox와 2차원인 grid를 통해 배치하게 됩니다.

flexbox

자유롭게 열과 행을 지정하는 1차원 방법이며 이름에서와 같이 유연하게 아이템 배치, 간격 자동 조정, 위치잡기등 flexbox는 많은 레이아웃 작업을 훨씬 쉽게 만들어 주는 이유로 널리 사용되고 있는 방법입니다.

display: flex; /* display 속성에 명시하는 방법으로 사용가능 */
flexbox 에서 증요한 것은 main축과 수직인 cross 축 그리고 아이템 배치 방법입니다.

flexbox에서는 진행방향을 main축과 수직인 cross축을 flex-direction을 통해 지정할 수 있습니다. 이를 통해 유연한 배치를 설정할 수 있습니다.
아이템 배치 방법은 justify-content와 align-items를 이용하여 배치합니다.
justify-content 의 경우 main축에 대하여, align-items는 수직 cross축에 대해 아이템배치를 지정하게됩니다.

/* 기본값으로 행방향으로 왼쪽에서 오른쪽으로 진행됩니다 */
flex-direction: row;

/* 행방향의 역방향으로 오른쪽에서 왼쪽으로 진행됩니다 */
flex-direction: row-reverse;

/* 열방향으로 위에서 아래로 진행됩니다 */
flex-direction: column;

/* 열방향 역방향으로 아래에서 위로 진행됩니다. */
flex-direction: column-reverse;

이 외에도 더 많은 옵션이 있지만 주로 사용하는 옵션은 다음과 같습니다.

justify-content: center; /* 항목들을 축의 중심 부분에 정렬합니다. */
justify-content: flex-start; /* 항목들을 축의 시작 부분에 정렬합니다.. */
justify-content: flex-end; /* 항목들을 축의 끝 부분에 정렬합니다. */


/* 분산 정렬 */
/* 첫 항목은 시작 부분에 밀착되어 정렬됩니다. 마지막 항목은 끝 부분에 밀착되어 정렬됩니다. */
justify-content: space-between; 

/* 각 항목들은 양쪽 여백의 절반만큼 나누어 갖습니다. */
justify-content: space-around;

/* 각 항목들은 서로 간에 동일한 여백을 갖습니다. */
justify-content: space-evenly;

align-items는 justify-content처럼 아이템을 배치하는 방식이지만 그 방향성이 수직인 cross축입니다. 기본값은 stretch이고 일부 값은 justify-content와 같은 값도 있지만 다른 부분도 있습니다.

코드로 보는 justify-content의 아이템 배치

CodePen Demo > CodePen에서 전체화면으로 보기

선택자

Html element를 타입, 현재상태, 자식여부. Attribute, 포지션등으로 특정하게 선택할 떄 사용하는 것이 선택자(Selector)입니다. 선택자는 크게 기본 선택자, 의사 클래스(pseudo-class), pseudo-element 등이 있습니다.

기본 선택 자는 단순하게 특정 태그, 특정 클래스, 특정 ID를 선택하지만 실제환경에서는 좀더 복잡한 조건이 요구됩니다.

pseudo-class(가상 클래스)

선택된 요소의 특정 상태를 스타일링 하는데 사용되는 추가 클래스입니다. html element에 특정 상태일 때 CSS를 적용 할 수있습니다.
가상 클래스는 콜론( :) 뒤에 가상 클래스 이름(예: :hover)이 오는 방식으로 구성됩니다.

속성

CSS의 구현을 담당하는 여러 속성들을 실제 사용해보며 기록할만 것들을 적어 놓은 카테고리입니다.

position

위치와 관련된 속성입니다.

position: 'static'(default) 'relative' 'absolute' ...

border

테두리 관련 속성. 대부분의 경우에 사용됨. 기본값이 none이라 최소한의 style 설정없이는 다른 값들을 설정해 놓아도 보이지 않음

border: `thickness` `style` `color`

cursor

마우스 hover시 모양설정

transition

애니메이션 효과를 스타일링

[property] [duration] [timing-function] [delay]`