Saturday_May_9
.
.
.
매일 조금씩이라도 블로그를 작성하는 하는 습관을 들여야겠다.
라고 마음을 먹었으나... 처음 해보는 거라 얼마나 오래갈지 모르겠다 ㅠ
우선!
HTML 이란?
HyperText Markup Language의 약자이며,
웹 페이지의 뼈대라고도
그냥 웹 페이지의 구조와 내용을 생성하는 데 사용된다. 끝!
- HTML은 요소(Element)들로 이루어져 있다.
- HTML의 요소는 위 사진처럼 구조를 이룬다.
- 여는 태그(Opening Tag)와 닫는 태그(Closing Tag),
그 안에 내용(Content)이 들어있고 이것을 통틀어 요소 라고 한다.
- 그리고 모든 HTML 요소들은 <HTML>와 </HTML> 사이에 들어가야 한다.
들여쓰기
- 들여 쓰기(Space 2칸 정도)를 사용하는 것을 권장한다고 한다.
- 또한 요소 안에 다른 요소가 들어갈 수 있다.
- 위 사진을 예로 들자면, Div 태그가 부모 태그이고 H2, H3 태그들이 부모 태그인 Div 태그의 자식 태그인 것이다.
<Body>
<body></body>
- 웹 페이지를 만드는 데 사용하는 주요 HTML 태그 중 하나는 Body 태그이다.
- Body 태그의 '여는 태그와 닫는 태그 사이의 내용' 만 화면에 표시할 수 있다.
- 위에 HTML을 소개할 때 언급했듯이, 이미지, 텍스트 또는 비디오와 같은
웹 사이트에 나타나는 내용의 구조를 Body 태그 사이에 넣어 제공할 수 있다.
<h1> ~ <h6>
제목과 하위 제목은 <h1>과 <h6> 태그로 텍스트를 확대하는 데 사용된다.
다음은 태그별 크기이다.<h1>This is h1 tag</h1>This is h1 tag
<h2>This is h2 tag</h2>This is h2 tag
<h3>This is h3 tag</h3>This is h3 tag
<h4>This is h4 tag</h4>This is h4 tag
<h5>This is h5 tag</h5>This is h5 tag
<h6>This is h6 tag</h6>This is h6 tag
<p> & <span> & <div>
다음 태그들은 텍스트 또는 블록을 지정하는데 사용된다.
이 부분은 나중에 CSS를 할 때 빛을 바랄 것이다.
<em> & <strong>
다음 태그들은 텍스트를 강조하는 데에 사용된다.
<em>This is em tag</em> <strong>This is strong tag</strong>This is em tag
em 태그는 이렇게 이탤릭 서체처럼 옆으로 휘고
This is strong tag
strong 태그는 진하게 볼드 서체와 같이 된다.
<br>
다음 태그를 이용해 줄 바꿈이 가능하다.
<p>안녕하세요<br>저는 이민호입니다.</p>예를 들어 이렇게 코드를 작성하게 되면
안녕하세요 저는 이민호입니다.이렇게 보인다.
<ul> & <ol>
다음 태그들은 Unordered List와 Ordered List의 줄임말이다.
Unordered List (순서가 없는 목록)
<ul> <li>토트넘</li> <li>맨유</li> <li>리버풀</li> </ul>
- 토트넘
- 맨유
- 리버풀
Ordered List (순서가 있는 목록)
<ol> <li>레알 마드리드</li> <li>바르셀로나</li> <li>아틀레티코 마드리드</li> </ol>
- 레알 마드리드
- 바르셀로나
- 아틀레티코 마드리드
<img> & <video>
다음 태그들을 이용해 이미지나 비디오들을 추가할 수 있다.
<img>
<img src="image_location.jpg"/>
- 일단 **이미지** 태그는 다른 태그들과 달리 닫는 태그가 없고, 여는 태그 마지막에 ' / ' 를 붙여주면 된다.
- 그리고 이미지 태그의 'src'를 속성(attribute) 이라고 한다.
태그들마다 사용 가능한 속성은 모두 다르다.
<video>
<video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video>
- 비디오 태그는 여는 태그와 닫는 태그가 사용된다는 걸 알 수 있다.
- 이미지 태그와 마찬가지로 'src' 속성을 이용해 비디오 파일의 위치를 알려준다.
- 'width' 속성과 'height' 속성은 가로와 세로의 길이를 준다.
- 'controls' 속성은 일시중지, 재생 및 건너뛰기 등의 기능을 브라우저 자체에서 줄 수 있는 속성이다.
- "Video not supported"는 영상이 재생되지 않을 때 표시되는 Content이다.
🐇 Rabbit can take a rest, but 🐢 turtle can't
👍👍