🔵 CSS - pseudoClass

jea_i·2022년 2월 7일
목록 보기
19/19
<body>
    <h2>가상객체 알아보기</h2>
    <p>
        객체란 속성과 속성값의 집합이다
        <br>ex) h1태그는 여러가지 속성과 속성값을 가지고 있습니다. 따라서 h1도 하나의 객체입니다.
            html문서에 직접 작성된 객체를 실존객체라 한다면, 가상객체는 html문서가 아닌 css에서 만들어진 객체입니다.
    </p>
    <ul>
        <li>항목1</li>
        <li>항목2</li>
        <li>항목3</li>
        <li>항목4</li>
    </ul>
    <h3>가상객체 만들기</h3>
    <p>
        가상객체는 css에서 만들 수 있고, 특정요소의 자식형태로 만들 수 있습니다.
        <br>가상객체는 특정요소의 첫번째 자식위치, 마지막 자식위치에 만들 수 있습니다.
    </p>
    <dl>
        <dt>용어태그</dt>
        <dd>설명태그1</dd>
        <dd>설명태그2</dd>
    </dl>
    <div class="box">
        <span>Text</span>
    </div>
</body>

<style>
h2{
    /* 
        CSS애서 작성되는 속성과 속성값은 없는 속성을 추가 하는게 아니라
        처음부터 존재하는 속성에서 속성값을 수정해주는 것입니다.
    */
    font-size: 36px;
    line-height: 80px;
    color: #000;
}
ul{
    outline: 2px solid red;
    margin-top: 40px;
}
ul::before{
    display: block; content: '첫번째 자식위치의 가상객체';
}
ul li{
    height: 40px; line-height: 40px;
    outline: 1px dotted orange;
}
/* 첫번째 자식위치의 li요소를 선택합니다 */
ul li:first-child{
    background-color: #ccc;
}
ul::after{
    display: block; content: '마지막 자식위치의 가상객체';
}

dl{
    outline: 3px solid blue;
}
dl dt,
dl dd{
    height: 40px; line-height: 40px;
    outline: 2px dotted deepskyblue;
}

/* dl의 첫번째 자식위치에 가상객체를 만듭니다. */
dl::before{
    display: block; content: 'dl의 가상 자식객체';
}

/* dl의 마지막 자식위치에 가상객체를 만듭니다. */
dl::after{
    display: block; content: 'dl의 가상 자식객체';
}

/* dl의 첫번째 자식 위치에 있는 dd태그를 선택하세요 */
dl dd:first-child{
    background-color: #ccc;
}

/* 
    type : 요소의 형태를 의미, dt타입인지 dd타입인지 선택된 요소의 타입을 따릅니다
    dl의 자식요소중 type이 dd인 첫번째요소를 선택하세요.
*/
dl dd:first-of-type{
    background-color: #ccc;
}

.box{
    background-color: #ccc;
    line-height: 40px;
    width: 120px;
    text-align: center;
    position: relative;
    color: #000;
    transition: width 0.3s;
}
.box:hover{
    color: #fff;
}
.box span{
    position: relative;
    z-index: 2;
}
.box::after{
    display: block; content: '';
    width: 0;
    height: 40px;
    background-color: #000;
    position: absolute;
    z-index: 1;
    bottom: 0;
    transition: width 0.3s;
    right: 0;
}
.box:hover:after{
    width: 100%;
    /* 좌표값의 userAgent:auto */
    right: auto;
}
</style>
jea_i
열정열정열정🔥
이전 포스트
🔵 CSS - pseudoClass

CSS

🔵 CSS - flexible

0개의 댓글

관련 채용 정보
