230112 - html, css 기초

블랑·2023년 1월 12일

front html vscode

Daily Study

목록 보기

2/5

1. 사전 작업

vscode를 통한 프론트 관리(html, css)

새로운 프론트 폴더를 생성하였다. 01-java에서는 메인 코드만 관리하고 다른 폴더에 프론트 내용을 관리하기 위함이다.
자바가 필요 없으니 자바 프로젝트가 아닌 빈 프로젝트로 생성한다.

프론트 폴더를 vscode로 드래그하여 적용한다.

vscode 역시 외부 라이브러리를 지원하므로 extension 탭에서 해당 라이브러리를 추가한다.
오늘 실습할 내용은 외부 서버를 사용하기 때문이다.
live Server는 코드를 실시간으로 반영할 수 있게 한다.

new folder 생성(html,css) 후 간단한 html문을 선언한 내용이다.
이클립스 폴더 안에 F5를 누르면 해당 내용이 갱신되었음을 확인할 수 있다.

2. html 정의

HTML은 브라우저가 인식할 수 있는 마크업 언어이다.
프로그래밍 언어가 아니고 마크업 언어로, 마크업 태그의 집합이라고 할 수 있다.
다음 예문을 보면 이해하기 쉬울 것이다.

<!DOCTYPE html> 
<!--
    !DOCTYPE html
    브라우저에게 버전 정보를 알려주는 것.
    파일의 첫 줄에 있어야 한다.
    이 문서가 html5로 작성되었음을 알려준다.
-->
<!-- html 태그 : 루트 엘리먼트 = 반드시 하나만 있어야 한다.-->
<html> 
    <!--html의 기본 구조 : <head>와 <body>의 두 가지로 이루어져 있다.
        HTML은 자식 엘리먼트로 head와 body를 가진다.
        head는 브라우저에게 문서의 정보를 알려주는 역할을 한다.
    -->
    <head>
        <title>구조 파악하기</title> <!--문서의 제목 : 상태바(TAB)-->
        <meta charset="utf-8"> <!-- html 인코딩 정보를 브라우져에게 전송. meta : 데이터를 위한 데이터-->
    </head>
    <body> <!-- 실제 페이지에 보여질 내용을 작성한다. -->
        <h2>html 이해하기</h2>
        <h2>html 이해하기</h2>
    </body>
</html>

3. html Syntax

Element : 다음과 같은 꼴의 전체, 묶음체를 아우로는 용어이다.
엘리먼트는 전체 정보를 관리한다라고 이해하면 편할것이다.

<시작태그> 내용 </종료태그>

실제 html문을 뜯어보면 많은 요소들이 많기 때문에, 엘리먼트는 전체에 대한 파싱 정보를 가지고 있는 것으로 이해하자. 마치 자바의 클래스와 같은 역할을 지닌다.
<br> 등의 일부 태그는 </br> 처럼 닫지 않는 경우가 있는데, 이를 닫는 태그가 없는 태그라 한다.

Tag : 브라우저는 이러한 태그를 보고 상태를 이해한다. 태그는 크게 '/' 유무로 두 가지로 나뉜다.

<태그명> ex)<h2><div></h2>
Attribute : 시작 태그에만 붙는 속성을 의미한다.

'이름 = "값"'의 형태로 표현되며 예시는 다음과 같다.<div id="a">
다음과 같이 속성을 여러개 나열할 수도 있다. <div id="a" class = "b">

다음은 임의의 메인 사이트의 코드 주석이다. form 탭에서는 name, id, method의 세 가지 요소와 자식 태그를 가진다.

4. 자주 사용되는 html 태그

4-1. 중요도 `<h1>`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--
      h : 글자 크기, 중요도 표시 (낮은 숫자가 높음 - 검색 엔진이 중요도로 판단함)
      h1 - h6까지 제공
  -->
  <h1> H1 Element </h1>
  <h2> H1 Element </h2>
  <h3> H1 Element </h3>
  <h4> H1 Element </h4>
  <h5> H1 Element </h5>
  <h6> H1 Element </h6>
