[0915] html의 구조, 기본
1. Html의 기본 구조
<html> -> <head> -> <body>의 태그로 이뤄져있으며, 이 세개의 태그가 순서대로 나오고 그것과 상응하는 짝 태그가 있어야 한다. 기본 구조이다.
head는 브라우저에게 알려줄 정보를 담고 있는 것이고, body는 디스플레이에 표현되는 정보를 나타내는 곳이다.
2. MarkUp?
텍스트를 감싸서, 이것을 어떻게 처리해야 할지 정해주는 부호를 말한다. 예를 들어 태그같은 것이다.
<b> 안녕하세요 </b>라고 선언했을 때, 이 글씨를 굵게 처리하라고 명령하는 것을 의미한다.
3. HTML의 간단한 역사
XHTML이 HTML의 개발 단계의 마지막일 것이라고 했으나, 단순히 웹만이 아닌 웹에서 어플리케이션을 돌리고 하는 확장하는 역할을 하고 싶었기 때문에 이것에 대해 개발을 더 해서 나온 것이 HTML5이다.
4. HTML의 구조
html은 꼭 태그가 중첩되어있는 구조를 가져야 한다. 즉, 각 태그를 시작했다면 꼭 닫아야 한다. 짝이 없다면 제대로 동작하지 않는 코드가 된다. 이것을 nested 구조라고 한다.
대문자 소문자를 구별해서 사용하지는 않으나, 가급적 소문자로 쓸 것을 권장한다.
빈 문자를 사용할 때에는 <br/> 이렇게 태그 맨 뒤에 /를 붙여서 사용한다. 이것을 이렇게 사용하지 않으면 감점의 요인이 될 수 있다고 하니 주의하자.
태그 속성의 내용을 사용할 때 ""를 사용한다. 예를 들어 <a href="http://naver.com"> 같은 경우이다. 그런데, 이 문장에서 ""를 쓰지 않아도 인식이 된다. 그러나, 왠만하면 이 형식을 꼭 지켜주는 것이 좋다.
5. Element 구분
- Semantic Elie
<b>는 bold체를 말하며 formatting으로 브라우저에서 어떠한 모양으로 표시해주세요, 라는 뜻이 된다.
<h1>은 어떠한 모양으로 표시하는지를 지시한 formatting과 semantic이 포함되어있는 경우이다.
semantic이란, 뜻은 의미 있다는 뜻이며 일종의 태그의 등급을 매기는 것이다. h1의 경우 Ranking이 1등급이라는 소리다. 의미를 파악해야한다.
6. 기타 태그
(1) <pre>
원래는 <p>나 <h1..2>태그를 이용했을 때 문장에서 스페이스바를 여러번 쳐도 한번밖에 반영이 되지 않는 모습을 볼 수 있다. 그러나 <pre>태그를 사용하면 이 태그 안에 있는 문장에서 스페이스바를 몇 번을 치던지 모두 디스플레이에 고스란히 반영되는 모습을 볼 수 있다.
(2) <em>
이 format을 italic으로 표시하면서도, semantic 강조하라고 설정하는 것이다. (semantic의 정확한 뜻을 모르겠다.)
(3) <mark>
텍스트에 강조 표시를 할 수 있는 것. 마치 형광펜을 그어놓은 듯한 효과를 줄 수 있다.
(4) <addr>
주소라는 것을 뜻해주며, semantic이다. 웹 페이지를 크롤링할 때(그 요소만 골라서 가져오니까)유용하다.
(5) <bdo>
글씨를 반대로 뜨게 해 주는 태그이다. 우리나라와 달리 오른쪽에서 왼쪽으로 읽거나 쓰는 사람들을 위한 태그이다.
7. id
속성 중 하나로, 문수에서 유일한 값을 가져야 한다. 중복될 수 없다.
8. CSS 주의사항
만약 스타일이 두 가지에 선언되어있다면 바로 문장에 속성처럼 적용한 CSS보다 style에 선언한 속성이 우선순위가 더 높으므로, 아무리 따로 지정해주더라도 이 style에 지정된 모양으로 고정되어 바뀌지 않을 수 있음에 유의해야 한다.
9. <table>
여러가지가 있지만, 그 중 저번에 사용하면서도 생각이 나지 않았던 태그는 <caption>이다.
표의 제목을 붙이는 태그로, 표의 항상 위에 붙는다.
추가, 시멘틱(semantic)하다는 것은...
semantic HTML을 직역하면, 의미론적 HTML이다. 문서의 의미에 맞게, 어플리케이션의 의미에 맞게 HTML을 작성할 수 있도록 하는 것을 의미한다. 그러나 마땅한 정답이 없기 때문에, HTML의 각 요소의 의미에 맞게 HTML을 작성하는 것이 중요하다. 그래서 <addr>태그 같은 경우 꼭, 필수적으로 주소를 쓸 때 써야하는 것은 아니지만 의도와 맞게 구성을 하려면 사용을 해야하는 경우인데, 이것이 바로 semantic HTML 프로그래밍을 하는 경우라고 할 수 있다.
그래서, h1..h2 이러한 태그와 addr 태그들이 시멘틱하다는 것이다.
'Undergraduate Records' 카테고리의 다른 글
| [0916] 리눅스 명령어 (0) | 2019.09.16 |
|---|---|
| [0915] 과제: Makefile 만들기 (0) | 2019.09.15 |
| [학습튜터링] 자기소개 페이지 만들기 (1) | 2019.09.12 |
| [0909] 컴퓨터구조 이론 복습 (0) | 2019.09.12 |
| [0911] 객체지향설계 이론 복습 (0) | 2019.09.12 |
