마흔 아홉 번째 수업

정혅·2024년 5월 2일
CSShtml

더 조은 아카데미

목록 보기
54/76
post-thumbnail

오전문제

  1. 표를 만드시오 hover효과도 넣기
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
            #customers{
                font-family: "Trebuchet Ms", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
            #customers td, #customers th{
                border: 1px solid #ddd;
                padding: 8px;
            }
            #customers tr:nth-child(even){
                background-color: #f2f2f2;
            }
            #customers tr:hover{
                background-color: #ddd;
            }
            #customers th{
                 padding-top: 12px; 
                 padding-bottom: 12px; 
                text-align: left;
                background-color: #4caf50;
                color: white;
            }
        </style>
    </head>

    <body>
        <table id = "customers">
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
            <tr>
            <td>Alfreds Futterkiste</td>
             <td>Maria Anders</td>
             <td>Germany</td>
            </tr>
            <tr>
                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
              </tr>
              <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
              </tr>
              <tr>
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
              </tr>
              <tr>
                <td>Island Trading</td>
                <td>Helen Bennett</td>
                <td>UK</td>
              </tr>
              <tr>
                <td>Königlich Essen</td>
                <td>Philip Cramer</td>
                <td>Germany</td>
              </tr>
              <tr>
                <td>Laughing Bacchus Winecellars</td>
                <td>Yoshi Tannamuri</td>
                <td>Canada</td>
              </tr>
              <tr>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Giovanni Rovelli</td>
                <td>Italy</td>
              </tr>
              <tr>
                <td>North/South</td>
                <td>Simon Crowther</td>
                <td>UK</td>
              </tr>
              <tr>
                <td>Paris spécialités</td>
                <td>Marie Bertrand</td>
                <td>France</td>
              </tr> 
        </table>

    </body>
</html>

  1. 레이아웃 문제
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
           #header{
            width: 800px;
            margin: 0 auto;
            background-color: #bc6ed7;
            color: white
           }
           #under{
            width: 800px;
            margin: 0 auto;
            overflow: hidden;
           }
           #aside{
            width: 300px;
            float: left;
            background-color: aqua;
           }
           #content{
            width: 500px;
            float: left;
            background-color: black;
            color: white;
           }
        </style>
    </head>

    <body>
        <div id="header">
            <h1>header</h1>
        </div>
        <div id="under">
            <div id="aside">
                <h1>Aside</h1>
            </div> 
            <div id="content">
                <h1>Content</h1>
            </div>
        </div>
    </body>
</html>

  1. float 이용한 그림과 글 문제
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
        img{
            margin-right: 20px;
            float: left;
        }
        </style>
    </head>
    <body>
        <h1>베트남 야시장</h1>
       <p><img src="market.png" alt="trip" width="300" height="250">
        This is the night market I went to in the summer. It was humid, but it was nice to have beautiful scenery and various foods. Everyone, make sure to visit Hoi An, Vietnam
        Vietnam's vibrant night markets are a delightful showcase of the country's rich culinary traditions and cultural diversity, drawing visitors with their lively ambiance and tantalizing array of street food delights.</p>
    </body>
</html>

  1. clear속성을 이용해 float속성 지우기
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
        #left{
            background-color: blue;
            width: 200px;
            height: 100px;
            float: left;
            color: white
        }
        #right{
            background-color: brown;
            width: 200px;
            height: 100px;
            float: right;
        }
        p{
            clear:left
        }
        </style>
    </head>
    <body>
        <h1>clear 속성을 이용한 위치 조정</h1>
        <div>
            <div id="left">왼쪽 끝에 위치해놓고 싶은 요소</div>
            <div id="right">오른쪽 끝에 위치해놓고 싶은 요소</div>
        </div>
        <p>요소 아래에 넣을 글자</p>
    </body>
</html>

  1. overflow속성을 이용한 크기 조정
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
       div{
        border: 3px solid #8bc56c
       }
       img{
        float: left;
       }
       #word{
        clear: left;
       }
       #second{
        overflow: auto;
       }
        </style>
    </head>
    <body>
        <h1>overflow 속성을 이용한 위치 조정</h1>
        <div>이미지와 함께 하고 싶은 내용
            <img src="market.png" alt="market" width="320" height="220">
        </div>
        <p id="word">overflow 속성 값을 auto로 주면 자동으로 컨테이너 요소의 크기가 늘어나요</p>
        <div id="second">이미지와 함께하고 싶은 내용
            <img src="market.png" alt="market" width="320" height="220">
        </div>
    </body>
</html>

  1. overflow를 이용해서 컨테이너 요소를 벗어나면 잘리도록
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
       div{
        border: 3px solid #8bc56c;
        padding: 5px;
        height: 100px;
       }
       img{
        float: left;
       }
       #word{
        clear: left;
       }
       #second{
        overflow: hidden;
       }
        </style>
    </head>
    <body>
        <h1>overflow 속성을 이용한 위치 조정</h1>
        <div>이미지와 함께 하고 싶은 내용
            <img src="market.png" alt="market" width="320" height="220">
        </div>
        <p id="word">overflow 속성 값을 auto로 주면 자동으로 컨테이너 요소의 크기가 늘어나요</p>
        <div id="second">이미지와 함께하고 싶은 내용
            <img src="market.png" alt="market" width="320" height="220">
        </div>
    </body>
