Devops 엔지니어 솔렐레 IT

HTML 개발을 위한 기본 태그 및 속성 설명 - 웹사이트 개발 본문

Devops 엔지니어가 알려주는 IT 기본 지식/프로그래밍 (Programming)

HTML 개발을 위한 기본 태그 및 속성 설명 - 웹사이트 개발

솔렐레_ 2019. 9. 9. 09:00


안녕하세요. 솔렐레입니다.
오늘은 HTML의 태그와 속성들에 대해서 공부해보도록 하겠습니다. 약 100여 개의 태그들이 존재하지만 지금 포스팅에서는 웹사이트를 제작하는데 기본이 되는 태그들 위주로 설명을 드리고, 그에 따른 기본 지식들을 같이 설명드리도록 하겠습니다.


[HTML 주요 태그 설명]
- 닫힌 태그가 있는 태그: ex. <tag명></tag명>
1. <a>: <a> 태그는 anchor의 약자로 닻의 의미를 가지고 있습니다. 태그 사이에 있는 콘텐츠를 클릭하면 특정 영역 또는 페이지로 이동하는 기능을 합니다. 메뉴 버튼을 만들 때 많이 사용을 하게 되는 태그입니다. <a> 태그와 같이 많이 사용하는 속성에 대해 설명드리겠습니다. 
 -> href 속성: hyperttext reference의 약자로 연결할 주소를 지정할 때 사용합니다. 예를 들어 href ="www.google.com"을 지정하게 되면 구글 웹페이지로 이동하게 됩니다. 연결할 URL 주소가 미정이라면 "#" 기호를 통해 입력합니다.
 -> target 속성: 웹사이트가 어디에서 결과를 표시할지 나타내 주는 속성입니다. 본 페이지나 새창을 통해 태그의 결과를 나타낼 수 있습니다. _blank는 새 탭 또는 새 창에 결과를 표시합니다. _self는 현재 탭에 페이지를 이동시킵니다. 속성을 지정하지 않으면 기본 값은 _self 속성을 지니게 됩니다. 

2. <img>: <img> 태그는 image의 약자로 웹페이지에 이미지를 삽입할 때 사용하는 태그입니다. 
 -> src 속성: source의 약자로 이미지 파일의 위피를 입력할 때 사용하는 속성입니다. 예를 들어 src ="logo.png"를 입력하게 되면 내가 실행한 HTML 파일과 동일한 위치 내 이미지 파일을 찾아 웹사이트에 노출시켜줍니다.
 -> alt 속성: alternative text의 약자로 이미지를 제대로 표시하지 못했을 경우 노출되는 텍스트 값을 의미합니다. 특히 웹 접근성 측면에서 시각 장애인을 위해 이미지를 해당 속성의 텍스트로 바꾸어 음성 노출시키기 때문에 중요한 의미를 가지고 있습니다.
 -> width와 height 속성: 이미지의 너비와 높이 값을 지정할 때 사용합니다. 해당 속성을 지정하지 않으면 이미지 원본크기로 웹사이트에 노출되게 됩니다.

3. <h1> ~ <h6>: <h> 태그는 heading의 약자로 머리말을 의미합니다. 웹사이트의 제목같이 중요하다고 생각되는 정보에 사용합니다. 숫자가 작을수록 중요도는 높아지며 글자의 크기도 커지게 됩니다. 따라서 <h1> 태그는 가장 중요한 정보이기 때문에 보통 HTML 문서 내 한 번만 사용합니다.

4. <p>: <p> 태그는 paragraph의 약자로 단락을 의미합니다. 본문 영역으로 주요한 텍스트 정보를 해당 태그를 통해서 입력합니다.

5. <mark>: <mark> 태그는 특정 텍스트를 강조할 때 사용합니다. 보통 개념을 설명하거나 문장을 인용할 때 키워드가 되는 단어에 해당 태그를 사용하여 표시합니다. <mark> 태그가 들어간 영역은 기본적으로 노란색 표시가 됩니다. 쉽게 생각하시면 책으로 공부할 때 형광색 펜으로 표시한 것 같은 느낌을 주게 됩니다.

6. <ol>, <ul>, <li>
 -> <ol>: ordered list의 약자로 순서 있는 목록을 의미합니다.
 -> <ul>: unordered list의 약자로 순서가 없는 목록을 의미합니다. 메뉴 버튼이나 목록을 만들 때 주로 사용하는 태그입니다.
 -> <li>: list item의 약자로 <ol>, <ul> 태그의 각 항목을 나열할 때 사용합니다. 보통 웹사이트의 메뉴를 만들 때 <ul>과 <li> 태그의 결합으로 코딩합니다.

- 닫힌 태그가 없는 태그: ex. <tag명>
1. <br>: line break를 의미하며 강제로 줄 바꿈을 할 때 사용합니다. 한 줄 띄어쓰기를 할 때 사용하고 매우 자주 사용하는 태그 중 하나입니다.

2. <input>: <input>은 텍스트 정보, 비밀번호, 날짜 등 사용자로부터 정보를 입력받는 태그입니다. input 태그는 type 속성이 어떤 값을 가지느냐에 따라 여러 가지 형태를 사용자에게 제공할 수 있습니다.
 -> type 속성: text, password, checkbox, radio, botton, submit, file 등의 속성에 따라 다양한 속성으로 사용자로부터 정보를 입력받을 수 있습니다.

