비전공자를 위한 HTML/CSS 강의 공부 기록입니다.
1. 태그
1) 태그란?
HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙이다. 태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석된다.
2) 태그를 사용하는 방법
태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어간다.
대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙는다.
시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 된다.
<h1>Hello, HTML</h1>3) 요소란?
내용을 포함한 태그 전체를 요소(Element)라고 한다.
태그와 요소는 의미가 다르지만 많은 사람들이 태그와 요소를 같은 의미로 사용하니 주의 해야한다.
4) 태그의 중첩
태그 안에 다른 태그를 선언할 수 있다.
태그를 중첩해서 사용 시 중첩되는 태그는 부모 태그를 벗어날 수 없다.
잘못된 예시
<h1><i>Hello, HTML</h1></i>올바른 예시
<h1><i>Hello, HTML</i></h1>자식 태그인 <i>의 종료 태그를 먼저 선언한 다음 부모 태그인 <h1>의 종료 태그를 선언해야 한다.
5) 빈 태그
내용이 없는 태그를 의미한다. 따라서 종료 태그도 필요하지 않다.
<br><img src =""><input type="">
등이 빈 태그의 예시이다.
빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지않더라도 다른 용도로 사용되는 태그이다.
빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우로
이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고도 한다.
2. 속성
1) 속성이란?
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.
2) 속성을 사용하는 방법
속성은 이름과 값으로 이루어져있다.
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현한다.
속성값은 홑따옴표(')나 쌍따옴표(")로 감싸 표현한다.
<h1 id="title">Hello, HTML</h1>3) 여러 속성을 사용하는 방법
하나의 태그에 여러 속성을 선언할 수 있다. 이때는 공백으로 속성을 구분하여 선언한다.
<h1 id="title" class="main">Hello, HTML</h1>4) 속성의 종류
속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분된다. 또한 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로도 구분할 수 있다. id와 class는 글로벌 속성이다.
