'STUDY/web' 카테고리의 글 목록

레이아웃 css

2022. 11. 29. 18:09

Point I
margin과 padding의 차이

<style>
    div {
    ...
    margin-left: 100px; 
    padding-left: 100px;
    }
</style>

Point II
top right bottom left 순서로 한 줄에 작성 가능

<style>
    div { margin: 100px 0 0 100px; }
</style

Point I
Block 요소의 특징

<style>
    p {
        width: 200px;
        height: 200px;
        margin-top: 100px;
    }
</style>

Point II
Inline 요소의 특징

Point I
형제지간의 마진 병합: margin-bottom과 bottom-top 중 숫자가 큰 값으로 적용

<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

.box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { bottom-top: 100px; }

Point II
부모 자식간의 마진 병합: 자식 뿐만 아니라 부모에도 영향을 미침

<main role="main">
    <article>
    </article>
</main>

article {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}

Point I
display: Block과 Inline 요소의 성격을 바꿀 때 사용

p { display: inline; }
a { display: block; }
a {display: inline-block; }

Point II
float: 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

<div class="left"> Hello World </div>
<div class="right"> Hello World </div

.left { float: left; }
.next {float: left; }

Point III
clear: float에 대한 속성을 제어하고자 할 때 사용

<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>

footer { clear: both; }

Point IV
브라우저와 공간 사이의 공백 제거하기

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

PREV 1 2 3 4 ···28 NEXT