요즘에는 명조체가 좋다 vh : viewport hight vw: viewport weight %와 다르게 부모요소의 뷰포트에 맞게 사용되어 반응형 페이지를 구성할 때 좀 더 활용도가 좋다 여기서 뷰포트(viewport)란 Display상의 표시영역을 말한다.
HTML
총 90문제 완료! HTML 전반적인 태그에 대해튜토리얼을 진행할 수 있다. [w3school 주소]
프로젝트 목표 : - visual 비주얼이 강조된 헤더 느낌의 변수명 sub_wrap으로 묶어주기 퍼센트크기 = 반응형으로 만들 수 있음 반복되는건 li로 묶어준다 보일러플레이트https://html5boilerplate.com/ : 기본 웹개발 폴더 구성을 잡아준다.다운받아서 사용 하면 됨.
▲ 폰트어썸 사이트 svg 필요없고 * 폰트어썸 (https://fontawesome.com/) 에서 플러그인 아이콘 가져와서 사용하기무료 아이콘 사용 가능! 효과 = 백그라운드 이미지 설정시 좀더 편하게 할 수 있다. 에이치오버~! or 호버~! 라고 읽는다! 대상 이미지 제외 다른 이미지에 (transitions)을 효과 주면 어두워지게 설정할 수 있다. - 스크립트로 만들어보기 (레이어, id 설정 후 변경하면서 보여주면 됨)
▲ jQueryui 사이트 - Datepicker 사용법 보고 사용해보기(https://jqueryui.com/datepicker/) : 장점> 흔해서 커스터마이징 하기도 좋다 * CDN 알아보기 = url로 가져와서 사용할 수 있다. - jQuery를 원래 다운 받는 것이 좋다. - 상단 script에 위치 - jQuery를 넣어줘야함 * common스크립트 만들어서 스크립트를 모아두면 나중에 편하게 관리 가능하다 > Note ! jQuery UI 플러그인 사용법을 알게되었다!> Note ! Google API 사용법을 알게되었다!
https://www.airbnb.co.kr/▲ 예제 사이트 div 안에 이미지 박스 + 텍스트 박스(span) > Note Style 처음에는 직접적인 css 대신 포괄적으로 주어야 나중에 수정이 편리 font-weight - 폰트 굵기 li - 흰색 박스 #ddd - 자주쓰는 검은색 border-radius - 둥그런 테두리 shadow - 그림자 넣기 >Note 크롬창에서 돌리면 변화되는 모습을 보기 편하다. a - 클릭 url 연결 가능태그 >Note a + inline display 설정시 어디를 눌러도 클릭 되게 끔 힘을 줄수 있다. >Note 이미지에 height를 주면 자동으로 div 가 힘이들어감( a태그에 width를 주어야함) >Note a태그 안의 span 태그에 색을 지정하면 클릭..
https://www.w3schools.com/▲참고사이트 ul, a - 블럭이아니기 때문에 힘이 없음span - display에 따라 달라짐height를 작게 주면 강제로 위치 설정 가능 display : Inline - 힘을 갖게 되어서 딱딱해짐 z-index: 위치를 정해준다.(9999일 경우 강제로 항상위) position: pixed - 고정위치 > Note 반응형에서 기준점은 height로 !padding 0으로 주면 없애기 가능 h태그 - 소제목같은 경우 (h1~h6)