[ex21~23] CSS(display, float)

대장쿵야 2023. 4. 17. 09:43

ex21

display
- 요소의 출력 방식

    1. none
    2. inline
    3. block
    4. inline-block

-블럭 태그의 display 기본값: block / 인라인 태그는 inline
-서로 바꿀 수 있음. 인라인 block으로 바꾸면 width, height 지정 가능(inline에 지정하면 안먹힘)

- inline-block > 인라인 태그처럼 출력 + 너비/높이 지정 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box {
            border: 1px solid black;
            display: none; 
            width: 200px;
            height: 100px;
        }

        .link {
            border: 1px solid black;
            display: block; 
            width: 200px;
            height: 100px;
        }

        #menu {
            /* border: 5px solid blue; */
            padding: 0px; /* inspector로 확인*/
        }
        
        #menu li {
            border: 3px solid red;
            display: inline-block;
            width: calc(20% - 16px); /* 계산 함수로 화면 꽉채우기 (주의점: 띄어쓰기 해야됨) */
            text-align: center;
            padding: 5px;
            cursor: pointer; /* 커서 모양 설정 */
        }
        
        #menu li:hover {
            background-color: yellow;
        }


    </style>
</head>
<body>
    <!-- ex21_display.html -->

    <!-- 메뉴 만들기 -->
    <ul id="menu">
        <li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li>
    </ul>

    <h1>블럭 태그</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box1" class="box">상자2</div>
    <div id="box1" class="box">상자3</div>

    <h1>인라인 태그</h1>
    <a href="#" id="link1" class="link">링크1</a>
    <a href="#" id="link1" class="link">링크2</a>
    <a href="#" id="link1" class="link">링크3</a>
</body>
</html>

화면

Document

블럭 태그

상자1

상자2

상자3

인라인 태그

링크1 링크2 링크3

ex22

float
- 원래 출력되던 위치를 벗어나, 라인의 맨 왼쪽(오른쪽) 끝으로 이동
- none(default), left, right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #name1 {
            color: blue;
            background-color: yellow;
            float: right;
        }
        
        #name2 {
            color: blue;
            background-color: yellow;
            float: left;
        }

    </style>
</head>
<body>
    <!-- ex22_float.html -->
    <p>안녕하세요. <span id="name1">홍길동</span>입니다. 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 <span id="name2">아무개</span> 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터.</p>


</body>
</html>

화면

Document

안녕하세요. 홍길동입니다. 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 아무개 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터.

이미지에 적용했을때(float 안하면 이미지 옆으로 공백생김)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #pic {
            float: left;
        }

        #title {
            color: #555;
            /* small-caps : 소문자를 작은 대문자로 출력 */
            font-variant: small-caps; 
            border-bottom: 1px dashed #999;
            /* background-color: red; */
        }

        #title > span {
            color: tomato
        }

        #title > small {
            font-size: 1rem;
            /* background-color: yellow; */
            /* text-align: right; */ /* 인라인 태그 > 정렬 못함 */
            float: right;
            margin-top: 15px; /* 아래로 */
        }

    </style>
</head>
<body>
    <!-- ex22_float.html -->

    <h1 id="title">
        <span>M</span>ember list
        <small>Table Design</small>
    </h1>

    <p>안녕하세요. <span id="name1">홍길동</span>입니다. 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 <img src="images/man_01.png" id="pic">더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 <span id="name2">아무개</span> 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터.</p>


</body>
</html>

float 적용 화면

Document

Member list Table Design

ex23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #menu {
            background-color: orange;
            width: 600px;
            height: 100px;
        }

        #submenu {
            background-color: gold;
            width: 150px;
            height: 300px;
            float: left;
        }

        #content {
            background-color: cornflowerblue;
            width: 450px;
            height: 300px;
            float: left;
        }

        #footer {
            background-color: greenyellow;
            /* clear: float에 의한 현상 제거(블럭 태그에만 사용 가능) */
            clear: left;
            width: 600px;
            height: 100px;
        }

        /* 콘텐츠 블럭 밑으로 내려가게 하지 않기 위해 부모태그(main)로 묶어줌 */
        #main {
            /* width 600으로 고정 > 화면 축소시켜도 빠져나가지 X */
            width: 600px; 
            /* border: 10px solid black; */
        }

        /* 이미지 사이사이 공백 사라짐 */
        img {
            float:left;
        }


    </style>
</head>
<body>
    <!-- ex23_float.html -->

    <h1>페이지 레이아웃</h1>

    <div id="main"> 
    <div id="menu">주메뉴(orange)</div>
    <div id="submenu">보조메뉴(yellow)</div>
    <div id="content">콘텐츠(blue)</div>
    <div id="footer">하단(green)</div>
    </div>

    <h1>인라인 요소 배치</h1>

    <img src="images/rect_icon01.png">
    <img src="images/rect_icon02.png">
    <img src="images/rect_icon03.png">
    <img src="images/rect_icon04.png">
    <img src="images/rect_icon05.png">

    <!-- float 성질 제거 : 새로운 div를 생성해서 clear 부여 -->
    <!-- 버튼 1,2 위로 올라가지 않음 & 버튼 한줄에 출력 -->
    <div style="clear:left;"></div>

    <button>버튼1</button>
    <button>버튼2</button>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

화면(수정**)