[html] 기본 태그 2

 

많이 쓰이는 32개의 태그 중 나머지.

 

§ div 태그

division의 약자. block 요소로 레이아웃을 나눌 때 주로 사용한다. class나 id 값을 붙여 css와 함께 사용.

 

 

§ span 태그

div처럼 레이아웃을 나누는 태그로 css와 함께 사용한다. div와의 차이는 inline 요소라는 점.

 

 

§ script 태그

코드 삽입을 위한 태그. 따로 파일을 만들지 않고 코드를 참조하기 위해 사용한다. 보통 javascript 코드를 넣는 것으로 사용. body의 가장 아래에 넣어 쓰며, 파일을 분리할 때는 다음과 같이 작성하여 연결해 준다.

 

 

§ style 태그

css 설정을 같은 웹페이지 안에서 정의할 때 사용. style 태그로 css를 입력하는 방식을 인터널 방식이라고 한다. head 태그 안쪽에 작성한다.

body에 있는 div 태그에 대한 css 코드를 style 안에 작성한 모습

 

 

§ link 태그

외부 파일을 연결할 때 사용. 위의 script 태그에 내용이 많을 때 따로 파일을 만들어 옮기고 link로 연결해 주면 된다. head 안에 작성한다.

 

 

§ nav 태그

navigation의 약자. 다른 페이지로 링크를 보여주는 구획이나 메뉴 버튼을 담는 공간으로 사용. 메뉴 버튼을 담기 때문에 주로 ul > li, a와 함께 쓰인다.

리스트 기본 모양은 이렇지만 여기에서 점을 없애고 왼쪽으로 float 시키는 등의 효과로 메뉴바를 구성하게 된다.

 

 

§ footer 태그

가장 하단에 사용하는 태그. 제작 정보, 주소, 저작권 정보 등을 표시.

 

 

§ header 태그

가장 상단에 사용하는 태그. 머리글을 담거나 제목 등을 지정하여 사용한다. article 안에서 제목을 담는 부분으로 사용하기도 한다.

 

 

§ form 태그

정보를 제출하기 위한 form을 만들 때 사용하는 태그. input, button의 부모로 사용.

 

 

§ button 태그

태그 이름 그대로 버튼을 만드는 태그. form에서도 사용하고 그 외 버튼이 필요한 다양한 곳에 사용할 수 있다.

 

 

§ iframe 태그

외부 페이지 삽입 태그.

!주의! iframe을 사용할 때 완전한 문서 환경이 내가 만든 문서에 다시 포함되기 때문에 메모리 및 컴퓨터 자원 환경이 늘어나게 된다. 따라서 성능 문제가 없는지 확인할 것.

 

 

§ 강조 태그

<strong>

화면 상에서 강조되어 보이는 태그. <b>와 같이 굵게 표현된다. 다만 strong은 스크린 리더에서 강조하여 읽어주므로 b와 구분하여 사용해야 한다.

 

 

§ 기울임 태그

<i>

italic의 약자. 글자가 기울어져 보이는 태그. 기술 용어, 외국어 구절 등에 사용한다.

비슷한 태그로 <em>이 있는데 화면 상으로는 똑같이 기울어져 보이고, 텍스트의 강세를 나타낼 때 사용한다.