✔ TODAY

오늘부터 네이버 오디오 페이지를 카피를 한다.

---

✔ 학습한 내용

실습대상

오디오 1 / 3

#auido-header

#auido-header #auido-nav .auido-nav-left ul li span {
	display: inline-block;
	position: relative;
	height: 21px;
}
#auido-header #auido-nav .auido-nav-left ul li a.active span:after{
	position: absolute;
	display: block;
	content: '';

	border-bottom: solid 3px #222222;
	border-radius: 1.5px;

	z-index: 1;

	left: -4.5px;
	right: -5.5px;
	bottom: -17px;

}

nav부분에 활성화된 li밑줄 넣기.
기존의 방법으로 border-bottom를 넣는 방법이 아닌, 가상선택자 after를 사용해본다.

• after만 사용하니, 해당영역에 border자체가 안나왔음
  + 이런 경우에는 공간을 만들어야 함.
  • 기본 방법으로 관련 선택자의 display에 inline-block/block 를 넣어도 나오지 않음
  • 공간을 3차원으로 만들어서 left, right, top, bottom를 사용해 공간을 만들었더니 해결이 되었다.

💖tip 공간을 설정하는 2 가지 방법

div{ width:100%; heigh:800px;}

1) 높이 값과 넓이 값을 주어 공간을 만드는 방법

div{ position:absolute;
 	top :  ; 
 	left:; 
	right:; 
	bottom:; 

2) 3차원으로 사면을 밀어서 공간을 만들 수 있다.

📚학습하기
code pen으로 코드 공부하기
code pen

📚학습하기
flex클래스를 넣는 곳을 정확하게 인식하기
flexbox

---

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

• nav의 메뉴 관련공부중 공간을 만드는 새로운 방법을 알았다.
• 왼쪽과 오른쪽의 공간을 설정하는 데 조금 헷갈렸다.
• flex의 기능으로 다양한 레이어를 작성하는데 익숙해 지자.

---

✔ 해결방법작성

• 실습한 코드를 계속 리뷰해니 구조와 속성의 기능을 보는데 익숙해졌다.

---

✔ 학습 소감

8월 내내 힘들게 했던 더위가 끝나니, 이번에는 몸이 아프다... 공부중에 컨디션 조절이 가장 힘든듯 하다.