CSS 치트키 3) CSS Layout

Layout 레이아웃

무엇을 어떻게 논리적으로 구성할 것인지 고민

중요한 것은 중요하게! 숨길 것은 적당히 숨기고! 등을 구성하는건 중요하다.

마치 학창시절 깔끔한 필기노트를 보는 것과 같다. (성적과는 무관하지만....)

- 어디에 위치시킬 것인지,

- 블락과 텍스트를 어떻게 (상대적으로) 위치/정렬 할 것인지

레이아웃 대상: Element

Block-level Elements : full width available
<div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>

Inline Elements :
<span>, <a>, <img>

Display 노출여부

주로 자바스크립트 코드를 안보이게 한다.
display:none

h1.hidden {
    display: none;
}

h1.hidden {
    visibility: hidden;
}

Width 콘텐츠 크기 고정/반응형

이제는 모바일 화면 대응해서 max-width 를 더 애용해야한다! 

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

Position 박스 위치

영어의 미묘함이 어려우면 비교화면 기준을 명확하게 하면 좀 쉽다 :3

- 비교화면:
문서전체, 뷰포트(디바이스 크기), 조상 박스(바로 윗 박스), 스크롤패인

- 이동:
top, left, right, bottom 으로 이동

static: 문서전체 내 위치 고정

relative: 문서전체 내 위치 이동 (문서 크기도 리사이즈)

fixed: 뷰포트 에서 위치 이동

absolute: 조상박스 내 위치 이동 (사용자 지정 조상박스 없으면 body)

sticky: 스크롤판 이동했을때 위치 고정

응용. 이미지 안 캡션

이미지 조상박스 기준 위치 이동, position:absolute

.topleft {

    position: absolute;

    top: 8px;

    left: 16px;

    font-size: 18px;

}

Float & Overflow 박스간 정렬

Float: 주로 Container (텍스트) 사이에 이미지를 위치시킬 때 사용한다. 

left, right: 왼쪽, 오른쪽 정렬

inherit: 문장 안에 한 줄처럼

텍스트 사이에 이미지를 어디에 위치시킬까? 

Overflow: Contents 가 Box 밖으로 흘러넘친다면?

visible: 그냥 흘러넘치게 둔다;;

hidden: 넘치는거 안보여준다.

scroll: 스크롤 패인으로 보여준다. 

auto: scoll default

div {
    overflow: scroll;
}

/* overflow auto로 해놓으면, 넘쳐도 박스 안으로 자동조정! */

.clearfix {

    overflow: auto;
}

.img2 {
    float: right;
}

Align 박스 안 컨텐츠 정렬

/* 중앙정렬 */

.center {
    text-align: center;
    border: 3px solid green;
}

/* 이미지를 block 으로 인지하고 디폴트 중앙정렬 */
img {

    display: block;
    margin: auto;
    width: 40%;
}

/* 컨테이너 대비 오른쪽 20px 여백 놓기 */
.right {
    position: absolute;
    right: 20px;
    width: 300px;
    border: 3px solid #73AD21;
}