cat imagesize:300x200

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>

            *{box-sizing: border-box;}
            div{border: 1px solid black;}
            .wrapper{
                margin: auto;
                position: relative;
            }
            .box1{
                width:300px;
                height: 200px;
                position: absolute;
                top: 270px;
                left: 350px;
            }
            .box2{
                width:300px;
                height: 200px;
                position: absolute;
                top: 150px;
                left: 200px;
                z-index: 1;
            }

            .box3{
                width:300px;
                height: 200px;
                position: absolute;
                top: 100px;
                left: 400px;
                z-index: 2;
            }
            .cat1{
                width:100%;
                height: 100%;
            }
            .cat2{
                width:100%;
                height: 100%;
            }
            .cat3{
                width:100%;
                height: 100%;
            }
            .txt{
                background-color: white;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box1">
                <img src="cat1.jpg" class="cat1">
                <div class="txt">Cat 1</div>
            </div>
            <div class="box2">

                <img src="cat2.jpg" class="cat2">
                <div class="txt">Cat 2</div>
            </div>
            <div class="box3">

                <img src="cat3.jpg" class="cat3">
                <div class="txt">Cat 3</div>
            </div>
        </div>
    </body>
</html>

사이드 메뉴바 만들기

추가한 코드

            .sidemenu{
                border: 1px solid black;
                width: 100px;
                height: 200px;
                position: fixed;
                top: 300px

            }

            .smenu>li{
                list-style: none;
                width:100%;
                text-align: center;
                background-color: black;
                line-height: 50px;
            }
            .smenu>li>a{
                color: white;
                text-decoration: none;
            }
            .smenu>li:hover{
                background-color: dimgray;
            }
        <div class="sidemenu">
            <ul class="smenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">AboutUs</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

전체코드

더보기 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
                margin: auto;
                text-align: center;
                padding: 0px;
            }
            div{
                /*                border: 1px solid black;*/
            }
            .wrapper{
                width: 1000px;
                height: 600px;
            }
            .sidemenu{
                border: 1px solid black;
                width: 100px;
                height: 200px;
                position: fixed;
                top: 300px

            }

            .smenu>li{
                list-style: none;
                width:100%;
                text-align: center;
                background-color: black;
                line-height: 50px;
            }
            .smenu>li>a{
                color: white;
                text-decoration: none;
            }
            .smenu>li:hover{
                background-color: dimgray;
            }

            .header{height: 15%;}
            .naviline{height: 5%;}
            .navi{
                height: 100%;
            }
            .contents{height: 70%;}

            .footer{
                height: 10%; 
                border-bottom: 1px solid black;
                border-top: 1px solid black;
            }
            .left{
                width: 70%;
            }
            .right{
                width: 30%;
            }
            .header>.layout{
                height: 100%;
                float: left;
            }
            .logo{width: 15%;}
            .title{
                width: 70%;
                line-height: 90px;
            }
            .reserve{width: 15%;}
            .contents>.layout{
                height: 100%;
                float: left;
            }
            .navi>li{
                float:left;
                list-style: none;
                width:25%;
                text-align: center;
                background-color: black;
                line-height: 28px;
                /*                px 말고 %로는?*/
            }
            .navi>li>a{
                color: white;
                text-decoration: none;
                /*width: 100%;*/ 
                /*인라인 속성이라 넓이 조절 불가*/
                display: block;
            }
            .navi>li:hover{
                background-color: dimgray;
            }
            .idpw{
                float: left;
                height: 100%;
                width:65%;
            }
            .idpw>.idbox{
                height: 50%;
            }
            .idpw>.pwbox{
                height: 50%;
            }

            .id{
                width:100%;
                height: 100%;
                font-size: 100%;
                border: none;
                border-bottom: 1px solid black;
            }
            .pw{
                width:100%;
                height: 100%;
                font-size: 100%;
                border: none;
                border-bottom: 1px solid black;
            }
            .login{
                float: left;
                width:35%;
                height: 100%;
                padding: 8px 8px;
            }
            .button{
                border: 1px solid black;
                background-color: white;
                color: black;
                border-radius: 5px;
                padding: 8px 15px;
                font-size: 15px;       
            }
            .loginbox{
                width: 100%;
                height: 50px;
            }
            .banner{
                padding: 150px
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="logo layout">Logo</div>
                <div class="title layout">
                    <img src="car2.jpg" width=100%  height=100%>
                </div>
                <div class="reserve layout">Reserved</div>
            </div>
            <div class="naviline">
                <ul class="navi">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">AboutUs</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="contents">
                <div class="left layout">Left</div>
                <div class="right layout">
                    <div class="loginbox">
                        <div class="idpw">
                            <div class="idbox">
                                <input type="text" class="id" placeholder="ID를 입력하세요">
                            </div>
                            <div class="pwbox">
                                <input type="password" class="pw" placeholder="PW를 입력하세요">
                            </div>
                        </div>

                        <div class="login">
                            <input type="button" value="Login" class="button">
                        </div>
                    </div>
                    <div class="banner">
                        banner
                    </div>
                </div>
            </div>

            <div class="footer">Footer
            </div>    

        </div>
        <div class="sidemenu">
            <ul class="smenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">AboutUs</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

 

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] 수직 정렬 - transform:translate()  (0) 2020.04.07
[CSS] Transform  (0) 2020.04.07
[CSS] Positioning - position: fixed  (0) 2020.04.07
[CSS] z-index  (0) 2020.04.07
[CSS] Positioning - position: absolute  (0) 2020.04.07

position : fixed