</html>

  • div 요소에 overflow: hidden; 속성을 주어 내용이 넘칠 때 해당 부분을 숨기고, padding 속성을 사용하여 내용과 테두리 사이에 여백을 설정하고,height 속성을 사용하여 요소의 높이를 지정하고 있다. border와 그림 사이의 여백을 위해 padding을 사용하는 것이므로, padding 속성을 사용하지 않는다면 아래와 같이 테두리와 그림 이 딱 붙어서 나올 것

  1. float속성을 이용한 레이아웃
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS Float</title>
        <style>
            .page{
                border: 3px solid #d7e77e;
                overflow: auto;
                min-height: 300px;
            }
            h2{
                text-align: center;
            }
            header{border: 3px solid #e7b456;}
            nav{
                border: 3px solid #3eb8b8;
                width: 150px;
                float: left;
                min-height: 260px;
            }
            section{
                border: 3px solid #e64545;
                margin-left: 154px;
            }
            footer{border: 3px solid #3242c0;}
            p{text-align: center;}
        </style>
    </head>

    <body>
        <h1>float 속성을 이용한 레이아웃</h1>
        <div class="page">
            <header>
                <h2>header 영역</h2>
            </header>
            <nav>
                <h2>nav 영역</h2>
                <p>여기에는 보통 메뉴가 들어간다.</p>
            </nav>
            <section>
                <h2>section 영역</h2>
                <p>여기에는 페이지에 해당하는 내용이 들어간다.
                    <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget scelerisque libero finibus. Phasellus quis vulputate ante. Fusce sit amet viverra justo. Donec id elementum mauris. Nam id porttitor nisl, et suscipit nunc. Vestibulum sit amet volutpat quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis placerat sem eu facilisis ultricies.
                </p>
            </section>
            <footer>
                <h2>footer 영역</h2>
            </footer>
        </div>
    </body>
</html>

html / CSS

list-style-type /ul, li, a

1. 목록 만들어서 하이퍼링크 걸기

<!DOCTYPE html>
<html>
<head>
<style>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}/*마진과 패딩이 0일때는 추가적으로 값을 지정하지 않아도 되지만, 가독성과 유지보수를 위해 명시적으로 선언하는 것이 좋다. */

li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

  • li는 기본적으로 블록 형식

  • list-style-type은 CSS속성으로, 리스트 항목의 마커를 제거하는데 사용된다.(순수한 텍스트로 표시)

    • 위 코드에서는 ul요소의 기본적인 리스트 마커를 제거한다.

  • display: inline; 속성은 요소를 블록 레벨 요소가 아닌 텍스트 흐름에 삽입되는 인라인 요소로 변경한다.

    • 인라인 요소는 줄 바꿈 없이 요소들이 옆으로 나란히 배치되는 특성이 있다.

    • 일반적으로 텍스트와 함께 사용되며,너비와 높이를 설정할 수 없고, margin, padding도 좌우만 적용된다.

2. 글머리 기호 제거

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}
/*li의 후손 */
li a {
  display: block; /*inline은 너비와 높이를 설정할 수 없으니까 block, inlie-block으로 사용*/
  padding: 8px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>
</html>

  • list-style-type: none; 을 함으로써 리스트 항목의 마커(글머리 기호)들을 제거하고 순수한 워드만 보여준다.

  • overflow : hidden 를 사용하지 않으면, 리스트 항목 바로 옆에 글이 붙어서 나오는데, 그 이유는 컨텐츠가 넘칠 때 부모 요소의 크기가 자동으로 조절되어 자식 요소의 컨텐츠가 옆에 붙어서 나타나게 되는 것이다.

3. 목록 부분을 다 색을 주기 block형식으로

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
            ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: cornflowerblue;
            }
            li{
                float: left;
            }
            li a{
                display: block;
                padding: 8px;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href=#home>Home</a></li>
            <li><a href=#news>News</a></li>
            <li><a href=#contact>Contact</a></li>
            <li><a href=#about>About</a></li>
        </ul>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

    </body>
</html>

4. 리스트 항목의 밑줄 없애기 - text-decoration

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>CSS</title>
        <style>
            ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: cornflowerblue;
            }
            li{
                float: left;
            }
            li a{ /*li 요소 안에 있는 a요소를 선택*/
                display: block;
                padding: 8px;
                color: white;
                text-align: center;
                padding: 18px 10px;
                text-decoration: none;
            }
            li a:hover{
                background-color: dodgerblue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href=#home>Home</a></li>
            <li><a href=#news>News</a></li>
            <li><a href=#contact>Contact</a></li>
            <li><a href=#about>About</a></li>
        </ul>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

    </body>
</html>

5. 네비게이션 바에 hover를 원하고 싶은 아이디나 클래스에게 주기 - 한곳은 고정 나머지만 후버 

<!DOCTYPE html>
<html>
<head>
<style>
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: darksalmon;
    }
    li{
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 15px 35px;
        text-decoration: none;
    }
    li a:hover:not(#active){
        background-color: rgb(219, 136, 97);
    }
    #active{
        background-color: rgba(49, 55, 45, 0.979);
    }

