3일차 레이아웃 구성 태그 div / span , div를 이용한 레이아웃 구성

3일차 레이아웃 구성 태그 div / span , div를 이용한 레이아웃 구성

2020. 10. 26. 15:34ㆍHTML & CSS 💙/HTML 연습

<div>

<p>태그처럼 한 공간을 마련해서 값을 입력할 수 있게 한다.

이 태그를 코딩할 때 연속해서 쓴다고 해도 결과 값은 아래로 나열된다.

<span>

div태그와 반대로 일렬로 값을 나열한다.

이 태그 또한 마찬가지로 엔터로 띄어서 코딩한다고 해도 결과값은 일렬로 나열된다.

<br />태그로 억지로 한 칸 내려서 쓸 수는 있다.

 </head>
  <body>
    <div> div태그 block_1</div>
    <div>block_2</div>
    <div>block_3</div>
    <div>block_4</div>

    <br /><br />

    <p> P태그 block </p>

    <ul>
      <li>리스트1</li>
      <li>리스트2</li>
      <li>리스트3</li>
    </ul>

    <span>span tag1</span> <br />
    <span>span tag2</span>
    <span>span tag3</span>
    <span>span tag4</span>

  </body>

div 태그를 이용하여 레이아웃 구성하기

실습화면

<body>
    <div>
      <h1>Maryable Day</h1>
      <hr />
    </div>

    <div>
      <ul>
        <li> New post </li>
        <li> Learning English </li>
        <li> Travel </li>
        <li> BF Cat </li>
      </ul>
    </div>

    <div>
      <h1> Contact us </h1>
      <p> My name is Mary Lee from Seoul Korea. I love to communicate with you so if you have any problems or questions, please send me email or messages without hesitation. </p>
      <hr />
    </div>

    <div>
      <p> Copyright Mary Lee </p>
    </div>
  </body>

결과화면

div태그와 시멘틱 태그를 이용한 레이아웃 구성의 차이점

기본적으로 결과 화면은 div태그와 같으나, 시멘틱 태그는 이름이 <header>, <nav>, <section>, <footer>로 나뉘어 어떠한 블럭에 속하는지 눈에 잘 보이게 할 수 있다.

    <header>
      <h1>Maryable Day</h1>
      <hr />
    </header>

    <nav>
      <ul>
        <li> New post </li>
        <li> Learning English </li>
        <li> Travel </li>
        <li> BF Cat </li>
      </ul>
    </nav>

    <section>
      <h1> Contact us </h1>
      <p> My name is Mary Lee from Seoul Korea. I love to communicate with you so if you have any problems or questions, please send me email or messages without hesitation. </p>
      <hr />
    </section>

    <footer>
      <p> Copyright Mary Lee </p>
    </footer>

  </body>

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

'HTML & CSS 💙 > HTML 연습' 카테고리의 다른 글

lable 태그와 input 태그 정리 (0)	2020.10.28
3일차 Form 태그 (0)	2020.10.26
3일차 개인연습 Video 태그 및 html 콘텐츠 모델 (0)	2020.10.26
2일차 img 이미지 태그 / audio 소리 태그 (0)	2020.10.24
2일차 table 태그 (0)	2020.10.24
2일차 리스트 태그 <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" > (0)	2020.10.24

Maryable Day