CSS
-
CSS 선택자 (가상 클래스, 가상 요소)CSS/CSS 2021. 4. 21. 08:15
가상 클래스(Pseudo-Classes) 선택자 1. 어떠한 행동을 했을 때 동작하는 선택자 (hover, active, focus) 2. 특정한 요소를 선택하는 선택자 1번 선택자:hover { 속성: 값; } a:hover { color: blue; } HOVER - 선택자 요소에 마우스 커서가 올라고 있는 동안 선택한다 선택자:active { 속성: 값; } a:active { color: blue; } ACTIVE - 선택자 요소에 마우스를 클릭하고 있는 동안 선택한다 선택자:focus { 속성: 값; } input:focus { background-color: blue; } FOCUS - 선택자 요소가 포커스(활성화)되면 선택한다 - Focus 가능한 요소는 HTML 대화형 콘텐츠가 해당한다 (..
-
CSS 선택자 (기본, 복합)CSS/CSS 2021. 4. 20. 09:20
기본 선택자 * { 속성: 값; } 전체 선택자(Universal Selector) - 모든 요소를 선택한다 태그명 { 속성: 값; } li { color: blue; } 태그 선택자(Type Selector) - 태그 이름이 태그명인 요소를 선택한다 .클래스명 { 속성: 값; } 클래스 선택자(Class Selector) - HTML class 속성의 값이 클래스명인 요소를 선택한다 #아이디명 { 속성: 값; } 아이디 선택자(ID Selector) - HTML id 속성의 값이 ID명인 요소를 선택한다 ※ class속성과 id속성은 HTML의 전역 속성 복합 선택자 복합 선택자란 기본 선택자 4가지(전체, 태그, 클래스, 아이디)를 조합해서 사용하는 선택자 /* CSS */ 선택자1+선택자2 { 속성..
-
CSS 선언 방식CSS/CSS 2021. 4. 20. 03:14
내장 방식 HTML 요소 내부 요소의 내용(Contents)으로 스타일을 작성하는 방식 장점 - 별도의 CSS 파일이 필요하지 않다 단점 - CSS의 내용이 많은 경우 HTML 문서 내에서 처리하기가 쉽지가 않다 인라인 방식 HTML 요소의 style 속성(전역 속성을 의미)에 직접 스타일을 작성하는 방식 (선택자가 없음) 장점 - 별도의 CSS 파일이 필요하지 않다 단점 - 우선 순위가 높기 때문에 유지 보수가 어렵다 링크 방식 /* CSS 부분 */ div { color: blue; margin: 10px; } HTML 요소 내부 태그를 이용해로 외부 CSS 문서를 가져와서 연결하는 방식 (권장됨) - 병렬로 연결하는 방식 @import 방식 /* first.css */ @import url("./s..
-
CSS 기본 문법CSS/CSS 2021. 4. 20. 03:10
CSS는 시작적인 디자인과 레이아웃을 표현을 담당 HTML 요소들에게 스타일을 입히는 역할 CSS 기본 문법 선택자 { 속성: 값; } 선택자 { 속성: 값; 속성: 값 } div { color: blue; } 선택자(Selector) - 스타일(CSS)을 적용할 대상 속성(Property) - 스타일(CSS)의 종류 값(Value) - 스타일(CSS)의 값 CSS 주석 /* 주석 내용 */ 주석 내용은 메모글이며, 해당 내용은 화면에 반영되지 않는다 단축키 - (Ctrl + /)
-
CSS 스타일 초기화CSS/CSS 2021. 4. 16. 01:03
브라우저의 기본 스타일 초기화 - 각각의 브라우저가 제공하는 기본적인 스타일이 조금씩 다르다 - 그러므로 결과값이 브라우저마다 다르게 보인다 - 이러한 경우를 없애기 위해 초기화하는 용도로 reset.css를 사용 reset.css cdn 링크 삽입 - reset.css를 통해 브라우저가 가지고 있는 기본 스타일들이 초기화 된다 www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more t..