-
HTML&CSS:: 2. CSS 기본개념과 렌더링원리Programming/Web 2018. 8. 22. 18:04
1. CSS를 HTML에서 사용하는 방법
* CSS의 구성과 선언 방법 등 기본 사용법에 대해서 알아보자.
- HTML로 뼈대(구조)를 만들었다면 CSS는 글꼴, 글자색 글자 크기 등의 페이지의 스타일을 만드는데 사용하는 스타일시트 언어이다.
- CSS의 선언
span { color :red; }-span: selector(선택자)
-color: property
-red: value (속성이름)
-style을 HTML페이지에 적용하는 3가지 방법
: inline > internal > external의 우선순위 순서로 적용된다.
-inline
: HTML 태그 안에다가 적용
다른 CSS파일에 적용한 것 보다 가장 먼저 적용된다 (= 우선순위가 가장 높기 때문)
-internal
: style 태그로 지정
HTML안에 CSS를 넣게되면 구조와 스타일이 섞이게 되므로 유지보수와 관리에 어려움이 있다.
<head>안에 <style>을 넣음으로써 별도의 CSS 파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다. -> CSS의 내용이 조금일 때 사용
-external
: 외부파일 (.css)로 지정
코드실습
external의 color 속성은 inline의 우선순위에 의해 적용되지 않는다.
2. CSS에서의 상속 개념
* CSS의 상속개념을 배워보자
-CSS의 상속: 상위에 설정된 스타일을 하위에서도 사용한다.
코드실습
div ul li div p에 적용된 <style>
body 아래의 상위의 div에만 <style>이 적용됨을 확인할 수 있으며 padding, botder와 같은 배치와 관련된 속성은 상속을 받지 않는다.
3. 캐스케이딩 - computed style이 결정되는 방식
* 한 요소에 대한 여러 가지 선언이 이루어지는 경우 computed style이 결정되는 방식을 배워보자.
-CSS : Cascading Style Sheets의 약자, cascading(=폭포같은, 연속적인)
-CSS는 여러 가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다.
-경쟁: 똑같은 속성을 CSS파일 혹은 inline으로 정의를 중복으로 한 경우, 다른 selector을 사용하였지만 결국 같은 노드를 가리키는 경우 어떤 스타일을 브라우저가 반영을 하는가?
-선언방식에 따른 차이
: inline > intenal > external;
코드실습
- 동일하면 나중에 것
span { color : red; } span { color : blue }-구체적인 것이 있다면 먼저
body > span { color : red; } span { color : blue; }-id > class > element : id로선언된 속성의 우선순위가 가장 높다.
#a { color:red; } .b { color:blue; } div { color:green; }4. selector를 활용한 DOM 탐색
* 엘리먼트를 쉽고 빠르게 찾을 수 있는 selector문법을 알아보자.
-CSS Selector
: HTML의 요소 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법, tree구조의 데이터를 빠르게 찾을 수 있다.
-element에 style 지정을 위한 3가지 기본 선택자
: tag, id, class
-tag로 지정하기
-id로 지정하기
HELLO World!-class로 지정하기
HELLO World!-CSS Selector의 다양한 활용
-id, class 요소 선택자와 함께 활용
#myid { color : red } div.myclassname { color : red }-그룹 선택 : 콤마를 기준으로 여러개 지정해서 사용
h1, span, div { color : red } h1, span, div#id { color : red } h1.span, div.classname { color : red }-요소 선택(공백) - 자손요소
-자식 선택(>)
-n번째 자식요소를 선택(nth-child)
'Programming > Web' 카테고리의 다른 글
[Web] 토막글 (0) 2020.01.13 [Web] NodeList vs Array (0) 2020.01.12 [CSS] float (0) 2019.12.17 AWS - nodejs 환경설정 (0) 2019.04.29 HTML&CSS:: 3. CSS 기본스타일 적용방법 (0) 2018.08.23
