HTML 기초
종료태그가 없는 요소를 빈 태그라고 한다. <태그> (HTML 1,2,3,4)나 <태그> (XHTML, HTML5) 로 작성한다.
HTML 요소의 관계
글자와 상자
요소가 화면에 출력되는 특성은 아래 두가지로 나뉜다. 글자와 글자를 제외한 나머지 부분들은 전부 레이아웃(상자) 이다.
- 인라인(Inline) 요소 : 글자를 만들기 위한 요소들
<span></span>: 대표적인 인라인 요소로, 본질적으로 아무것도 나카내지 않는 컨텐츠 영역을 설정하는 용도이다.- 요소가 수평으로 쌓이는 특성을 가지고 있음
- 요소의 콘텐츠 크기만큼 자동으로 줄어듦
- CSS 속성을 지정해도 요소에 적용되지 않음
- 위 아래 여백은 지정할 수 없지만 가로 방향 여백은 지정할 수 있음
- 인라인 요소 안에 블록 요소는 넣을 수 없음
- 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
<div></div>: 대표적인 블록 요소로 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도- 요소가 수직으로 쌓이는 특성을 가지고 있음
- 블록 요소 안에는 어떤것이 들어와도 됨
HTML 주요 요소
<!DOCTYPE html>- 문서의 HTML 버전을 지정
- DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
- HTML1,2,3,4,5,XTML 버전이 있는데 HTML5가 표준
<html></html>- 문서의 전체 범위
- HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
<head></head>- 문서의 정보를 나타내는 범위
- 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹페이지의 보이지 않는 정보를 작성하는 범위
<body></body>- 문서의 구조를 나타내는 범위
- 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위
정보 태그 (head 안에 작성하는 요소)
<meta />는 HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공한다. head안에 쓸수 있는 요소는 몇개 없는데 <meta/>는 다양한 정보를 담을 수 있다. charset은 문자 인코딩 방식을 지정하고, 화면에 출력되는 글씨들을 어떤 방식으로 출력되는지를 지정해준다. UTF-8 인코딩 형식은 거의 표준처럼 사용된다. author는 웹 페이지의 제작자를 나타내고, viewport는 웹 브라우저에서 실제로 화면에 출력되는 영역에 대한 값을 지정해준다.
<title></title>은 HTML 문서의 제목(title)을 정의한다.
<link />는 외부 문서를 가져와 연결할 때 사용하며 대부분 css 파일을 가지고 온다. <link /> 태그는 rel 속성과 href 속성을 필수로 정의해주어야 한다. rel은 가져올 외부 문서와의 관계, href는 가져올 문서의 경로를 지정해준다. stylesheet는 css를 의마한다. javascript를 가져오는 스크립트 태그를 제외하고 외부에서 문서를 가지고 올때 <link />를 사용한다.
<style></style> 태그는 CSS 스타일을 별도의 파일로 만들어서 <link /> 태그로 가지고 오는 것이 아니라, HTML 문서 안에서 직접 작성하는 경우에 사용하는 태그이다. 이 방식은 권장되는 방식은 아니다.
CSS는 외부에 있는 파일을 가지고 올떄는 <link /> 태그를, HTML 내부에 직접 작성하는 경우는 <style></style> 태그를 사용한다. 하지만 자바스크립트는 외부에서 문서를 가지고 오거나 HTML 안에 직접 작성하는 태그가 `이다.
역할이 명확한 위의 태그들에 적는 정보들 외에는 <meta /> 에 정보를 적으면 된다.
구조 태그 (boby 안에 작성하는 요소)
<div></div>는 블록(상자) 요소로 특별한 의미가 없는 구분을 위한 요소이다. 특별한 의미가 없기때문에 이 구분은 각자 알아서 주관적으로 정하면 된다. 즉, 원하는 영역을 잡는 용도로 쓰인다.
<h1></h1> 은 제목을 의미하는 요소이다. 숫자가 작을수록 더 중요한 제목을 정의하고 실제 화면에 표기되는 크기가 더 커진다.
<p></p>는 문장을 의미하는 요소이다.
<img />는 이미지를 삽입하는 요소이다. 이미지가 정상적으로 삽입 될 수 없는 환경 (경로가 잘못됐거나, 인터넷이 끊어져서 이미지를 가져올 수 없을 떄)에서 이미지 대신 출력될 텍스트라고 해서 대체 텍스트를 alt에 적어준다.
<ul></ul>은 unordered list로 순서가 필요하지 않은 목록의 집합, <li></li>는 list item으로 목록 내 각 항목을 의미한다.
<a></a>는 특정 페이지로 이동하는 하이퍼링크를 지정하는 요소이다. href 속성으로 어디로 이동할 것인지 명시해준다. target 속성은 해당 링크를 눌렀을 떄 새로운 탭을 열어서 링크를 열것인지를 정할 수 있고, 아무것도 적지 않으면 현재 페이지에 덮어써져서 링크가 연결된다. <a></a>는 인라인 요소이지만 자식 태그로 블록 요소를 딱 한개 넣을 수 있어서 특정 영역을 선택했을 때도 페이지를 이동시켜 줄 수 있다.
<span></span>은 <div></div> 처럼 구분을 하기 위해 사용하는 요소인데 <div></div>은 블록 요소로 특정영역을 구분하는데 쓰이지만 <span></span>은 인라인 요소로 텍스트의 특정한 부분을 구분할 때 사용한다. 이렇게 구분을 하면 그 부분에만 스타일을 적용할 수 있다. <style></style>로 span이라는 요소에 CSS 스타일을 추가할 수 있다.
<br/> 태그는 break의 약어로 줄바꿈 처리를 할 때 사용한다.
<input/> 태그는 사용자가 데이터를 입력하는 용도로 글자 뿐만이 아니라 type이라는 속성으로 사용자에게 어떤 타입의 데이터를 받을지 지정해줄수 있다. 따라서 기본적으로 글자 요소처럼 사용되지만 몇 가지 속성은 블록 요소처럼 사용되기 때문에 <input/>은 특이하게 inline-block 요소이다.
disabled 속성으로 사용자가 보는 화면의 입력 창을 비활성화 할 수 있는데, js에서 이 속성을 제어할 수 있다.
주석 처리
<!-- Comment -->
전역 속성
속성은 HTML의 태그 부분에 기능을 확장하기 위해 입력하는 코드이다. 각 태그들은 자신이 고유하게 사용할 수 있는 속성들이 정해져있다. 하지만 전역 속성은 태그에 관계 없이 아무 태그에서 쓸 수 있는 속성이다.
<태그 style="스타일"></태그>: 요소에 적용할 CSS 스타일을 지정<태그 class="이름"></태그>: 요소를 지칭하는 중복 가능한 이름- 이름이 있는 요소를 찾아서 스타일을 적용하거나 js 로 제어할 수 있음
<태그 id="이름"></태그>: 요소를 지칭하는 고유한 이름- 같은 이름이 존재하면 안됨