</style>
</head>
<body>

    <ul>
        <li><a id="active" href = "#home">Home</a></li>
        <li><a href = "#news">News</a></li>
        <li><a href = "#contact">Contact</a></li>
        <li><a href = "#about">About</a></li>
    </ul>

</body>
</html>

  • display: block; 이나, display: inline-block을 이용해 너비와 폭을 설정해줄 수 있다. inline을 사용하면 너비와 폭을 설정할 수 없다.

6. 인라인 스타일로 css를 줘서 about칸이 오른쪽에 있도록

<!DOCTYPE html>
<html>
<head>
<style>
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: darksalmon;
    }
    li{
        float: left;
    }
    li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 15px 35px;
        text-decoration: none;
    }
    li a:hover:not(#active){
        background-color: rgb(219, 136, 97);
    }
    #active{
        background-color: rgba(49, 55, 45, 0.979);
    }

</style>
</head>
<body>

    <ul>
        <li><a id="active" href = "#home">Home</a></li>
        <li><a href = "#news">News</a></li>
        <li><a href = "#contact">Contact</a></li>
        <li><a href = "#about">About</a></li> 
        <li style="float: right"><a id="active" href="#about">About</a></li> 
        <li style="float: right"><a href="#about">About</a></li>
    </ul>

</body>
</html>
  • about부분을 인라인 스타일로 넣어서 오른쪽에 위치하게 했다.
  • 주석처리 한 부분을 보면 ablut 을 넣을 때 id=active를 넣으면, 호버가 적용되지 않는다.

위 사진에서는 후버 기능을 about에 포함 시켰기 때문에 작동하는 것을 알 수 있다.

7. 항목에 border에 색을 줘서 칸처럼 보이게 나눔

<!DOCTYPE html>
<html>
<head>
<style>
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: darksalmon;
    }
    li{
        float: left;
        border-right: 1px solid #d5eadc;
    }/*border의 오른쪽에만 색을 줘서 선처럼 보이게 칸을 나눔 */

    li:last-child{/* 마지막 li를 지정 */
        border-right:none;/*색 주는것을 없앰 */
    }
    li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 15px 35px;
        text-decoration: none;
    }
    li a:hover:not(#active){
        background-color: rgb(219, 136, 97);
    }
    #active{
        background-color: rgba(49, 55, 45, 0.979);
    }

</style>
</head>
<body>

    <ul>
        <li><a id="active" href = "#home">Home</a></li>
        <li><a href = "#news">News</a></li>
        <li><a href = "#contact">Contact</a></li>
        <li><a href = "#about">About</a></li>/*li:last-child가 얘에 해당 */
        <!-- <li style="float: right"><a id="active" href="#about">About</a></li> -->
        <!-- <li style="float: right"><a href="#about">About</a></li> -->
    </ul>

</body>
</html>

  • li:last-child를 이용해 마지막 li에 border-right의 색을 빼서 마지막 li인 about의 오른쪽에는 선이 없는것을 알 수 있다.

8. 네비게이션 바를 아래로 놓기

<!DOCTYPE html>
<html>
<head>
<style>
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: darksalmon;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    li{
        float: left;
        border-right: 1px solid #d5eadc;
    }/*border의 오른쪽에만 색을 줘서 선처럼 보이게 칸을 나눔 */

    li:last-child{/* 마지막 li를 지정 */
        border-right:none;/*색 주는것을 없앰 */
    }
    li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 15px 35px;
        text-decoration: none;
    }
    li a:hover:not(#active){
        background-color: rgb(219, 136, 97);
    }
    #active{
        background-color: rgba(49, 55, 45, 0.979);
    }

</style>
</head>
<body>

    <ul>
        <li><a id="active" href = "#home">Home</a></li>
        <li><a href = "#news">News</a></li>
        <li><a href = "#contact">Contact</a></li>
        <li><a href = "#about">About</a></li>
    </ul>
    <div style="padding:20px;background-color:#ea8e48;height:200px;">
        <h1>Fixed Bottom Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
      </div>
      <div style="padding: 20px; background-color: rgb(225, 221, 217); height: 1000;">
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
      </div>

</body>
</html>

9. 네비게이션 바를 상단으로 고정하기

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed; /* 스크롤 해도 네비게이션 바를 위에 고정 */
  top: 0; /*위 고정을 top 에 한다는 의미 */
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

  /*인라인 스타일로 css적용 */
  /*padding을 줌으로써 h1부터 네비게이션 바의 간격이 생김 margin이나 height는 저 글들이 잘리지 않게 여유롭게 보일 수 있도록 하기 위해 속성을 넣은 것이다.*/
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  <h1>Fixed Top Navigation Bar</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

벡그라운드 이미지 주기

이미지 한개

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png');
        }
    </style>
</head>
<body>

</body>
</html>

이미지 두개

  • 먼저 입력한(왼쪽) 이미지가 앞으로 나온다. 뒤에 입력한 이미지가 뒤로 나온다.
  <!DOCTYPE html>
  <html>
  <head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            /* 각각의 그림을 레이어라고 부릅니다. */
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
        }
    </style>
  </head>
  <body>

배경 이미지 높이 조정