*참고. 주석: ex. <!-- CONTENT 내용 -->
웹 사이트를 제작하다 보면 사이트의 크기가 커질수록 점점 소스코드의 양도 늘어나게 됩니다. 소스의 양이 많아지게 되면 점점 복잡해져 가독성이 매우 떨어지게 됩니다. 이때, 주석을 이용하여 웹사이트 소스코드 중간중간에 필요한 내용을 입력하여 메모를 남길 수 있습니다. 주석은 브라우저 화면에서는 노출되지 않으며 오직 소스코드에서만 볼 수 있는 텍스트입니다. 일관된 원칙에 따라 주석을 달게 되면 내용 파악에 도움이 될 뿐 아니라 여러 사람들과 작업을 진행할 때 도움이 많이 됩니다. 

 

[HTML5 공간 정의 태그]
- 웹 페이지 상단 구성
1. <header>: 웹 사이트의 머리글을 의미합니다. header 태그 안에는 <img> 태그를 이용한 회사의 로고, <h> 태그를 이용한 회사 이름이나 사이트 제목을 작성하게 됩니다. 

2. <nav>: navigation의 약자로 원하는 곳으로 이동시켜주는 즉 메뉴 버튼을 구현하는 공간입니다. <ul>, <li>, <a> 태그를 이용하여 웹사이트의 메뉴를 구현할 수 있습니다.

- 웹 페이지 본문 구성
1. <section>: 웹사이트에 영역을 설정할 때 사용하는 태그입니다. 보통 <body> 태그 안에서 <section> 태그를 이용하여 공간을 나누고 그 안에서 필요한 내용에 따라 태그들을 다시 구성합니다. 예를 들어 한 섹션 안에서 아래 설명하게 될 <article>과 <aside>으로 용도에 따라 공간이 나누어집니다. 웹 표준에 의하면 <section> 태그 안에는 <h2> ~ <h6> 태그가 하나는 포함되어야 합니다.

2. <article>: 웹사이트에 주요한 내용을 담는 공간입니다. 본문에 대한 내용이 들어가는 공간으로 이 공간 역시 웹 표준에 의해 <article> 태그 안에는 <h2> ~ <h6>가 포함되어 있어야 합니다.

3. <aside>: 웹사이트에 연관성이 적은 내용을 담는 공간입니다. 사이드 바라고 불리는 영역으로 웹사이트의 가장자리에서 본문과 연관성이 크지 않은 내용들의 구성으로 웹 사이트에 노출됩니다. 

4. <main>: 웹 사이트의 본문 내용 전체를 감쌀 때 사용하는 태그로 문서 내에서 한 번만 사용할 수 있는 태그입니다.

- 웹 페이지 하단 구성
<footer>: 웹 사이트 하단에 들어가는 공간입니다. 이 곳은 웹사이트를 관리하는 주체의 정보들이 보통 담기게 됩니다. 보통 회사에 대한 소개, 고객 센터, 약관에 대한 내용 등이 포함되어 있습니다.

- 구성 내 공간을 정의
<div>: <header>, <main>, <section>, <footer> 큰 공간에 대한 구성뿐만 아니라 이 구성 내에서도 나누어 배치하는 것이 필요합니다. 이렇게 구성 내에서 또 작은 공간을 구성할 때 <div> 태그를 사용합니다. 이 태그는 직접 기능은 없지만 여러 디자인 및 기능들을 모아서 필요한 공간에 한 번에 적용할 수 있다는 장점이 있습니다.

[HTML 태그 구분: Block과 Inline 요소]
두 가지 태그의 성격을 구분하는 방법은 세 가지 방법이 있습니다.
(1) 줄 바꿈의 유무
(2) width와 height 적용 유무
(3) margin-top, margin-bottom, padding-top, padding-bottom 속성의 적용 유무

- Block: 줄 바꿈이 있는 태그. ex) <h1>~<h6>, <p>, <section>, <main>, <aside>, <footer>, <div>
- Inline: 줄 바꿈이 없는 태그. ex) <a>, <input>, <span>

예를 들어 <nav> 속성에 메뉴를 넣는다고 가정을 하면 보통 <ul>과 <li> 태그를 통해 구현을 합니다. <li> 태그가 Block 속성을 가지고 있어 줄 바꿈이 있는 태그이기 때문에 처음 코딩을 하면 메뉴가 세로(y축)로 구성이 됩니다. 이를 가로 메뉴 화면 구성으로 바꿔주기 위해서는 CSS의 display속성 안에 inline 속성을 입력하면 가로(x축)로 메뉴가 구성되게 됩니다. 이 처럼 속성에 따라 화면 구성이 매우 변할 수 있기 때문에 태그를 사용할 때는 각각의 속성을 파악하고 사용하는 것이 중요합니다.

이렇게 웹사이트를 구성하는 HTML의 기본 지식들에 대해 알아보았습니다. 앞으로 CSS, JAVASCRIPT에 대한 내용도 추가로 설명드릴 수 있도록 하겠습니다.

저작자표시

'Devops 엔지니어가 알려주는 IT 기본 지식 > 프로그래밍 (Programming)' 카테고리의 다른 글

[Shellscript] AWK 를 이용한 로그 분석 - 조건문, 반복문 사용  (0) 2020.07.01
스프링 프레임워크(Spring Framework) - 프레임워크 개념, Spring 컨테이너  (0) 2019.10.17
자바스크립트(Javascript) 기초 - 함수 / 오브젝트  (0) 2019.10.10
CSS 선택자, 상속, 캐스케이딩 그리고 기본 속성 - 웹사이트 개발  (0) 2019.09.12
HTML 개발을 위한 기본 지식 및 레이아웃 설명 - 웹사이트 개발  (1) 2019.09.07
'Devops 엔지니어가 알려주는 IT 기본 지식/프로그래밍 (Programming)' Related Articles more
Comments