[CSS] CSS 중급 문법 : 5. 미디어 쿼리 Media Queries

Responsive Web Design✅ 반응형 웹사이트(Responsive Website)의 필요성 :사용자는 웹사이트를 휴대폰, 태블릿, 컴퓨터, TV 모니터 등 다양한 기기에서 접속한다.이때 기기마다 화면 크기가 크게 다르기 때문에, 웹사이트는 화면 크기에 따라 콘텐츠를 재배치하고 크기를 조정해야 한다. 만약 웹사이트가 기기 크기에 맞게 반응하지 않는다면, 특히 작은 화면(예: 스마트폰)에서는 화면이 깨져 보이거나 아예 내용을 읽을 수 없게 된다. 이처럼 화면 크기에 따라 레이아웃이 자동으로 변하는 웹사이트를 반응형 웹사이트(Responsive Website) 라고 한다. View Meat Tag✅ Viewport 란? :Viewport는 사용자가 실제로 볼 수 있는 영역을 의미기기에 따라 달라지..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 19.

[CSS] CSS 중급 문법 : 4. 성분 크기 조절 Sizing Elements

Relative Measurements✅ 반응형 디자인(Responsivie Design) :현대에는 데스크탑, 스마트폰, 태블릿 등 다양한 기기에서 웹사이트를 이용한다. 하지만 기기마다 화면 크기가 다르다는 점이 웹 개발자에게 문제를 일으킨다.해결책은 반응형 디자인(Responsive Design) 이다. 반응형 디자인이란, 웹사이트가 상황에 따라 자동으로 크기와 배치를 조정하여, 모든 화면 크기에서 가독성과 시각적 일관성을 유지하는 것을 의미한다.조정 기준은 다음과 같다:웹사이트 내 다른 콘텐츠의 크기화면 크기 (뷰포트 크기) ✅ 픽셀 단위(px)의 한계 :px → 고정값(Fixed Value)예: width: 500px; height: 100px;문제점: 화면 크기가 변하면 콘텐츠가 너무 작아지거나..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 16.

[CSS] CSS 중급 문법 : 3. 전환 Transition

CSS Transitions✅ CSS 전환(Transitions) 개요웹사이트가 표시된 후 요소의 시각적 모습은 여러 이유로 변경될 수 있다. 예를 들어,링크 위에 마우스를 올렸을 때 색상이나 모양이 바뀜창 크기를 조절했을 때 레이아웃이 변경됨스크롤 시 일부 요소가 사라지고 다른 요소가 나타남이러한 변화는 상태 변화(State Change) 이며, CSS Transition을 사용하면 이러한 변화가 부드럽게 진행되도록 제어할 수 있다. ✅ Transition으로 제어할 수 있는 요소어떤 CSS 속성을 전환할지 (transition-property)전환이 지속되는 시간 (transition-duration)전환이 시작되기 전 대기 시간 (transition-delay)전환의 가속도 곡선 (transiti..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 16.

[CSS] CSS 중급 문법 : 2. 그리드 Grids

Introduction to Grids✅ CSS로 레이아웃을 구성하는 다양한 방법웹페이지의 요소를 배치하는 방식에는 정답이 없다.콘텐츠의 종류와 목적에 따라 다양한 스타일링 기법이 필요하다.지금까지 배운 Box Model, Display, Positioning, Flexbox는 단일 축(one-dimensional) 기준으로 효율적인 배치를 도와주었다. ✅ CSS Grid란?CSS Grid는 보다 강력하고 유연한 2차원 레이아웃 시스템이다.비교 항목FlexboxCSS Grid레이아웃 방향1차원 (row 또는 column)2차원 (row + column)사용 목적아이템 정렬에 초점전체 레이아웃 설계에 적합Flexbox는 요소 간 정렬과 비율 조정에 강하고,Grid는 페이지 전체 구조를 디자인하는 데 유리..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 12.

[CSS] CSS 중급 문법 : 1. Flex박스로 만드는 레이아웃 Layout with Flexbox

What is Flexbox?Flexbox 레이아웃은 두 가지 주요 구성 요소로 이루어진다:Flex Container: 플렉스 아이템을 포함하는 부모 요소Flex Items: 플렉스 컨테이너의 자식 요소들플렉스 아이템은 반드시 플렉스 컨테이너의 '직속 자식 요소' 여야 한다는 점이 중요하다.플렉스 컨테이너로 지정하려면 해당 요소의 display 속성을 flex 또는 inline-flex로 설정하면 된다. Flexbox에는 컨테이너에 적용하는 속성과 아이템에 적용하는 속성이 구분되어 있다. 아래는 주요 속성 목록이다: 컨테이너에 적용하는 속성justify-content : 주 축(main axis) 방향 정렬align-items : 교차 축(cross axis) 방향 정렬flex-direction : 주 ..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 8.

[CSS] CSS 기본 문법 : 6. 타이포그래피Typography

Font FamilyHTML 요소의 글꼴은 font-family 속성을 사용해 변경할 수 있다.h1 { font-family: Arial;} 위 예제는 모든 요소에 Arial 글꼴을 적용한다. 여러 단어로 이루어진 글꼴 이름여러 단어로 구성된 글꼴 이름(ex: Times New Roman)은 작은따옴표(' ') 또는 큰따옴표(" ")로 묶어야 한다.h1 { font-family: 'Times New Roman';} 웹 안전 글꼴 (Web Safe Fonts)웹 브라우저와 운영체제에 공통적으로 설치되어 있는 글꼴을 웹 안전 글꼴이라고 한다.→ 예: Arial, Georgia, Times New Roman 등→ 대부분의 환경에서 일관된 표시가 가능 폰트 스택(Fallback Fonts)원하는 글꼴이 없..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 7. 30.