자기혼자 body를 기준으로 위치

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{box-sizing: border-box;}
            div{border: 1px solid black;}
            .wrapper{
                width: 300px;
                height: 3000px;
                margin: auto;
                position: relative;
            }
            .box1{
                width:100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
                background-color: pink;
            }
            .box2{
                width:100px;
                height: 100px;
                position: absolute;
                top: 100px;
                left: 100px;
                background-color: dodgerblue;
            }

            .box3{
                width:100px;
                height: 100px;
                position :fixed;
                top: 100px;
                left: 100px;
                background-color: beige;
                left: 100px;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box1">
            </div>
            <div class="box2">
            </div>
            <div class="box3">
            </div>
        </div>
    </body>
</html>

스크롤을 내릴때 따라옴

 

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] Transform  (0) 2020.04.07
[CSS] 예제 (z-index , position) - 겹친사진, 사이드바  (0) 2020.04.07
[CSS] z-index  (0) 2020.04.07
[CSS] Positioning - position: absolute  (0) 2020.04.07
[CSS] Positioning - position: relative  (0) 2020.04.07 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;
            height: 300px;
            margin: auto;
            position: relative;
        }
        .box1{
            width:100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: pink;
        }
        .box2{
            width:100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: dodgerblue;
        }
        
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">
        </div>
        <div class="box2">
        </div>
    </div>
</body>
</html>

위로 올라오는 순서 바꾸기

1) 태그위치 바꾸기

2) z-index

 

z축은 앞뒤를 가르킴

        .box1{
            width:100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: pink;
            z-index: 1;
        }

        .box1{
            width:100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: pink;
            z-index: 1;
        }
        .box2{
            width:100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: dodgerblue;
            z-index: 5;
        }

margin을 사용하는 경우 주변이 밀리는 듯한 효과

 

positioning을 사용하면 개별적으로

 

 

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] 예제 (z-index , position) - 겹친사진, 사이드바  (0) 2020.04.07
[CSS] Positioning - position: fixed  (0) 2020.04.07
[CSS] Positioning - position: absolute  (0) 2020.04.07
[CSS] Positioning - position: relative  (0) 2020.04.07
[CSS] overflow-y: auto  (0) 2020.04.07

absolute

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;height: 300px;margin: auto;
        }
        .box1{
            width:100px;
            height: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">
        </div>
    </div>
</body>
</html>

        .box1{
            width:100px;
            height: 100px;
            position: absolute;
            top: 30px;
            left: 30px;
        }

position: absolute

  • top / left / bottom / right 를 통해 위치 조정이 가능한 Positioning
  • Nomal Flow 무관하게 Positioned Parent Element를 기준으로 위치를 조정할 수 있음

positioning이 되지 않은 (static) parent는 위치 기준이 되지 못함

자신에게 가장 근접한 static이 아닌 parent를 기준으로 함

static이 아닌 parent가 없다면 body를 기준으로

 

        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;
            height: 300px;
            margin: auto;
            position: relative;
        }
        .box1{
            width:100px;
            height: 100px;
            position: absolute;
            top: 30px;
            left: 30px;
        }

위치 잡을 때에는 relative보다 absolute가 더 편하다.

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] Positioning - position: fixed  (0) 2020.04.07
[CSS] z-index  (0) 2020.04.07
[CSS] Positioning - position: relative  (0) 2020.04.07
[CSS] overflow-y: auto  (0) 2020.04.07
[CSS] Layout  (0) 2020.04.06 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;height: 300px;
        }
        .box{
            width:100px;height: 100px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
        </div>
    </div>
</body>
</html>

작은 box의 위치를 옮기고 싶을때

margin, padding -> 이동보다는 크기가 커졌다는 개념 -> 다른 문제가 발생 할수도 있음

Positioning

 

static (default)

  • HTML Element가 기본으로 가지는 위치설정
  • Nomal Flow 영역의 기본규칙에 따라 배치 됨

relative

  • 기본적으로 Nomal Flow 규칙에 따라 요소가 원래 있어야 하는 위치로부터
  • Top /  Left / bottom / right 속성을 이용하여 위치를 조정할 수 있다.

absolute

fixed

relative

        .box{
            width:100px;
            height: 100px;
            position: relative;
            top:20px;
            left: 20px;
        }

relative - '원래 있어야 하는 위치'로부터 이동한다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;height: 300px;
        }
        .box1{
            width:100px;
            height: 100px;
        }
        .box2{
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">
        </div>
        <div class="box2">
        </div>
    </div>
</body>
</html>

        .box2{
            width:100px;
            height: 100px;
            position: relative;
            top: 20px;
        }

        .box2{
            width:100px;
            height: 100px;
            position: relative;
            bottom: 20px;
        }

 

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] z-index  (0) 2020.04.07
[CSS] Positioning - position: absolute  (0) 2020.04.07
[CSS] overflow-y: auto  (0) 2020.04.07
[CSS] Layout  (0) 2020.04.06
[CSS] Internal Style, External Style, 선택자  (0) 2020.04.03

 

데이터가 div를 벗어날때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{width: 300px;height: 200px;margin: auto;}
        table{
            width: 100%;
            border:1px dotted red;
            
        }
        table tr{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <table border="1">
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
            <tr>
                <td>Data~~~~~~~~~~~~~</td>
            </tr>
        </table>
        
    </div>
</body>
</html>

overflow: hidden

        .wrapper{
            width: 300px;
            height: 200px;
            margin: auto;
            overflow: hidden;
        }

overflow: hidden보다는 스크롤

        .wrapper{
            width: 300px;
            height: 200px;
            margin: auto;
            overflow: scroll;
        }

횡방향 스크롤 필요 없음 - overflow-y: scroll;

       .wrapper{
            width: 300px;
            height: 200px;
            margin: auto;
            overflow-y: scroll;
        }

내용이 적을때는 스크롤이 없다 많아지면 생기는 - overflow-y: auto;

        .wrapper{
            width: 300px;
            height: 200px;
            margin: auto;
            overflow-y: auto;
        }

 

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] Positioning - position: absolute  (0) 2020.04.07
[CSS] Positioning - position: relative  (0) 2020.04.07
[CSS] Layout  (0) 2020.04.06
[CSS] Internal Style, External Style, 선택자  (0) 2020.04.03
[HTML] form  (0) 2020.04.03

선택자 우선순위

!important > ID > CLASS > TAG

 

Inline CSS > Internal CSS > External CSS

 

ID선택자보다 인라인 스타일이 강력

 

CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요,
CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다.

