- 탭 메뉴 UI 구현
전체 소스
-
html
-
css
설명
우선 이번엔 이미지가 아닌 FontAwesome의 아이콘을 사용할 것이기 때문에 헤더 안에 FontAwesome의 CDN 스크립트 주소
를 붙여넣어 준다
▶ 폰트어썸 사용 방법 참고 사이트
https://rgy0409.tistory.com/4762
< radio >
- 라디오 버튼은 여려 값에서 단 하나만 선택할 때 사용
< section >
- 문서, 애플리케이션의 일반적인 섹션
border-radius
- 테두리를 둥글게 만드는 속성
text-align
- center; 인라인 콘텐츠는 상자 내의 중앙에 위치
margin
- 13% 0 0 30%; 시계 방향으로 위 오른 아래 왼
box-shadow
- 5px 5px 5px gray; 오른쪽 아래쪽 흐릿함의 정도 회색
display
- none; 화면에서 사라짐
- block; 설정하지 않아도 갖게 되는 기본값, 공간이 있어도 같은 줄에 생성되지 않음
- inline; 컨텐츠를 감쌀정도의 크기만 갖음, 공간이 있다면 같은 줄에 생성
- inline-block; 기본적으로 inline 속성을 지니지만 임의로 크기를 바꾸어줄 수 있음
padding
- 15px 25px; 상하, 좌우 간격
font-
- size: small; 작은 크기
- weight: bold; 두껍게
label:hover
- label에 마우스 포인터가 올라가 있을 때
- cursor
- 마우스 커서가 올라갔을 때 보여줄 마우스 커서의 모양
input:checked + label
- label checked 시에 변화
- checked 시 색상은 푸른색, 아래쪽에 3px의 파란선이 표시
- menu1을 checked 시 content1이 실행
- menu2를 checked 시 content2이 실행
''
''
▶ html,css 도움 사이트
https://developer.mozilla.org/ko/docs/Web/HTML
https://developer.mozilla.org/ko/docs/Web/CSS
