100점 과제물 / 시맨틱 태그를 이용하여 페이지 구조를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 태그를 정리하여 보고서 형태로 제출하시오.

문서 내 토픽

1. 시맨틱 태그

HTML5 문서는 시맨틱 태그를 이용하여 어느 기기를 사용하더라도 문서 구조를 표준화시켜 정확하게 이해할 수 있습니다. 이번 과제를 통해 시맨틱 태그를 이용한 레이아웃을 만들고 스타일을 입혀 시맨틱 태그를 실제로 사용해보려고 합니다.
2. 레이아웃 구조

상단에는 전체 너비의 header 와 그 아래영역에는 좌측에 nav, 우측에 main으로 2단구성을 배치하였고 하단에는 footer가 있는 구조로 기획하였습니다. 그리고 main 영역에는 공지사항, 영상, 갤러리의 콘텐츠들을 배치할 예정입니다.
3. header 태그

header 태그는 문서나 section 등의 헤더를 정의할 때 사용합니다. 보통, 도입부에 해당하는 콘텐츠나 네비 링크 집합 등을 가집니다. 저는 header 태그의 백그라운드에 이미지를 넣을 예정이고 사진위의 흰 글씨가 잘 보일 수 있도록 검정 배경도 추가하였습니다.
4. nav 태그

각종 네비게이션 링크들의 집합을 정의하는 nav태그를 사용하여 메뉴(카테고리)링크를 담아주었습니다. nav 태그 안에 ul, li 태그를 사용하여 category 메뉴를 넣고 그 안에 페이지 연결할 수 있는 a태그를 넣었고, 하위 submenu를 ul, li태그를 사용하여 넣어주었습니다.
5. main 태그

main태그는 body의 주 콘텐츠를 정의할 때 사용합니다. main태그 안에 article 태그와 section 태그를 사용하여 공지사항, 영상, 갤러리 등의 콘텐츠들을 넣어주었습니다.
6. footer 태그

footer 태그는 문서나 섹션의 푸터를 정의할 때 사용합니다. 보통, 문서나 섹션의 저자, 저작권, 연락처 정보 등을 포함하며 하나의 html문서에는 여러 개의 footer 요소가 포함될 수 있습니다. 저는 footer 태그 안에 address태그를 사용하여 사과대학교의 연락정보를 추가하였습니다.
7. 스타일 초기화

스타일 초기화는 브라우저마다 기본으로 제공하는 스타일이 있어서 기본값을 주기 위해 설정하는 행위입니다. 스타일초기화를 제공하는 다양한 소스들이 있지만 일단 지금 만드는 홈페이지에 필요한 부분만 진행해보았습니다.
8. header 스타일

width값 1200px를 가진 wrap으로 감쌌기 때문에 header의 가로사이즈는 100%로 지정하였고 높이 300px의 공간에 백그라운드 이미지를 넣어주었습니다. 이미지 위에 검정톤을 추가하기 위해서 black-bg 클래스의 검정배경을 넣어주었고 position을 이용하여 위치를 잡아주었습니다.
9. nav 스타일

nav태그의 가로값은 150px로 지정하고 float를 이용하여 좌측배치 해주었습니다. 그리고 마우스 hover 효과를 주어 마우스 올렸을 때 스타일 변화를 주고, submenu가 나타나도록 하였습니다. submenu는 position을 이용하여 위치를 잡아주고 마우스 hover효과를 주어 submenu에 마우스를 올렸을 때 스타일 변화를 주었는데 부드러운 변화를 위해서 transition을 설정하였습니다.
10. contents 스타일

전체 영역의 가로 값인 wrap이 1200px이고 좌측 nav의 가로 값이 150px이었으므로 우측 contents영역은 가로를 1050px로 지정해주고 float를 이용하여 우측배치 하였습니다. 공지사항, 영상, 갤러리 영역의 스타일을 각각 적용하였습니다.

Easy AI와 토픽 톺아보기

1. 시맨틱 태그

시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 나타내는 HTML 요소입니다. 이를 통해 검색 엔진과 스크린 리더기 등이 웹 페이지의 내용을 더 잘 이해할 수 있습니다. 시맨틱 태그를 사용하면 웹 페이지의 가독성과 접근성이 향상되며, 개발자가 코드를 더 쉽게 관리할 수 있습니다. 또한 시맨틱 태그는 웹 페이지의 구조를 명확하게 보여주어 사용자 경험을 향상시킬 수 있습니다. 따라서 시맨틱 태그는 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.
2. 레이아웃 구조

웹 페이지의 레이아웃 구조는 사용자 경험과 웹 페이지의 가독성에 큰 영향을 미칩니다. 효과적인 레이아웃 구조를 설계하기 위해서는 웹 페이지의 목적과 사용자의 요구사항을 잘 파악해야 합니다. 또한 시맨틱 태그를 활용하여 웹 페이지의 구조를 명확하게 나타내는 것이 중요합니다. 레이아웃 구조를 설계할 때는 웹 페이지의 정보 계층 구조, 콘텐츠의 배치, 네비게이션 등을 고려해야 합니다. 이를 통해 사용자가 웹 페이지를 쉽게 탐색하고 필요한 정보를 빠르게 찾을 수 있도록 할 수 있습니다.
3. header 태그