백분율은 화면 크기에 따라 동적으로 조정되고, 픽셀은 고정된 크기를 나타낸다.

  • %: 화면의 크기에 대한 백분율입니다. 예를 들어, background-size: 100% 100%;는 배경 이미지를 화면의 전체 크기에 맞추라는 의미이다.

  • px: 픽셀 단위로 크기를 정의합니다. 예를 들어, background-size: 100% 100px;는 화면 너비를 100%로 유지하되, 높이를 100px로 고정한다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100% 250px; /*처음은 너, 두번째가 높이를 의미*/
        }
    </style>
</head>
<body>

</body>
</html>
  • background-size 속성에서 두 번째에 입력하는 크기 단위는 높이를 의미
  • 두 번째 위치에 250px를 입력했으므로 높이가 250px로 지정된다.

컴마를 이용한 크기 조정

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');

            /* 첫 번째 이미지의 너비: 100%
               두 번째 이미지의 너비: 250px */
            background-size: 100%, 250px;
        }
    </style>
</head>
<body>

</body>
</html>
  • 너비와 높이에 띄어쓰기를 사용하는 것과 다음과 같이 쉼표를 사용하는 것은 다르다.
    • 쉼표를 사용하면 각 배경에 서로 다른 크기를 입력하는 것으로 인식한다.

      .png](C:\Users\혅\Pictures\Screenshots\스크린샷%202024-04-18%20141207.png)

배경 이미지 회전 및 고정하는 법

  • 예제들 실행 결과들을 살펴보면 패턴처럼 이미지가 반복는데, 이는 background-repeat 속성의 기본 키워드가 repeat기 때문에 나타나는 현상

    • repeat를 입력하면 이미지가 패턴을 이루고, repeat-x를 입력하면 x축 방향으로만 이미지가 반복 >> repeat-y를 입력하면 y축 방향으로 이미지가 반복
    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS3 Property Basic</title>
    <style>
     body {
         background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
         background-size: 100%;
         background-repeat: no-repeat;  /*기본은 Repeat고, no-repeat를 하면 반복적으로 이미지 출력되지 않는다. */
     }
    </style>
    </head>
    <body>
  • background-repeat 속성
  • background-attachment 속성 : 배경 이미지를 화면에 고정하는 속성
    • attachment 속성의 기본 키워드는 scroll
  • background-position 속성
    • background-position: 키워드;
    • background-position: X축 위치;
    • background-position: X축 위치 Y축 위치;
  • 배경 이미지 반복 없애기
    • background-repeat 속성에 no-repeat 키워드를 입력해봅시다. 반복 없이 배경 이미지가 적용된다.

이미지를 고정 시켜서, 스크롤하면 안보이게

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>

/*이미지 두 개*/
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
  • 결과 화면에서 스크롤을 내리면 배경 이미지가 위로 올라가 사라진다.

2. fixed시켜서 스크롤해도 이미지가 고정

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
             /* background-attachment: scroll; */
            background-attachment: fixed;

        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
  • 배경 이미지 화면에 고정시키기
    • background-attachment 속성 값에 fixed를 입력한다. 스크롤을 이동해도 배경 이미지가 고정된다.

배경 이미지 위치

<!DOCTYPE html>
<html>
<head>
    <title>CSS3</title>
    <style>
        body{
            background-color: rgb(147, 229, 233);
            background-image: url('BackgroundFront.png'), url('background.png');
            background-size: 100%;
            background-repeat: no-repeat;
            /* background-attachment: scroll; 스크롤 하면 그림 사라짐 */
            background-attachment: fixed; /*스크롤해도 위에 위에 그림이 고정되서 보임 */
            /* background-position: bottom; 그림이 제일 아래에 있음 */
            background-position: 0px 50%; /*그림이 가운데에 있음*/ 
        }
        h1, p{
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>

</html>

문제

  1. 글자 크기 % / em

  • em : 글꼴의 현재 크기를 기준으로 상대적인 크기를 나타내며, 1em은 현재 글꼴의 크기와 동일하며, 2em은 형재 글꼴의 두 배 크기를 의미한다.

  • % : 백분율을 사용하여 상대적인 크기를 지정한다. >> 부모 요소의 크기를 기준으로 백분율을 계산

  • px : 화면의 점의 수를 나타내며, 절대적인 크기를 나타내 화면에서 정확한 크기를 지정할 때 주로 사용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-child(1) { }
        p:nth-child(2) { font-size: 100%; }
        p:nth-child(3) { font-size: 150%; }
        p:nth-child(4) { font-size: 200%; }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Style</title>
    <style>
        p:nth-child(2){font-size: 1.0em;}
        p:nth-child(3){font-size: 1.5em;}
        p:nth-child(4){font-size: 2.0em;}
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Style Property Basic</title>
    <style>
        p:nth-child(1) { }
        p:nth-child(2) { font-size: 16px; }
        p:nth-child(3) { font-size: 24px; }
        p:nth-child(4) { font-size: 32px; }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

  1. 해당 태그에 배경 색 입히기
<!DOCTYPE html>
<html>
<head>
    <title>글자 크기 1</title>
    <style>
       h1{
        background-color: red;
       }
       h2{background-color: orange;}
       h3{background-color: yellow;}
</style>
</head>
<body>
   <h1>h1 태그 입니다잉</h1>
   <h2>h2 태그 입니다잉</h2>
   <h3>h3 태그 입니다잉</h3>
</body>
</html>

  1. width와 height를 이용해 정사각형 색을 만들자

  • width와 height 속성은 글자를 감싸는 영역의 크기를 지정

  • border 속성은 테두리의 두께를 지정

  • margin은 테두리와 다른 태그와의 간격을 지정

  • padding은 테두리와 글자 사이의 간격을 지정

    <!DOCTYPE html>
<html>
<head>
 <title>CSS</title>
 <style>
    div{
     width: 200px;
     height: 200px;
     background-color: chartreuse;
    }
</style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <style>
       div{
        width: 200px;
        height: 200px;
        background-color: chartreuse;

        border: 30px solid darkgreen;
        margin: 20px; padding: 30px;
       }
</style>
</head>
<body>
 <div></div>
</body>
</html>

  1. border를 이용해 점선으로 만들어라
<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <style>
      #box{
        /* border-width: thick; > 테두리의 두께를 설정 thick은 일반적 중간 수준의 두께를 가지는 테두리*/
        border-width: 4px; /*이렇게 표준적인 픽셀 값을 사용하는게 더 좋음 */
        border-style: dashed;
        border-color: black;
      }
