요즘에는 명조체가 좋다 vh : viewport hight vw: viewport weight %와 다르게 부모요소의 뷰포트에 맞게 사용되어 반응형 페이지를 구성할 때 좀 더 활용도가 좋다 여기서 뷰포트(viewport)란 Display상의 표시영역을 말한다.
IT/HTML&CSS
음 모달을 띄워서 티스토리에서 심리테스트를 만들어 보고자 했는데 웹에서는 되는데 모바일 환경에서는 다 깨지는 문제가있다. 엄 왜그러지? + 기존의 CSS에 먹혀서 그런 것으로!!! 심리테스트 시작 × 남자 여자 당신은 남자라고 생각하시는군요? 당신은 여자라고 생각하시는군요?
출처 : https://naradesign.github.io/article/media-query.html CSS3 미디어쿼리 @media 규칙 이해. 출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다. CSS 코드 내부에서 분기하는 방법 CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다. @media only all and (조건문) {실행문} @media: 미디어 쿼리가 시작됨을 naradesign.github.io @charset "utf-8"; /* All Device */ 모..
codepenhtml/css / js를 편하게 실습해 볼 수 있는 사이트 상단에는 html/ css/ js를 나눠서 작성 할 수 있고하단에는html 창부분 console 창부분으로구성되어있다. 자동저장이 되고 또프로젝트별로 저장할 수 있어서 유용하다. 코드펜 주소https://codepen.io
오늘은 css공부 Exercise 하다가 중간에 창닫아버려서캡쳐못하고 오늘은 문제도 풀었다. [w3schools-css Quiz 주소]
총 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 사용법을 알게되었다!