CSS 기본 지식 2

Posted Mar 6, 2025 Updated Nov 12, 2025

By 79gun79

9 min read

CSS 기본 지식 2

overflow

overflow 속성 : 내용이 요소 크기를 벗어나 보여주기 어려울 때, 보여주는 방식!

float 속성과 함께 사용, 자식의 요소에 구애받지 않음
auto 벗어나는 부분 스크롤 생성
hidden 벗어나는 부분 감추기
scroll 벗어나는 부분 크기 상관없이 스크롤 생성
visible 벗어나는 부분 크기 상관없이 표현
overflow-x: scroll x축 방향으로 스크롤 생성
overflow-y: scroll y축 방향으로 스크롤 생성

border

속성명으로 구분
border-width 테두리 두께
border-style 테두리 스타일 (solid, dashed, dotted, double)
border-color 테두리 색상
border-top border-right border-bottom border-left
공백으로 구분
border 속성값
- border: 두께(10px), 스타일(solid, dashed), 색(black);

border-radius ⇒ 시계방향!
- 테두리 모서리 둥근정도
- border-radius: 왼쪽위(1) 오른쪽위(2) 오른쪽아래(3) 왼쪽아래(4);
  1 2 3 div { border-radius: (1) (2) (3) (4); }
- border-radius: 100%;
  - 모서리를 둥글게하여 원으로 만듦

우선순위에 밀려 적용이 안되는 경우

예시) 해당 css가 적용안되고 밀림.

  
.border_box3 {
  border: 2px solid #000;
  border-radius: 100%;
}

동일한 우선순위로 변경
- div.border_box3
- 특정 부분이 뭔지를 정확히 명시
더 높은 우선순위로 변경
- .border .border_box3
- 클래스 속성 다중선택으로 순위 변경
강제성을 부여
- !important
- 강제로 해당 속성을 적용함

collapse & separate

border-collapse로 지정
- collapse: 셸 사이 공간이 없는표 생성
- separte: 셸이 분리된 표

display

display 속성값

none	화면에 보이지 않음
block	블록 박스 형식
inline	인라인 박스 형식
inline-block	블록과 인라인 중간 형태
flex	플렉스 레이아웃 설정
inline-flex	플렉스 레이아웃 설정 + 인라인형식 지정

block 키워드
- margin 상하좌우 모두 적용됨
- width, height 적용됨
inline 키워드
- margin 좌우만 적용됨!
- width, height 적용 안됨!
inline-block 키워드
- margin 상하좌우 모두 적용됨
- width, height 적용됨
- 줄바꿈 없음!

float

속성: 속성값	내용	여러 태그 정렬
float: left	태그를 왼쪽으로	왼쪽에서 시작하는 수평정렬
float: right	태그를 오른쪽으로	오른쪽에서 시작하는 수평정렬
float: none	태그의 속성유지	블록속성이면 위에서 아래로 정렬

자식요소가 float가 새로 적용되면 그 다음 자식요소도 동일히 적용

clear

속성: 속성값	기능
clear: left	왼쪽에서 시작하는 정렬 취소
clear: right	오른쪽에서 시작하는 정렬 취소
clear: none	기본값, 설정하지 않는 것과 같음

nth-child() vs nth-of-type()

형식	설명
선택자:nth-child(n)	타입 관계없이, 형제 관계에서 앞에서 n번째로 등장하는 태그 선택
선택자:nth-last-child(n)	타입 관계없이, 형제 관계에서 뒤에서 n번째로 등장하는 태그 선택
선택자:nth-of-type(n)	타입도 일치하는 형제 관계에서 앞에서 n번째로 등장하는 태그 선택
선택자:nth-last-of-type(n)	타입도 일치하는 형제 관계에서 뒤에서 n번째로 등장하는 태그 선택

position

position 속성 : 요소 위치 지정 형식 지정 ⇒ 기본값: static

웹 브라우저마다 요소의 위치들이 다를 수 있음 → 통일된 위치를 위해 사용.

static	순서대로 배치 + 이동 X	(상대 위치 좌표)
relative	순서대로 배치 + 좌표 이동	(상대 위치 좌표)
absolute	부모 기준 + 절대 위치 좌표 설정	(절대 위치 좌표)
fixed	화면 기준 + 절대 위치 좌표 설정	(절대 위치 좌표)
sticky	기본 relative동작 + 스크롤시 요소 고정

