-
HTML 기본 정리Let's Code/HTML・CSS 2020. 12. 30. 00:43
오랜만에 HTML을 복습하면서 기본 개념들을 한번에 정리하려고 한다. 이미 개념에 대해 알고 있다는 전제 하에, 급하게 작업할 때 빠르게 훑어볼 용도.
HTML의 기본 구조
HTML은 프로그래밍 언어가 아닌, 프로그램의 구조를 명시하기 위한 마크업 언어Markup Language이다.
HTML의 기본 단위는 Element이며, Element는 주로 Opening tag / 사이에 오는 Content / Closing tag의 구조를 가진다. Closing tag의 경우 /로 구분한다.
이 중 content Tag 하나로만 존재하는 경우 Empty tag라고 부른다. (ex. <br>)
주로 하나의 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>은 컴퓨터가 해석할 수 있도록 html의 특정 버전을 알려주는 태그로, 현대에는 주로 최신 html을 사용하기에 별도로 버전 값을 입력해줄 필요가 없다.
HTML의 실제 내용은 <html> </html> 사이에 입력되어 하나의 html 문서를 구성하며,
html 문서에 관한 기본 정보를 표시하는 <head> 와 실제 콘텐츠가 존재하는 <body>로 나누어진다.
<head>
- <meta charset="utf-8"> 은 utf-8의 데이터 인코딩 방식을 따른다는 뜻이다. 현재 세계 표준으로 쓰인다.
- <title>는 브라우저 탭에 표시되는 타이틀을 결정한다.
<body>
보통 Body의 경우 <header> <body> <footer>의 구조로 이루어진다.
- <header>: 로고, 제목, 검색 바 등이 보통 존재한다.
- <body> 포스트, 이미지, 영상 등 내용이 표시된다.
- <footer> 저작권 정보, 아이콘 등이 표시된다.
Attribute: Tag에 부여하는 속성
하나의 Tag에 부여하는 특정한 속성을 Attribute라고 한다. 다양한 기능을 가진 다양한 Attribute가 존재한다. (예: 문장을 강조하거나, 색상을 바꾸는 등)
Attribute는 이름Name (ex. class)과 = 그리고 " " 사이에 오는 값Value 구조로 이루어진다.
예를 들어, 가로 길이를 지정하는 속성은 Width이며 Width = " " 사이 특정한 숫자 값을 적어 속성을 부여할 수 있다.
<tag name = "value"> </tag>자주 쓰이는 태그
<img>는 사진을 배치할 때 쓰이며, closing tag가 필요하지 않은 empty tag이다.
<p>는 문단paragraph의 약자로, 텍스트에게 단독으로 공간을 지정할 때 사용한다.
<h1>는 텍스트를 Header 제목처럼 강조하기 위해 글씨체를 키우는 속성으로, h1부터 h6까지 존재하며 h1가 가장 크다.
<ul> 및 <ol>은 텍스트를 리스트 형태로 표시할 때 쓰이며, <ul>의 경우 Bulletpoint로 <ol>의 경우 숫자 순으로 매긴다. <ul>과 <ol> 안에 오는 (이걸 embed된다고 한다) 텍스트는 <li>와 </li> 태그를 붙여야 리스트로 처리된다.
<span>은 아무 의미 없는 Wrapping으로, 후에 CSS 또는 Javascript를 사용하여 속성을 부여할 때 쓰인다.
<i>는 이탤릭체를 사용할 때 쓰이며, 이전에는 <em>이었으나 HTML5부터 추가되었다.
<b>는 볼드체를 사용할 때 쓰이며, 마찬가지로 이전에는 <strong>이었으나 html5부터 추가되었다.
<u>는 텍스트에 밑줄을 긋고 싶을 때 사용한다. 역시 html5부터 추가되었다.
자주 쓰이는 속성
Class는 Attribute 중 서로 다른 Element를 묶을 수 있는 특성을 가지고 있다.
편의성을 위해, 다수의 Element를 동시에 호명하여 특정한 값을 지정하고 싶을 경우 여러 Element를 하나의 Class로 묶어 Attribute 자체에 속성을 부여할 수 있다.
Src는 외부에서 이미지 등의 특정 자료를 끌어올 때 사용하는 호스팅 주소이다. Src가 잘못될 경우 이미지가 표시되지 않는다.
Alt는 상기 Src가 제대로 작동하지 않을 경우, 그 자리에 대신 나타나는 텍스트이다. 지정하지 않을 경우 아무것도 나타나지 않게 된다.
Href는 링크에 주로 사용하며, 링크를 클릭했을 시 인도되는 주소이다. 이미지에 사용할 경우 이미지가 링크로 작동한다.
id는 링크를 타고 들어갈 때, 홈페이지 상단이 아니라 (디폴트) html 내 특정 지점으로 이동시키고 싶을 때 사용한다. 이 때 해당 지점의 태그에 <tag id="Here"> 특정 이름을 지정한 다음, 링크에 특정 html의 주소를 쓰고 # 뒤에 지정한 id 이름을 입력한다. (ex. a href="contents.html#Here")
download는 특정 링크가 다운받을 수 있는 파일로 인도하는 경우, 해당 파일의 이름을 설정한다.
'Let's Code > HTML・CSS' 카테고리의 다른 글
CSS로 배경색에 그라데이션 입히기 (0) 2021.02.11 CSS로 조건부 코드 짜기 (0) 2019.08.20 CSS : 그리드 미리보기 (0) 2019.08.19 CSS : 개념과 특징, 박스 모델 (0) 2019.08.17 댓글