CSS - 레이아웃

lsjoon·2022년 11월 29일

목록 보기

5/8

레이아웃 구성

display

// css //
p { display: inline; }
p { display: block; }
p { display: inline-block; }

Block 과 Inline 요소의 성격을 바꿀 때 사용
inline-block을 사용하면 두 요소의 성격을 모두 가짐

flex

부모 = Container / 자식 = Item
부모에게 display:flex 로 속성을 지정한 뒤, 자식 요소에 flex 속성 사용가능

부모에게 적용되는 속성

dlsplay:flex
flex container 명시
flex-direction
배치 방향 설정
flex-wrap
줄넘김 처리 설정
justify-content
메인축 방향 설정
align-items
수직축 방향 설정
align-content
아이템들이 여러 줄일 때 수직축 방향 설정

자식에게 적용되는 속성

flex-basis
아이템의 기본 크기 ( row - 너비, column - 높이 )
flex-grow
아이템이 얼마나 커질 수 있는지 설정
flex-shrink
아이템이 얼마나 작아질 수 있는지 설정
flex
basis, grow, shrink 의 약어
align-self
수직축으로 아이템 정렬 ( align-items 보다 우선순위 높음)
order
아이템 순서 설정
z-index
z축 정렬 설정

grid

부모 = Container / 자식 = Item
부모에게 display:grid 로 속성을 지정한 뒤, 자식 요소에 grid 속성 사용가능

grid-template-rows
행의 배치 ( px : 고정값 / fr : 비율값 )
grid-template-columns
열의 배치

float

<div class = "left"> Hello World </div>
<div class = "right"> Hello World </div>
// css //
.left { float: left; }
.right { float: right; }

선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

레이어가 겹쳐지지 않은 상태로 왼쪽부터 정렬시키고 싶은 경우 'float:left;'를 연속적으로 입력

.left { float: left; }
.next { float: left; }

clear

<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer><footer>
// css //
footer { clear: both: }

float에 대한 속성을 제어하고자 할 때
float을 꺼주기 위함

브라우저와 공간 사이의 공백 제거

  <style>
    html, body {
    	margin: 0;
   		padding: 0;
    }
  </style>
    or
  <style>
    * {
    	margin: 0;
    	padding: 0;
    }
  </style>