21/09/11 - 패스트캠퍼스 챌린지 06일차[Part 1 - ch 10. 스타벅스 예제...

21/09/11 - 패스트캠퍼스 챌린지 06일차[Part 1 - ch 10. 스타벅스 예제...

스타벅스 예제

헤더와 드롭다운 메뉴 - 서브메뉴

a 태그에 링크는 준비되지 않았지만, 특정하게 동작하지 않고 임시적으로 준비되지 않음을 나타내는 것이다.

권장하는 방법은 javascript:void(0) 방법이다. 이 것은 작동을 하지 않는다.

위에 와 같이 선택자로 옮기는 방법은 위의 내용과 같다.

특정한 요소 앞에 상위 요소를 같이 붙여야 한다. 그래야 다른 영역에 중복되어 css가 먹히지 않는다.

정확히 원하는 경로에 스타일을 지정하기 위해서 정확히 지정을 해줘야 한다.

다음과 같이 html을 작성하는 선택자로 명시를 해준다.

초보자는 미리 html을 작성한 구조를 css 선택자로 정리를 하고 추가하는 것을 권장한다.

html 구조적인 부분을 먼저 옮기는 것도 추천한다.

여기서 a태그의 영역은 사용자가 클릭할 수 있는 영역을 말한다.

기본적으로 a태그는 인라인 요소이고

인라인 요소는 마진과 패딩이라는 외부 여백과 내부 여백의 위아래 값을 정상적으로 사용할 수 없었다. 추가적으로 가로세로 값을 가질 수도 없었다.

우리는 기본적으로 범위를 잡아줘야 하기 때문에 display :block;

요소로 지정해 줘야한다.

a: hover 값을 지정해 준다. 마우스를 옮길 때 나타내는 변화 표현

ul. menu에서 폰트를 지정해주고 display: flex; 지정해줘서 수평으로 바꿔준다.

ul. menu li 부분에서 부모 요소인 li는 position을 relative로 지정해준다.

ul. menu li :: before에서는 가상 요소를 지정할 수 있는데

가상 요소란?

: : before 요소 내부 앞에 내용을 추가할 수 있다.

즉 위와 같이 내부 앞에 가상 요소를 추가하려면 li :: before { }

안에 다가 li 앞에 넣고 싶은 것을 스타일 지정해주면 된다.

여기서는 가로 1px 세로 12px인 실선을 표기하려고 한다.

색상은 위와 같고 position:absolute;로 지정한다. 부모 요소를 기준으로 하겠다는 뜻이다.

또 position을 설정하면 자동으로 display값이 block처리가 되므로 따로 display를 지정할 필요는 없다.

위치 시작점 기준을 top, bottom 등으로 지정해 주고 margin을 통해 외부 위치를 auto로 지정해 준다.

또한 저 구분선이 맨 앞에는 필요가 없으므로 li :first-child : before을 지정해서 맨 앞에 있는 내용을

display:none; 처리로 해준다. 그럼 맨앞에 있는 요소는 안 보일 것이다.

실습 중인 사진!

실습이미지

앞 전 CSS 부분을 배울 때 가상요소의 강의를 들었지만 정확하게 알지 못하고 지나쳤는데 이번 실습을 통해 가상 요소의 사용법과 개념을 알게 된 것 같다.

왜 사용하고 어떻게 사용하는지 익숙하지는 않지만 개념을 알게 되어서 무언갈 얻은 느낌이다.

일단 예제를 들어가니 강의 시간이 길어져서 진행 속도가 더디다.

그럼에도 불구하고 개념을 알고 넘어가야 다음에 강의를 다시 복습했을 때 더 빨리 흡수 할 수 있고 내 것으로 만들어서

이것을 토대로 나만의 홈페이지를 만들 수 있을 것이다.

마음을 얼른 진도를 나가고 싶지만 더디더라도 완주하는 것이 나의 목표이기 때문에 중간에 포기하지말고 나아가 보자!!

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

from http://dhstory311.tistory.com/94 by ccl(A) rewrite - 2021-09-11 19:01:49