CSS layout

760kry·2019년 11월 19일
0

block vs inline


block element

  • 화면 전체를 사용하는 태그

inline element

  • 화면의 일부를 차지하는 태그

block vs inline

display

display 속성을 사용해서 block elementinline element 로 바꿀수 있고, inline elementblock element 로 바꿀수 있다.

html

css

박스 모델(box model)


사각형의 형태(box)로 그 태그의 부피감을 결정한다

박스모델 관련 속성들

  • margin : 태그와 태그 사이의 여백.
  • padding : 태그와 내부 컨텐츠 사이의 여백
  • border: width style color; 순서로 값 지정

inline elementwidth, height 값이 무시 된다.

box-sizing


  • 박스의 크기를 화면에 표시하는 방식을 변경하는 속성.
  • width와 height는 엘리먼트의 컨텐츠의 크기를 지정한다.
  • content를 기준으로 하기 때문에 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다.

box-sizing:border-box; 로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.

html

css

css * { box-sizing:border-box; }

position


엘리먼트의 위치를 지정하는 4가지 방법

  • static
  • relative
  • absolute
  • fixed

static VS relative


position: static

기본값으로 position 값을 지정하지 않을경우 static이 기본값으로 들어간다.

position: relative

position 속성의 값을 relative로 할 경우 부모 태그를 기준으로 'position' 을 잡는다.

html

css

#container {
border: 2px solid black;
}

#parent {
border: 2px solid black;
width: 50%;
height: 100%;
position: relative;
}

#me {
border: 2px solid black;
position: relative;
width: 50%;
height: 100%;
}

css

부모태그에 position 값이 없을때


부모태그에 position 값이 있을때


fixed


부모태그를 무시하고 스크롤을 내려도 지정된 위치에 있는다.

html

css

flex


flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여한다.
flex-direction을 이용해서 정렬방향을 바꿀 수 있다.
flex-directiondms 기본적으로 row 라는 기본값을 갖게 된다.

display: flex flex-directiondms: row


flex-directiondms 기본적으로 row 라는 기본값을 갖게 되고 수평방향으로 정렬된다.

html

css

flex-direction:row-reverse;


row 반대로 정렬된다.

css

flex-direction:column;


수직방향으로 정렬된다.

css

flex-direction:column-reverse


column 반대로 정렬된다.

css

flex-basis


flex 방향에 해당되는 엘리먼트의 크기를 지정한다.

html

css

flex-grow & shrink


flex-grow


flex-grow의 기본값은 0이다.
flex-grow에 값을 주면 element 들이 여백 전체를 n/1로 나눠 갖는다.

css

n/1에서 우선순위가 .first가 높아진다.

css

.itemflex-grow:0;을 주게 되면 .first가 여백을 독식하게 된다. .firstflex-grow값을 어떠한 것으로 바꿔도 여백을 독식한다.

css

flex-shrink


설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.
flex-shrink: 0;일 때 는 element의 크기가 축소 되지 않는다.


profile
개발 공부 :D

0개의 댓글