국비지원 공부 정리/HTML,CSS

CSS 용어의 정리- display, position, background

worldstroy 2025. 3. 18. 15:43

요소의 배치

 

CSS 용어 용어의 의미 상태
position: relative; 요소 자신을 기준으로 배치

position: absolute; 위치 상 부모 요소를 기준으로 배치
(부모 요소는 relative인 요소, 둘다 static이라면 메인 페이지를 반영)
display 속성이 block으로 변경됨



position: fixed; 뷰포트를 기준으로 배치
display 속성이 block으로 변경됨

z-index 요소의 배치 순서를 결정
auto : default(부모 요소와 동일한 쌓임)
숫자 : 숫자가 높을 수록 위에 쌓임

 

배경 이미지

 CSS 용어 의미 사용법
background-color 태그의 색상을 지정함 default : transparent(투명함)
색상값을 넣으면 된다.
linear-gradient() : 여러개의 색깔을 그라이데이션으로 넣음
● 색상1 | 색상2 : 상하로 색 2개 지정
●  방향 | 색상1 | 색상2 : 해당 방향으로 색상 2개 지정
(ex, 90deg blue red)
●  방향 | 색상1 | 색상1의 비중 | 색상2 : 색상 1의 비중을 % 로 지정
●  방향 | 색상1 | 색상2 | 색상3: 색상 3개 사용

background-image 태그에 배경 이미지 삽입 background-image: url("");
background-repeat 배경 이미지 반복 패턴 정의  default : repeat(이미지를 수직, 수평 모두 반복)
repeat-x : 이미지를 수평 반복
repeat-y : 이미지를 수직 반복
no-repeat : 반복 없음:
background-position 요소의 배경 이미지 위치
default : 0%
방향 : top, bottom, left, right, center
단위 : px, em, rem 등의 단위로 미세하게 조정
background-size  요소의 배경 이미지 크기 default 는 auto로 이미지의 실제 크기를 말함
단위 px, em, rem 등 단위 값으로 지정
cover : 비율을 유지한 체 요소의 더 넓은 너비에 맞춤
contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤
background-attachment 스크롤 시 스크롤 여부 결정 default : scroll로 스크롤이 내려갈때 같이 보이지 않음
fixed : 이미지가 뷰포트에 고정되며, 스크롤이 안됨
local : 요소 내 스크롤 시 이미지가 같이 스크롤 

 

Tag의 배치 방식 

display : Inline  크기만 맞다면 한줄에 여러개의 Tag가 오는 게 가능
display: block  하나의 Tag가 한 줄 전체를 차지함
display: lnline-block  Block 요소가 수직적으로만 쌓이는 문제를 해결하기 위해 나온 개념
display: flex 부모 요소를 자식 요소를 쌓이게 하는 용도로 한다.

 

display가 flex일때와 관련된 설정

 

 CSS 용어 의미 사용법
flex-direction 쌓이게 할 주축을 결정 default는 row(좌 -> 우)
row-reverse : 우 => 좌
colum : 위 => 아래
column-reverse : 아래 => 위
flex-wrap 줄바꿈 여부를 결정 default : 공간이 모자라도 우겨넣음(nowrap)
wrap : 차지할 공간이 없다면 줄바꿈
wrap-reverse : wrap의 반대 방향으로 묶음
justify-content 주축의 정렬 방법 flex-start : default 값으로 시작점을 기준으로 정렬
flex-end : 태그의 끝점을 기준으로 정렬
center : 쌓여진 태그들을 가운데 정렬
space-between : 태그와 태그 사이의 간극을 일정하게
space-around : 태그의 외부 여백을 균등하게 정렬
space-evenly : 내외부 간극을 일정하게 정렬
align-items 한줄로 정렬된 Item의 정렬

align-content 교차 축의 여러 줄 정렬 방법

 

 

참고 사이트 : CSS Flex 완벽 가이드 | HEROPY.DEV