우선순위는 아래와 같습니다.

  1. 속성 값 뒤에 !important 를 붙인 속성
  2. HTML에서 style을 직접 지정한 속성
  3. #id 로 지정한 속성
  4. .클래스, :추상클래스 로 지정한 속성
  5. 태그이름 으로 지정한 속성
  6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다.

동일한 선택자로 다른 스타일을 입히는 경우

나중에 적용되는 스타일이 덮어쓰기 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border:1px solid green ;
        }
        div{
            border:1px solid blue ;
        }
    </style>
</head>
<body>
    <div id=A class=B></div>
</body>
</html>

CSS Optimizer 로 최적화 하기

Layout 구성하기

 

 

웹페이지 Layout 구성 주요 태그 : DIV / SPAN

 

CSS는 display 속성을 가진다

        block속성 : 무조건 한 줄을 독차지(넓이값 100%)
                width와 height 조정이 가능
                대표 태그 : div
        inline속성 : 자신이 가진 내용만큼의 넓이만 가짐
                    width / height 조정이 불가
                    대표 태그 : span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border:1px solid black;
            width: 100px;
            height: 100px;
        }
/*       div의 기본값: 높이 0 , 넓이 브라우저100%*/
/*       CSS는 display 속성을 가진다
        block속성 : 무조건 한 줄을 독차지(넓이값 100%)
                width와 height 조정이 가능
                대표 태그 div
                (자신의 넓익와 상관없이 자신이 가진 줄들을 독차지)
        inline속성 : 자신이 가진 내용만큼의 넓이만 가짐
                    width / height 조정이 불가
                    대표 태그 span*/
        span{
            border:1px solid red;
            width: 100px;
            height: 100px;
        }
/*        span : 넓이 0 , 높이*/
    </style>
</head>
<body>
<!--    웹페이지 Layout 구성 주요 태그 : DIV / SPAN-->
    <div>ABC</div>
    <div>DEF</div>
    <span>ABC</span>
    <span>DEF</span>
</body>
</html>

block속성을 가진 요소들은 자신의 줄을 독차지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border:1px solid black;
            width: 100px;
            height: 100px;
/*          display:block; 기본값*/
            display:inline;
        }
        span{
            border:1px solid red;
            width: 100px;
            height: 100px;
/*          display:inline; 디폴트*/
            display:block;
        }
    </style>
</head>
<body>
    <div>ABC</div>
    <div>DEF</div>
    <span>ABC</span>
    <span>DEF</span>
</body>
</html>

디스플레이 속성 inline, block 변경

span을 사용하는 경우 display:inline-block을 쓰고 공백을 지운다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border:1px solid black;
            width: 100px;
            height: 100px;
        }
        span{
            border:1px solid red;
            width: 100px;
            height: 100px;
            display:inline-block;
        }

    </style>
</head>
<body>
    <div>ABC</div>
    <div>DEF</div>
    <span>ABC</span>
    <span>DEF</span>
</body>
</html>

inline-block : 번거롭게도 공백이 생긴다.

div에서 행방향으로 나누기는 쉽다

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div{
                border: 1px dotted black;
            }
            #warpper{
                margin: auto;
                width: 1000px;
            }
            #header{
                height: 100px;
            }
            #contents{
                height: 300px;
            }
            #footer{
                height: 100px
            }

        </style>
    </head>
    <body>
        <div id=wrapper>
            <div id=header>Header</div>
            <div id=contents>Contents</div>
            <div id=footer>Footer</div>
        </div>
    </body>
</html>

div를 사용하여 열방향 분할하기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div{
                width:100px;
                height:100px;
                border: 1px solid black;
            }
            #box1{
                float: left;
            }
        </style>
    </head>
    <body>
        <div id ="box1">1</div>
        <div id ="box2">2</div>
<!--Nomal Flow : Tag를 작성했을 때 기본적으로 Element가 놓여지는 평면-->
    </body>
</html>

Nomal Flow : Tag를 작성했을 때 기본적으로 Element가 놓여지는 평면

 

float area에서는 block속성이 적용되지 않음

원래 float의 목적은 아니지만 해키한 효과.

 

문제 발생 : float를 사용했는데 원하는 결과가 아님

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
            float: left;
        }
        #wrapper{
            margin: auto;
            width:1000px;
            height:600px;
        }
        #left{
            width:10%;
/*            부모의 10% - 1000px의 10%, 100px*/
            height: 100%;
        }
        #center{
            width:70%;
            height: 100%;
        }
        #right{
            width:20%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

아래의 20%짜리가 떨어진 이유?

테두리가 1px을 차지

width 내부 영역 + 테두리 바깥px

1) 레이아웃 잡을 때마다 테두리*2만큼 빼주기

2) 테두리를 안으로 넣기

box-sizing: border-box - 테두리 두께를 내부로

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
            float: left;
            box-sizing: border-box;
        }
        #wrapper{
            margin: auto;
            width:1000px;
            height:600px;
        }
        #left{
            width:10%;
            height: 100%;
        }
        #center{
            width:70%;
            height: 100%;
        }
        #right{
            width:20%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

