728x90 > 콜로소/[고윤서] 인터랙티브 웹사이트 만들기16 [2-2] 반응형 웹 사이트 구축하기 - 애니메이션 돌아가는 막대기 doorline 스타일 지정// 막대기 돌려주기 - keyframes 활용 - 만들고 해당 속성에 부여// keyframes 작성 방법 다양 - from 과 to 활용// 첫 번째 상태와 마지막 상태 지정// from 과 to 말고도 0% 와 100%로 치환하여 사용 가능.// 회전하니까 rotate 사용 - 0degree 에서 360degree 까지 360도 돌아가게@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}Keyfrmaes 를 먼저 생성해주고해당 속성에 부여한다.// - keyframes 작성해주고 animation 지.. 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 (1) rem = em 과 같이 쓰임.반응형을 위해서 최적화 된 단위.rem / em= HTML 에 설정된 폰트 사이즈에 영향을 받음.HTML 의 폰트 사이즈 = 16px1rem = 16px만약, HTML 의 폰트 사이즈가17px로 지정됐을 경우,1rem은 17px 이 된다.HTML 에 있는 font-size는시스템의 기본 설정에 의해서도 계속 바뀜.- "반응형"으로 제작할 땐,미디어 쿼리의font-size에 vw 를 삽입해준다.= 손쉽게 스타일들이 일정하게 줄어들도록만들어 줄 수 있음.피그마에서의 p태그 폰트 사이즈= 27.21rem = 16px이므로27.2를 16으로 나눠줌.27.2 / 16 = 1.7 나옴* 1.7 rem 인 것.em = 부모 / 자신의.. 2024. 4. 18. [2-1] 반응형 웹 사이트 구축하기 - 메인화면 만들기 웹을 공부하면서 사전이 될 웹사이트들: MDN web docsw3big.comcss-tricks.com (꼼수 부려서 효과적으로 보이게 하기)stackoverflow.com( 개발하다가 모르는 거 생겼을 때 검색 또는 질문 가능)alt = 이미지가 어떤 것을 표현하는지 적어주면 됨.alt 태그를 작성해주는 것이 웹 접근성에 좋음id 작명 방법class 와 달리대문자를 사용해서 대부분 띄어쓰기를 표현ex)#countPlus#count_plus.count-plus.count_plusHTML 태그의 종류 = 인라인 태그target 속성 - _blank / _self 넣어줄 수 있음.외부 사이트로 이동 시킬 땐, 새 탭에서 여는게 좋기 떄문에blank를 가장 많이 사용.. 2024. 4. 17. [1-2] 디자인 툴 및 플러그인 설치 & 개발 visual studio code - live sass compiler 설치 scss - scss 안에 있는 내용들을 css 포맷으로 변환 2024. 4. 14. 이전 1 2 3 다음 728x90
