[HTML,CSS] 6

[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

[CSS] SCSS와 Bootstrap From GPT

(1)SCSS SCSS(또는 Sass)는 CSS 전처리기(preprocessor)로서, CSS의 기능을 확장하고 개발자가 작성한 코드를 더욱 효율적으로 관리할 수 있도록 돕는 도구입니다. SCSS는 변수, 조건문, 반복문, 함수 등의 기능을 제공하여 CSS 작성 시 중복되는 코드를 줄이고, 코드의 가독성을 높이며 유지보수성을 향상시킵니다. (2)Bootstrap Bootstrap은 웹 개발에 널리 사용되는 오픈소스 프론트엔드 프레임워크입니다. Bootstrap은 HTML, CSS, JavaScript를 이용하여 모바일 우선 디자인, 반응형 웹 디자인 등을 쉽게 구현할 수 있도록 돕습니다. Bootstrap은 CSS 전처리기인 Less와 Sass(SCSS)를 이용하여 스타일링 코드를 작성합니다. (3)관계..

[HTML,CSS] 2023.04.19

[HTML] button과 input 태그

1)출력이 비슷함 화살표 2)button type 속성의 button 값 버튼에 타입을 쓰는 이유 (button type="button") 프롤로그 가끔 이렇게 type을 명시한 버튼을 마주칠 때가 있는데 전 항상 궁금하더라구요. "아니 버튼이면 버튼이지 버튼 타입 버튼은 대체 뭐람" 그러고보면 비슷하게 타입을 명시하는 이라는 nykim.work 3)input의 주요 속성(type, value, name) HTML - input태그와 그 속성 type, value, name - 입력태그 (1) HTML - input태그와 그 속성 type, value, name입력태그 (1) 오늘은 input태그와 그 속성 type, value, name에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압..

[HTML,CSS] 2023.03.22

[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