css 4

[CSS] em과 rem 비교 (feat. 브라우저 기본 설정 폰트 크기)

1)공통 em과 rem 단위를 쓰면 디자인이 유연해지면서 고정된 크기에만 머무는 게 아니라 구성 요소의 크기를 늘리고 줄이는 게 가능해집니다. 브라우저 사용자는 전체 사이트의 크기를 조절해 가면서 읽기에 가장 적합한 환경을 손수 구성할 수도 있습니다. 2)em 단위의 한계 (연쇄 상속) 일반적으로 폰트 크기는 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 지정해주지 않는 한 자동으로 상위 요소로부터 그 값을 상속 받는다. 그런데 이 상속으로 인해 em 단위를 가지고 작업을 할 때 복잡한 상황에 처할 수 있다. em 단위는 사용된 요소의 폰트 크기에 따라 결정됩니다. 그런데 사용된 요소의 폰트 크기는 상위에 있는 요소로부터 폰트 크기를 상속 받았을 수도 있고, 그 상위 요소도 마찬가지로 그 위의 ..

[HTML,CSS] 2023.04.25

[CSS] 가운데 정렬하는 방법 - text-align과 line-height 심화 / flex 비교

1)display:flex;/ justify-content:center;/ align-items:center; 가운데 정렬하는 쉽고 간편한 방법이 있다. 아래와 같이 가로 세로 가운데 정렬이 잘 된다. 참고로 image 크기를 키우면 이미지가 다른 영역 위까지 뻗는다. img{ width:50px; } 2)text-align과 line-height 텍스트를 가운데 정렬할 수 있는 text-align, 줄 높이를 활용해 세로 가운데 정렬할 수 있는 line-height를 계속 사용해보고 싶었다. 두번째 요소는 가로 세로 모두 가운데 정렬이 잘 되었다. 하지만 이미지 태그가 있는 첫 번째 요소의 경우 수직 가운데 정렬이 잘 되지 않는다. 심지어 태그의 사이즈를 키울 수록 '1'의 수직 가운데 정렬은 틀어진다..

[HTML,CSS] 2023.04.22

[HTML,CSS] CSS 기본 단위(px, em, rem, % 등) 및 브라우저 영역viewpoint 기준 단위(vw,vh)

1.CSS의 기본 단위 CSS의 단위로는 절대 단위와 상대 단위가 있다. 절대 단위로 px, 상대 단위로 em, rem, vh, vw 등이 있다. 대부분의 브라우저에서는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 로 이루어져 있다. 1)절대 단위 px 반응형 웹에는 적절하지 않다. 그렇기 때문에 웹 디자인할 때에는 px 를 권장하지 않는다. 2)상대 단위 (1)em과 rem em은 실제 사용된 요소의, rem은 최상위(루트) 요소( 태그)의 글자 크기(font-size)를 기준으로 가변한다. 즉 em과 달리 rem은 태그 요소의 글자 크기만 참조한다. 등 다른 태그의 글자 크기와 상관없다. em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서의 의..

[HTML,CSS] 2023.04.20

[HTML] Style 및 Script 태그

1)Style HTML에서 스타일을 link 태그가 아닌 직접 정의하는 경우 사용함. 내용은 CSS에서 작성하는 거랑 완전 동일함. (1)태그 사용 (2)속성 사용 (3)JS에서 CSS 변경하기 (확장) ①HTML에서 style 태그 및 속성을 통해 스타일을 변경한 것과 같이 JS에서도 스타일 속성을 다음과 같이 변경할 수 있다. const slideList = document.querySelector('.slide_list'); // Slide parent dom const slideContents = document.querySelectorAll('.slide_content'); // each slide dom const slideBtnNext = document.querySelector('.slid..

[HTML,CSS] 2023.03.22