<Today's Goals>
- 스타일에 대한 기본적인 이해
- 스타일 우선순위
- 스타일 상속
- 스타일을 사용하는 이유
- 스타일 표기법
- 스타일 시트
<What i learned>
- 태그(tag)와 요소(element)의 차이 : 태그는 태그 자체만을 지칭하며, 요소는 태그가 적용된 것을 가리킨다. 따라서 스타일을 적용하는 것은 태그가 아닌 요소이다. '요소에 적용되는 스타일'이 알맞은 표현이다.
- 브라우저 접두사 : 브라우저별로 속성들이 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분한다.
-webkit- 웹키트 방식 브라우저용 (사파리, 크롬)
-moz- 게코 방식 브라우저용(모질라, 파이어폭스)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러
<Questions>
- Q : 웹키트 방식과 게코 방식?
A : 참고 사이트 바로가기
<스타일 기본기>
CSS의 C. 캐스캐이딩(Cascading)의 의미
선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지 결정함을 뜻한다.
스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그에 따라 스타일이 적용된다.
- 중요도(Importance)
- 사용자 스타일 시트 : 가장 최우선시 된다. 사용자 스타일 시트란 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트를 말하며, 이 스타일 시트는 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수 없다. 제작자가 만든 스타일 시트의 중요 스타일보다 우선시 된다.
- 중요 스타일 : !important 다른 어느 스타일보다 최우선으로 적용해야 할 스타일은 그 뒤에 !important를 붙인다. 제작자가 만든 일반 스타일 시트보다 우선한다.
- 기본적인 브라우저 스타일 : 브라우저들마다 기본적으로 지정하고 있는 스타일.
- 명시도(Specificity)
- 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그에만 스타일을 적용. (가장 우선순위)
- id 스타일 : 한 문서 안에서 한 번만 적용할 수 있다. #idname
- class 스타일 : 한 문서 안에서 여러번 적용할 수 있다. .(마침표)classname
- tag 스타일 : 특정 태그에 똑같이 적용되는 스타일.
- 소스의 순서(Source Order) : 중요도와 명시도가 같다면 소스의 순서로 우선순위가 정해진다. 나중에 온 소스가 먼저 온 스타일을 덮어쓴다.
스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달한다.
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소에도 그대로 전달된다. 예를들어, <body>태그는 <h1>태그와 <ul>태그의 부모 요소이다. 따라서 <body> 태그의 스타일이 그대로 <h1>에도 적용된다.
다만, 모든 스타일 속성이 상속되는 것은 아니다. 명시도나 소스 순서에 따라 스타일끼리 충돌하지 않도록 한다.
스타일을 사용하는 이유
- 내용을 건드리지 않고 디자인만 변경할 수 있다.
- 기기에 맞게 탄력적으로 수정이 가능하다.(내용은 그대로 두고 디자인만 변경이 가능하기 때문)
스타일 표기하는 방법
- 선택자 (스타일 규칙을 적용할 곳) { 속성:속성 값; 속성;속성 값; } 세미콜론으로 구분한다.
- 개발자가 읽고 수정하기 쉽도록 여러 줄에 걸쳐 작성하는 것이 좋으며, 이해를 돕기 위해 주석을 달기도 한다. /* 주석 /*
스타일 시트
여러 개의 스타일규칙이 사용되는 경우 규칙들을 묶어 '스타일 시트'로 만들어 가독성을 높이고 수정이 용이하도록 한다.
- 내부 스타일 시트 : 문서 안에서 사용할 스타일 시트를 정의. 모든 스타일은 <head>태그와 </head>태그 안에서 정의하고 <style>태그와 </style>태그 사이에서 작성한다.
- 외부 스타일 시트 : 웹 사이트에서 여러개의 웁 문서를 사용할 때 같은 내부 스타일 시트를 각각의 문서에 만드는 것은 비효율적이기 때문에 별도의 스타일 파일로 만들고 파일을 연결해서 사용한다. '.css' 파일 확장자를 사용한다. <style>태그 없이 <link>태그를 사용한다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type"text/css"> - 인라인 스타일 : 간단한 정보는 스타일 시트를 사용하지 않고 적용할 대상에 직접 표시한다. 해당 태그에 style 속성을 사용한다. < style="속성:속성 값;" >
주요 선택자
- 전체 선택자 : (universal selector) 스타일을 모든 요소에 적용할 때 사용한다. *를 사용한다. *{ 스타일 }
- tag 선택자 : (tag selector) 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. 태그 { 스타일 }
- class 선택자 : (class selector) 특정 부분만 스타일을 적용할 때 사용한다. .class이름 {스타일 } .(마침표)을 꼭 앞에 붙여야한다. 그리고 특정 태그의 class만 적용할 때는 '태그.클래스이름 { 스타일 }' 를 사용한다.
- id 선택자 : class 선택자와 마찬가지로 웹문서 안의 특정 부분에 스타일만을 지정할 때 사용한다. class 선택자와의 차이점은 class 선택자는 문서 내에서 여러차례 지정이 가능하지만 id 선택자는 문서 내에서 한 번만 적용할 수 있다. #id명{ 스타일 }
- 그룹 선택자 : 둘 이상의 요소에 같은 스타일을 적용할 때 사용한다. ,(콤마)를 이용해 {스타일} 앞에 적용할 이름을 나열한다. 이름1, 이름2 { 스타일 }
728x90
'Language > CSS' 카테고리의 다른 글
| CSS background 속성 (0) | 2022.04.16 |
|---|---|
| CSS list-style 속성 (0) | 2022.04.15 |
| CSS text style 속성 2 (0) | 2022.04.14 |
| CSS text style 속성 1 (0) | 2022.04.13 |
| CSS font 속성 (0) | 2022.04.12 |
