CSS 레이아웃

jsleeg98·2020년 5월 20일
0

CSS

목록 보기
5/12

inline level과 block level

block level : 자동으로 줄바꿈이 됨 (h1태그)
inline level : 그 줄에 속해있다. (a태그)

display : inline or block 으로 속성 변경이 가능하다.

Box model

  • border : 10px solid red;
  • padding : 20px; - content의 border 사이의 간격
  • margin : 40px; - element와 element 사이의 간격
  • width : 120px;

inline level에서는 width와 height가 적용되지 않는다.

box-sizing

width와 height로 box의 크기를 조절할 때 content의 크기를 조절하기 때문에 padding과 border까지 포함된 box의 크기를 예측하지 못하는 경우가 있다. 그 이유는 기본적으로 box-sizing : content-box;로 설정되어있기 때문이다.
box-sizing : border-box;를 사용하여 border를 기준으로 크기를 조절하면 된다.
*{ box-sizing : border-box; } 를 사용하여 전체에 적용해줌으로써 편리하게 조절하기도 한다.

마진 겹침

  • 같은 block level이 붙여 있을 때 발생 - 더 큰 margin이 적용된다.
  • 부모 태그와 자식 태그 사이에서 부모 태그의 border가 조건이 없어 투명하다면 발생 - 더 큰 margin이 적용된다.

포지션

element의 위치를 조절할 수 있는 기능이다.

  • position : static; - 기본값
  • position : relative; - 포지션 조절 가능
  • left = 100px - 왼쪽에서 100px 띄워라, 오른쪽으로 이동한다.
  • top = 100px - 위쪽에서 100px 띄워라, 아래쪽으로 이동한다.
  • left와 right를 동시에 사용하면 left를 따르고 top과 bottom을 동시에 사용하면 top을 따른다.

media query

반응형 디자인을 만들기 위한 중심적인 기능이다

  • @media(max-width : 500px) { } - 최대 폭 500px이다. 500px 이하일 때
  • @media(min-width : 500px) { } - 최소 폭 500px이다. 500px 이상일 때
  • 나중에 쓴 것이 더 우선 순위가 있다.
    • ~400px 일 때 : 배경은 파랑
    • 400~600px 일 때 : 배경은 빨강
    • 600px~ 일 때 : 배경은 노랑
<!doctype>
<html>
<head>
    <style>
        @media (max-width : 600px) {
            body{
                background-color: blue;
            }
        }
        @media (max-width : 400px) {
            body{
                background-color: red;
            }
        }
        @media (min-width : 601px) {
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
</body>
</html>

디바이스 크기에 따라 변화

  • <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
  • chrome 개발자도구 show media quries와 toggle device toolbar를 통해 확인할 수 있다.

float

이미지를 글의 중간에 삽입하고 싶을 때 사용하는 기능

  • float : left; - 이미지가 왼쪽에 위치해있다.

float를 무시하게 하는 방법

  • style = "clear : both;" - 해당 content에 적용하면 된다.

multicolumn

다단을 만들 수 있는 기능

  • column-count : 2; - 단을 2개로 고정시킨다.
  • column-width : 200px; - 단을 200px 단위로 만드므로 화면 크기에 따라 변화
  • column-gap : 30px; - column의 간격 조절
  • column-rule-style : solid; - column 나누는 선 설정
  • column-rule-color : red; - cloumn 나누는 선 색 설정

column 적용 무시하게 하는 방법

  • column-span : all; - 모든 column설정값을 무시한다.

0개의 댓글