홈페이지 만들기 2번째다.
이번주는 <head> 부분을 모두 마무리 하자는 목표를 세웠다.
그럼 오늘도 열심히 공부하고 만들어보자!
link 태그는 연결고리?
메타태그에 이어 나에 눈을 사로 잡은 태그가 있다.
바로 link 태그!!!
현재 만드는 홈페이지에는 11개의 링크태그문이 있다.
영어로 적힌대로 무언가를 연결하는 연결고리인것 같다.
정확한 용도를 알아보자.
<link> 태그는 외부 리소스 연결요소로 현재 웹문서와 리소스의 관계를 연결하는데 제일 많이 사용된다.
링크함수 구성을 보자면 아래와 같다.
<link rel="stylesheet" href="파일경로"> |
여기서 rel은관계(relationship)을 이야기한다.
우리가 동주민센터 가서 가족 이름으로 무언가 발급 받을때 말하는 바로 그 관계, 여기서는 "다음에 올파일은 이 웹문서의 "stylesheet"입니다." 라고 이야기 하는것과 같다고 할 수 있겠다.
이 태그는 html <head> 부분에 위치하며, 주로 외부 스타일시트를 연결하는데 사용된다.
이 링크부분을 보다 보면 "부트스트랩"을 만나게 된다.
부트스트랩은 오픈소스 프론트엔드 프레임워크인데 여기서 프레임워크란 어떤 목적을 달성하기 위해 복잡하게 얽혀 있는 문제를 해결하기 위한 구조다.
첫 시작은 트위터에서 일하던 디자이너 한명과 개발자 한명으로 시작했고, 트위터에서 사용되는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은것이다. 당시 개발자 사이에서는 혁며이라고 불릴정도로 폭발적인 반응을 얻었다.
현재 들어가면 다양한 표, 입력폼, 버튼, 이미지, 아이콘 등이 있고 관련 CSS 파일 또는 JavaScript파일을 다운로 받아 사용하면 된다.
시멘틱 태그
시멘틱 태그는 개발자와 브라우저에게 해당 태그가 쓰인 용도를 명확하게 알려주기 위해 고안된 태그이다.
즉, 기존의 <div> 태그의 경우 분리된 영역 설정은 가능하지만 그 영역이 어떤 의미를 가지는지 알수 없지만, 시멘틱 태그의 경우 태그 자체에 고유영역이 설정되어 있어 웹문서 코드를 정리하는데 유용하다.
| 종류 | 내용 | 비고 |
| <header> | 머리글, 제목, 헤더 | |
| <nav> | 네비게이션, 목차, 리스트 등 다른 페이지로 이동을 위한 메뉴 구성공간 표현 | |
| <aside> | 좌측과 우측 사이 공간을 의미하며, 본문 외 부수적인 내용을 표현하는 태그 | |
| <section> | 주제, 카테고리 별로 컨텐츠 영역 구분하는 데 사용됨. 목차별 세부내용 페이지 | |
| <article> | 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 사용 | |
| <footer> | 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그 | |
| <address> | 콘텐츠 작성자나 사이트 소유자의 정보를 부가적으로 담는기능 | |
| <hgroup> | 제목과 관련된 부제목을 묶는 태그 | |
| <main> | 이름처럼 문서의 중심 주제, 주요내용 등을 | |
| <details> | 주변 문맥에 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 컨텐츠 | |
| <figure> | 이미지, 다이어그램, 사진 등 독립적인 컨텐츠 정의시 사용 | |
| <figcaption> | <figure> 요소에 대한 설명시 사용 | |
| <mark> | 현재 맥락에 관련이 깊거나 중요한 부분 강조 | |
| <time> | 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림기능 구현 | |
| <summary> | <details> 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다. |
내가 현재 작성하고 있는 홈페이지의 경우 1개의 헤더와 9개으 섹션, 마지막으로 푸터가 차례대로 작성된 페이지였다.
가정 먼저 홈페이지를 구성한다는 입장에서 위의 내용을 생각해보았다.
확실히 과거 <div>태그 쓸때보다 각 태그마다 구분점이 확실하게 있어서 좋았다.
<div>태그의 경우 각 영역 분리를 위해서는 id라는 속성값을 부여해서 구분을 했어야 했는데 이런 번거로움이 없어 좋은것 같다. 그리고 SEO 검색에서도 더 잘된다고 하니 참고해둬야 겠다.
header 작성
가장 먼저 header 부분을 작성해보자.
대략적인 <header>부분의 틀이다. 가장 먼저 <nav>태그가 들어와서 메뉴를 만든다. 총 7개의 메뉴가 있다.
보면 <div>가 크게 있고, 그아래 작은 <div>가 분리되어 있다.
우선 <header>는 여기가 헤더부분이라는 표식이다.
<header>에 CSS 부분을 보면
이렇게 표시가 되어있다.
즉 개체의 위치에 대한 내용이다. 바로 position과 display에 대한 내용이다.
여러 영상을 봤더니 이 두가지를 잘알아야 자신이 놓고 싶은 부분에 놓을 수 있다고 한다.
중요한 사항이니 한번 정리하고 넘어가자.
CSS - position * position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. position의 종류는 총 4가지가 있다. 1. static : positon 속성의 기본값, html 순서대로 그대로 보여줌. 2. relative : position 속성값이 들어간 곳에서 이동 3. absolute : position 속성값이 들어간 태그에서 바로 전 상위태그 기준으로 이동 4. sticky : 현재 위치 그대로 가지고감. (스크롤해도 처음화면 위치에 고정됨.) |
z-index? 뭐지?
CSS - index * index 속성은 요소의 쌓임 순서를 정의할 수 있다. 정수값을 입력해서 어떤 요소가 앞으로 오고 뒤고갈지 정의하는 방식이라 보면 된다. 즉 부분으로 겹쳐져 있는 사진이 있다고 가정하고 어느 부분이 가장 앞으로 올것인지 설정하는 겁니다. 만약 가장 앞으로 왔으면 Z-index 속성을 활용하여 순서 조절이 가능하다. |
결론적으로 위의 내용을 보면 우선 이전 div태그를 호라용한 이동 및 표시에 대해 알아보았다.
댓글