본문 바로가기

Books/CSS Basic ✔️3

[웹 개발 입문 - CSS] 3장 - CSS Responsive (마지막) 3.1 Responsive (반응형) - 반응형: 사용자의 해상도에 따라 웹 페이지의 레이아웃을 최적화해서 보여주는 기술 - 웹 페이지의 레이아웃, HTML 요소, 콘텐츠가 사용자의 해상도(데스크탑, 태블릿, 스마트폰 등)에 따라 가장 알맞은 형태로 사용할 수 있도록 제공하는 기술 3.2 Viewport - 뷰포트: 모바일 웹에서 웹 페이지가 사용자에게 보여지는 영역 - 모바일에서 화면 사이즈 작아서 콘텐츠 스크롤 등 불편 해소 3.3 미디어 쿼리 - 스크린 크기별로 별도의 CSS 적용해서 사용자의 스크린 크기에 최적화된 스타일 적용 [Reference] Source Code - CSS ch 03 개발자의 품격 (유튜브) - CSS 2022. 2. 15.
[웹 개발 입문 - CSS] 2장 - CSS Property 2.1 CSS Colors - 색상명 - 색상 값 - RGB 값 - RGBA 값 - HEX 값 - HSL 값 - Hue; 색조, 0~360, 360 (R) / 120 (G) / 240 (B) - Saturation; 채도, 0~100%, 회색 음영 (0%) - Lightness; 밝기, 0~100%, 검은색 (0%) - HSLA 값 - Alpha; 투명도, 0에 가까울수록 투명해짐 2.2 CSS Background - background-color - background-image - 속성 값은 url(" ") - background-repeat - background-image가 적용되는 HTML 요소의 크기보다 작은 경우 자동으로 이미지가 상하/좌우로 반복되어 나타남 - repeat-x, repeat.. 2022. 2. 15.
[웹 개발 입문 - CSS] 1장 - CSS 1.1 CSS는 무엇인가? - CSS: 웹 페이지의 스타일(디자인, 레이아웃 등)을 정의하기 위한 언어 - Cascading Style Sheets 1.2 CSS Syntax - Selector와 Declaration - Selector; 선택자, 스타일 지정하고 싶은 HTML 요소 가리킴 - Declaration; 선언, 세미콜론으로 구분하고 하나 이상의 선언 표현 -> 선언 블록 { } - Property, Property-value 1.3 CSS 선택자(Selector) - 전체 선택자(Universal Selector) - * - HTML 페이지 내부의 모든 태그에 같은 CSS 속성 적용 - 주로 margin이나 padding 기본값 초기화 할 때 사용 - 태그 선택자(Type Selector) .. 2022. 2. 13.
반응형