</body>
</html>

4-2. 스타일 `<style>` 을 통한 CSS 요소 도입

이러한 변경 요소들을 그냥 코드에 적으면 당연하게도 적용되지 않는다. 이를 적용하기 위해 구문 양 끝에 스타일 태그를 추가한다. CSS 요소 추가

  <style>
      h1 {
          font-size: 6em;
          }
  </style>

혹은 개발자 도구(F12) - Style에서 코드 수정 없이 웹에서 직접 적용해볼 수도 있다.

4-3. 줄 띄우기 `<p>,<br>` /

<body>
  <!--
      p(paragraph) : 단락형 태그
      - 단락의 전/후에 빈 줄을 추가
		br : 줄넘김 태그
  -->
  <p>오늘 날씨는 매우 좋습니다.</p>
  <p>오늘은 까치 식당에서 김치찌개를 먹어야겠어요. </p>
  <p>중식은 은소소 또는 짬뽕이...</p>
  <!--브라우저는 엔터와 공백을 그냥 한 칸으로 줄이기 때문에 
      이럴 때는 <br>을 사용할 수도 있다.-->
  <p>은소소 옆에 <br>
      고기국수 양이 어마어마합니다.</p>
  
  <!-- 
      다만 <p>는 영역 선택이 확고하고, <br>의 경우 영역이 애매하기 때문에
      프로그램 입장에서는 <p>를 사용하는 것이 바람직하다.
      -->
</body>

4-4. 강조

<body>
  <!--
      em : 강조하려는 텍스트
      strong : 중요한 내용

      i, b : 화면 보이는 부분만을 처리
  -->
  <p>오늘 날씨는 <i>매우 맑음</i></p>
  <p>오늘 날씨는 <em>매우 맑음</em></p>
  <p>오늘 날씨는 <strong>매우 맑음</strong></p>

</body>

4-5. 문자표

<body>
  <!-- 
      &lt; - less than(<)
      &gt; - great than(>)
      &amp; - (&)
      위의 문자를 작성하면 각각 꺽쇠, &로 쓰여진다는 뜻이다.
  -->
  <p>
      &lt;br&gt;은 줄넘김 태그입니다.
      <br>
      &amp;lt; 는 &lt;로 변환됩니다.
  </p>
</body>

4-6. UL(Unordered List)/OL과 아이템 리스트(il) `<ul><ol><il>`

UL 태그는 정말 많이 쓰인다.
어떠한 항목들이 목차식으로 나열된 것들에 많이 쓰인다.
li(아이템 리스트)로 묶어 관리하기 편하기 때문이다.

<body>
  <!--
      UL = unordered list, OL = ordered list
      li = list item 
  -->
  <ul>
      <li>StartCamp 특화챌린지</li>
      <li>JAVA</li>
      <li>SQL</li>
      <li>알고리즘 기본</li>
  </ul>
  <ol>
      <li>StartCamp 특화챌린지</li>
      <li>JAVA</li>
      <li>SQL</li>
      <li>알고리즘 기본</li>
  </ol>
</body>

일반적으로 리스트 번호는 잘 쓰이지 않기 때문에 ul 태그를 사용해 많은 연관목록들을 묶어 사용한다.

4-7. 이미지

<p>
      <img src="../assets/images/test1.jpg">
  </p>
  <p>
  <!--
      대체 이미지 사용
  -->
      <img src="../assets/images/test.jpg"
          alt="뉴진스"
      >
  </p>
  <p>
      <!--
          마우스 가져다대면 설명 추가, 이미지 너비(자동조절)
      -->
          <img src="../assets/images/test1.jpg"
              alt="뉴진스"
              title="이미지를 설명합니다."
              width="200px" 
          >
      </p>

원리 : <사진 추가 예정>

4-8. 링크 삽입하기 - anchor, target

