CSS

CSS 기본 선택자

기본 선택자 종류 * (전체 선택자(Universal Selector)) : 모든 요소를 선택 * { color: green; } 태그 선택자(Type Selector) : 태그 이름이 요소 00 선택 00 { color: green; } 클래스 선택자(Class Selector) : HTML Class 속성의 값이 xx인 요소 선택 .xx { color: green; } 아이디 선택자(ID Selector) : HTML id 속성의 값이 xx인 요소 선택. #xx { color: green; }

CSS 선언 방식

1. 내장 방식 : 의 내용(Contents)로 스타일을 작성하는 방식. 2. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) 유지 보수 측면에서 안좋아 비추천, 스타일 바꿀 때 CSS가서 바꾸는게 좋음. 3. 링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식. 병렬 방식으로 볼 수 있음. main.css 파일의 내용 div { color: green; margin: 50px; } 4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식. 직렬 방식으로 볼 수 있고, 연결이 지연됨. main.css 파일의 내용 @import url("./box.css"); div { color: green;..

CSS 정의 및 기본 문법

CSS(Cascading Style Sheets, 종속형 스타일 시트) 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어로, 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 표현함. 하나의 스타일 선언은 속성과 그 값으로 이루어져 있음. 선택자{ 속성 : 값; } ※ 선택자 : 스타일(CSS)를 적용할 대상(Selector) ※ 속성 : 스타일(CSS)의 종류(Property) div { color : red; } color은 글자색의 속성이고, red는 색상의 값임. div 의 색상을 레드로 하라는 의미. div { margin: 20px; } margin은 요소 외부의 여백이며, 20px는 값임. div 요소 외부 여백을 20픽셀로 하라는 의미. 인지하기 좋게 보통 아래와 같이 배치. ..

HTML, CSS, JS 개요

HTML (Hyper Text Markup Language) - 기획자의 영역 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 ex) 얼굴에서 눈, 코, 입, 귀 등 CSS (Cascading Style Sheets) - 디자이너의 영역 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당 ex) 얼굴에서 눈, 코, 입, 귀 등의 위치나 크기, 색상 등 JS (JavaScript) - 개발자의 영역 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당. ex) 얼굴에서 각 이목구비의 기능, 피부를 눌렀을 때 나오는 탄성 등 -------------------------------------------- HTML..