잡동사니에도 사랑을

[21.09.17] exam05(05_cssPositioning) - 본문

JAVA_EE/CSS

[21.09.17] exam05(05_cssPositioning) -

luvforjunk 2021. 9. 17. 18:51
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

* {

        margin: 0;

        padding: 0;

}

body {

        font: 12px Tahoma, sans-serif;

}

li {

        list-style: none; 리스트로 표시된 점들이 사라진다

}

#wrap {

        width: 800px;

        margin: 0 auto; 너비를 가운데 정렬시킨다

        background-color: silver;

}

#header {

        background-color: red;

}

#container {

        background-color: cyan;

}

#container::after {

::after는  'content' 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다.

content에 내용이 없다면 무조건 공백을 넣어줘야 한다.

        content: "";

        display: block;

        clear: both; float으로 설정한 모든 요소들을 지운다.

}

.nav {

        float: left;

        width: 180px;

        background-color: lime;

}

.content {

        float: right;

        width: 600px;

        background-color: lime;

}

#footer {

        margin-top: 30px; 위쪽으로 여백이 30px만큼 생기는데, Body의 전체를 쥐고 있는 #wrap을 silver로 설정해둬서 silver로 나타난다.

        background-color: green;

}

</style>

</head>

<body>

        <div id="wrap">

               <div id="header">

                       <h1>LOGO</h1>

                       <p>This website is...</p>

               </div>

              

               <div id="container">

                       <div class="nav">

                              <h2>Navigation</h2>

                              <ul>

                                      <li><a href="#">Menu 1</a></li>

                                      <li><a href="#">Menu 2</a></li>

                                      <li><a href="#">Menu 3</a></li>

                              </ul>

                       </div>

              

                       <div class="content">

                              <h2>Content Title</h2>

                              <p>Pellentesque habitant morbi tristique senectus et netus    et malesuada fames

         ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit

         amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi

         vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper

         pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet,

         wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,

         sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.

         Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,

         eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt

         quis, accumsan porttitor, facilisis luctus, metus</p>

                       </div>

               </div>

       

               <div id="footer">

                       <address>Seoul, Korea</address><!-- address태그는 기본적으로 이탤릭 효과가 적용 -->

               </div>

        </div>

</body>

</html>

 

결과창

 

 

728x90
반응형

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

[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정)  (0) 2021.09.17
[21.09.17] exam06(05_cssPositioning) - 상대 배치  (0) 2021.09.17
[21.09.17] exam04(05_cssPositioning) - float / text-align: justify(양쪽정렬)  (0) 2021.09.17
[21.09.17] exam03(05_cssPositioning)  (0) 2021.09.17
[21.09.17] exam02(05_cssPositioning) - <a href="#">활용  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more