HTML
어떤 컨텐츠를 만드는 것은 html 코드를 생성한다는 것.
태그는 단순히 컨텐츠를 시각적으로 꾸미는 역할 뿐만 아니라, 그 컨텐츠의 정보를 표현하는 역할을 하게 된다.
웹은 모든 운영체제에서 동작하고, 그 소스코드는 누구나 볼 수 있으며, 누구나 사용할수 있는 공공재이다.
웹의 핵심적인 철학인 접근성(accessibility)은 신체적인 제약이 있는 사람들도 사용할 수 있게 한다.
즉, 시각적인 화려함보다 웹의 근본 의의인 정보를 탄탄하게 하는 것에 더 중요하다고 할 수 있다.
속성 (Attribute)
태그의 이름만으로는 정보가 부족할 경우가 있다.
이를 충족시키기 위해 속성이라는 문법을 만들게 된다.
이런 속성을 통해 더 많은 의미를 부가할 수 있게 되었다.
예를 들어 아래의 태그 중 img 태그를 사용하면 원하는 이미지를 삽입할 수 있다.
그러나 어떤 이미지를, 어떤 크기로 삽입할지 등에 대한 정보는 전혀 없기 때문에 src = ... , width = ... 등의 속성을 통해 나타낼 수 있다.
Code
-
기본 :
Hello, world! Hello, world!
> Hello, world! Hello, world! -
문단 구분 :
Hello, world! <p> Hello, world! </p>
> Hello, world!Hello, world!
-
여백 조정[CSS] :
Hello, world! <p style="margin-top:0px;"> Hello, world! </p>
> Hello, world!Hello, world!
-
이미지 삽입 :
<img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80" width = "70%">
부모-자식 Tag
어떤 태그들은 부모와 자식 태그가 항상 따라다니는 것들이 있다.
<li> </li>와 같은 항목은 그 항목이 어디서부터 어디까지가 연관된 항목인지 grouping하기위한 부모 태그를 갖고 있다.
*<li>는 2대가 같이 다니지만, <table>은 3대가 같이 다닌다.
부모 : <ul> </ul>(Unordered List),<ol> </ol>(Ordered List)
자식 : <li> </li>
*부모 태그에서 속성을 통해 리스트의 표시를 변경 가능하다.
**ex) <ul style = "list-style-type: none></ul> : 표시 없는 리스트
Code
<ul>
<li> 1 </li>
<li> 2 </li>
</ul>
<ol>
<li> A </li>
<li> B </li>
</ol>> 결과
- 1
- 2
- A
- B
문서 구조
웹 페이지를 아래와 같은 태그들을 통해 구조화 한다.
<!doctype html> : HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되며, html 태그는 아니지만 페이지의 html 버젼을 선언하는 선언문이다.
<html></html> : HTML 태그.
<title></title> : 웹 페이지의 탭 제목을 바꿔준다.
<meta charset = "" 해당 웹페이지에 ""에 해당하는 유니코드 인코딩을 사용한다.
<head></head> : 웹 페이지의 본문을 설명하는 태그를 구분 표시한다.
<body></body> : 웹 페이지의 본문을 표시한다.
웹 페이지의 연결
웹에서 가장 강력한 역할을 하는 태그로 검색엔진은 이 태그를 통해 전세계의 웹을 탐색하고 검색 결과를 표현할 수 있다.
도시의 길, 인체의 혈관과 같은 태그로서 정보를 연결해주는 중요한 역할을 한다.
HTML에서 HT(HyperText)에 해당하는 태그, 바로 <a> : Anchor이다.
<a> 태그로 원하는 곳에 링크를 만들 수 있다.
<a> 링크 </a>
href = " " : 링크를 참조할 주소를 입력(h = hyperlink , ref = reference)
target = "_blank" : 링크를 새 탭으로 연결
title = " " : 링크의 툴팁을 만들어 준다.
