새로운 한 주의 시작이었습니다. 오늘도 정을수 강사님께서 HTML 기본 지식에 대한 강의를 해주셨습니다. 또 정리글 후반부에는 온라인 강의를 통해 얻은 HTML 지식들도 추가했습니다.
HTML의 주요 문법들
태그 닫기
기본적으로 HTML의 태그들은 잘 닫혀 있어야 합니다. 특히, XHTML에서는 태그가 엄격하게 닫혀 있어야 합니다.
보편적으로 사용하는 HTML5에서는 태그를 닫지 않아도 HTML의 문법상 오류로 판단하지 않습니다.
하지만 닫기 태그가 없을 경우 복잡한 디자인의 경우 브라우저가 잘못 표현 할 수 있고, 이에 따라 대부분의 개발자들은 항상 태그를 닫는 것을 기준으로 사용하고 있습니다.
또한 한 태그가 다른 태그를 감싸는 구조를 이룰 때에는, 닫는 태그까지 모두 감싸고 있어야 합니다.
홑태그(Self-Closing Tag)
HTML 태그 중에는 스스로 닫는 태그들(Self-Closing Tag)도 존재합니다. 이러한 태그들을 홑태그라고 합니다.
이미지를 불러오는 img 태그처럼 표시(마크업)할 대상이 없고 자체적으로 정의를 내리는 용도의 태그는 스스로 닫습니다.
XHTML에서는 홑태그라 할지라도 반드시 “/“ 로 닫아야 합니다. 하지만 HTML5에서는 닫지 않아도 HTML의 문법상 오류로는 판단하지 않습니다.
하지만 일종의 컨벤션으로써, 웹을 개발하는 많은 사람들은 닫는 것을 기준으로 사용하고 있습니다.
img 이외에도 홑태그는 base, link, meta, br, hr 등이 있습니다.
소문자 작성
HTML의 모든 코드들은 항상 소문자로 작성합니다.
HTML5는 대소문자를 구분하지 않지만, 소문자만을 허용하는 XHTML도 여전히 사용되는 경우가 있습니다. 그렇기 때문에 관련적으로 웹을 만드는 사람들은 버전과 상관없이 모두 소문자로만 코드를 사용하는 것이 관례로 자리잡았습니다.
대소문자를 섞어서 사용하는 것보다, 디자이너와 개발자가 모두 사용하게 되는 코드이므로 소문자로만 코드를 작성하는 것이 좋습니다.
태그와 속성
HTML은 태그에 항목과 값을 = 기호를 이용해 DOM 정보 뭉치가 생성할 때 원하는 값을 반영할 수 있습니다.
<h1 class="art">을수의 일기</h1>
<img src="images/foo.jpg" alt="샘플이미지" />첫 번째 h1 태그 같은 경우에는, class 라는 속성을 이용해서 art 라는 이름을 가진 요소를 한꺼번에 선택해 명령을 내릴 수 있게 되어 있습니다.
아래 img 태그 역시, foo.jpg파일을 img 태그에 불러오기 위해서src(source) 속성을 이용하여 경로와 파일명을 값에 넣어 주었습니다.
(뒤쪽의 alt 속성도 마찬가지로 활용된 것을 확인할 수 있습니다.)
다만 주의할 것은, DOM정보의 수백개 항목에 대해서
일치하는 HTML 속성을 모두 제공하는 것은 아니며, 서로 이름이 일치하지 않는 경우도 있다는 점입니다.
특정 속성, 특히 id나 class, style같은 속성들은 모든 종류의 태그에 활용 가능합니다.
HTML의 규칙들
HTML은 오랫동안 활용되어 오면서, 국제적으로 함께 사용 하기로한 표준이 정해진 바 있습니다.
이러한 표준(약속)을 지켜 만든 웹페이지는 다양한 브라우저에서 동일하게 실행됩니다.
다만, 브라우저 회사마다 HTML을 처리하는 형태가 근소하게 다를 수 있기 때문에 표준을 지킨다고 해서 1px까지 똑같이 보이게 되지는 않습니다.
HTML 버전의 선언
제일 첫줄에는 어떤 버전의 HTML 형식을 사용할 지 선언해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>hello world!</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>DOCTYPE은 HTML의 표준 버전 정보를 선언해서 문법에 잘 맞게 작성했는지를 검증하기 위해 만들어 진 것입니다. 브라우저가 DOCTYPE을 사용할때는 자기가 어떤식으로 처리해야 할지를 판단할 때 뿐입니다.
구식브라우저의 경우 해당 선언이 없어서 자동 모드로 동작할 경우
HTML 파일을 제대로 그려 주지 못할 때가 있습니다. 따라서 구식 브라우저 기반의 HTML 작성을 할 때에는 DOCTYPE은 꼭 선언해 줍니다.
최신식 브라우저들의 경우에는 대부분 DOCTYPE 없이도 HTML 파일을 오차없이 그려낼 수 있습니다.
또한, 웹 표준을 세운 W3C 같은 경우에는 HTML 검사기를 제공하는데, 이 검사기는 DOCTYPE을 기준으로 작동합니다.
주석의 활용
HTML 작업자는 메모를 위해 주석 기능을 사용 할 수 있습니다.
주석으로 표시하면 브라우저가 해당 줄을 처리하지 않고 지나칩니다. 즉, 코드 작업자가 스스로 필요한 메모를 한다거나 생략해 둘 필요가 있는 부분, 혹은 다른 작업자에게 필요한 메시지를 적어두는 용도로 사용합니다.
VSCode의 경우, 주석 표시를 하기 위해서 단축키를 지원합니다. (Ctrl (cmd) + /)
HTML 핵심 요소
div & span 태그
div 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다. 기본적으로 블록 요소입니다.
div 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됩니다.
또한, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용됩니다.
특별한 의미가 있는 태그가 아니기 때문에, 레이아웃을 더 효과적으로 구성하기 위해 쓴다고 기억하면 되겠습니다.
span 태그도 div와 마찬가지로 특별한 의미를 가지지 않습니다. span 태그는 HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용합니다.
결과적으로 div와 span 모두 특별한 의미가 없고, 구획을 나누는 데 사용됩니다.
다만, div는 블록 요소를 담당하고 span은 인라인 요소를 담당합니다.
제목 태그
구획 제목 요소라고도 불리며, h1부터 h6까지 존재합니다. 구획 단계는 h1이 가장 높고, 숫자가 높을수록 낮아집니다. 블록 요소로 취급됩니다.
이러한 제목 태그들은 HTML 문서에서 제목(heading)을 정의할 때 사용합니다.
웹 표준에 따라, 브라우저나 검색 엔진들은 이 제목 태그들을 전체적인 웹 페이지의 구조를 파악하는데 활용합니다.
따라서 웹 표준에 충실한 웹 페이지를 만들거나, SEO를 고려한 페이지를 구성할 때에는 제목 태그의 활용에 주의해야 합니다.
img 태그
img 태그는 이미지를 나타내지만, 인라인 요소로 취급합니다. 또한 홑태그라는 특징이 있습니다.
img 태그는 src 속성을 필수 값으로 가지는데, 이 src 속성에 이미지의 경로 값을 추가해줌으로써 이미지를 화면에 구현하기 때문입니다.
또한 이미지가 출력되지 못하는 상황에 대비하고, 시각 장애인들을 위한 접근성을 높히기 위해 alt 속성에 이미지에 대한 설명을 추가하는 것이 권장됩니다.
ul & li 태그
HTML 내에서 순서가 없는 HTML 리스트(list)를 정의할 때, ul 태그를 사용합니다.
ul 요소에 속하는 각 아이템은 li 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다.
본래 ul 태그에 type이라는 속성을 추가해서 li 요소들의 마커를 변경할 수 있었으나, HTML5부터는 이를 지원하지 않기 때문에 CSS로만 이를 변경할 수 있습니다.
또한, 순서가 매겨지는 리스트의 경우에는 ol 태그를 사용합니다.
anchor 태그
anchor 태그는 a라는 약자로 사용하며, 일반적인 하이퍼링크를 HTML 작업 안에 포함시킬 때 사용합니다.
a 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다. href 속성에는 해당 하이퍼링크의 주소가 입력됩니다.
href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy과 같은 추가적인 속성들도 사용할 수 없습니다.
링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가집니다.
- 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)
- 방문했던 링크(visited link) : 밑줄, 보라색(purple)
- 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)
또한, target 속성을 "_blank"로 지정하면 새 창 열기가 되도록 설정할 수 있습니다.
input 태그
input 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다.
일반적으로 input 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 form 요소 내부에서 사용됩니다.
이러한 입력 필드는 input 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있습니다. 아래의 이미지를 참고해보세요.
input 태그는 빈 태그(empty tag)이며, 컨텐츠 없이 속성만을 포함하고 있습니다.
placeholder 속성으로 사용자가 입력할 값에 대한 힌트를 제공할 수도 있고, disabled 속성을 부여해 비활성화시킬 수도 있습니다.
label 요소를 사용하면 input 요소의 이름표(label)를 정의할 수도 있습니다.
기본적으로 input 태그는 인라인-블록 요소로 간주됩니다. 이는 input 태그가 보통의 인라인 블럭처럼 수평으로 쌓이지만, 가로와 세로 넓이 모두 지정할 수 있다는 뜻입니다.
