TIL(Today I learned)를 시작하게 된 이유 : 공부를 시작하며 여러가지 Codecademy, 강의 등을 듣다보니 기억력에만 의존하게 됐다. TIL을 통해 이를 개선하고, 공부한 것들을 기록하면서 잘 잊지 않도록 하려고 한다. 매일 하지 못하더라도 꾸준히 잘 해보자.
오늘은 Codecademy의 'Learn HTML' 및 '김버그의 HTML&CSS는 재밌다' 에서 학습한 내용을 토대로 작성하려고 한다. HTML의 기본에 대해서 정리해보자.
WEB
우리가 사용하는 Web은 크게 두가지 영역으로 구분되어 있다. 바로, Front-End와 Back-End이다. Front-End의 경우는 사용자에게 보여지는 클라이언트 부분이며 Back-End는 서버 등의 부분을 뜻한다.
Front-End(HTML, CSS, JavaScript)
사용자에게 보이는 부분을 담당하는 Front-End는 3 종류의 언어를 기본으로 한다. HTML의 경우에는 Web의 기본 뼈대를, CSS는 스타일 적인 부분을, 마지막으로 JavaScript의 경우에는 동적인 기능을 담당한다.
HTML Basics
HTML은 HyperText Markup Language의 줄임말로, Web의 기본 구조와 내용을 구성하는 언어이다.
1. 기본문법
<SomeTag> any content </SomeTag>예시처럼 HTML element는 opening tag와 closing tag로 감싸진 content로 구성되어 있다.
<h1><a href='index.html'>HTML Basics</a></h1>
<!-- The enclosed element is the child of the enclosing parent element -->또한, HTML의 opening tag와 closing tag 사이에는 다른 element가 들어갈 수 있다. 감싸고 있는 element 의 경우에는 parent element, 감싸진 element의 경우에는 child element라고 한다.
2. <body>
보여지는 Web의 content들은 <body> element 안에 있어야 한다.
<!-- example -->
<body>
<h1> main title </h1>
<p> some paragraph </p>
</body>3. HTML Document Standards
<!DOCTYPE html>html 파일에서 가장 먼저 선언해야 한다. 브라우저에게 html 파일의 version 정보와 형태를 알려준다. (현재는 HTML5로 작성된 파일임을 알려준다.)<html>모든 html code는 html element 안에 작성되어야 한다.<head>타이틀과 같은 Web에 대한 정보, 필요한 메타데이터 등을 포함하는 element이다.<!-- comment -->브라우저가 읽지 않는 주석을 표시할 때 사용한다.
4. 자주 사용하는 Tag
<h1> ~ <h6>Headings, 6단계의 크기 차이를 줄 수 있다. 주로 메인, 서브 타이틀로 사용한다.<p>paragraph, 글의 토막, 문단을 구성할 때 사용한다.<span>generic container, inline container로서 사용한다. (문단의 특정 문장이나 단어 등을 특정할 때 주로 사용한다.)<div>generic container, block container로서 사용한다.<em>emphasize text, 강조의 용도로 사용한다. (Italic)<strong>emphasize text, 강조의 용도로 사용한다. (Bold)<br>브라우저는 여백을 기본적으로 무시하기 때문에 여백을 주고 싶은 경우에 사용한다.<ul>unordered list, 순서가 없는 목록을 작성할 때 사용한다.
<!-- example -->
<ul>
<li>축구</li>
<li>야구</li>
<li>농구</li>
</ul><ol>ordered list, 순서가 있는 목록을 작성할 때 사용한다. 형태는 ul element와 동일하다.<a>anchor, Web에서 다른 페이지로 이동하는 링크를 걸 때 사용한다. href attribute에 이동하고자 하는 url을 작성한다.
<!-- example -->
<a href=./mainpage.html>
메인으로 가는 링크입니다.
</a>5. HTML Attributes
Images
<img src="url.jpg" alt="이미지입니다"/> 이미지를 Web에 나타내기 위해서는 img element를 사용한다. img element는 필수 속성(attribute)로 src를 갖는다. src는 value로 image source의 위치(local address or web address)를 갖는다. alt의 경우에는 대체 텍스트로서 이미지를 설명해주는 내용을 적어준다. 단, 이미지가 사용자에게 의미가 없는 경우에는 생략한다.
Videos
<video src="url.mp4" width="300" height="200" controls>
영상을 지원하지 않습니다.
</video>img tag와는 다르게 opening tag와 closing tag가 존재한다. tag 속에 내용 '영상을 지원하지 않습니다'는 영상을 불러올 수 없는 경우에 보여지게 된다. width 는 가로 길이, height는 높이를 설정해 준다. controls는 시작, 정지 등의 브라우저에 내장된 기본 조작메뉴를 나오도록 한다.
