728x90 반응형 전체 글407 CSS 크기(px,%,em,rem), 크기 계산 방법 21. CSS 크기(px,%,em,rem), 크기 계산 방법 (youtube.com) EM 19.2px 1em = 16px 1.2em은 현재 글꼴 크기보다 20%더 큰 것 자식 요소가 더 존재 div 태그 기준으로는 손자(span) 요소 span = 부모요소인 p 폰트 사이즈의 0.8 배라는 의미. 19.2px 에다가 0.8 까지 곱해줘서 계산해줘야 함. REM 문서 기본값이 16px 이므로 문서 기본값을 보고 계산 예시 기본 세팅 div 에 font-size 부여 p 태그에 폰트 사이즈 부여 div 밖의 p 태그 생성 16px 원래의 값을 갖고있음. span 태그 사이즈 부여 부모가 60으로 바뀜 (div 태그) 그래도 자식과 손자 폰트 사이즈는 바뀌지 않는다 = px 를 썼기 때문 ( 절대값) wid.. 2024. 4. 19. CSS 단위 em 과 rem | 예제 프로젝트 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ (youtube.com) 절대적 / 상대적 사용 차이 1) 부모요소의 사이즈 / 브라우저의 사이에 따라서 사이즈 변경 2) 요소의 너비와 높이에 따라서 / 폰트 사이즈에 따라서 사이즈 변경 em 사용하는 경우 level 2 는 level 1 의 자식이므로 level 1 이 32 이니까 64 가 된다. level 3 = 128 글자가 점 점 커지는 거 확인 가능 em - 즉각적으로 사이즈가 보이지 않음 = 계산하는데 어려움 있을 수 있다. rem 사용하는 경우 부모요소에서는 16px 을 이용하고있음. 어떤 레벨에서 사용되는 지 상관없이 무조건 16배수. 2rem = 32 폰트 사이즈가 고정적인거 확인 가능 폰트 사.. 2024. 4. 19. #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh % .item 에 width 50% 부여 .item-parent 여기서도 50% 부여. 여기선 .item의 절반 크기를 갖게된다. percent-wrap 하고 item-parent 에 붉은 border 값을 넣음. 결론은 부모의 넓이 기준으로 적용된다고 알고 있으면 될듯. em & rem em 상위요소인 item-wrap 의 폰트 사이즈 확인 = 24px item-em 의 값 20em 20em = 480px 1em = 24px item-em보다 상위요소인 item-parent 의 font-size = 16px 로 지정했을 경우, 20em 은 1em 이 16px 으로 바뀌므로 16*20 을 해줘야한다 상위에 있는 요소의 폰트 사이즈에 대한 몇 배를 할 건지 정할 때 사용 rem 본인의 상위개념의 폰트 사이.. 2024. 4. 19. 웹 폰트 사이즈 단위 5가지는 알고가자! (px, rem, em, vw, vh) 웹 폰트 사이즈 단위 5가지는 알고가자! (px, rem, em, vw, vh) (youtube.com) px 데스크탑이나 모바일등 어떤 환경에서든 폰트의 크기가 동일하게 보이고 싶을 경우 사용 창의 크기가 크든 작든 동일한 사이즈로 유지. em 부모인 wrap 의 font-size 는 30px 로 돼있음. p는 2em 으로 들어가있음. = 30px 의 두 배로 적용하겠다는 의미. = 60px 이 들어간다는 의미 위에 앞서 적용된 폰트의 크기에 영향을 받음. 배수로 적용 rem em 과 차이점 = 위 단계에서 상속받는게 아님. 웹 브라우저 기본 크기인 16px 에 영향을 받는 단위. 3rem 인 경우, 48px 이 된다. em 이나 rem = 부모나 브라우저 기본 크기에 따라서 폰트 속성 주고 싶을 때 .. 2024. 4. 18. [2-2] 반응형 웹 사이트 구축하기 - 코드 보호되어 있는 글 입니다. 2024. 4. 18. [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] 반응형 웹 사이트 구축하기 - 코드 보호되어 있는 글 입니다. 2024. 4. 17. [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. [CSS] 메뉴 바 만들기 (1) - 이미지 사이즈와 맞추기, 이미지 여백 없애기 HTML 카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급 o .container 로 로고 2개와 / 햄버거 메뉴 / 이미지들을 묶었다. CSS /* CSS Reset - 기본 설정 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* header */ .banner-top { background-color: #f5e44f; width: 100%; padding: 11px; height: 40px; display: flex; align-items: center; /* 세로 중앙 정렬 추가 */ justify-content: center; /* 가로 좌우 정렬 */ } .banner-top a { text-decoration: none; font-size: .. 2024. 4. 16. 이전 1 ··· 11 12 13 14 15 16 17 ··· 46 다음 728x90 반응형