</style>
</head>
<body>
 <div id="box">
    <h1>Lorem ipsum dolor amet</h1>
 </div>
</body>
</html>

  1. 대상 객체를 화면에 보이지 않게 만들어라

  • display : none == css속성 중 하나로, 해당 요소를 화면에서 숨긴다.

    • 이는 해당 요소가 화면에 보이지 않게 되고, 공간도 차지하지 않아 해당 요소가 레이아웃에 영향을 주지 않는다.

    • javascript에서 요소를 동적으로 숨기거나 보이게 할때 사용하고, 페이지에서 요소를 완전히 제거하지 않고 숨길 때 유용하다.

  • span 태그는 인라인 요소로 텍스트, 문장의 일부를 감싸 스타일을 적용하거나 javascript로 처리할 때 사용된다.

  • p 태그는 블록 수준 요소이며, 새로운 단락을 나타내는데 사용된다. 자동을 줄 바꿈을 생성하고, 위아래로 공간을 차지한다.(문단) >> 텍스트의 구조를 형성할 때 사용된다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <style>
     #hide{
        display: none;
     }
</style>
</head>
<body>
    <p>대상이 아닌 객체</p>
    <div id="hide">
        <p>대상 객체</p>
    </div>
    <span>대상이 아닌 객체</span>
</body>
</html>

선택자

