1. 일반 CSS 일반적으로 우리가 알고 있는 바로 그 CSS 소규모 프로젝트에 적합 별도의 라이브러리 필요 X 1.1 주의사항 CSS 작성 시 컴포넌트 별 클래스가 중복되지 않도록 작성하는 것이 중요 1) 클래스 생성 규칙 클래스의 이름을 생성할 때 중복되지 않도록 특정한 규칙을 정해둘 수 있음 이름-태그의 형식과 같이 규칙을 정할 수 있음 ex) App 컴포넌트에 헤더를 생성 => App-header 2) CSS Selector DOM트리 구조를 통해 원하는 DOM을 참조하여 꾸밀 수 있음 ex) .App .logo { ... } 1.2 CSS 모듈 사용 CSS의 모듈 형식을 사용하면 자동으로 클래스명이 생성 CSS의 파일명을 컴포넌트명.module.css로 생성 -> 사용하려는 js 파일에서 imp..

0. 미디어 쿼리란? Media Query 반응형 웹을 디자인할 때, 접근하는 기기에 따라 다른 스타일을 적용해주어야 하는데, 이때 활용할 수 있는 스타일 시트 단말기의 유형 (출력물 vs 화면)과, 어떤 특성 혹은 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 각각의 스타일을 설정할 때 유용 미디어 유형과 미디어 특성을 기반으로 동작 1. 미디어쿼리 작성 방식 1.1 link 요소 사용 요소에 사용하게 되면, 특성이 조건에 맞을 때, css 파일을 불러오게 됨 media 속성의 "screen and (max-wodth: 768px)"의 의미 : 미디어 타입 : screen / 화면의 최대 너비 : 768px로 지정 => 화면의 너비가 768px 이하 일 때 적용되는 것 1.2 @medi..

0. 반응형 웹이란? Responsive Web 같은 웹 페이지를 디바이스의 크기에 따라 알맞은 레이아웃을 보여줌 ▶ 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 방식 웹 페이지의 디자인과 레이아웃이 다양한 화면 크기에 자동적으로 맞춰짐 CSS의 미디어 쿼리 (맞춤형 스타일 시트) 를 사용하여 구현 ▶ 이를 바탕으로 자체적으로 렌더링 하나의 웹 페이지에서 처리할 수 있다는 장점 때문에 많이 사용 ex ) 카카오모빌리티 : https://www.kakaomobility.com/ [ 장점 ] 모든 플랫폼에 대해 일관된 자료와 구조 제공 보편적이지 않은 화면 크기가 아닌 기기에서도 정상적으로 작동 [ 단점 ] 디자인에 대한 더 깊은 전문 지식 요구 요소가 잘못된 순서 혹은 크기로 배치되지 않..

0. flexbox란 웹 페이지의 복잡한 레이아웃을 보다 간단하게 구현할 수 있도록 나오게 된 것이 CSS3에 추가된 flexbox 속성이다. 요소의 크기와 순서를 유연하게 배치할 수 있다는 장점이 있다. 뷰 포트나 요소의 크기가 불명확하거나, 동적으로 변할 때에도 효율적으로 요소들을 배치하거나 정렬할 수 있다. flexbox 기본 용어 flex item : 자식 요소 flex container : 상위 부모 요소 주축 (main axis): 아이템의 배치 방향의 축 교차축 (cross axis): 주축의 수직축 flexbox에 속하는 속성들은 정말 많지만, 대표적인 속성들에 대해 바로바로 보고 이해할 수 있도록 이미지를 첨부하였으니 찬찬히 코드들을 살펴보자. 1. flex-direction 속성 fle..

1. 단일 선택자 단일 선택자란 선택자가 가리키는 요소 혹은 개체가 하나임을 말한다. 다만, 단일 선택자라고 해도 적용받는 태그의 수는 여러 개일 수 있다. 1.1 전체 선택자 ( Universal Selector ) 모든 형태의 모든 요소를 선택 * { color: red; background-color: blue; } /* 페이지의 모든 요소에 대해 스타일 적용 */ 1.2 태그 선택자 ( Type Selector ) 작성한 태그의 모든 요소를 선택 p { color: red; text-align: center; } /* 페이지의 모든 요소에 대해 스타일 적용 */ 1.3 Class 선택자 ( Class Selector ) 작성한 클래스 값을 가지는 모든 요소를 선택 .name { color: red..

1. CSS란? Cascading Style Sheet의 약자 웹 페이지를 디자인하기 위한 언어 HTML이 뼈대 / 구조를 구축하는 작업이라면, CSS는 디자인 / 인테리어를 하는 작업 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적 2. CSS 작성 방식 2.1 인라인 방식 각 요소의 style 속성에 직접적으로 스타일을 작성하는 방식 직관적이고 하나의 태그에 대해 바꾸기가 쉽다는 장점 HTML은 구조, CSS는 디자인을 담당하게 하자고 하는 암묵적인 룰에 어긋나는 부분 존재 작성한 태그에 한해 적용이 되기 때문에, 다른 곳에서 재사용이 불가능 CSS 사용법을 익혀보자 ! 2.2 내장 방식 HTML의 2.3 링크 방식 작성하려는 모든 style을 ..