CSS 1. CSS Layout(box-model)

jiffydev·2020년 9월 13일
0

CSS Layout

1. CSS display

  • div: display 속성이 block -> 부모의 사이즈만큼 꽉 찬다 = 크기 조정 가능
  • span: display 속성이 inline -> 정해진 영역만큼만 찬다 = 크기 조정 불가
  • 레이아웃을 짤 때는 block 속성의 태그로 만든다(div, section 등)
  • inline-block: inline 속성(옆에 붙음)이지만 block 속성도 있음(크기 조정 가능)

2. CSS Box-model

  • 박스의 width/height은 박스의 content 크기에 한정된다. padding, border, margin은 별도의 크기
  • box-model에서는 box-sizing: content-box;를 기본으로 실행. box-sizing: border-box;로 설정할 경우 border까지 width/height에 포함된다.(구형 브라우저는 지원x)
  • box-model에서는 알아서 크기의 합이 100%로 만들기 때문에 content-box에서width:100%;를 넣으면 오히려 전체가 100%가 넘어가게 된다. (padding 있으면 크기 조절할 때 주의)
  • <div>,<section> 등의 block 속성 태그는 html 편집기 안에서의 개행도 한 문자로 취급하기 때문에 개행이 있으면 100%가 넘어가게 된다. 이 때는 부모 태그의 font-size: 0;으로 하고 자식 태그의 글자 크기를 조정한다.
  • 1rem: root em => root 즉, html의 기본 설정 크기(16px)
  • box의 너비를 화면에 꽉 차게 하되, 일정 크기를 넘어갔을 때부터는 더 늘어나지 않게 하려면 부모 태그를 max-width: 원하는 크기;로 해주고 가운데 정렬을 위해 margin: 0 auto;를 설정해준다.
  • float: left;를 사용하면 inline-block처럼 요소들이 최대한 왼쪽으로 붙는다. 만약 컬럼 사이에 여백을 주고 싶다면 width를 여백 만큼 줄이고 왼쪽 컬럼은 float: left;, 오른쪽 컬럼은 float: left;을 사용하면 된다.
  • float속성을 사용하면 속성 바깥에 있는 태그도 영향을 받기 때문에 바깥에 있는 태그에는 clear: both 속성을 적용해야 한다.
  • float이 자식 태그에 적용되면, 부모 태그는 자식 태그를 없는 것으로 인식한다. 따라서 부모태그의 빈 공간에 배경색 등을 지정하려면 가상 엘리먼트 after를 사용하여 아래와 같이 작성한다.
.container:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;

3. 반응형 웹

  • media query: 일정 크기 이상일 때 주고 싶은 속성을 따로 미디어 쿼리 안에 작성한다.
    @media screen and (min-width: 원하는 크기px){ }
  • 미디어 쿼리를 적용했으면 html에서 viewport 태그를 적용해야 한다.

4. CSS Reset

  • html 태그에는 기본적인 css속성이 적용된 태그가 존재한다.(h1 등의 여백처럼) 하지만 보통 디자인이 나오고 이에 맞춰 css를 작성해야 하기 때문에 기본적인 속성을 모두 지우고 시작하는 것을 CSS Reset이라고 한다.
profile
잘 & 열심히 살고싶은 개발자

0개의 댓글