문자열 속성 선택자

  • [] 는 css선택자의 일부분으로, 속성 선택자라고 한다.>> 특정 속성을 가진 html요소를 선택할 수 있다. >> []를 하지 않으면 속성을 선택한것이 아니므로 적용되지 않는다.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style>
        [title] {
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>

    <h1>[속성] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성을 가지고 있습니다!</h2>
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="first p">이 단락은 title 속성을 가지고 있습니다!</p>
    <p title="second p">이 단락은 title 속성을 가지고 있습니다!</p>

</body>

</html>

2. 속성 선택자 = : 선택

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style>
        [title="first h2"] { /*title의 속성값이 first h2인 애만 */
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>

    <h1>[속성="속성값"] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
    <p title="second p">이 단락은 title 속성값이 "second p"입니다!</p>

</body>

</html>

3. 속성 선택자 ~= : 공백을 포함한

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style>
        [title~="first"] {/*title이 first이거나, 공백을 기준으로 first가 들어가있는 애 >> ~에 first */
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>

    <h1>[속성~="속성값"] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>/*색*/
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>/*색 */
    <p title="first-p">이 단락은 title 속성값이 "first-p"입니다!</p>
    <p title="p first">이 단락은 title 속성값이 "p first"입니다!</p>/*색 */
    <p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>
    <p title="p first p">이 단락은 title 속성값이 "p first p"입니다!</p>/*색 */
</body>

  • frist와 p사이에 공백이나 first가 있으면 색이 들어가는데, - (하이픈)가 있으면 공백이 아닌 이어져 있기 때문에 색이 들어가지 않는다.

  • [속성이름~="속성값"] 선택자: title 속성값이 정확히 "first"인 요소나 띄어쓰기(whitespace)를 기준으로 인식되는 단어에 "first"를 포함한 요소만을 선택

    • 띄어쓰기(whitespace)를 기준으로 단어를 인식한다.

  • 하이픈(-)으로 연결된 단어는 전부 하나의 단어로 인식하며, 각각 별도의 단어로 인식하지 않는다.

4. 속성 선택자 | : 하이픈 -

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style>
        [title|="first"] { /*title값이 fist이거나, first다음에 하이픈- 으로 시작하는 요소 */
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>

    <h1>[속성|="속성값"] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
    <p title="first-p">이 단락은 title 속성값이 "first-p"입니다!</p>/*색*/
    <p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>

</body>

</html>

  • [속성이름|="속성값"] 선택자: 속성이름이 속성값으로 시작하는 모든 ㅛ소를 선택하고 하이픈 문자로 값이 시작하는것을 의미

    • 위의 예제에서는 title 속성값이 "first-p"인 요소만 선택된다.

    • title 속성값이 "first h2"나 "first p"인 요소들은 선택되지 않습니다.

  • title 속성값이 정확히 "first"인 요소나 "first" 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택

5. 속성 선택자 ^ : 특정 문자열로 시작

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style>
        [title^="first"] {
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>
    /*^ == first로 시작하는 */
    <h1>[속성^="속성값"] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>/*색*/
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>/*색*/
    <p title="first-p">이 단락은 title 속성값이 "first-p"입니다!</p>/*색*/
    <p title="p first">이 단락은 title 속성값이 "p first"입니다!</p>
    <p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>
</body>

</html>

  • [속성이름^="속성값"] 선택자: 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

    • [속성이름|="속성값"] 선택자와는 달리 속성값이 특정 문자열로 시작하면 모두 선택

    • 위의 예제에서는 title 속성값이 "first"로 시작되는 요소가 모두 선택된다.

6. 속성 선택자 $ : 특정 문자열로 끝나는 요소

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style> /*$ == title 속성이 first로 끝나는 */
        [title$="first"] {
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>

    <h1>[속성$="속성값"] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="p first">이 단락은 title 속성값이 "p first"입니다!</p>/*색*/
    <p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>/*색*/

</body>

</html>

  • [속성이름$="속성값"] 선택자: 특정 속성의 속성값이특정 문자열로 끝나는 요소를 모두 선택합니다.

    • 특정 속성의 속성값이특정 문자열로 끝나기만 하면 모두 선택해 줍니다.

    • 위의 예제에서는 title 속성값이 "first"로 끝나는 요소가 모두 선택됩니다.

7. 속성 선택자 * : 특정 문자열 모두 선택

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style> /* * == title 속성이 first만 들어가 있으면 된다. */
        [title*="first"] {
            background: black;
            color: yellow;
        }
    </style>
</head>

<body>

    <h1>[속성*="속성값"] 선택자를 이용한 선택</h1>
    <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>/*색*/
    <h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
    <p title="my-first-p">이 단락은 title 속성값이 "my-first-p"입니다!</p>/*색*/
    <p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>/*색*/

</body>

</html>
  • [속성이름*="속성값"] 선택자: 특정 속성의 속성값에 특정 문자열를 포함하는 요소를 모두 선택
    • 특정 속성의 속성값이 특정 문자열를 포함하기만 하면 모두 선택
    • 위의 예제에서는 title 속성값에 "first"를 포함하는 요소가 모두 선택됩니다.

      rs\혅\AppData\Roaming\marktext\images\2024-04-18-16-12-35-image.png)

8. 속성 선택자를 이용한 input

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Attribute</title>
    <style>/* input 태그의 속성이 type이면서 type이 text인 요소 */
        input[type="text"] {
            width: 150px;
            display: block; /*블럭을 줌으로써 한줄을 다 차지 */
            background-color: #FFEFD5;
            margin-bottom: 10px;
        }
      /* input 태그의 속성의 type이 password인 요소 */
        input[type="password"] {
            width: 130px;
            display: block;
            background-color: #90EE90;
            border: 2px solid red;
        }
      /* type이 password인 애한테 포커스가 갔을때(클릭) 배경색 변경 */
        input[type="password"]:focus { background-color: #FFC0CB; }
    </style>
</head>

<body>

    <h1>속성 선택자를 이용한 선택</h1>
    <form>
        사용자 : <br>
        <input type="text" name="username">
        비밀번호 : <br>
        <input type="password" name="password">
    </form>

</body>

</html>
  • focus를 가질때 공백이 있으면 안된다 !!

포커스 선택x

포커스 선택 o

9. 이미지마다 border(테두리)의 색 다르게 주기

gif가 없어서,,

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* img 태그 중에서 src 속성이 png로 끝나는 태그의
           border 속성에 3px solid red를 적용*/
        img[src$=png] { border: 3px solid red; }

        /* img 태그 중에서 src 속성이 jpg로 끝나는 태그의
           border 속성에 3px solid green를 적용*/
        img[src$=jpg] { border: 3px solid green; }

        /* img 태그 중에서 src 속성이 gif로 끝나는 태그의
           border 속성에 3px solid blue를 적용*/
        img[src$=gif] { border: 3px solid blue; }
    </style>
</head>
<body>
    <img src="jajq.png" width="200" height="300" />/*border solid red*/
    <img src="node.jpg" width="200" height="300" />/*border solid green*/
    <img src="ux.gif" width="200" height="300" />/*border solid blue*/
</body>
</html>

동위 선택자 + transition:애니메이션 효과

  • 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자이다

1. 같은 관계에 위치한 태그 중 원하는 태그만 선택해 색 주기

<!DOCTYPE html>
<html lang="ko">

<head>
    <style>
        h2:nth-child(3){
            color: white;
        }
        h2:nth-child(4){
            color: rgb(242, 255, 168);
        }
        h2:nth-child(5){
            color: rgb(146, 239, 160);
        }
         /* h1 태그의 바로 뒤에 위치하는 h2 태그의
           color 속성에 red 키워드를 적용 */
        h1 + h2 {color: aqua;}
        /* h1 태그의 뒤에 위치하는 h2 태그의
           background-color 속성에 orange 키워드를 적용 - h1뒤에 위치하는 모든 h2 */
        h1 ~ h2{background-color: black;}
    </style>
</head>

<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
</body>

</html>
  • li 태그를 기준으로 할 때 모든 li 태그는 동일한 위치에 있는 동위 상태다.
    • 선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B를 선택
    • 선택자A ~ 선택자B 선택자A 뒤에 위치하는 선택자B 모두를 선택

2. checkedbox에 체크를 하면 애니메이션 효과

<!--
상태 선택자와 동위 선택자의 복합 활용
-->

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,
            바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */
        input[type=checkbox]:checked + div { /*[] == 속성 선택자 의미 */
            height: 0px; /*0px이면 화면에서 사라짐 */
        }

        div {
            overflow: hidden;
            width: 650px; height: 300px;

            /* 변환 효과를 적용합니다. */
            -ms-transition-duration: 1s; /*ms : 익스프로러 10.0이상을 위한 코드*/
            -webkit-transition-duration: 1s; /*webkit : 크롬과 사파리 4.0이상을 위한 코드*/
            -moz-transition-duration: 1s;/*moz : 파이어 폭스 3.6이상을 위한 코드*/
            -o-transition-duration: 1s; /*o : 오페라 10.0이상을 위한 코드*/
            transition-duration: 1s; /*애니메이션 효과 >> 1초 동안 사라지거나, 1초동안 나타나거나 */
        }
    </style>
</head>
<body>
    <input type="checkbox" />
    <div>
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>
  • h1와 p가 checkbox가 체크 되었을 때 사라짐

문자 선택자

태그 내부의 특정한 조건의 문자를 선택하는 선택자

  • 가상 요소선택자Pseudo-Element Selector로 :: 기호를 사용하는 것이 표준이지만 : 기호를 사용해도 정상 작동한다.

1. 첫번째 줄의 첫문자와, 해당 줄에만 색 입히기

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p::first-letter { font-size: 3em; }
        p::first-line { color: red; }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Aenean ac erat et massa vehicula laoreet consequat et sem.Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>
  • ::first-letter 첫 번째 글자를 선택합니다.
  • ::first-line 첫 번째 줄을 선택합니다.

2. 번호 목록을 수정하면 자동으로 수정된 내용으로 번호가 정렬 되게끔

  • counter-rest : 시작하는 번호를 정함
  • counter-increment : 번호를 증가시킴
  • content 속성에서 counter()함수를 통해 증감 시킨다. >> chpater, section은 임의적인 것으로 카운트를 세기 위한 것
  <!DOCTYPE html>
  <html lang="ko">


<head>
    <style>
      body{
        counter-reset: chapter;
      }
      h1:before{
        counter-increment: chapter;
        content: counter(chapter)". "; 
      }
      h1{
        counter-reset: section 0;
      }
      h2:before {
        counter-increment: section;
        content: counter(chapter) "." counter(section) ". ";
      }
    </style>
</head>

<body>
    <h1>Lorem</h1>
    <h2>Consectetur</h2>
    <h1>Ipsum</h1>
    <h2>Adipiscing</h2>
    <h2>Elit</h2>
    <h1>Dolor</h1>
</body>

1. 전후 문자 선택자

  • content 스타일 속성을 입력할 수 있다.(다른 선택자에는 content 스타일 속성을 적용할 수 없다.)
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p { counter-increment: rint; }
        p::before { content: counter(rint) "."; }
        p::after { content: " - " attr(data-page) " page"; }
        p::first-letter { font-size: 3em; }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p data-page="273">Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>

  • ::after 태그 뒤에 위치하는 공간을 선택한다.

  • ::before 태그 앞에 위치하는 공간을 선택한다.

주의 깊게 살펴볼 부분은 ::first-letter 선택자를 사용해 첫 번째 글자를 선택했을 때 전후문자 선택자로 생성한 글자도 스타일이 적용되었다.

  • 특정한 정보를 넣기 위해 사용자 지정 속성인 data-page 속성을 사용

2. UI프레임워크 - 사용자 지정 속성 : data

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>HTML5</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview">
                <li data-role="list-divider">HTML5</li>
                <li>Multimedia</li>
                <li>Connectivity</li>
                <li>Device Access</li>
                <li data-role="list-divider">CSS3</li>
                <li>Animation</li>
                <li>3D Transform</li>
            </ul>
        </div>
    </div>
</body>
</html>

  • 속성 앞에 문자열 data-를 붙이면 사용자 지정 속성으로 인정해준다.

  • 모바일 애플리케이션을 쉽게 만들 수 있게 도와주는 jQuery Mobile 프레임워크를 사용한 코드

    • jQuery Mobile 프레임워크는 div 태그에 data-role 속성을 입력하면 레이아웃을 자동으로 구성해 준다.

위와 같이 입력하고 실행해보면 페이지가 자동으로 디자인 된것을 볼수가 있다. 이러한 프레임워크를 UI 프레임워크라고 부르며 사용자 지정 속성을 굉장히 많이 활용한다.

반응 문자 선택자

  • ::selection 사용자가 드래그한 글자를 선택한다.
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p::selection { background: black; color: red; }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nunc nisl turpis, aliquet et gravida non, facilisis a sem.</p>
</body>
</html>

링크 선택자

  • :link href 속성을 가지고 있는 a 태그를 선택한다.

  • :visited 방문했던 링크를 가지고 있는 a 태그를 선택한다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        a { text-decoration: none; }/*링크 텍트 밑줄 없애기 */
        a:visited { color: red; }

        /* href 속성을 가지고 있는 a 태그의 뒤의 공간에
           "- (href 속성)"을 추가합니다. */
        a:link::after { content: ' - ' attr(href); }
          /*anchor태그 의 link의 이름 뒤에 -를 붙이고 href속성을 출력한다. */
    </style>
</head>
<body>
    <h1><a>Nothing</a></h1>
    <h1><a href="http://hanb.co.kr">Hanbit Media</a></h1>
    <h1><a href="http://www.w3.org/">W3C</a></h1>
    <h1><a href="https://github.com/">Github</a></h1>
</body>
</html>

부정 선택자

  • :not(선택자) 선택자를 반대로 적용한다.
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* input 태그 중에서 type 속성이 password가 아닌 태그의
            background 속성에 red 키워드를 적용합니다.*/
        input:not([type=password]) {
            background: red;
        }
    </style>
</head>
<body>
    <input type="password" />
    <input type="text" />
    <input type="password" />
    <input type="text" />
</body>
</html>

크기 조절을 위한 속성

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Dimension</title>
    <style>
        div {
            height: 200px;
            width: 500px;
            border: 2px solid lightsalmon;
        }
    </style>
</head>

<body>

    <h1>height와 width 속성</h1>
    <div>이 div 요소의 높이는 200px이고 너비는 500px입니다.</div>

</body>

</html>
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Dimension</title>
    <style>
        div.width {
            width: 500px;
            border: 2px solid #DAA520;
        }
        div.maxWidth {
            max-width: 500px; /*창을 줄여도 해당 테두리와 내용이 같이 줄어든다 */
            border: 2px solid #CD5C5C;
        }
    </style>
</head>

<body>

    <h1>max-width 속성</h1>
    <div class="width">이 div 요소는 width 속성을 500px로 설정했습니다.</div><br>
    <div class="maxWidth">이 div 요소는 max-width 속성을 500px로 설정했습니다.</div>
    <p>웹 브라우저의 크기를 줄여서 두 div 요소의 차이를 알아보세요!</p>

</body>

</html>

minWidth

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Dimension</title>
    <style>
        div.width {
            width: 500px;
            border: 2px solid #DAA520;
        }
        div.minWidth {
            min-width: 500px; /*500px보다 창이 작아지면 더 이상 작아지지 않는다*/
            border: 2px solid #CD5C5C;
        }
    </style>
</head>

<body>

    <h1>min-width 속성</h1>
    <div class="width">이 div 요소는 width 속성을 500px로 설정했습니다.</div><br>
    <div class="minWidth">이 div 요소는 min-width 속성을 500px로 설정했습니다.</div>
    <p>웹 브라우저의 크기를 줄여서 두 div 요소의 차이를 알아보세요!</p>

</body>

</html>

max-height

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Dimension</title>
    <style>
        p {
            max-height: 50px;
            background-color: greenyellow;
            overflow: auto;
        }
    </style>
</head>

<body>

    <h1>max-height 속성</h1>
    <p>이 div 요소는 max-height 속성을 50px로 설정했습니다.<br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ligula non ligula iaculis semper at vitae ante. Sed condimentum viverra sollicitudin. Phasellus sodales ipsum nec nulla luctus, in luctus ipsum vestibulum. Pellentesque vehicula lectus a ex tincidunt, eget pellentesque nisl posuere. Vestibulum sed purus sapien. Aenean consequat urna sit amet quam pulvinar, in interdum augue volutpat. Donec ex leo, feugiat vel lorem non, blandit venenatis elit. Vestibulum eu erat eget ante consequat iaculis.
    </p>

</body>
</html>

min-height

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>CSS Dimension</title>
    <style>
        p {
            min-height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>

    <h1>min-height 속성</h1>
    <p>이 div 요소는 min-height 속성을 100px로 설정했습니다.</p>

</body>
</html>

선택자 정리

레이아웃 문제

내가 하다 만거.. >> 바보같이 하나하나 따로 만들생각했네... 그리고 저게 하이퍼 링크인지도 몰랐다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Attribute</title>
    <style>
        h1{
            background-color: black;
            color: white;
            text-align: center;
            height: 100px;
            line-height: 100px;
            margin-top: 0px;

        }
        #london{
            overflow: hidden;
            margin-top: 10px;
        }
        #paris{
            background-color: white;
            color: blue;
            float: left;
            border-right: 1px solid black;
            display: block;
            width: 170px;
            height: 200px;
            padding: 10px;

        }
        #info{
            background-color: white;
            color: black;
            padding: 10px;
        }
        #info b, #info p{
            margin-left: 20px;
        }
    </style>

</style>
</head>
<body>
   <h1>City Gallery</h1>
   <div id="london">
    <div id="paris">London<br>Paris<br> Tokyo</div>
    <div id="info">
        <b>London</b>
        <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p>
        <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p>
    </div>
   </div>
</body>
</html>

선생님 풀이

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="layoutTest.css">
<stle>
    div.container {
    width: 100%;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>

<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

em과 rem 읽어보기

원문
https://zellwk.com/blog/rem-vs-em/

번역문
https://medium.com/@jeongwooahn/%EB%B2%88%EC%97%AD-rem-vs-em-5eac6122b8ea

profile
정혅
이전 포스트

마흔 여덟 번째 수업

다음 포스트

쉰 번째 수업

0개의 댓글