내비게이션메뉴(2)
-
[HTML/CSS] 토글 버튼 만들기
토글 버튼 만들기 토글 버튼 추가 button만들기 사이트 이름 설정 뒤에 을 추가하고 type 속성으로 버튼의 종류를 "button"으로 지정한다. 아이콘 출력하기 범용태그 을 추가하고, 클래스 이름으로 출력하고 싶은 아이콘 종류를 지정한다. 어떤 버튼인지 알려줄 수 있게 title속성에 "MENU"로 지정한다. 큰 화면에서 버튼 보이지 않게 설정 화면의 너비가 768px 이상일 때, 버튼이 보이지 않게 설정 하려고 한다면 css에서 @media 를 이용해 설정 해주고, display를 "none"으로 설정한다. (큰 화면에선 토글버튼이 보이지 않고, 작은화면에서만 보이게 된다.) @media (min-width: 768px) { .headC { display: none; } } 작은 화면에서 버튼 위..
2022.12.29 -
[HTML] 헤더 내비게이션 메뉴 만들기
내비게이션 만들기 내비게이션 메뉴 추가 헤더 아래에 내비게이션 메뉴를 추가하고, 메뉴 설정을 작성한다. 사이트를 구성하는 페이지로 연결되는 링크를 만든다. 항목 링크를 로, html 리스트 형식 정보를 과 로 마크업 한다. 내비게이션 메뉴 기본 디자인 설정 리스트 마크 제거 list-style: none; 밑줄제거 text-decoration: none; 커서 올릴 때 디자인 변경 : 반투명한 색으로 지정. rgba(붉은색, 초록색, 파란색, 투명도) *0일 때는 완전한 투명, 1일 때는 불투명 a :hover { background-color: rgba(0,0,0,0.3); } 링크 크게 만들기 : 링크 안쪽의 여백 크기를 크게 지정한다. 의 padding으로 링크 안쪽의 여백크기를 크게 지정해서 링크..
2022.12.27