본문 바로가기
728x90

분류 전체보기530

CSS calc() 산술식(사칙연산) - HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 CSS calc() 산술식(사칙연산) - HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 (youtube.com) calc 함수 사용 container 생성 width: 100% - 현재 브라우저 width 100% 에서 조금 빼고 싶은 경우, ( 40px 정도 빼고 싶은 경우) 이렇게 하면 될 것 같지만 CSS 는 이해를 못함. = calc() 함수를 사용해야 함. calc() 함수 사용시 주의점 calc 함수 사용할 때 위와 같이 띄어쓰기 있으면 안됨. 그리고 이렇게 괄호 안에 붙여도 안됨. Operator 좌, 우 에는 꼭 띄어쓰기 해야함. 1. calc() 활용 - 좌 우 마진 넓이 빼기 컨테이너 재설정 width: 1000px 마진 auto 로 중앙정렬 rmsep 1000px 이 아니.. 2024. 4. 22.
[CSS] rem 또는 em 계산 방법 (변환) 폰트 사이즈가 19.2px 일 때, rem 으로 변환 하는 방법. ( html 의 font-size 는 16px 일 때의 경우 ) 참고 사이트 PX to REM converter (instantly and bidirectional) (nekocalc.com) PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32.. 2024. 4. 22.
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.
728x90

티스토리툴바