<!--
      a(anchor) 
      : 링크를 걸어주는 엘리먼트
      : 주로 텍스트나 이미지에 설정
		: -href와 연동, #id와 함께 사용 가능
  -->
  <p> <!-- 현재 창에서 이동하기-->
      <a href="http://www.naver.com">네이버로 이동하기</a>
      <a href="http://www.naver.com"
          target="_self"
      >네이버로 이동하기</a> 
  </p>
  <p> <!-- 새 창으로 열기 -->
      <a href="http://www.naver.com"
          target="_blank"
      >네이버로 이동하기(_blank)</a> 
  </p>
  <p> <!-- 새 창으로 열기(특정 이름의 창에 보여주기.) -->
      <a href="http://www.naver.com"
          target="a"
      >네이버로 이동하기(blank)</a> 
  </p>

target의 의미
target으로 설정한 3번째 "a" 변수의 창은 한 번만 실행이 된다.
이미 blank라는 타켓이 생성되었기 때문이다. 이후 똑같이 클릭하면 blank target 창으로 이동한다.

앵커 사용하여 문서 내 원하는 위치로 이동

<h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1 id="middle">중간 위치</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <h1>연습</h1>
  <p>
      <a href="#middle">중간으로 이동</a>
  </p>

id는 문서 내에 고유한 값들을 지정해준다. id값을 사용하여 특정한 엘리먼트로 이동이 가능하다.

4-9. mp3, mp4 비디오 오디오 파일 적용하기

사전에 asset폴더에 파일을 추가하였다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <audio id ="myAudio" autoplay
          controls> <!--오디오 속성 선언-->
      <source src="../assets/images/raw/test.mp3" 
              type="audio/mpeg"> <!--해석 방식-->
  </audio>

  <p>
      <video width="400" height="400" 
              poster = "../assets/images/test1.jpg" controls> 
          <!--poset = 대표 이미지(썸네일) 설정-->
          <source src="../assets/images/raw/test.mp4">
      </video>
  </p>
</body>
</html>

4-10. (중요) blockline +`<div>`

<div></div>는 아무런 효과가 없고 CSS도 적용되지 않는다. 따라서 요소들을 담아두는 컨테이너의 역할을 한다.
block 속성은 내용물과 상관없이 한 라인을 차지하고, 인라인 속성은 크기에 맞춰 영역을 잡는다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div>
      DIV - 1 <!--block 속성 - 크기에 상관없이 한 블럭을 차지한다-->
  </div>
  <div>
      DIV - 2
  </div>
  <p>p는 블럭 속성이다.</p>
  <h2>h 역시 블럭 속성이다.</h2>

  <span>
      SPAN - 1 <!--inline 속성 - 크기 영역이 내용물에 맞춰 자동으로 설정된다.-->
  </span>
  <span>
      SPAN - 2
  </span>
  <img src="../assets/images/test1.jpg"> <!--이미지도 인라인 속성이다.-->
  <a>a는 인라인 속성이다. </a>
  <a>a는 인라인 속성이다. </a>

</body>
</html>

Q. 사전에 보았던 <li> 역시 블럭 속성이다. 그렇다면 이를 가로로 배치하려면 어떻게 해야 할까?

A. CSS 속성에서 블럭과 인라인을 조절할 수 있는 속성이 있다 = 이러한 영역을 div로 묶게 된다.

인라인 속성의 단점 : 크기를 내용으로 결정짓게 되므로 원하는 깔끔한 크기 비율이 나오지 않을 수도 있음. 이를 위해 블럭과 인라인을 병행하여 적용하게 된다. 다음 예시 구문을 보자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      /*
          inline : 내용에 맞춰 크기가 자동으로 지정
          display로 속성을 변경할 수 있다
          결론 : div안에 이러한 내용물을 담는 컨테이너로 쓴다.
      */
      div{
          border: 5px solid #f77124;
          width : 500;
          height: 150;
          display: inline;
          display: inline-block;
      }
      span{
          border: 5px solid #123456
      }
      h2{
          border: 5px solid #1fe984
      }
  </style>
