자라나라
[chap.3]html 구조를 알아보자 본문
지난 이틀은 html의 다양한 elements들을 배우고 어떤 기능들을 하는지 살펴보았다.
오늘은 document의 전체적인 틀을 순차적으로 알아보는 걸로!
1. html 선언 ( document type declaration)
We can let web browsers know that we are using HTML by starting our document with a document type declaration.
쉽게 말해 선언된 html의 버전이 무엇인지 웹 브라우저에 알려주는 역할을 한다.
<!DOCTYPE html>
It tells the browser what type of document to expect, along with what version of HTML is being used in the document.<!DOCTYPE html> is referring to HTML5, as it is the current standard.
In the future, however, a new standard will override HTML5. To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents.
2. html 태그 추가하기
html 선언으로 브라우저에 document type과 version은 알려주었으니 이제 포함된 내용이 html code로 작성된다는 걸 알려줘야한다
위와 같이 html을 선언 한 뒤 html 태그를 넣어준다.이제 오프닝, 클로징 태그 사이에 document를 작성하면 된다.
Anything between the opening <html> and closing </html> tags will be interpreted as HTML code. Without these tags, it’s possible that browsers could incorrectly interpret your HTML code.
3. head 태그 추가하기
The <head> element contains the metadata for a web page. Metadata is information about the page that isn’t displayed directly on the web page. Unlike the information inside of the <body> tag, the metadata in the head is information about the page itself.
<title>, <style>, <meta>, <link>, <script>, <base> elements에 대한 container이다.
3-1. title 태그 추가하기
위에서 말했듯 <head> 내의 태그들은 웹페이지에 보이지 않는다.
타이틀태그는 윈도우탭에서 확인할 수 있다.
It is displayed within a window tab and is used for page indexing.
<head>의 elements를 더 다룰 줄 알았는데 다른 내용으로 넘어가 버리네
codecademy 커리큘럼을 따르기로 했으니 일단 패스!
(안 나오면 나중에 따로 공부하는 걸로)
4. 다른 페이지 링크 걸기
기본 구조는 위와 같다. 차근차근 살펴보면,
1. anchor element(=<a>)를 만들어 오프닝, 클로징 태그 사이에 웹페이지에 표시될 텍스트를 입력해준다.
<a>Learn More</a>
2. anchor 태그 안에 링크할 웹사이트의 주소를 넣어주는데, 이를 위해 hyperlink reference attribute인 href를 입력한다.
the href attribute has been set to the value of the URL
위와 같이 입력하면 웹사이트에는
형태로 나타난다. 글자를 클릭하면 링크해둔 웹사이트로 이동된다.
+ 이렇게만 코드를 입력할 시 보고있는 웹페이지가 이동된다. 이럴 때, 링크를 열어줄 페이지(탭)을 특정해주는 것이
target attribute
The target attribute can be added directly to the opening tag of the anchor element, just like the href attribute. In the example above, setting the target attribute to "_blank" instructs the browser to open the relevant Wikipedia page in a new tab.
'HTML' 카테고리의 다른 글
| HTML elements reference 사이트 (0) | 2022.02.07 |
|---|---|
| [chap.5]html 가독성 좋게 만들기 (0) | 2022.02.07 |
| [chap.4]링크걸기 (0) | 2022.02.06 |
| [chap.2]html 둘째 날 (0) | 2022.02.05 |
| [chap.1]html을 시작했다 (0) | 2022.02.04 |
