Web13 :: Element가 배치되는 방법(CSS layout)

해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다.

학습 목표

1. layout의 방식에 대해서 이해합니다.

 

엘리먼트는 html tag들을 말한다.

 

엘리먼트를 화면에 배치하는것을 레이아웃 작업이라고 한다. 

(=렌더링 과정)

 

CSS display 속성에 값이 block, inline, inline-block 

(좌에서 우로 흐른다.) 

float는 기본 엘리먼트 배치에서 벗어나서 떠있는 느낌으로 

 

* 블록으로 쌓이는 엘리먼트(display:block)

<div>block1</div>

<p>block2</p>

<div>block3</div>

=위에서 아래로 쌓이게 된다. 

 

* inline 속성은 오른쪽으로 흐르게 한다. 

옆으로 흐르는 엘리먼트.

꽉차면 오른쪽 아래로 찾아서 들어간다.

 

 

* 좀 다르게 배치시키기(position 속성)

특별한 배치를 하기 위해 position 속성을 이용한다. 

기본 static

absolute 는 기준점을 기준으로 상대적으로 이동 top, left, bottom 등등

 

top, left 값은 필수적으로 주는것이 좋다.

 

fixed 는 스크롤을 해도 항상 그 위치에 있게 된다. 

fixed는 광고같이 계속 따라다니는 스크롤에도 그대로 그 위치에 존재하는것을 fiexed 라고 쓴다. 

 

* {
} // 모든 element의 { } 값을 적용할 수 있다. 

margin값은 element의 배치를 상대적으로 다르게 할 수 있다. 

margin으로도 배치를 할 수 있다. 

 

*float 

둥둥 떠다닌다.

 

하나의 element는 box형태다.

padding: 25px 0px; // 위 아래는 25px 인데 좌우는 0px이다. 

 

*box model 

box model 이라는것은 border, padding, margin 이런것들로 구성이 된다. 

box-shadow 라고 해서 box뒤에 그림자가 있는것처럼 표현할 수 있다. 

 

*엘리먼트 크기

부모의 크기만큼 갖는다. 

.test{

font-size : 100px

}

<div class="test">

<div>

    하이

    </div>

</div>