[WeCode] 1Week - #2 position, display, float

UlongChaS2·2021년 5월 11일

WeCode

목록 보기

5/17

두 번째날 역시 replit을 통해 HTML과 CSS를 학습한다 그 중 Google Classroom에 제출해야하는 과제가 또 있는데 주제는 하단에 있는 것이다. 복습한다는 의미로 간단하게 작성할 생각이다.

positoin 속성 relative, absolute, fixed

display 속성 inline, inline-block, block

float

position

relative

부모 객체에 적는 것으로 자식 객체가 position: absolute를 쓰면 기준이 되게끔 설정해주는 속성이다. (이것을 적지않으면 자동으로 부모객체를 body로 잡는다.)

absolute

스크롤을 내려도 지정한 자리에 있는 속성으로 기본으로 z-index설정이 들어가 겹쳐서 위에 있게 된다. 부모의 속성에 position: relative이 있으면 부모 객체의 위치의 영향을 받는다. div로 감싸줬다고해도 width: 100%가 아니게 된다.

fixed

부모의 속성에 상관없이 무조건 브라우저의 좌표를 따르기 때문에 항상 화면에서 절대적인 위치가 된다. 그러므로 스크롤을 해도 움직이지 않는다.

display

inline

div 태그처럼 한줄 속성을 가진 태그의 속성을 없앨 수 있고 width와 height가 있다고 하더라도 적용되지않고 폰트 사이즈로 설정됨

<div style="display: inline">한줄</div>
<div style="display: inline">두줄</div>
<div style="display: inline">세줄</div>

결과

한줄

두줄

세줄

block

span태그처럼 한줄 속성이 아닌 태그의 속성을 한줄로 만들 수 있고, display: none이였던 속성이라 안보였던 객체를 여러가지 방법을 통해서 display: block으로 덮을 수 있으므로 보여주게 된다.

<span style="display: block; background-color: red">한줄</span>
<span style="display: block; background-color: blue">두줄</span>
<span style="display: block; background-color: green">세줄</span>

결과

(post했을 때 결과가 제대로 안나와 그림으로 넣었음)

inline-block

inline과 block의 장점을 합쳐 놓은 것으로 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하며 여러 개의 엘리먼트를 한 줄에 원하는 정확한 너비를 지정할 수 있다.

<div style="display: inline-block; width: 100px; height: 100px;">한줄</div>
<div style="display: inline-block; width: 200px; height: 100px;">두줄</div>
<div style="display: inline-block; width: 300px; height: 100px;">세줄</div>

결과

(post했을 때 결과가 제대로 안나와 그림으로 넣었음)

float

보통 기사에서 글 중간에 이미지를 넣고 그 이미지 주위로 글들이 감싸줄때 사용하는 경우가 많은데 요즘은 float보단 flex써서 사용하지만 예전 프로젝트나 간혹쓰는 경우도 있어 알아두어야 한다. 그리고 플로팅된 요소는 display: inline-block; 을 선언한 것과 동일해지기 때문에 따로 선언해줄 필요는 없다.

float: left;

<div style="width: 100px; height: 150px; background-color: red; float: left;">왼쪽정렬 입니다.</div>
<div>lorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit ametur adipiscing emlorem ipsum dolomet consectetur adipiscing eumlorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit amet consectetur adipiscing elit. velorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolomet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit amet consectetuipiscing elit</div>
<div style="width: 100px; height: 100px; border: 2px solid black;">1</div>
<div style="width: 100px; height: 100px; border: 2px solid black;">2</div>
<div style="width: 100px; height: 100px; border: 2px solid black;">3</div>

결과

1이 float: left라 2가 1번 뒤로가게 되는데 왜인지 2번 border만 뒤로가고 안의 내용 2는 border 밖에 위치한다.

float: right;

<div style="width: 200px; height: 150px; background-color: blue; float: right;">왼쪽정렬 입니다.</div>
<div>lorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit ametur adipiscing emlorem ipsum dolomet consectetur adipiscing eumlorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit amet consectetur adipiscing eliorem ipsum dolor sit amet consectetur adipiscing elit. vestibulumlorem ipsum dolomet consectetur adipiscing elit. vestibulumlorem ipsum dolor sit consectetuipiscing elit consectetuipiscing elitconsectetuipiscing elit</div>
<div style="width: 100px; height: 100px; border: 2px solid black; float: right;">1</div>
<div style="width: 100px; height: 100px; border: 2px solid black;">2</div>
<div style="width: 100px; height: 100px; border: 2px solid black;">3</div>