HTML 시작

HTML이란

Hypertext Markup Language

링크 로 서로 연결된 문서를 만들며,
텍스트의 내용, 구조, 의미 를 작성한다.

링크

링크의 상대주소 ( Relative URL )

현재폴더 ./
상위폴더 ../
최상위폴더 /

URI 프래그먼트 ( URI Fragment )

페이지의 특정 부분을 가리키는 주소

원하는 곳에 id 속성을 지정해두고,
링크 주소로 사용할 때는 맨 끝에 #아이디-이름 으로 사용

팀 버너스리는 "인터넷 사용 자체가 인권"<a href="#note-1">[1]</a>이라고 말했다.

...

<p id="note-1">[1] 서울디지털포럼 2013 기조연설</p>

target 속성

새 탭을 열거나 현재 탭, 또는 내가 원하는 탭을 열도록 targeting 가능

<a href="https://naver.com" target="_blank"><!-- 새 창으로 열기 -->
  네이버 
</a>
<a href="https://naver.com" target="_self"><!-- 현재 창 -->
  네이버
</a>
<a href="https://naver.com" target="movie"><!-- 내가 원하는 창 -->
  네이버
</a>

텍스트

자주 사용하는 텍스트 태그

<strong> 중요한 내용을 강조 표시 (두꺼운 글씨 in Chrome)
<em> 중요한 내용을 강조 표시 (기울임 in Chrome)
<s> 어떤 내용이 취소, 제거되었다는 의미 (글자 위에 선긋기 in Chrome)
<blockquote> 다른 글에서 가져온 내용을 긴글로 인용
<q> 다른 글에서 가져온 내용을 짧게 인용
<sub> 아래첨자
<sup> 윗첨자
<hr> 주제 전환 (horizontal line)
<pre> html에 적혀있는 것을 그대로 보여줄 때 사용 (코드)
<code> 짧은 코드를 보여줄 때 사용

단순히 글자 효과를 적용할 땐 css 사용
의미상 강조해야할 때만 사용

리스트

순서 리스트 (Ordered List)

<h2>상영작 순위</h2>
<ol>
  <li>라라랜드</li>
  <li>명량</li>
  <li>극한직업</li>
  <li>신과함께: 죄와 벌</li>
  <li>국제시장</li>
  <li>어벤져스: 엔드게임</li>
</ol>

순서 없는 리스트 (Unordered List)

<h2>카테고리</h2>
<ul>
  <li>한국 영화</li>
  <li>외국 영화</li>
  <li>드라마</li>
  <li>예능</li>
  <li>영화</li>
  <li>프로야구</li>
</ul>

리스트 스타일링

1. html
   type 속성으로 리스트의 기호를 바꿀 수 있음
   a i I 1

2. css
   list-style 로 리스트의 기호를 바꿀 수 있음

   ul {
    list-style: disc; /* 동그라미 */
   }
   ul {
    list-style: none; 
   }
   ul > li {
    display: inline-block; /* 리스트 항목을 한 줄로 작성 */
   }