</head>
<body>
  <div>오늘의 날씨 : 맑음</div>
  <span>오늘 저녁은 감자탕</span>
  <span>오징어볶음..</span>
  <h2>뉴진스</h2>
</body>
</html>

4-11. table / 그룹 선택자 / margin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
  <title>Document</title>
  <style> 
      /* 그룹 선택자 적용 */
      table, th, td{
          border: 2px solid #2b2525;
          border-collapse: collapse; /* border간 겹침 적용 */
      }
      /* 독립 적용 */
      table{
          width: 60%; /* 전체 창(부모)의 60% 적용 */
          padding: 0%; /* 엘리먼트간 간격 적용 */
      }
      th{
          background-color: rgb(193, 225, 238);
          color : coral;
      }
      td{
          margin: 0 auto;
      }
  </style>
</head>
<body>
  <div>
      <table> 
          <!--
          Data를 Grid 형태로 보여줄 때 사용
          자식 구조 : table > thead, tbody, tfoot > tr > th, td
          -->
          <!-- th : CSS 적용 / td 적용x-->
          <tr>
              <th colspan="3">선수의 정보</th>             
          </tr>
          <tr>
              <th>이름</th>
              <th>국적</th>
              <th>소속팀</th>
          </tr>
          <tr>
              <td>손흥민</td>
              <td rowspan="2">대한민국</td>
              <td>토트넘</td>
          </tr>
          <tr>
              <td>이강인</td>
              <!--<td>대한민국</td> 줄 밀림으로 인해 삭제-->
              <td>마요르카</td>
          </tr>
          <tr>
              <td>총인원</td>
              <!--여백 칸을 1명 칸과 합치고 싶다면?-->
              <td colspan="2">1명</td>             
          </tr>
      </table>
  </div>

</body>
</html>

margin

margin 값은 각각 top / right / bottom / left 순으로 띄움 간격을 설정한다.
만약 margin 0 auto 로 설정하였다면 중앙 가운데로 자동 정렬된다.

4-12. form(input/select/textarea)

GUI 구성 요소에 대한 예문을 확인해보자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 구조 요약
  form
      input = "text|password|radio|checkbox|file|button|reset|submit|hidden"
      select
      textarea
  -->
  <form>
  <div>
      <label>input type="text"</label> 
      <input type="text" name ="msg"/>
  </div>
  <div>
      <label>input type="password"</label>
      <input type="password" name = "password"/>
  </div>
  <div>
      <label>input type="radio"</label>
      <label><input type="radio" />남</label>
  </div>
  <div>
      <label>input type="checkbox"</label>
      <!--라벨링 기능 : id 속성을 통해 글씨에도 checkbox 옵션 적용-->>
      <input id="java" type="checkbox" />
      <label for="java">자바</label>
      <label><input type="checkbox" />SQL</label>
      <label><input type="checkbox" />HTML</label>
  </div>
  <div>
      <label>input type="file"</label>
      <input type="file" />
  </div>
  <div>
      <label>input type="button"</label>
      <input type="button" value="등록" 
              onclick="alert('click되었음')"/>
      <!--다른 방법-->
      <button type="button" onclick="alert('click되었음')">등록</button>
  </div>
  <div>
      <label>input type="reset"</label>
      <input type="reset" value="초기화" />
      <!--다른 방법-->
      <button type="reset">초기화</button>        
  </div>
  <div>
      <label>input type="submit"</label>
      <input type="submit" value="가입" />
      <!--다른 방법-->
      <button type="submit">가입</button>
  </div>
  <div>
      <label>input type="hidden"</label>
      <input type="hidden" name="mode" value="reg" />
  </div>
  <!--여기까지 input-->
  <div>
      <label>select</label>
      <select>
          <option>선택</option>
          <option>자바</option>
          <option>파이썬</option>
      </select>
  </div>
  <div>
      <label>textarea</label>
      <textarea rows="6" cols="80"></textarea>
  </div>
</form>
</body>
</html>

실행 html 화면
버튼 클릭 구현 onclick()