header 태그는 웹 페이지의 상단 부분을 나타내는 시맨틱 태그입니다. 이 태그는 웹 페이지의 제목, 로고, 네비게이션 메뉴 등을 포함할 수 있습니다. header 태그를 사용하면 웹 페이지의 구조를 명확하게 나타낼 수 있으며, 검색 엔진과 스크린 리더기 등이 웹 페이지의 내용을 더 잘 이해할 수 있습니다. 또한 header 태그는 웹 페이지의 브랜딩과 사용자 경험에도 중요한 역할을 합니다. 따라서 header 태그는 웹 개발에 있어 필수적인 요소라고 할 수 있습니다.
4. nav 태그

nav 태그는 웹 페이지의 주요 네비게이션 메뉴를 나타내는 시맨틱 태그입니다. 이 태그를 사용하면 웹 페이지의 구조와 사용성을 향상시킬 수 있습니다. nav 태그를 통해 사용자는 웹 페이지 내에서 쉽게 이동할 수 있으며, 검색 엔진과 스크린 리더기 등도 웹 페이지의 네비게이션 구조를 더 잘 이해할 수 있습니다. 또한 nav 태그는 웹 페이지의 접근성을 높이는 데에도 도움이 됩니다. 따라서 nav 태그는 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.
5. main 태그

main 태그는 웹 페이지의 주요 콘텐츠를 나타내는 시맨틱 태그입니다. 이 태그를 사용하면 웹 페이지의 구조와 의미를 더 명확하게 나타낼 수 있습니다. main 태그는 웹 페이지의 핵심 내용을 포함하며, 검색 엔진과 스크린 리더기 등이 웹 페이지의 주요 정보를 더 잘 이해할 수 있도록 합니다. 또한 main 태그는 웹 페이지의 접근성을 높이는 데에도 도움이 됩니다. 따라서 main 태그는 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.
6. footer 태그

footer 태그는 웹 페이지의 하단 부분을 나타내는 시맨틱 태그입니다. 이 태그는 저작권 정보, 연락처 정보, 사이트 맵 등을 포함할 수 있습니다. footer 태그를 사용하면 웹 페이지의 구조를 명확하게 나타낼 수 있으며, 검색 엔진과 스크린 리더기 등이 웹 페이지의 내용을 더 잘 이해할 수 있습니다. 또한 footer 태그는 웹 페이지의 사용성과 접근성을 향상시키는 데에도 도움이 됩니다. 따라서 footer 태그는 웹 개발에 있어 필수적인 요소라고 할 수 있습니다.
7. 스타일 초기화

스타일 초기화는 웹 페이지의 기본 스타일을 일관되게 설정하는 것을 의미합니다. 이를 통해 브라우저 간 스타일 차이를 해결하고, 웹 페이지의 일관성을 유지할 수 있습니다. 스타일 초기화를 하면 마진, 패딩, 폰트 등의 기본 스타일을 통일할 수 있습니다. 이는 웹 페이지의 레이아웃과 디자인을 일관되게 유지하는 데 도움이 됩니다. 또한 스타일 초기화는 웹 페이지의 접근성과 사용성을 향상시키는 데에도 기여할 수 있습니다. 따라서 스타일 초기화는 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.
8. header 스타일

header 스타일은 웹 페이지의 상단 부분을 디자인하는 것을 의미합니다. 이를 통해 웹 페이지의 브랜딩과 사용자 경험을 향상시킬 수 있습니다. header 스타일에는 로고, 메뉴, 검색 바 등의 디자인이 포함됩니다. 이러한 요소들은 사용자가 웹 페이지에 처음 접근할 때 가장 먼저 보게 되는 부분이므로, 이들의 스타일이 중요합니다. header 스타일은 웹 페이지의 전반적인 디자인 방향을 설정하는 데에도 큰 영향을 미칩니다. 따라서 header 스타일은 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.
9. nav 스타일

nav 스타일은 웹 페이지의 네비게이션 메뉴를 디자인하는 것을 의미합니다. 이를 통해 사용자가 웹 페이지 내에서 쉽게 이동할 수 있도록 할 수 있습니다. nav 스타일에는 메뉴 항목의 배치, 폰트, 색상 등이 포함됩니다. 이러한 요소들은 사용자 경험과 접근성에 큰 영향을 미칩니다. 예를 들어 메뉴 항목의 배치가 직관적이지 않거나 색상 대비가 낮다면 사용자가 네비게이션을 사용하기 어려울 수 있습니다. 따라서 nav 스타일은 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.
10. contents 스타일

contents 스타일은 웹 페이지의 주요 콘텐츠를 디자인하는 것을 의미합니다. 이를 통해 사용자가 웹 페이지의 내용을 쉽게 읽고 이해할 수 있도록 할 수 있습니다. contents 스타일에는 폰트, 색상, 레이아웃 등이 포함됩니다. 이러한 요소들은 웹 페이지의 가독성과 접근성에 큰 영향을 미칩니다. 예를 들어 폰트 크기가 너무 작거나 색상 대비가 낮다면 사용자가 콘텐츠를 읽기 어려울 수 있습니다. 따라서 contents 스타일은 웹 개발에 있어 매우 중요한 요소라고 할 수 있습니다.