현재 노트: KR-010.10 c CSS의 단위 CSS at-rules 레이아웃 선택자와 속성
상위 분류: 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배 사이즈 */

CSS at-rules

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

레이아웃

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

flexbox

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

display: flex; /* display 속성에 명시하는 방법으로 사용가능 */

/* 기본값으로 행방향으로 왼쪽에서 오른쪽으로 진행됩니다 */
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의 아이템 배치

• flex: 1: flex-grow flex-shrink flex-basis의 값에 1 1 0%을 넣은 축약어입니다. 기본 사이즈의 0%에 1씩 들어감으로서 items들에 균등한 방향으로 n분의 1 크기를 줄 떄 사용합니다. 예를 들어 row 방향의 경우 width가 모든 items가 n분의 1을 가짐

gap: flexbox grid에 사용
아이템끼리의 간격 조정에 사용.padding이나 margin보다 적합한듯. flex 내에서는

gap: 1em 16%;

gap: 20px 10px;

tailwindcss > Vanilla CSS

flex-wrap -> flex-wrap: wrap
flex-nowrap -> flex-wrap: nowrap

선택자

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

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

중첩 선택자

&를 활용하여 현재 부모 또는 아래의 child 클래스를 간편하게 선택.
하지만 신규기능에 속한 편이라 2023년 12월이후로 최신 브라우저와 기기에서 가능하지만 오래된 디바이스나 브라우저에서는 불가능할 수도 있음

pseudo-class(가상 클래스)

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

속성

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

position

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

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

• static: 기본값으로 Normal layout flow 즉 inline요소는 가로로 왼쪽에서 오른쪽, block요소는 위에서 아래로 쌓이게 됩니다.
• relative : 특정 위치에서 미세조정할 때 사용합니다. top, bottom, left, right 요소를 통해 원래 위치에서 살짝 움직일 때 사용합니다.
• absolute: static이 아닌 부모요소를 기준으로 지정할 때 사용합니다. 예를 들어 컨테이너 1 >컨테이너2 ... > 컨테이너6이 있을떄 컨테이너 6을 컨테이너1 기준으로 위치를 지정하고 싶다면 컨테이너 1을 static이 아닌값으로 바꾼후 컨테이너 6을 absolute로 바꾼후 top, bottom, left, right 를 이용해줍니다.

border

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

border: `thickness` `style` `color`

• thickness: pixel(px) 단위로 지정 ex) 5px ...
• style: 테두리 스타일 지정 ex) solid, dotted ...
• color: 색상명. 문자열, hex, rgb 등 ex) blue, #FF0000, rgb(255, 0, 0)

border-radius

border를 둥글게 만들고 싶을 떄 사용 하는 shorthand 속성. 아래의 네 모서리 값의 축약버전

border-radius: <length or percentage>

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

cursor

마우스 hover시 모양설정

• pointer: 포인터 모양
• wait: 기다리는 표시인 모래시계
• not-allowed: 금지 표지판

transition

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

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

• property: 기본값은 all 모든 속성에 적용하기
• duration: 03s와 같이 애니메이션이 지속되는 시간
• timing-function: 애니메이션의 변화 분기점을 조절가능 ease, ease-in, ease-out, ease-in-out, linear 이외에 커스텀하게 변화를 주기 위해서는 cubic-bezier(x1, y1, x2, y2) 사용 cubic-bezier참조사이트
  • Y값 범위 효과
    • Y>1 요소가 종료 지점을 넘었다가 돌아옴(튕김)
    • Y<0 요소가 시작 지점 뒤로 뻇다가 진행(탄성)
• delay: 해당 애니메이션이 동작하기전 지연 시간 0.5s 같은 형태

text-align

텍스트 표시 조정 속성

text-align: <left, right, start, center etc...>

center의 경우 중앙정렬. left나 right, start의 경우 왼쪽 정렬 오른쪽 정렬과 같은 효과
start의 경우 일반적인 왼쪽에서 오른쪽글자의 경우 left와 동일하며 히브리어나 아랍어같은 오른쪽에서 왼쪽이 기본인 경우 방향이 달라짐

min-height

최소 높이. 고정 높이인 height도 있지만 글씨가 들어가서 들쭐날쭉한 초기상태는 확인을 위해 이 값이 좋은듯.

outline

기존 레이아웃에 영향을 주지 않고 윤곽선만 추가하는 속성

white-space

줄바꿈과 관련된 속성. 주로 줄바꿈에의해 width의 길이가 바뀌거나 문자의 경우 특정 줄바꿈이 요구되는 경우 고려해봐야할 속성

/* 주로 사용하는 값들*/
white-space: normal
white-space: pre
white-space: pre-wrap

display

화면 표시를 결정하는 주요요소. 보통 엘리먼트가 한줄을 차지하는 block 과 엘리먼트만큼만 차지하고 한줄에 여러 아이템이 위치 가능한 inline방식, 이외에 자주 사용하는 flex나 grid 외에도 <li>에 사용 되는 list-item 등이 있다.

display: block
display: inline
display: flex
display: list-item;

질문:li 태그에 찍히는 점의 위치를 바꾸고 싶을 때는?

tailwind -> Vanilla CSS
list-inside -> list-style-position: inside;
list-outside -> list-style-position: outside;

질문:li 태그에 에 flex를 넣으니 list-disc즉 리스트 아이템의 볼릿이 안보일 때

질문: hover와 같은 동적 애니메이션을 특정 영역에서 금지 시키려면?

tailwindcss -> Vanilla CSS

`pointer-events-auto -> pointer-events: auto;
`pointer-events-none-> pointer-events: none;