<label></label>을 사용하여 가둔 내용물을 연결시킬 수 있다.

4-13. 스타일 `<style>` 을 통한 CSS 요소 도입(2)

전체 선택자

    <style>
      /* 선택자 - 효과 */
      *{ /* 모든 요소 선택*/
          border: 3px solid;
      }
  </style>

태그 선택자 (특정 요소 선택)

<style>
      /* 선택자 - 효과 */
      h2 { /* 태그 선택자 */
          border: 2px solid rgb(67, 139, 211);
      }
  </style>

class 속성

   <style>
      /* 선택자 - 효과 */
      .m5 { /* class 속성의 값이 m5인 엘리먼트 선택 */
          border: 2px solid rgb(67, 139, 211);
      }

  </style>
</head>
<body>
  <h2>CSS 연습</h2>
  <ul>
      <li class="m5">자바</li>
      <li>HTML</li>
      <li>CSS</li>
  </ul>
</body>

id 속성 사용(자주 쓰이지는 않는다)

<style>
      #lang { /* 특정 id가 lang인 엘리먼트 선택 */
          /* 사실 많이 쓰이지는 않음
             왜? id는 개발자가 다른 용도로 자주 사용하기 때문.
          */
          width: 400px;
          border-bottom: 10px solid rgb(67, 139, 211);
      }
  </style>
</head>
<body>
  <h2 >CSS 연습</h2>
  <ul>
      <li>자바</li>
      <li id = "lang">HTML</li>
      <li>CSS</li>
  </ul>
</body>

중첩 기능

<style>
      .m5{ 
          width: 400px;
          border: 1px solid rgb(67, 139, 211);
      }
      /* ul의 자손 중 class 속성이 m5인 ul을 찾고 싶다 + 바로 밑에 있는 li를 적용 시키고 싶다. */
      ul.m5 > li { 
          margin: 2rem; 
          border: 2px solid red;
      }

  </style>
</head>
<body>
  <h2 >CSS 연습</h2>
  <ul class = "m5">
      <!---->
      <li>자바</li>
      <li id = "lang">HTML</li>
      <li>CSS</li>
  </ul>
</body>
</html>

4-14. float, clear, 하위폴더 적용, id/class적용

<style>
      .container {
          width: 1000px;
          min-height: 200px;
          margin: 30px auto;
          border: 10px solid brown;
      }
      .container > div{ /* 해당 클래스의 하위 <div>에 전부 적용*/
          width: 100px;
          height: 100px;
          border: 1px solid rgb(250, 25, 25);
          margin: 10px;
          /*display: inline-block; - 자체 여백이 생김! float 사용*/

          font-size: 50px;
      }
      .fr {
          float: left;
      }
      #b2 {
          border: 12px solid black;
          clear:
      }
  </style>
</head>
<body>
  <div class="container">
      <div class = "fr">1</div>
      <div class = "fr">2</div>
      <div id = "b2">3</div>
      <div>4</div>

  </div>
</body>

4-15. 응용 2 -틀배치

 <style>
      * { /*모든 요소들의 마진과 패딩을 0으로 만듬*/
          font-size: 40;
          margin: 0;
          padding: 0; /*왼쪽 오른쪽 두개*/
          box-sizing: border-box; 
          /*padding, margin 등의 요소로 크기 계산이 힘드므로 해당 기준으로 최대 사이즈를 정함.
            해당 설정은 border-box, 즉 경계선까지를 사이즈로 정하겠다는 뜻임.*/
      }
      .container{
          width: 1000px;
          margin: 30px auto;
          background: ivory;
      }
      .header, .footer{
          width: 1000px;
          border: 2px solid #345;
      }
      .content{
          width: 800px;
          min-height: 500px; /* 내용이 없어도 크기를 가지고 싶다. */
          border: 2px solid #345;
          float: left;

      }
      .aside{ /*content 옆에 붙이고 싶다 = float 사용*/
          width: 200px;
          min-height: 200px;
          border: 2px solid #345;
          float: left; /*이렇게 하면 content 옆에 붙지만, 아래의 footer가 같이 따라온다.*/
      }
      .footer{
          clear: both; /*클리어 구문을 통해 무시*/
      }

  </style>