class 여러개 적용 :  띄어쓰기로 구분

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{box-sizing: border-box;}
            div{
                border: 1px dotted black;
            }
            .wrapper{
                width: 1000px;
                height: 600px;
            }
            .header{height:15%}
            .contents{height:70%}
            .footer{height:15%}
            .left{width:30%}
            .right{width:70%}
            .contents>.layout{
                float: left;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="contents">
                <div class="left layout"></div>
                <div class="right layout"></div>
            </div>
            <div class="footer"></div>
        </div>
    </body>
</html>

예제] div활용

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{box-sizing: border-box;
                margin: auto;}
            div{
                border: 1px solid black;
                text-align: center;
            }
            .wrapper{
                width: 1000px;
                height: 600px;
            }
            .header{height: 15%;}
            .navi{height: 5%;}
            .contents{height: 70%;}
            .footer{height: 10%;}
            .header>.layout{
                height: 100%;
                float: left;
            }
            .logo{width: 15%;}
            .title{width: 70%;}
            .reserve{width: 15%;}
            .contents>.layout{
                height: 100%;
                float: left;
            }
            .login{width: 30%;}
            .main{width: 70%;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="logo layout">Logo</div>
                <div class="title layout">Title</div>
                <div class="reserve layout">Reserve</div>
            </div>
            <div class="navi">Navi</div>
            <div class="contents">
                <div class="login layout">Left</div>
                <div class="main layout">Right</div>
            </div>
            <div class="footer">Footer
            </div>
        </div>

    </body>
</html>

수평 가운데 정렬

 

line-height : 한줄만쓰는 경우, 높이값이 동적이지 않고 px값인 경우

           .title{
                width: 70%;
                line-height: 90px;
            }

margin 여백

 

margin : auto는 수평만 적용 (위아래로는 길이가 무한이므로 적용되지 않음)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border:1px solid black;}
        .wrapper{
            margin-top: 50px;
            margin: auto;
            width: 200px;
            height: 200px;
        }
        .box{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            
        </div>
    </div>
</body>
</html>

 

overflow 속성 

내용물이 자신의 영역을 벗어날때 조치할 방법을 정해주기

 

overflow: hidden

벗어난 내용을 숨겨라

-> 해키한 용법 : 자신의 높이를 벗어났지만 보여짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .navi{
            border: 1px solid black;
            overflow: hidden;
        }
        .navi>li{
            float:left;
            border: 1px solid red;
            list-style: none;
            width:25%;
        }
    </style>
</head>
<body>
    
    <ul class="navi">
       <li>Home</li>
       <li>AboutUs</li>
       <li>Portfolio</li>
       <li>Contact</li>
    </ul>
    
</body>
</html>

 

옆에 마진이 생긴 이유?

옆에 공백이 생긴 이유?

1) Home의 left마진 -> 다른 li태그 들에는 같은 문제 없음

2) 바깥 element가 내부에 padding을 넣어준 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .navi{
            border: 1px solid black;
            overflow: hidden;
            padding: 0px;
        }
        .navi>li{
            float:left;
            border: 1px solid red;
            list-style: none;
            width:25%;
        }
    </style>
</head>
<body>
    
    <ul class="navi">
       <li>Home</li>
       <li>AboutUs</li>
       <li>Portfolio</li>
       <li>Contact</li>
    </ul>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .navi{
            overflow: hidden;
            padding: 0px;
        }
        .navi>li{
            float:left;
            list-style: none;
            width:25%;
            text-align: center;
            background-color: black;
        }
        .navi>li>a{
            color: white;
            text-decoration: none;
        }
        .navi>li:hover{
            background-color: dimgray;
        }
    </style>
</head>
<body>
    
    <ul class="navi">
       <li><a href="#">Home</a></li>
       <li><a href="#">AboutUs</a></li>
       <li><a href="#">Portfolio</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    
</body>
</html>

텍스트가 들어있는 칸도 클릭 가능하도록 변결

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
            }
            .navi{
                overflow: hidden;
                padding: 0px;
            }
            .navi>li{
                float:left;
                list-style: none;
                width:25%;
                text-align: center;
                background-color: black;
            }
            .navi>li>a{
                color: white;
                text-decoration: none;
                border: 1px solid red;
                /*width: 100%;*/ 
                /*인라인 속성이라 넓이 조절 불가*/
                display: block
            }
            .navi>li:hover{
                background-color: dimgray;
            }
        </style>
    </head>
    <body>

        <ul class="navi">
            <li><a href="#">Home</a></li>
            <li><a href="#">AboutUs</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

    </body>
</html>

