HTML&CSS

[CSS] display, position

세모이 2021. 11. 29. 17:41
반응형

See the Pen Untitled by Sunyeong (@cozynye) on CodePen.

css

박스모델

모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 한다.

contents - 텍스트나 이미지가 들어가 있는 박스의 실질적 내용 부분

padding - 테두리와 컨텐츠 사이의 간격

border - 컨텐츠를 둘러싸는 테두리

margin - 태그 간의 간격, 테두리 바깥쪽의 공간

display

기본적으로 태그들은 왼쪽에서 오른쪽으로 위쪽에서 아래쪽으로 쌓인다.
display 속성은 해당 html 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정

 

inline

컨텐츠를 감쌀정도의 크기만 갖게 된다.

블락태그와 다르게 줄바끔 X

크기를 변화시킬수 없다.(width, height 값 넣어도 적용되지 않음)

span, a, img 태그 등이 있다.

 

block

기본적으로 width가 100%가 되게 하고

가로 한 줄을 다 차지하게 한다.

div, h1, p, ul, ol, form 태그 등이 있다.

 

inline-block

해당 요소 자체는 인라인 요소처럼 동작

해당 요소 내부는 블록 요소처럼 동작

 

flex

레이아웃 배치 기능에 중점을 맞추어 만들어진 방식

일반적으로 하나의 flex container와 여러개의 flex item으로 구성됨

<div class="flex_container">
  <div class="flex_item">A</div>
  <div class="flex_item">B</div>
  <div class="flex_item">C</div>
</div>
.flex_container{
  display: flex; // 아이템의 크기는 width만큼 차지하고 가로정렬 됨
  flex-direction : row // 배치방향 설정
    //row(기본값), row-reverse, column, column-reverse 속성 가능
    flex-wrap : nowrqp // 줄넘김 처리 설정
    //nowrap, wrap, wrap-reverse
  flex-flow : row nowrap;
  // flex-direction과 flex-wrap을 한꺼번에 지정하는 단축 속성
  justify-content : flex-start
    //메인(가로)축 방향으로 아이템을 정렬하는 속성
        //flex-start(기본값), flex-end, center, space-between, space-around, space-evenly
    align-items : stretch // 수직축 방향 정렬
    //stretch(기본값), flex-start, flex-end, center, baseline
    align-content : stretch // flex:wrap이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬
    //stretch, flex-start, flex-end, center, space-between, space-around, space-evenly
}

.flex_item{
  flex-basis : auto 
    // flex 아이템의 기본 크기 설정
   //auto(기본값), width, height 등에 사용하는 단위의 수가 들어감
   flex-grow : 0 // 유연하게 늘리기
    // 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
    //0보다 큰 값이 세팅되면 해당 아이템이 유여한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.
    flex-shrink : 1; // 유연하게 줄이기
  //1(기본값), flex-basis의 값보다 작아질 수 있는지 결정
  //0으로 세팅하면 아이템 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 칼럼 만들 수 있음
  flex:1 1 auto;
  //flex-grow, flex-shrink, flex-basis를 한꺼번에 쓸 수 있는 축약형 속성
  aling-self : auto; // 해당 아이템의 수직축 방향 정렬
  //auto(기본값), strtch, flex-start, flex-end, center, baseline
  //order : 각 아이템들의 시각적 나열 순서 결정
  //z-inder : Z축 정렬, 숫자가 클 수록 위로 올라온다

}

position

레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성

 

static

기본값이며, 위치를 지정하지 않을 때 사용

차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

 

relative

위치를 계산할 때 static의 원래 위치부터 계산

기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 이동 가능

 

absolute

원래 위치와 상관없이 위치를 지정, 가장 가까운 상위 요소를 기준으로 위치가 결정

Static 속성을 가지고 있지 않은 조상을 기준으로 움직인다.

offset 속성을 명시해야 위치 이동한다.

 

fixed

원래 위치와 상관 없이 위치를 지정, 상위 요소에 영향을 받지 않음

브라우저 화면의 상대 위치를 기준으로 위치가 결정

반응형