</head>
<body>
  <div class="container">
      <h2>float 속성을 이용한 레이아웃 배치하기</h2>
      <div class="header">header</div>
      <div class="content">content</div>
      <div class="aside">side</div>
      <div class="footer">footer</div>
  </div>

5. 사담 or 편리한 팁

자동 완성 코드

vscode에서는 Emmet이라 하는 편리한 자동 완성 구조를 제공한다. Emmet 명령어를 사용하면 반복 작업에서의 속도를 개선할 수 있다.

브라우저마다 CSS가 다르기 때문에 같은 코드라도 크롬, 혹은 다른 브라우져라면 다르게 실행될 수 있다. 다음 사진은 크롬 자체에서 작성된 코드에 대한 CSS 기능을 수행한 것이다.

단축키 확인

vscode - help - keyboard shortcuts reference

쉽게 클래스, id 선언하기

'.클래스이름' , '#id이름' 후 스페이스바 누르면 div 컨테이너 자동 생성

블랑

안녕하세요.

이전 포스트

230111 - java 기초

다음 포스트

230112 - html, css 기초

Daily Study

1. 사전 작업

vscode를 통한 프론트 관리(html, css)

2. html 정의

3. html Syntax

4. 자주 사용되는 html 태그

4-1. 중요도 `<h1>`

4-2. 스타일 `<style>` 을 통한 CSS 요소 도입

4-3. 줄 띄우기 `<p>,<br>` /

4-4. 강조

4-5. 문자표

4-6. UL(Unordered List)/OL과 아이템 리스트(il) `<ul><ol><il>`

4-7. 이미지

4-8. 링크 삽입하기 - anchor, target

4-9. mp3, mp4 비디오 오디오 파일 적용하기

4-10. (중요) blockline +`<div>`

4-11. table / 그룹 선택자 / margin

4-12. form(input/select/textarea)

4-13. 스타일 `<style>` 을 통한 CSS 요소 도입(2)

4-14. float, clear, 하위폴더 적용, id/class적용

4-15. 응용 2 -틀배치

5. 사담 or 편리한 팁

자동 완성 코드

단축키 확인

쉽게 클래스, id 선언하기

230111 - java 기초

230116 - JAVA 기본 문법, 배열

0개의 댓글

230112 - html, css 기초

Daily Study

1. 사전 작업

vscode를 통한 프론트 관리(html, css)

2. html 정의

3. html Syntax

4. 자주 사용되는 html 태그

4-1. 중요도 <h1>

4-2. 스타일 <style> 을 통한 CSS 요소 도입

4-3. 줄 띄우기 <p>,<br> /

4-4. 강조

4-5. 문자표

4-6. UL(Unordered List)/OL과 아이템 리스트(il) <ul><ol><il>

4-7. 이미지

4-8. 링크 삽입하기 - anchor, target

4-9. mp3, mp4 비디오 오디오 파일 적용하기

4-10. (중요) blockline +<div>

4-11. table / 그룹 선택자 / margin

4-12. form(input/select/textarea)

4-13. 스타일 <style> 을 통한 CSS 요소 도입(2)

4-14. float, clear, 하위폴더 적용, id/class적용

4-15. 응용 2 -틀배치

5. 사담 or 편리한 팁

자동 완성 코드

단축키 확인

쉽게 클래스, id 선언하기

230111 - java 기초

230116 - JAVA 기본 문법, 배열

0개의 댓글

4-1. 중요도 `<h1>`

4-2. 스타일 `<style>` 을 통한 CSS 요소 도입

4-3. 줄 띄우기 `<p>,<br>` /

4-6. UL(Unordered List)/OL과 아이템 리스트(il) `<ul><ol><il>`

4-10. (중요) blockline +`<div>`

4-13. 스타일 `<style>` 을 통한 CSS 요소 도입(2)