사전스터디(html, css)

nav

• nav태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다.
• 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있다.

<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  <ul>
</nav>
  
# css기본값
  nav {
    display: block;
  }

---

div

• HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용한다.
• 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용된다.

---

text-shadow

• text-shadow CSS 속성은 텍스트에 그림자를 추가해준다.
  offset-x : 그림자의 수평 거리 (필수)
  offset-y : 그림자의 수직 거리 (필수)
  blur-radius : 흐림 정도 (선택 : 값을 정하지 않으면 0)
  color : 색 (선택 : 값을 정하지 않으면 브라우저 기본값)

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
    
/* 쉼표로 중복해서 쓰면 그림자가 추가된다  */
text-shadow: 1px 1px 2px black, 1px 1px 2px black, 1px 1px 2px black;

---

flex

• Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다. 마치 inline 요소들 처럼, height는 컨테이너의 높이만큼 늘어난다
• 아이템들이 배치된 방향의 축을 메인축(Main Axis),
  메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)이라고 부른다.

---

flex-direction

flex-direction: row; /* 아이템들이 행(가로) 방향으로 배치 */
flex-direction: column; /* 아이템들이 열(세로) 방향으로 배치 */

---

justify-content

• “justify”는 메인축 방향으로 정렬
  “align”은 수직축 방향으로 정렬

/* 아이템들의 사이와 양 끝에 균일한 간격을 만들어준다 */
justify-content: space-evenly;
    
/* 아이템들의 “사이(between)”에 균일한 간격을 만들어준다 */
justify-content: space-between;