기존 예제에 .navi 넣기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
                margin: auto;
                text-align: center;
                padding: 0px;
                /*                overflow: hidden;*/
            }
            div{
                border: 1px solid black;
            }
            .wrapper{
                width: 1000px;
                height: 600px;
            }
            .header{height: 15%;}
            .naviline{height: 5%;}
            
            .navi{
                height: 100%;
                
                
                
            }

            .contents{height: 70%;}

            .footer{
                height: 10%; 
            }
            .left{
                width: 70%;
            }
            .right{
                width: 30%;
            }
            .header>.layout{
                height: 100%;
                float: left;
            }
            .logo{width: 15%;}
            .title{
                width: 70%;
                line-height: 90px;
            }
            .reserve{width: 15%;}
            .contents>.layout{
                height: 100%;
                float: left;
            }
            .navi>li{
                float:left;
                list-style: none;
                width:25%;
                text-align: center;
                background-color: black;
                line-height: 28px;
/*                px 말고 %로는?*/
            }
            .navi>li>a{
                color: white;
                text-decoration: none;
                /*width: 100%;*/ 
                /*인라인 속성이라 넓이 조절 불가*/
                display: block;
                
                    
            }
            .navi>li:hover{
                background-color: dimgray;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="logo layout">Logo</div>
                <div class="title layout">Title</div>
                <div class="reserve layout">Reserved</div>
            </div>
            <div class="naviline">
                <ul class="navi">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">AboutUs</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="contents">
                <div class="left layout">Left</div>
                <div class="right layout">Right</div>
            </div>

            <div class="footer">Footer
            </div>

        </div>

    </body>
</html>

로그인 박스

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
                margin: auto;
            }
            .wrapper{
                height: 50px;
                width: 150px;
                border : 1px solid black;
            }
            .idpw{
                float: left;
                height: 100%;
                width:65%;
            }
            
            .idpw>.idbox{
                height: 50%;
            }
            .idpw>.pwbox{
                height: 50%;
            }
            
            .id{
                width:100%;
                height: 100%;
            }
            .pw{
                width:100%;
                height: 100%;
            }
            .login{

                border : 1px solid black;
                float: left;
                width:35%;
                height: 100%;
                padding: 8px 8px;
            }
            .button{
                border: none;
                background-color: black;
                color: white;
                border-radius: 5px;
                padding: 10px 5px;
                font-size: 10px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">

            <div class="idpw">
                <div class="idbox">
                    <input type="text" class="id">
                </div>
                <div class="pwbox">
                    <input type="password" class="pw">
                </div>
            </div>

            <div class="login">
                <input type="button" value="Login" class="button">
            </div>
        </div>

    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
                margin: auto;
                text-align: center;
                padding: 0px;
            }
            div{
/*                border: 1px solid black;*/
            }
            .wrapper{
                width: 1000px;
                height: 600px;
            }
            .header{height: 15%;}
            .naviline{height: 5%;}
            .navi{
                height: 100%;
            }
            .contents{height: 70%;}

            .footer{
                height: 10%; 
                border-bottom: 1px solid black;
                border-top: 1px solid black;
            }
            .left{
                width: 70%;
            }
            .right{
                width: 30%;
            }
            .header>.layout{
                height: 100%;
                float: left;
            }
            .logo{width: 15%;}
            .title{
                width: 70%;
                line-height: 90px;
            }
            .reserve{width: 15%;}
            .contents>.layout{
                height: 100%;
                float: left;
            }
            .navi>li{
                float:left;
                list-style: none;
                width:25%;
                text-align: center;
                background-color: black;
                line-height: 28px;
                /*                px 말고 %로는?*/
            }
            .navi>li>a{
                color: white;
                text-decoration: none;
                /*width: 100%;*/ 
                /*인라인 속성이라 넓이 조절 불가*/
                display: block;


            }
            .navi>li:hover{
                background-color: dimgray;
            }
            .idpw{
                float: left;
                height: 100%;
                width:65%;
            }

            .idpw>.idbox{
                height: 50%;
            }
            .idpw>.pwbox{
                height: 50%;
            }

            .id{
                width:100%;
                height: 100%;
                font-size: 100%;
                border: none;
                border-bottom: 1px solid black;
            }
            .pw{
                width:100%;
                height: 100%;
                font-size: 100%;
                border: none;
                border-bottom: 1px solid black;
            }
            .login{

                float: left;
                width:35%;
                height: 100%;
                padding: 8px 8px;
            }
            .button{
                border: 1px solid black;
                background-color: white;
                color: black;
                border-radius: 5px;
                padding: 8px 15px;
                font-size: 15px;       
            }
            .loginbox{
                
                width: 100%;
                height: 50px;
            }
            .banner{
                
                padding: 150px
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="logo layout">Logo</div>
                <div class="title layout">
                  <img src="car2.jpg" width=100%  height=100%>
                </div>
                <div class="reserve layout">Reserved</div>
            </div>
            <div class="naviline">
                <ul class="navi">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">AboutUs</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="contents">
                <div class="left layout">Left</div>
                <div class="right layout">
                    <div class="loginbox">
                        <div class="idpw">
                            <div class="idbox">
                                <input type="text" class="id" placeholder="ID를 입력하세요">
                            </div>
                            <div class="pwbox">
                                <input type="password" class="pw" placeholder="PW를 입력하세요">
                            </div>
                        </div>

                        <div class="login">
                            <input type="button" value="Login" class="button">
                        </div>
                    </div>
                    <div class="banner">
                        banner
                    </div>
                </div>
            </div>

            <div class="footer">Footer
            </div>

        </div>

    </body>
</html>

 

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] Positioning - position: relative  (0) 2020.04.07
[CSS] overflow-y: auto  (0) 2020.04.07
[CSS] Internal Style, External Style, 선택자  (0) 2020.04.03
[HTML] form  (0) 2020.04.03
[HTML] Web-FrontEnd  (0) 2020.04.01

<p> 단락 나누기

 

단순 리터럴 상수는 스타일시트나 자바스크립트가 건드릴 수 없음

-> <p>로 감싸주기

 

폰트 태그로 꾸미지 않고 스타일태그로 꾸미는 것이 웹표준

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--   CSS : cascade style sheet-->
    <p style="color: red;">Welcome to Style sheet</p>
<!-- Inline Style 방식 -->
</body>
</html>

Inline Style

HTML 코드와 섞여서 가독성 불리, 우선순위 높아야 하는 특수한 경우에만 사용

 

Internal Style

 

태그 선택자

앞에 아무것도 안붙임 p{}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
        <style>
            /*    Internal Style*/
            /*    Head 영역 내부에 Style 영역을 구성하여 Style을 작성하는 방식    */
            /*    Internal 방식은 Selector 라는 문법을 사용하여 Element에 접근    */
            p{
                color:blue;
            }
        </style>
    </head>
    <body>
        <!--   CSS : cascade style sheet-->
        <p>Welcome to Style sheet</p>
        <p>Collaborate with HTML</p>
        <!-- Inline Style 방식 -->
        <!-- 태그 내부에 속성값으로써 Style을 작성하는 방식-->
    </body>
</html>

Internal Style : 너무 길어짐

 

External Style

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
<!--        External Style-->
<!--       Style 코드가 너무 많을 시 가독성이 떨어지므로 CSS 파일을 따로 생성하며 Import하는 방식-->
        <link href ="Style.css" rel=stylesheet>
        
        <style>
            /*    Internal Style*/
            /*    Head 영역 내부에 Style 영역을 구성하여 Style을 작성하는 방식    */
            /*    Internal 방식은 Selector 라는 문법을 사용하여 Element에 접근    */
      
        </style>
    </head>
    <body>
        <!--   CSS : cascade style sheet-->
        <p>Welcome to Style sheet</p>
        <p>Collaborate with HTML</p>
        <!-- Inline Style 방식 -->
        <!-- 태그 내부에 속성값으로써 Style을 작성하는 방식-->
    </body>
</html>

CSS 선택자 종류

 

ID 선택자  #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #myID{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>Tag</p>
    <p>Tag</p>
    <p id="myID">ID</p>
</body>
</html>

 

식별자는 중복을 허용하지 않음

but, CSS에서는 에러나지 않음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #myID{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p id="myID">Tag</p>
    <p id="myID">Tag</p>
    <p id="myID">ID</p>
</body>
</html>

