안녕하세여~
이번에는 간단한 웹 사이트를 만들기 위해 태그와 HTML구성에 대해 정리한 후 간단한 웹사이트를 만들어 보겠습니다.
태그의 중첩과 목록
태그를 중첩하여 사용하여야 하는 예로 목록을 웹 페이지에 표현하는 리스트 태그를 예로 들 수 있습니다.
리스트 태그는 항목을 리스트로 표현해주며, <li></li> 태그를 사용합니다. li태그로 인해 항목들이 시각적으로 구분되어 보이며, 여기서 리스트 태그는 단독으로 사용되지 않는 태그입니다.
성격이 다른 항목이 있을 때, 시각적으로 구별할 필요가 있기 때문입니다. 성격이 같은 항목끼리 묶기 위해서는 <ul></ul> 태그, <ol></ol> 태그로 묶어 구분할 수 있습니다.
위와 같이 성격이 같은 항목을 묶어 따로 표현하는 것이 가능합니다. 이렇듯 태그 안에 태그가 존재하여 선언될 수 있습니다. 중첩 태그라 하며, 시각적으로 쉽게 표현되기 위해 들여 쓰기를 사용하는 게 좋습니다.
여기서, ul태그는 unorderd list의 약자로 숫자가 없는 리스트를 표현할 때 사용되며, ol태그는 orderd list로 숫자가 있는 리스트를 표현할 때 사용됩니다.
문서의 구조
대제목과 소제목이 <h1></h1>과 <h2></h2> 태그로 구분되어 표현되듯이 문서도 구분되어 있습니다.
HTTP의 구조로는 파일의 헤더(header)와 본문(body)으로 구분되어 분리되어 있으며, 헤더에는 페이지에 글을 출력하는 본문과는 다른 성격을 가지고 있습니다.
대표적으로 title와 meta태그가 있습니다. 헤더 태그로 구분하여 분리되고 있으며, title태그는 파일 이름이 웹 페이지 이름으로 표현되고 있는 것을 title태그에 감싸 져 있는 문자를 파일 이름으로 변환하는 역할을 해줍니다. meta태그는 어떠한 데이터가 존재할 때 이것을 설명하는 데이터를 말합니다.
위의 태그의 정보는 문서 자체를 꾸며주는 역할을 하고, 부가적인 정보라 할 수 있습니다.
html은 부가적인 정보와 본질적인 정보를 다른 태그에 담도록 약속되어 있으며, 부가적인 정보는 <head></head> 태그로, 본질적인 정보는 <body></body> 태그 안에 들어옵니다.
웹 페이지는 이와 같이 head태그와 body태그로 구분되는데 이것을 통합하는 태그가 더 존재합니다. 바로 <html></html> 태그입니다. html태그는 DTD태그를 제외한 전체를 둘러싸는 데 사용됩니다.
DTD태그는 Document Type Definition의 약자로 마크업 문서의 요소와 속성들을 처리하는 기준이 됩니다. 즉, 문서 형식의 선언으로 어떤 형식의 html 코드로 작성되었는지를 선언하는 문자입니다.
html에서는 <!DOCTYPE html>을 사용하여 html태그 전에 사용합니다. 태그의 용도와 이름이 버전과 언어마다 다르기에 DTD태그는 어떠한 표준에 따라 제정된 태그인지 알려주는 역할을 합니다. html에서도 여러 가지 형태로 존재하기에 적당한 DTD태그를 사용해야 합니다.
웹 페이지 만들기
기본적인 웹 사이트 형태로 만들어보겠습니다. 항목을 클릭하면 항목의 링크로 이동하여 내용을 보여주고 제목을 클릭하면 첫 번째 페이지로 이동하는 페이지입니다. 이러한 페이지는 서로 상호작용을 하며 동작하는 완결된 웹 페이지 형식입니다.
링크를 만들 때, 파일들을 링크로 미리 만들어 주는 것이 좋습니다. 링크는 a태그와 href속성을 이용하여 <a href="url"></a>로 만드는 것입니다.
개발도구를 이용하면 들여 쓰기나 태그들의 속성을 보다 쉽게 설정하여 확인할 수 있게 됩니다. 개발도구는 프로그램을 만드는 과정을 쉽게 할 수 있는 것입니다. development도구에는 지금까지 사용했던 메모장 편집기가 있으며, 보다 쉬운 프로그램은 atom(확장 기능 설치 : emmet), sublimetext(확장 기능 설치 : emmet), brackets 웹 개발 도구들이 존재합니다.
생활코딩 동영상에서는 Atom을 설치하여 추가 패키지인 emmet까지 사용하는 환경을 하였기에 따라가는 것이 좋습니다. Atom을 설치하고 지금까지 실습했던 폴더를 Project Folder에 추가하면 지금까지 실습했던 내용들을 쉽게 확인할 수 있습니다.
Atom에서는 split기능이 있어 다중 편집 환경을 제공하며, emmet확장 기능을 이용하여 Alt+Ctrl+→와 같은 단축키로 next edit point와 같은 기능을 이용할 수 있습니다.
'TeamH4C_ProjectH4C > 프로그래밍 언어' 카테고리의 다른 글
| [TeamH4C_HTML] 주요 태그-2 (0) | 2021.02.13 |
|---|---|
| [TeamH4C_HTML] 주요 태그-1 (0) | 2021.02.13 |
| [TeamH4C_HTML] 기본 문법과 소개 (0) | 2021.02.10 |
| [TeamH4C_CodeUp] 기초 100제_배열 (0) | 2021.02.07 |
| [TeamH4C_CodeUp] 기초 100제_종합 정리하기 (0) | 2021.02.07 |