[CSS] layout

allrouvel 2024. 2. 22. 16:29

2024. 2. 22. 16:29

728x90

<header> - 문서 도는 섹션에 대한 헤더를 정의.
<nav> - 탐색 링크 집합(메뉴바, 네비게이션)을 정의.
<section> - 문서에서 섹션(내용이나 단락의 집합)을 정의.
<article> - 독립적인 내용을 정의. width: 100% (default)
<footer> - 문서 도는 섹션에 대한 바닥글 정의. 제작정보나 저작권정보, 기업정보 표시

ㄴㄴ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css/d_layout.css" />
    <title>시멘틱요소를 이용한 layout</title>
  </head>
  <body>
    <h2>CSS Layout Float</h2>
    <ul>
      <li>&lt;header&gt; - 문서 도는 섹션에 대한 헤더를 정의.</li>
      <li>&lt;nav&gt; - 탐색 링크 집합(메뉴바, 네비게이션)을 정의.</li>
      <li>&lt;section&gt; - 문서에서 섹션(내용이나 단락의 집합)을 정의.</li>
      <li>&lt;article&gt; - 독립적인 내용을 정의.</li>
      <li>
        &lt;footer&gt; - 문서 도는 섹션에 대한 바닥글 정의. 제작정보나
        저작권정보, 기업정보 표시
      </li>
    </ul>

    <header><h2>header 부분</h2></header>
    <section>
      <nav>
        <ul>
          <li>section의 nav의 ul - li - a 부분</li>
          <li><a href="#LD">London</a></li>
          <li><a href="#PR">Paris</a></li>
          <li><a href="#TK">Tokyo</a></li>
        </ul>
      </nav>

      <article style="overflow-y: scroll">
        <h1 id="LD">London</h1>
        <p>
          런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다.
          그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은
          런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다.
          런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다.
          그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은
          런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다.
          런던은 런던이다. 그렇다. 런던은 런던이다. 그렇다. 런던은 런던이다.
          그렇다.
        </p>
        <p>
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은
          템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다.
          그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은
          템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다.
          그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
        </p>
        <br><br>

        <h1 id="PR">Paris</h1>
        <p>
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
        </p>
        <p>
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은
          템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다.
          그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은
          템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다.
          그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
        </p>
        <br><br>

        <h1 id="TK">Tokyo</h1>
        <p>
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
          파리는 파리다. 그렇다. 파리는 파리다. 그렇다.
        </p>
        <p>
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은
          템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다.
          그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은
          템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다.
          그렇다. 템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
          템즈강은 템즈강이다. 그렇다. 템즈강은 템즈강이다. 그렇다.
        </p>
        <br><br>
      </article>
    </section>
    <footer><p>Footer</p></footer>
  </body>
</html>

/* CSS d_layout01.html 관련 */
* {
  box-sizing: border-box;
  /* 지정한 width, height안에 맞췅 */
}
body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}


footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Rsponsive layout 반응성 레이아웃
- 화면의 가로 사이즈가 650미만으로 적용됨. (650px미포함) */
@media screen and (max-width: 650px) {
  /* nav{
        position:relative;
        top: 0;
        left: 0;
        width: 100%
    } */
  nav ul {
    height: 100px;
    background: #ccc;
    list-style-type: none;
    margin: 0;
  }
  article {
    /* width:100% -default값으로 기재할 필요x*/
    
    height: 500px;
    background-color: #f1f1f1;
  }

  /* section {
        position:relative;
        padding: 0;
        margin: 0;
        top: 0;
        left: 100%
    } */
}

/* 화면의 가로 사이즈가 650px이상부터 (650px포함) 적용됨 */
@media screen and (min-width: 650px) {
  article {
    float: left;
    padding: 20px;
    width: 70%;
    /* height: 500px; */
  }

  nav {
    float: left;
    width: 30%;
    padding: 20px;
    background: #ccc;
  }

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

  section {
    height: 500px;
    background: #ccc;
    /* position : relative;
        top: 0;
        left:0; */
  }
  section::after {clear:both;}
}

728x90

저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] box-shadow (0)	2024.02.23
[CSS] flexbox, flex, justify, Vendor Prefix (0)	2024.02.22
[CSS] media (0)	2024.02.22
[CSS] web Font (0)	2024.02.22
[CSS] position (0)	2024.02.22

allrouvel

[CSS] layout

'[CSS]' 카테고리의 다른 글

+ Recent posts

티스토리툴바