요소의 배치
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
'국비지원 공부 정리 > HTML,CSS' 카테고리의 다른 글
반응형 웹과 적응형 웹의 차이 (0) | 2025.03.18 |
---|---|
CSS 용어 정리 - Transform, animation (0) | 2025.03.18 |
CSS 용어 정리 - 요소 숨기기 (0) | 2025.03.17 |
CSS 용어 정리 - 상자의 크기, border, overflow (0) | 2025.03.17 |
CSS 용어 정리 - font,margin, padding (0) | 2025.03.17 |