3강 - 01.HTML텍스트와 하이퍼링크

실습1 - 카테고리, 리스트

<h1>Heading level1</h1>
<h2>Heading level2</h2>

<p>텍스트를 <em>단락</em>으로 정의할 때 사용된다.</p>

<strong>굵게 굵게</strong>
<p><strong>태그 내에서도 굵게 굵게!!</strong></p>

<!-- ordered list -->
<ol>
  <li>일</li>
  <li>이</li>
  <li>삼</li>
  <li>사
<!--     unordered list -->
<!--     ul과 ol의 종속성은 li만 가능 -->
    <ul>
      <li>11</li>
      <li>22</li>
      <li>33</li>
    </ul>
</ol>

실습1

 

실습2 - 정의와 설명

<!-- 정의와 설명 -->
<!-- 꼭 한개씩 작성할 필요는 없다 -->
<dl>
  <dt><strong>HTML</strong></dt>
  <dd>웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 포맷</dd>
  <dt><strong>CSS</strong></dt>
  <dd>웹페이지의 스타일링과 디자인을 위한 스타일시트</dd>
  <dd>css css css</dd>
</dl>

실습2

실습3 - 하이퍼링크, 코드태그

<!-- 하이퍼링크 -->
<a href="http://naver.com">naver로 이동</a><p></p>
<a href="http://www.ccssbb.tistory.com">~천숭2의 티스토리 블로그~</a>

<!-- 꺾새 대신 &lt; 내용 &gt;처럼 감싸줘야한다 -->
<!-- 이렇게 대체표현을 문자엔티티표현이라고 함 (세 개가 더 있음) -->
<pre>
  <code> &lt; HTML &gt;</code>
  <code> &lt; CSS &gt;</code>
  <code>코드태그.</code>
</pre>

<p>
  서버가 수행해야 할 동작을 의미합니다. <code>GET</code>, <code>POST</code>, <code>DELETE</code>등이 있다.
</p>

실습3

---

탭했을때의 기능을 미리 알려주는 코드펜

* 단축키 *
li * n : n개 만큼 리스트 생성
ctrl + / : 주석