본문 바로가기
HTML5

21. 02. 02. 08장- 레이아웃을 위한 스타일

Levinni 2021. 2. 2. 19:50

        width, height: 박스 모델의 너비와 높이

        display: 화면에서 요소가 어떻게 보일지를 결정하는 속성

        border: 테두리

        margin: 외부 여백

        padding: 내부 여백

        border-radius: 모서리 둥글게 처리

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        body {text-align: center;}
        .hong {background: #ffb; width: 800px; height: 300px;}
        div.hong {margin-left: auto; margin-right: auto;}
        img {width: 200px;}
    </style>
</head>
<body>
    <span class="hong">아버지를 아버지라 부르지 못하고</span>    
    <div class="hong">어머니를 어머니라 부르지 못하고</div>
    <div>동에번쩍 서에번쩍</div>
    <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고">    
    <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고">    
    <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고">    
    <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고">    
</body>
</html>

 

inline-ex.html

-> <span>은 인라인 속성, <div>는 블록 속성. (블록 속성은 margin이 있음.)

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        div {margin: 10px;}
        .box1 {width: 200px; height: 100px; background-color: #ffaa00;}
        .box2 {width: 50%; height: 100px; background-color: #09f;} /* %라 가변적(현재 body에 따라). 창크기 바꾸면 바뀜. */
        /* .box2 {width: 50%; height: 50%; background-color: #09f;} 일반적으로 block레벨의 태그들의 높이는 %로 작성하지 않음. */
        /* 요소의 크기값은 콘텐츠크기 + 패딩 + 테두리 */
        .box3 {width: 100px; height: 100px; padding: 10px; border: 5px solid black; background-color: #af0;}
    </style>
</head>
<body>
    <div class="box1"></div>    
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

 

width-height.html

-> box2 width값이 %라서 창크기에 따라 출력화면이 가변적으로 바뀜.

-> 요소의 크기값은 콘텐츠크기 + 패딩 + 테두리 ★★★

 

        8.1 CSS와 박스 모델

 

       태그가 가지고 있는 배치 속성 display

        inline block

 

        블록레벨요소: p div hn hr ul li

        > 크기 조절 가능

        인라인레벨요소: span input button img mark b em i

        > 크기 조절 가능

 

        lnline-block 가로배치가능한데 크기조정도 가능

 

        tag element

        요소의 실제 너비 계산

 

        display: none | inline | block | inline-block | contents | table | table-cell | table-row | list-item

        앞 네 가지 중요

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        ul {list-style: none; background-color: #09f; padding: 20px; text-align: center;} /* 얘가 블록(마진이 있음)이라 정렬은 여기서 해야함. */
        ul li {display: inline; margin: 20px;} /* 중요부분 inline-block을 더 많이 씀. */
        ul li a {text-decoration: none; color: #eee; font-size: 14px; font-weight: bold;}
        ul li a:hover {color: #ff0;}
        /* 인라인 이용해서 정리한 것 */
        /* 실제 작업할 때는 클래스 이름 지어서 할 것. */
        div {width: 100px; height: 100px;}
        .box1 {background: #f66;}
        .box2 {background: #66f;}
        .box3 {background: #6a6;}

        .dis {display: none;} /* 얘를 많이 씀 */
        .vis {visibility: hidden;}
    </style>
</head>
<body>
    <ul>
        <li><a href="#">애완견 종류</a></li>
        <li><a href="#">입양하기</a></li>
        <li><a href="#">건강돌보기</a></li>
        <li><a href="#">더불어살기</a></li>
    </ul>
    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <hr>
    <div class="box1"></div>
    <div class="box2 dis"></div>
    <div class="box3"></div>
    <hr>
    <div class="box1"></div>
    <div class="box2 vis"></div>
    <div class="box3"></div>
</body>
</html>

display.html

-> ul li 기본은 세로배친데 ul li에서 display를 이용해서 가로배치 함.

-> 가운데 정렬은 ul에서 하는 것.

-> display: none은 아예 배치를 안 하는 것, visibility: hidden은 공백으로 표시.

-> display를 더 많이 씀.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        div div {width: 200px; height: 100px; display: inline-block; margin: 15px; border-width: 5px; border-style: dashed;}
        .border1 .box1 {border: 3px groove red;} /* 축약형. 보통 크기, 스타일, 색깔 순서 */
        .border1 .box2 {border-style: ridge;}
        .border1 .box3 {border-style: inset;}
        .border1 .box4 {border-style: outset;}

        .border2 .box1 {border-color:red blue;}
        .border2 .box2 {border-color: red blue black ;}
        .border2 .box3 {border-color:#f0f ; border-top-color: blueviolet; border-bottom-color: coral;
            border-top-style: double; border-bottom-style: double;
        }

        .border2 .box4 {border-color:#ddd ;
        /* border, padding, margin, border-radius */
            border-color: red blue black #eee; /* top부터 시계방향으로 */
        }
        /* none(기본값), hidden: border-collapse시 다른 테두리도 안 보임. -> 잘 안 씀. */
        .border3 .box1 {border-radius: 15px;}
        .border3 .box2 {border-top-left-radius: 20px; border-top-right-radius: 20px;}
        .border3 .box3 {border-radius: 15px 10px 30px 50px;} /* 왼쪽 위부터 시작해서 시계방향 */
        .border3 .box4 {border-top-left-radius: 100px 50px;} /* 타원 모서리 */
        .border3 .box5 {width: 100px; border-radius:50% ;border-style: solid;} /* %로 해야 깔끔한 원 됨. */
    </style>
</head>
<body>
    <h3>border style</h3>
    <div class="border1">
        <div class="box1"></div>    
        <div class="box2"></div>    
        <div class="box3"></div>    
        <div class="box4"></div>    
    </div>
    <div class="border2">
        <div class="box1"></div>    
        <div class="box2"></div>    
        <div class="box3"></div>    
        <div class="box4"></div>    
    </div>
    <h3>border radius</h3>
    <div class="border3">
        <div class="box1"></div>    
        <div class="box2"></div>    
        <div class="box3"></div>    
        <div class="box4"></div>    
        <div class="box5"></div>    
    </div>

</body>
</html>

border.html

-> border-color: 뒤 숫자 개수에 따라 어디가 칠해지는 지 확인하기.

->네 개 쓰면 top부터 시계방향으로.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        div {width: 200px; height: 100px; border: 1px solid #555; display: inline-block; margin: 10px;}
        .box1 {box-shadow: 0px 0px 10px 0px #aaa;}
        .box2 {box-shadow: -3px -3px 3px 2px pink; border-color: #faa;}
        .box3 {box-shadow: -3px -3px 3px 2px pink inset;}
    </style>
</head>
<body>
    <div class="box1"></div>    
    <div class="box2"></div>    
    <div class="box3"></div>    
</body>
</html>

shadow.html

-> 3, 4번째 숫자- 번지고 흐림 정도 같은 거..

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <style>
        * {margin: 0;} /* 초기화 */
        div {width: 300px; border: 1px solid;}
        div > * {background-color: pink; margin: 15px; padding: 10px;}
        div > span {display: inline-block;}
    </style>
</head>
<body>
    <div>
        <span>이것은 인라인 요소입니다.</span>
    </div>    
    <div>
        <p>이것은 블록 요소입니다.</p>
        <p>이것은 블록 요소입니다.</p>
        <p>이것은 블록 요소입니다.</p>
    </div>
</body>
</html>

padding.html

-> span을 inline-block 속성으로 바꿈.

 

       8-2. 테두리 관련 속성

        border-width: 크기

        border-color: 색상

        border-style: 형태 (위 예제들에 포함)

저작자표시

'HTML5' 카테고리의 다른 글

21. 02. 03. 09장 다단 편집, 표 스타일  (0) 2021.02.03
21. 02. 02. 09장- CSS 포지셔닝  (0) 2021.02.02
21. 02. 01. 07장- 색상과 배경을 위한 스타일  (0) 2021.02.02
21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일,  (0) 2021.02.01
21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일  (0) 2021.02.01

'HTML5' Related Articles

티스토리툴바