'Frontend/CSS' 카테고리의 글 목록

Frontend/CSS

[CSS] 반응형 헤더 만들기 (feat. mediaQuery)

2022.09.26

CSS의 mediaQuery를 사용하여 뷰포트(viewport) 너비에 따라 CSS 속성 값을 변경해보자❗ 📌 mediaQuery란 무엇인가요? 미디어 쿼리(mediaQuery)는 단말기의 유형 (출력물 vs. 화면)과, 어떤 특성이나 수치 (화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. if 조건문과 비슷한 개념이라고 생각하면 이해하기 쉽습니다. ex) 뷰포트 너비가 62rem 이하이면 flex-direction을 row에서 column으로 바꿔줘~ @media 키워드로 시작하는 미디어 쿼리의 문법 구조 @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일..

Frontend/CSS

[CSS] CSS Units(px, em, rem, vw, vh, %)에 대해 알아보자❗️

2022.08.09

CSS Units 1️⃣ Absolute length units 2️⃣ Relative length units Absolute length units 어떤 상황에서든 항상 고정된 길이를 나타내는 단위 여러가지가 존재하지만 주로 px(모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위)이 사용된다. Absolute length units의 문제점이 무엇일까? 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 동일한 크기로 간주! 반응형 ❌ Relative length units 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위 주로 사용되는 5가지에는 em, rem, vw, vh, %가 존재한다. em - (동일 요소의 글꼴 크기)❌ → 부모 요소의 글꼴 크기 선택된 폰트 패밀..

Frontend/CSS

[CSS] Bootstrap 탭 사용법

2022.04.04

웹 개발을 하면서 탭은 매우 유용하게 사용될 수 있습니다. 위 사진은 제가 직접 Bootstrap을 사용하여 만든 탭 입니다. 차례대로 탭 사용법에 대해 알려드리겠습니다. ● 외부 스타일시트 적용 기본적으로 태그 안에 넣어 주셔야 합니다. ● 탭 메뉴 구성 판매현황 구매현황 , 태그를 이용하여 순서 없는 목록을 만들고 버튼으로 탭 메뉴를 만들었습니다. ● 메뉴별 내용 구성 상품명 최고입찰가 경매상태 남은 마감시간 HTML CSS JAVASCRIPT ... 태그를 이용하여 메뉴별 내용을 구성하였습니다. 태그를 이용하여 각 열마다 너비를 지정하였습니다. ● 탭 전환 JS 적용 ● Bootstrap JavaScript plugin 적용 를 태그가 닫히기 전에 페이지 끝 부분에 넣어 활성화 시킵니다. 지금까지 ..

[CSS] 반응형 헤더 만들기 (feat. mediaQuery)

[CSS] CSS Units(px, em, rem, vw, vh, %)에 대해 알아보자❗️

[CSS] Bootstrap 탭 사용법

티스토리툴바