15일차 - nav태그와 CSS의 중요 속성들
HTML의 nav 태그
수많은 홈페이지들을 보면 사용자가 특정 메뉴로 들어가게 하기 위해서 만들어놓은 메뉴들을 볼 수 있다.
그 메뉴들을 만들 때 쓰는 태그가 nav 태그이다. 엊그제 만들어본 메가커피 메뉴바도 마찬가지인데, 그 때까지 배운 걸 연습하기 위해 nav 태그를 쓰지 않았지만, 이제 수정해야 할 때가 온 것 같다.
nav 태그는 아래 이미지처럼 사용한다. 메뉴를 만들 위치에 nav 태그를 쓰고 그 안에 콘텐츠를 채우면 된다. 해당 메뉴에 링크를 걸고 싶다면 앵커 태그도 중첩하여 사용할 수 있다.
CSS의 중요 속성들
앞서 css의 여러 속성들을 살펴보았는데, 그 속성들도 중요하지만 이번에 나오는 속성들은 상당히 중요한 속성들이다.
📢 text-transform 속성: 문자들이 보여지는 방식을 정할 수 있는 속성이다. 아래 이미지에서는 소문자였던 텍스트를 대문자로 바꿔본 이미지이다.
📢 text-shadow 속성: box-shadow 속성처럼 텍스트 뒤에 그림자를 추가할 수 있다. 입력 방식은 box-shadow 속성과 동일하다. 아래 이미지는 x축 y축 1px씩 그림자를 만들고 블러정도를 2px로 준 후 검은색 그림자를 만든 것이다. 그 결과는 위 TRAVEL GOALS라는 로고의 그림자이다.
📢 CSS의 Flex box: 플랙스박스는 콘텐츠의 위치를 손쉽게 바꿀 수 있도록 도와주는 요소이다. 큰 박스 안의 콘텐츠들이 정렬되거나 배치되는 방법이나 공간을 관리할 수 있다. 사용은 display 속성을 flex 값으로 설정하면 된다.
📢 flex-direction 속성: flex로 설정된 박스의 콘텐츠들을 어떤 방식으로 배치할 것인지 설정할 수 있다. 박스를 가로로 배치할 수도 있고, 세로로 배치할 수도 있는데 그럴 때 사용한다.
위 이미지는 가로로 정렬하기 위해 row 값을 사용했다. 세로로 정렬하려면 column 값을 적용하면 된다. 또, 콘텐츠의 위치를 뒤바꿔서 정렬하는 reverse-row나 reverse-column 값도 있으며, 직접 위치를 지정할 수 있는 calc() 값도 있다.
📢 flex-wrap 속성: 브라우저의 창의 너비를 조절하면 그와 함께 박스의 너비가 같이 조절되는 속성이다. 기본값은 nowrap인데 wrap으로 바꿔주면 같이 움직이는 걸 확인할 수 있다.
위 이미지는 다른 예시페이지에 속성을 적용하여 브라우저 크기를 줄였을 때를 캡쳐한 것이다.
📢 flex-flow 속성: flex-direction 속성과 flex-wrap 속성을 합친 속성이다. 입력할 때는 앞에 flex-direction 속성값을, 뒤에 flex-wrap 속성값을 입력하면 된다.
📢 align-items 속성: 플렉스화 된 박스 내의 콘텐츠의 위치를 변경할 수 있는 속성이다.
위 이미지에서는 center값을 설정했는데, 플렉스박스 내 Travel Goals가 있는 박스가 가운데로 내려온 것을 확인할 수 있다.
📢 justify-content 속성: 플렉스화 된 큰 박스 내의 박스들의 위치를 큰 박스의 공간 내에서 위치를 조절할 수 있는 속성이다.
위 이미지를 예로 들어 설명하면, 보라색 큰 박스 안에 Travel Goals 박스와 Destinations, About 박스가 있다. 그런데 이 두 개의 박스의 위치를 보니 Travel Goals 박스는 왼쪽에 붙어있어야 하고, Destinations, About 박스는 오른쪽에 붙어있어야 함을 인지하여 justify-content 속성에 space-between 값을 주어 배치를 했다.
위에서 봤던 속성들의 값은 굉장히 다양하다. 지금까지 몇 가지 안 써본 것 같지만, 여러 값들이 있는 속성들의 쓰임새를 여러 홈페이지에서 확인해보면 몇 가지의 값들만 쓰는 것 같다.
