Coding_복습용

목차

• box-sizing
• box-shadow

box-sizing

HTML요소의 너비와 높이를 계산하는 방법을 지정함

border-box는 테두리와 안쪽 여백도 요소의 크기로 고려함

width를 100px으로 설정하고 테두리와 안쪽 여백을 추가하면,

contnet 영역이 줄어들어 총 너비 100px을 유지함

대부분의 경우 이편이 크기를 조절 할 때 쉬움

content-box는 기본 박스크기 결정법

요소의 width를 100px로 설정하면, content영역이 100px의 너비를 가지고

테두리와 안쪽 여백은 별도로 설정됨

.h1_1 {
    background-color: gray;
    margin: 10px;
    padding: 20px;
    border: 3px solid red;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
}

.h1_2 {
    background-color: gray;
    margin: 10px;
    padding: 20px;
    border: 3px solid red;
    width: 150px;
    height: 150px;
    box-sizing: content-box;
}

<div class="h1_1">박스 모델
    <br> (border-box)
</div>
<hr>
<div class="h1_2">박스 모델
    <br> (content-box)
</div>

box-shadow

박스모델에 그림자를 넣어줌

수평거리, 수직거리, 흐림정도, 번짐정도, 색상, inset(그림자를 박스 안으로 넣기) 순으로 설정

.div_3 {
    box-shadow: 10px 10px 15px 5px #000;
}

<div class="div_3">
    박스 모델(그림자 효과)
</div>

Github

Link

목차

• static
• relative
• absolute
• fixed
• sticky

static

일반적인 문서의 흐름에 맞춰 배치함, 기본값

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

relative

static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인 위치값을 지정함

그외에는 static과 동일

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
    position: relative
    left: -30px;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

absolute

요소가 일반적인 문서의 흐름을 따르지 않게함

relative값을 사용한 상위 요소를 기준으로 위치값을 지정함, 단, static값을 가진 상위요소는 제외

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
    position: absolute;
    top: 0px;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

fixed

view port(실제 브라우저에 보이는 영역)기준으로 위치값을 지정함

위로가기같은 고정되어있는것을 구현할때 사용

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
    position: fixed;
    bottom: 10%;
    right: 10%;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

sticky

요소가 HTML문서 안에서 static과 같이 일반적인 흐름에 따라가다가,

스크롤 위치가 임계점에 이르면 화면에 고정할 수 있음

top속성만 적용되며, 바로위의 부모 요소안에서만 적용됨 

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);
	height: 8000px;
}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
    position: sticky;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

Github

Link

목차

• float
• clear

float

사전적인 의미는 "떠있다"

HTML요소에 float가 적용하면, 왼쪽이나 오른쪽으로 배치시킬수 있음

속성값으론 left, right, none 등이 있음

img {
    width: 150px;
    float: left;
}

<img src="../Example/IMG/salad.jpg" alt="샐러드">
<p>
    문명이 출현하면서 사회집단 또는 부족에 따라서 전통적인 요리법이 정착되기 시작했다.
    <br>
    기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다.
    <br>
    사람들이 얼마나 청결한 것을 좋아하는가와 자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다.
    <br>
    전통 음식은 국가, 지역별로 다음과 같이 나뉜다
</p>

clear

float 취소시키기

취소시키고 싶은 부분부터 clear: (left, right, both)

img {
    width: 150px;
    float: left;
}
.p_2 {
    clear: both;
}

<p class="p_2">
    <br>
    기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다.
    <br>
    사람들이 얼마나 청결한 것을 좋아하는가와 자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다.
    <br>
    전통 음식은 국가, 지역별로 다음과 같이 나뉜다
</p>

Github

Link

목차

• none
• block
• inline
• inline-block

none

화면에 표시되지 않고, 영역을 차지하지 않음

display: none;

block

기본적으로 가로 영역을 모두 채우고, 다음에 등장하는 태그는 줄바꿈이 된것처럼 보임

div, p, h 태그 등이 이에 해당함

div, h2 {
    border: 1px solid #000;
}

<h1>Display Black</h1>
<div>div Tag</div>
<div>div Tag</div>
<h2>h Tag</h2>

inline

컨텐츠의 영역만큼 차지함

block과 달리 줄바꿈이 되지 않고, width와 height를 지정할수 없음

span, a {
    border: 1px solid #000;
}

<h1>Displasy Inline</h1>
<span>span Tag</span>
<span>span Tag</span>
<a href="">a Tag</a>

inline-block

block과 inline의 중간 형태

요소는 inline인데 내부는 block처럼 표시됨

inline처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치되지만, block처럼 width와 height값은 변경할수 있음

.art_2 > div,
.art_2 > span {
    display: inline-block;
}

<h1>Display Inline Block</h1>
<article class="art_2">
    <div>div Tag</div>
    <div>div Tag</div>
    <span>span Tag</span>
    <span>span Tag</span>
</article>

Github

Link

목차

• margin
• padding

margin

외부 여백을 의미함

margin 중첩 : 세로로 나열된 상황에서는, 두 margin값 중 큰값만 적용됨

.container_1 {
    border: 1px solid #000;
    margin: 20px;
}
.container_2 {
    border: 1px solid #000;
    margin: 20px;
}

<div class="container_1">
    <h1>margin1</h1>
    <p>외부 여백을 지정합니다</p>
</div>
<div class="container_2">
    <h1>margin2</h1>
    <p>외부 여백을 지정합니다</p>
</div>

padding

내부 여백을 의미함

.container {
    width: 300px;
    border: 1px solid #000;
    padding: 10px;
}
h1, p {
    border: 1px solid #000;
    width: 150px;
    margin: 10px auto;
}

<div class="container">
    <h1>padding</h1>
    <p>내부 여백을 지정합니다.</p>
</div>

Github

Link