하지만 그래도 ID를 중복시켜서 쓰지 말것

-> 어딘가에서 반드시 오동작이 일어난다.

그래도 같은 스타일을 여러개에 주고 싶을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #myID1{
            background-color: pink;
        }
        #myID2{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>Tag</p>
    <p id="myID1">Tag</p>
    <p id="myID2">ID</p>
</body>
</html>

코드가 길어질수록 작업하기 어려워짐

class

class 선택자  .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .styled{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>Tag</p>
    <p class="styled">Tag</p>
    <p class="styled" id="myID">ID</p>
</body>
</html>

Class와 ID 차이

  • ID는 고유한 값으로 중복시키지 못함
  • Class는 하나의 카테고리

NAME

 

속성 선택자

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*    속성 선택자*/
            p[name=n2]{ ;
                border:1px solid blue;
            }
        
            p[class = A]{
                border:1px solid pink;
            }
       
            input[type =password]{
               background-color: antiquewhite;
            }
   
        </style>
    </head>
    <body>

        <!--    ID - 특정 대상 / CLASS - 특정 묶음 / NAME -특정 엘레먼트를 지정+특이한 기능 -->
        <!--name은 form태그와 쓰임 - 서버에 데이터를 보낼때 데이터의 이름 (Key값)  -->

        <p name=n1 class="A">AAA</p>
        <p name=n2>BBB</p>
        <p name=n3>CCC</p>
        <input type=text>
        <input type=password>

