CSS 기초 지식 함양.

아토퓌 2020. 1. 11. 01:31

2020. 1. 11. 01:31

레이아웃 기본.

블럭 vs 인락인

블럭 : div (박스다)

인라인 : span (text처럼 생각하면 된다.) //4가지만 기억 block, inline, inline-block, none,

* 생각포인트 : 인라인은 박스가 아니기 때문에 크기 조절이 안됨.

블록	인라인
article, aside, audio, div, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, p, pre, section, table, ul, video	a, br, button, em, i, img, input, label, map, object, small, script, select, span, strong, textarea, var

* padding을 설정하면 가운데로 깔끔하게 정리되구만.

( padding : 5% , width: 50% )라고하면 화면에 55%를 차지한다.

인라인 속성

span{

display: inline( 기본 ) , inline-block( 크기 조절이됨, but 나란히 입력히 된다. ) , none: 화면에 안보이게 함.

}

margin(외벽) > border(경계) > padding> 내용

box-sizing : context-box(margin까지 포함 ), border-box ( border까지 포함 )

* vertical-align: top; middle, bottom // 차지하는 공간에서 위로 올림.

* margin-left : auto , margin-rigth : auto 하면 여백이 생겼을 때 자동으로 오른쪽 왼쪽 맞춰 준다.

=> margin: 0 auto ; // 상하:0 , 좌우:auto라는 뜻.

*float : left // 블록이 왼쪽으로 붙인다.

*float : right

-> but float에는 많은 어려움을 유발한다.

=> div 1안에 다른 div2(float) 블록을 가질 때 정상 동작을 안 할 수있다.

clear: both; 를 해줘야한다.

footer { clear: both; // float}

ctrl + shifg + i => 개발자 도구.

position

static, relative, absolute, flexed가 있는데 ,

absolute는 상위 요소로 부터 절대적인 위치.

relative는 상위 요소로 부터 상대적인 위치.

참고 영상( 졸라 잘가르친다)

제 1막