자식이 absolute이면?
⇒ 부모 영역의 position 속성의 값으로 relative 지정!
position 속성과 함께 사용하는 속성
top 위에서 떨어진 정도
bottom 아래에서 떨어진 정도
left 왼쪽에서 떨어진 정도
right 오른쪽에서 떨어진 정도

z-index

z-index 속성 : 요소 순서 변경(요소가 중첩될 때 사용)
- 숫자가 클수록 ⇒ 앞쪽으로 위치! (1~100 사이 숫자 권장)

opacity

opacity 속성 : 투명도 (0.0 ~ 1.0)

column

column-count	본문의 내용을 컬럼으로 나눔
column-gap	컬럼 사이 간격 지정
column-rule	컬럼의 테두리를 지정
column-span: all;	컬럼을 모두차지 함

flex 레이아웃

display: flex인 컨테이너에서 사용할 수 있는 속성 정리

flex-direction	담긴 자식(컨텐츠)가 정렬되는 방향 (값: row, row-reverse, column, column-reverse)
flex-wrap	담긴 자식(컨텐츠) 크기와 상관없이 한줄 표현할지 지정 (값: wrap, nowrap)
justify-content	담긴 자식(컨텐츠)를 플렉스레이아웃의 수평 정렬 방식 지정 (값: flex-start, flex-end, center…)
align-content	담긴 자식(컨텐츠)를 플렉스레이아웃의 수직 정렬 방식 지정, 행 자체의 컨텐츠를 정렬 (값: flex-start, flex-end, center…)
align-item	담긴 자식(컨텐츠)를 플렉스레이아웃의 수직 정렬 방식 지정, 각각의 개별 아이템을 정렬 (값: flex-start, flex-end, center…)
flex-grow	증가 너비비율
flex-shrink	감소
flex-basis	기본

justify-content, align-content, align-item 의 값들
- center: 자식(컨텐츠)을 컨테이너의 중앙에 정렬
- flex-start: 자식(컨텐츠)을 컨테이너의 시작점에 정렬
- flex-end: 자식(컨텐츠)를 컨테이너의 끝점에 정렬
- space-between: 자식(컨텐츠) 사이에 동일한 간격을 두고 정렬
- space-around: 자식(컨텐츠) 주변에 동일한 간격을 두고 정렬
order
- 가장 큰값이 맨 뒤에 옴.
- 지정이 안된 값은 가장 작은 값 바로 뒤에 옴.

grid 레이아웃

display: grid인 컨테이너에서 사용할 수 있는 속성 정리

column-gap	컬럼(열) 사이 간격 지정
row-gap	로우(행) 사이 간격 지정
grid-gap	항목 사이 간격 지정
grid-template-columns	각 컬럼의 너비를 지정
grid-auto-rows	각 로우의 높이를 지정
grid-column	해당 컬럼의 시작점, 끝점 지정 (값: 시작점/끝점으로 지정)
grid-column-start	해당 컬럼의 시작점 지정
grid-column-end	해당 컬럼의 끝점 지정
grid-row	해당 로우의 시작점, 끝점 지정 (값: 시작점/끝점으로 지정)
grid-row-start	해당 로우의 시작점 지정
grid-row-end	해당 로우의 끝점 지정

grid-template-columns
- 각 컬럼의 너비를 지정하는 속성(컬럼 개수에 맞게 와야함)
- repeat(반복횟수, 반복값) 함수
  - 지정하면, 반복해서 지정.
  - autofill로 자동으로 반복횟수를 조정할 수 있음
- minmax() 함수
  - 최소, 최대 크기를 지정할 수 있음

프로그래머스 데브코스, CSS

This post is licensed under CC BY 4.0 by the author.

auto	벗어나는 부분 스크롤 생성
hidden	벗어나는 부분 감추기
scroll	벗어나는 부분 크기 상관없이 스크롤 생성
visible	벗어나는 부분 크기 상관없이 표현

overflow-x: scroll	x축 방향으로 스크롤 생성
overflow-y: scroll	y축 방향으로 스크롤 생성

border-width	테두리 두께
border-style	테두리 스타일 (solid, dashed, dotted, double)
border-color	테두리 색상

top	위에서 떨어진 정도
bottom	아래에서 떨어진 정도
left	왼쪽에서 떨어진 정도
right	오른쪽에서 떨어진 정도

CSS 기본 지식 2

overflow

border

우선순위에 밀려 적용이 안되는 경우

collapse & separate

display

float

clear

nth-child() vs nth-of-type()

position

z-index

opacity

column

flex 레이아웃

grid 레이아웃

Trending Tags