    </body>
</html>

속성은 마음대로 부여도 가능 (기능은 없지만)

만들어서 부여한 속성을 기준으로도 속성선택자로 선택 가능

띄어쓰기로 구분되어지는 단어 검색  ~=

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        /*  ~= : 띄어쓰기로 정확히 구분되는 단어가 포함되는 대상 선택*/
            p[name~=Test]{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <p name="Test1" class="class=c1">TEST</p>
        <p name="Test 2" class=c1>TEST</p>
        <p name="Test 3" class=c1>TEST</p>
        <p name="Test 4" class=c2>TEST</p>
        <p name="Test 5" class=c2>TEST</p>
        <p name="Test 6" class="class-c2">TEST</p>
    </body>
</html>

포함만 되면 다 선택  *=

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        /*  *= : 구분되지 않아도 단어가 포함되는 대상 선택*/
            p[name*=Test]{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <p name="Test1" class="class=c1">TEST</p>
        <p name="Test 2" class=c1>TEST</p>
        <p name="Test 3" class=c1>TEST</p>
        <p name="Test 4" class=c2>TEST</p>
        <p name="Test 5" class=c2>TEST</p>
        <p name="Test 6" class="class-c2">TEST</p>
    </body>
</html>

~= : 띄어쓰기로 정확히 구분되는 단어가 포함되는 대상 선택

*= : 구분되지 않아도 단어가 포함되는 대상 선택

^= : 속성값이 단어로 시작하는 대상 선택

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
/*  ^= : 속성값이 단어로 시작하는 대상 선택*/
            p[name^=Test]{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <p name="Test1" class="class=c1">TEST</p>
        <p name="CSS Test 2" class=c1>TEST</p>
        <p name="Test 3" class=c1>TEST</p>
        <p name="Test 4" class=c2>TEST</p>
        <p name="Test 5" class=c2>TEST</p>
        <p name="Test 6" class="class-c2">TEST</p>
    </body>
</html>

 

$= : 속성값이 단어로 끝나는 대상 선택

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        /*  $= : 속성값이 단어로 끝나는 대상 선택*/
            p[name$=Test]{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <p name="Test1" class="class=c1">TEST</p>
        <p name="CSS Test 2" class=c1>TEST</p>
        <p name="CSS Test" class=c1>TEST</p>
        <p name="Test 4" class=c2>TEST</p>
        <p name="Test 5" class=c2>TEST</p>
        <p name="Test 6" class="class-c2">TEST</p>
    </body>
</html>


            ~= : 띄어쓰기로 정확히 구분되는 단어가 포함되는 대상 선택
            *= : 구분되지 않아도 단어가 포함되는 대상 선택
            ^= : 속성값이 단어로 시작하는 대상 선택
            $= : 속성값이 단어로 끝나는 대상 선택

div

레이아웃을 잡는 표준,

테이블 보다 반응형 웹에 적합,

칸을 나눠놓는 기능

 

h4 : 제목글씨의 크기

직계 : 자손

한다리 건너서 : 후손 

 

자손 / 후손 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
<!--    자손 선택자-->
    <style>
        div>h4{
            border:1px solid dodgerblue;
        }
    </style>
    
</head>
<body>
    <div id="parent">
        <h4>자손1</h4>
        <h4>자손2</h4>
        <ul>
            <h4>후손 제목</h4>
            <li>ul태크의 자손이면서 div 태그의 후손1</li>
            <li>ul태크의 자손이면서 div 태그의 후손2</li>
        </ul>
    </div>
</body>
</html>

 

 

div>h4  자손 선택자 : div 밑의 직계 자손

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
<!--  후손 선택자-->
    <style>
        div h4{
            border:1px solid dodgerblue;
        }
    </style>
</head>
<body>
    <div id="parent">
        <h4>자손1</h4>
        <h4>자손2</h4>
        <ul>
            <h4>후손 제목</h4>
            <li>ul태크의 자손이면서 div 태그의 후손1</li>
            <li>ul태크의 자손이면서 div 태그의 후손2</li>
        </ul>
    </div>
</body>
</html>

div h4 후손선택자 : div 밑의 모든 후손

복잡한 코드 중 원하는 경로를 선택하는 용도

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <!--    원하는 경로 지정-->
        <style>
            #parent>ul>h4{
                border:1px solid dodgerblue;
            }
        </style>

    </head>
    <body>
        <div id="parent">
            <h4>자손1</h4>
            <h4>자손2</h4>
            <ul>
                <h4>후손 제목</h4>
                <li>ul태크의 자손이면서 div 태그의 후손1</li>
                <li>ul태크의 자손이면서 div 태그의 후손2</li>
            </ul>
        </div>
        
        <div>
            <h4>자손1</h4>
            <h4>자손2</h4>
            <ul>
                <h4>후손 제목</h4>
                <li>ul태크의 자손이면서 div 태그의 후손1</li>
                <li>ul태크의 자손이면서 div 태그의 후손2</li>
            </ul>
        </div>

    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <!--    위쪽 h4에만 테두리 부여하고 싶다면-->
        <style>
            #parent h4{
                border:1px solid dodgerblue;
            }
        </style>

    </head>
    <body>
        <div id="parent">
            <h4>자손1</h4>
            <h4>자손2</h4>
            <ul>
                <h4>후손 제목</h4>
                <li>ul태크의 자손이면서 div 태그의 후손1</li>
                <li>ul태크의 자손이면서 div 태그의 후손2</li>
            </ul>
        </div>
        
        <div>
            <h4>자손1</h4>
            <h4>자손2</h4>
            <ul>
                <h4>후손 제목</h4>
                <li>ul태크의 자손이면서 div 태그의 후손1</li>
                <li>ul태크의 자손이면서 div 태그의 후손2</li>
            </ul>
        </div>



    </body>
</html>

브라켓 - emmet 팁

div[name="test $"][class="test"]*6 
<!--       emmet 문법-->
       
       <div name="test 1" class="test"></div>
       <div name="test 2" class="test"></div>
       <div name="test 3" class="test"></div>
       <div name="test 4" class="test"></div>
       <div name="test 5" class="test"></div>
       <div name="test 6" class="test"></div>
       
       div[name=test$][class="test"]*6
        <div name="test1" class="test"></div>
        <div name="test2" class="test"></div>
        <div name="test3" class="test"></div>
        <div name="test4" class="test"></div>
        <div name="test5" class="test"></div>
        <div name="test6" class="test"></div>

동위 선택자

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*    동위 선택자*/
            /*    바로 뒤에 오는 하나 선택*/
            h4+p{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <div>
            <h4>자손</h4>
            <p>형제1</p>
            <p>형제2</p>
            <p>형제3</p>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*    동위 선택자*/
            /*    뒤에 있는 모든 필드 선택*/
            h4~p{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <div>
            <h4>자손</h4>
            <p>형제1</p>
            <p>형제2</p>
            <p>형제3</p>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*    동위 선택자*/
            /*    뒤에 모든 필드 선택*/
            h4+p{
                border:1px solid pink;
            }
        </style>
    </head>
    <body>
        <div>
            <h4>자손</h4>
            <p>형제1</p>
            <p>형제2</p>
            <p>형제3</p>
        </div>
        
        <div>
            <h4>자손</h4>
            <h5>자손2</h5>
            <p>형제1</p>
            <p>형제2</p>
            <p>형제3</p>
        </div>
    </body>
</html>

동위 선택자 + 는 바로 뒤의 필드 선택 / 밑의div에서 h4의 바로 뒤는 h5이므로 p필드 선택 못함

자기보다 앞쪽이나 위쪽을 선택하는 것은 스타일시트에서는 안된다.

앞쪽을 선택할때는 자바스크립트나 제이쿼리 등을 활용

반응 선택자

 

hover : 마우스오버, 마우스를 올렸을 때 일어나는 일

border-radius : 테두리 둥글게

transition-duration : 변화에 걸리는 시간

cursor : 마우스커버 모양

active : 누르고 있는 상태

margin: auto 수평상에서 여백을 자동 조정

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!--    반응 선택자-->
        <style>
        
            div{
                margin: auto
                border:1px solid dodgerblue;
                border-radius: 10px;
                transition-duration: 1s;
                text-align: center;
                width: 100px;
                color: dodgerblue;
            }
            
            div:hover{
                background-color: dodgerblue;
                cursor: pointer;
                color: white;             
            }
            
            div:active{
                background-color: gray;
            }
            
        </style>
    </head>
    <body>

        <div>Login</div>

    </body>
</html>

퀴즈1

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!--    반응 선택자-->
        <style>
            p{

            }

            p:hover{
                background-color: yellow;
                cursor: pointer;
            }

            p:active{
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <p>Test 글 입니다</p>
        <p>Test 글 입니다</p>
        <p>Test 글 입니다</p>
        <p>Test 글 입니다</p>
        <p>Test 글 입니다</p>
        <p>Test 글 입니다</p>

    </body>
</html>

퀴즈2

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <fieldset>
            <legend>당신의 입력하세요
            </legend>

            이름 : <input type=text><hr>
            나이 : <input type=text><hr>
            성별 : 
            남자<input type=radio name=gender> 
            여자<input type=radio name=gender><hr>
            취미 : 
            노래<input type = checkbox> 
            운동<input type = checkbox> 
            공부<input type = checkbox> 
            기타<input type = checkbox><hr> 

        </fieldset>
    </body>
</html>

상태 선택자

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            input{
                transition-duration: 1s;
            }
            input:checked{
                width:20px;
                height: 20px;
            }
            input:focus{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>당신의 입력하세요
            </legend>

            이름 : <input type=text><br><hr>
            나이 : <input type=text><br><hr>
            성별 : 
            남자<input type=radio name=gender> 
            여자<input type=radio name=gender><br><hr>
            취미 : 
            노래<input type = checkbox> 
            운동<input type = checkbox> 
            공부<input type = checkbox> 
            기타<input type = checkbox><br><hr> 

        </fieldset>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            option:enabled{
                background-color: pink;
            }
            option:disabled{
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>당신의 입력하세요
            </legend>

            이름 : 
            <input type="text"><br>
            나이 : 
            <select>
                <option disabled>10대</option>
                <option>20대</option>
                <option>30대</option>
                <option>40대</option>
                <option>50대</option>
                <option>60대 이상</option>
            </select>

        </fieldset>
    </body>
</html>

구조 선택자

 

쓰이는 경우에는 많이 쓰이는 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-child{
            border:1px solid pink;
        }
    </style>
</head>
<body>
    <div>
       <h3>제목</h3>
        <p>테스트입니다 1</p>
        <p>테스트입니다 1</p>
        <p>테스트입니다 1</p>
    </div>
    <div>
        <p>테스트입니다 2</p>
        <p>테스트입니다 2</p>
        <p>테스트입니다 2</p>
    </div>
</body>
</html>

 

p태그 and 첫째만 선택

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p:first-child{
                border:1px solid pink;
            }
            
            p:last-child{
                border:1px solid blue;
            }
            div:first-child{
                background-color: beige;
            }
        </style>
    </head>
    <body>
        <div>
            <p>테스트입니다 1</p>
            <h3>제목</h3>
            <p>테스트입니다 1</p>
            <p>테스트입니다 1</p>
        </div>
        <div>
            <p>테스트입니다 2</p>
            <p>테스트입니다 2</p>
            <p>테스트입니다 2</p>
        </div>
    </body>
</html>

중간필드들을 구조선택자로 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:nth-child(3){
            background-color: pink;
        }
        
        p:nth-last-child(2){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <div>
        <p>테스트 1</p>
        <p>테스트 2</p>
        <p>테스트 3</p>
        <p>테스트 4</p>
        <p>테스트 5</p>
        <p>테스트 6</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p:nth-child(3){
                background-color: pink;
            }

            p:nth-last-child(2){
                background-color: dodgerblue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>테스트 1</p>
            <p>테스트 2</p>
            <div>깍두기</div>
            <p>테스트 3</p>
            <p>테스트 4</p>
            <p>테스트 5</p>
            <p>테스트 6</p>
        </div>
    </body>
</html>

p태그 and 3째 없음

짝수 번째 / 홀수 번째

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p:nth-child(even){
                background-color: pink;
            }
            p:nth-last-child(2n-1){
                background-color: dodgerblue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>테스트 1</p>
            <p>테스트 2</p>
            <p>테스트 3</p>
            <p>테스트 4</p>
            <p>테스트 5</p>
            <p>테스트 6</p>
        </div>
    </body>
</html>

2n / 2n-1 / 3n / even

nth-of-type

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p:nth-child(2n){
                background-color: blue;
            }
            /*            p태그 이면서 2n번째*/

            p:nth-of-type(2n-1){
                background-color: pink;
            }
            /*            p태그 중에 2n-1번째*/

        </style>
    </head>
    <body>
        <div>
            <p>테스트1</p> 
            <div>테스트2</div>   
            <p>테스트3</p> 
            <div>테스트4</div>
            <p>테스트5</p> 
            <div>테스트6</div>
        </div>
    </body>
</html>

모두 선택 *{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            color: green
        }
    </style>
</head>
<body>
    <div>
        <p>Test1</p>
        <p>Test2</p>
        <p>Test3</p>
        <p>Test4</p>
        <p>Test5</p>
        <p>Test6</p>
        <p>Test7</p>
        <p>Test8</p>
        <p>Test9</p>
        <p>Test10</p>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:empty{
            width: 100px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p></p>
    <p>A</p>
    <p>B</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:not(:empty){
            width: 100px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p></p>
    <p>A</p>
    <p>B</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p:not(:nth-child(even)){
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            <p>테스트 1</p>
            <p>테스트 2</p>
            <p>테스트 3</p>
            <p>테스트 4</p>
            <p>테스트 5</p>
            <p>테스트 6</p>
        </div>
    </body>
</html>

not 짝수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:not(#target){
            width: 100px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p></p>
    <p id="target">A</p>
    <p>B</p>
</body>
</html>

똑같은 스타일을 적용하는 경우 ,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #divID1, #pID2{
                width: 100px;
                height: 20px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="divID1">A</div>
        <p id="pID1">B</p>
        <p id="pID2">C</p>
        <div id="divID2">D</div>
    </body>
</html>

div 면서 클래스 java

div.java

띄어쓰기가 들어가면 후손

(.)이 들어가면 and

(,) 들어가면 or

#은 div중 id가 java인것

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.java:nth-child(1){
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="java">A</div>
    <div class="java">B</div>
    <div class="java">C</div>
    <p class="java">D</p>
    <div class="python">G</div>
    <div class="python">H</div>
    <p class="java">E</p>
    <p class="java">F</p>
</body>
</html>

http://flukeout.github.io/

불러오는 중입니다...
더보기 
Level 1 of 32
*

Level 2 of 32
bento

Level 3 of 32
#fancy

Level 4 of 32 
plate>apple

Level 5 of 32
#fancy pickle

Level 6 of 32
.small

Level 7 of 32
orange.small

Level 8 of 32
bento>orange.small

Level 9 of 32
plate, bento

Level 10 of 32
*

Level 11 of 32
plate>*

Level 12 of 32
plate+apple

Level 13 of 32
bento~pickle

Level 14 of 32
plate>apple

Level 15 of 32
orange:nth-child(1)

Level 16 of 32
plate *:only-child

Level 17 of 32
.small:last-child 

Level 18 of 32 
plate:nth-child(3)


Level 19 of 32 
bento:nth-last-child(3)

Level 20 of 32
apple:first-of-type

Level 21 of 32
plate:nth-of-type(2n)

Level 22 of 32 
plate:nth-of-type(2n+3)

Level 23 of 32
plate apple:only-of-type

Level 24 of 32
.small:last-of-type

Level 25 of 32
bento:empty

Level 26 of 32
apple:not(.small)

Level 27 of 32 
*[for]

Level 28 of 32
plate[for]


Level 29 of 32
bento[for="Vitaly"]

Level 30 of 32
*[for^="Sa"]

Level 31 of 32
*[for$="to"]

Level 32 of 32
*[for*="obb"]

'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글

[CSS] Positioning - position: relative  (0) 2020.04.07
[CSS] overflow-y: auto  (0) 2020.04.07
[CSS] Layout  (0) 2020.04.06
[HTML] form  (0) 2020.04.03
[HTML] Web-FrontEnd  (0) 2020.04.01

+ Recent posts

티스토리툴바