잡동사니에도 사랑을

[21.09.17] practice05(css) - id속성, class속성 활용 본문

JAVA_EE/CSS

[21.09.17] practice05(css) - id속성, class속성 활용

luvforjunk 2021. 9. 17. 19:09
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

body {

        background-color: powderblue;

}

h3, em {

        color: green;

}

div strong { → 후손

        color: red;

}

div > strong { → 자식

        color: blue;

}

#center {

        text-align: center;

}

#center strong {

        background-color: yellow;

}

.indent { → 들여쓰기

        text-indent: 3em;

}

</style>

</head>

<body class="main">

        <h3>얼굴</h3>

        <hr>

        <div id="center">

               <strong>박인희</strong>

        </div>

        <div class="indent">

               <p>

                       <em>길</em>을 걷고 산들 무엇하리 <strong>꽃</strong>이 내가 아니듯 내가 <strong>꽃</strong>이

                       될 수 없는 지금...

               </p>

        </div>

</body>

</html>

 

 

결과창

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.17] practice07(css) - inline block 활용  (0) 2021.09.17
[21.09.17] practice06(css) - 마우스 올려 카드 뒤집기(:hover 활용)  (0) 2021.09.17
[21.09.17] exam11(05_cssPositioning) - 박스 안 내용 확인(hidden, visible, scroll, auto 활용)  (0) 2021.09.17
[21.09.17] exam10(05_cssPositioning) - 숨겨져 있는 단어 마우스 올려 보이게 하기(<span> 태그 두 번)  (0) 2021.09.17
[21.09.17] exam09(05_cssPositioning) - 이미지 겹쳐서 배치(z-index 활용)  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more