쥰's 블로그

첫 화면에서 스크롤을 내려도 top-header부분이 위쪽에 고정되어 있는 것을 볼 수 있다.

- 가로버전 li:hover 시 해당 .submenu만 표시> .wrapper>header>nav>.menu>li:hover .submenu{ display: block; } -가로버전 처음 실행 시키면 이 화면이 나오지만 메뉴박스 위에 커서를 가져다 되면 밑에 화면처럼 나온다. 또 다른 버전 위의 코드와 거의 흡사하다. - 세로 버전 .wrapper>header>nav>.menu:hover .submenu{ display: block; } - 세로화면

● 상위태그(.parent)에 반드시 position 설정해야 함 ● 가운데 배치시키는 방법 : top. left, right, bottom을 0px으로 잡고 margin을 auto로 하면 됨

● Position : Box의 위치를 저장할 때 사용하는 속성 ● static : Box요소가 문서 흐름에 따라 배치(순차적) ● relative : Box요소가 문서 흐름에 따라 배치(순차적), 상위 Box요소를 기준으로 위치 지정가능 ● absolute : 상위 Box요소를 기준으로 위치 지정가능, 상위 Box요소가 Position 설정이 되어 있어야 기준으로 지정됨 상위 Box요소가 Position 설정이 되어 있지 않다면 Viewport를 기준으로 위치 조정 가능 ● fixed : Viewport를 기준으로 위치조정 가능, Scroll Event와 무관하게 고정위치 선점 ● sticky : 스크롤 영역을 기준으로 배치, 스크롤 위치를 따라가다가 일정위치를 넘어서면 고정 ● position:sta..

● :first-child : 첫번째 자식요소 ● :last-child : 마지막번째 자식요소 ● :nth-child(n) : n번째 자식요소

● 수평배치 : display : flex; ● 메뉴를 왼쪽으로 미려면 left : 0; 오른쪽으로 미려면 left : 100%;하면 된다. ● 메뉴의 구분선을 없애려면 content : '|' 하면 된다.

● ::before : content영역 앞에 표시할 스타일 ● ::after : content영역 뒤에 표시할 스타일 글씨 앞의 작은 박스 안에 그림을 넣기 위해 ::before 태그를 사용하여 사진의 주소를 받아 url로 지정해줬다. 또한, 글씨 뒤에 아이콘을 넣어주기 위해 ::after태그를 사용하여 지정해줬다. 출처 : 강아지사진(https://img.freepik.com/premium-photo/picture-of-a-cute-puppy-world-animal-day_944128-5890.jpg)

● 마우스를 가져다 댔을 때 변환 -> .class:hover ● 버튼을 클릭 했을 때 변환 -> .class:active ● 한번 방문했을 때의 흔적 -> .class:visited 실행시키면 이런 화면이 나오는데 위에 커서를 갖다 대면 밑의 화면 처럼 색이 진해지고 글씨가 커진 것을 볼 수 있다. 버튼을 클릭하여 한번 방문하였던 버튼은 아래 화면처럼 갈색으로 변하게 된 것을 볼 수 있다.

체크박스를 누르면 체크박스 안에 원하는 아이콘이 나오게 만들 수 있다. 본인은 구글 아이콘을 검색하여 이미지를 다운 받아 url을 설정하였다. 여기서 svg이미지를 다운 받아 사용하였다. 34행에 input의 id를 설정하고 label for에 똑같이 설정하면 체크박스가 아닌 글을 선택해도 체크가 된다. 체크박스를 누르면 설정해 놓은 체크 아이콘과 배경색이 바뀌게 된다. 출처 : 체크박스 아이콘(구글 아이콘) : https://fonts.google.com/icons?selected=Material+Symbols+Outlined:done_outline:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=check

● ~ : 동위선택자, 같은 Depth의 하위 모든 선택자 ● + : 동위선택자, 같은 Depth의 하위 1개 선택자