티스토리 뷰
HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드. 웹사이트의 모습을 기술하기 위한 마크업 언어이다.
- 여는 태그 (Opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸진다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타낸다. 이 예제에서는 문단이 시작되는 위치를 나타낸다.
- 닫는 태그 (Closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다르다. 이것은 요소의 끝을 나타낸다. 이 예제에서는 문단이 끝나는 위치를 나타낸다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시된다.
- 콘텐츠 (Content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트다.
- 요소 (Element): 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어진다.
요소는 속성도 가질 수 있는데, 다음과 같이 사용한다.
속성은 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다. 이 예제에서, 클래스 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있다. required같은 어떤 속성은 값을 가지지 않는다.
속성이 항상 가져야 하는 것은 다음과 같다.
- 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 한다.
- 속성 이름 뒤에는 등호(=)가 와야 한다.
- 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 한다.
요소중첩
요소를 다른 요소의 안에 놓을 수 있습니다. 이것을 중첩(nesting) 이라고 부른다. our cat is very grumpy 라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는 요소로 "very"를 감싸면 된다.
<p>My cat is <strong>very</strong> grumpy.</p>하지만 요소가 적절히 중첩되었는지 확인할 필요가 있다. 위의 예제에서 우리는
요소를 먼저 열었고, 그 다음 을 열었다. 그러므로 요소를 먼저 닫고, 다음으로
를 닫아야 한다. 다음은 잘못된 것이다.
<p>My cat is <strong>very grumpy.</p></strong>요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 된다. 만약 위와 같이 겹치게 되면, 웹 브라우저는 무엇을 표현하려고 했었는지 추측을 해서 최선을 다해 화면에 보여주겠지만, 의도한 것과 다르게 보여질 수 있다. 그러니까 이렇게 하면 안된다.
빈 요소
어떤 요소들은 내용을 갖지 않는다. 그리고 이것을 빈 요소라고 한다.
<img src="images/firefox-icon.png" alt="My test image" />이 요소는 두 개의 속성을 포함하고 있으나 닫는 태그가 없다. 이미지 요소는 효과를 주기 위해 콘텐츠를 감싸지 않기 때문이다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것이다.
HTML 문서 해부
각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례이다. index.html 예제를 살펴보자.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>여기 살펴볼 것들이다.
- !doctype 이것은 필수 서문이다. 시간의 안개 속에서, HTML이 막 나왔을 때 (1991년 2월쯤), doctype은 자동 오류 확인이나 다른 유용한 것을 의미하는 좋은 HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였다. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐이다. 지금은 그게 알아야 할 전부 이다.
- 요소. 이 요소는 페이지 전체의 콘텐츠를 감싸며, 루트(root) 요소라고도 한다. 이것은 또한 문서의 고유 언어를 설정하는 lang 속성을 포함한다.
- 요소. 이 요소는 페이지를 조회하는 사람들에게 보여주는 콘텐츠가 페이지 제작자가 HTML 페이지에 포함하고 싶어하는 모든 재료들을 위한 컨테이너 역할을 한다. 여기에는 keywords와 검색 결과에 표시되길 원하는 페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들을 포함한다.
- 요소는 문서가 사용해야 할 문자 집합을 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있는 utf-8으로 설정한다. 본질적으로 여러분이 사용할 수 있는 어떠한 문자 콘텐츠도 다룰 수 있다. 이 문자 집합을 설정하지 않을 이유가 없으며, 이렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있다.
- 뷰포트 요소는 뷰포트의 너비에서 페이지가 렌더링하도록하며, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링한 후 축소하는 것을 방지한다.
- 요소는 페이지의 제목을 설정한다, 로드된 페이지 브라우저의 탭에 나타나는 제목이다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용된다.
- 요소는 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있다.
블럭 레벨 요소 vs 인라인 요소(Block versus inline elements)
HTML에는 두가지 종류의 요소(Element) 가 있다. 블록 레벨 요소(Block level element) 와 인라인 요소(Inline element) 이다.
- 블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소이다. 블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타난다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꾼다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용된다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현할 수 있다. 블록 레벨 요소는 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있다.
- 인라인 요소(Inline elements)는 항상 블록 레벨 요소내에 포함되어 있다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있다. 인라인 요소는 새로운 줄(Line)을 만들지 않습니다. 즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 된다. 예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인, 텍스트(Text)를 강조하는 요소 등이 있다.
참과 거짓 속성(Boolean attributes)
때때로 값이 없는 속성을 볼 수 있을텐데 이것은 허용되는 것이다. 이를 불 속성이라고 하며, 일반적으로 그 속성의 이름과 동일한 하나의 값만을 가질 수 있다. 예를 들어 disabled 속성을 양식 입력 요소에 할당하면 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시) 할 수 있다.
<input type="text" disabled="disabled">이것은 다음과 같이 줄여쓸 수 있다. .
<input type="text" disabled />