< CSS >
1. 개념
- Cascading Style Sheet 의 약자
- 웹 페이지를 디자인 하기 위해 사용하는 언어
개발자 도구란 ? - 브라우저에서 개발 편의를 위해 제공하는 도구 - 지금 보고 있는 웹 페이지의 HTML / CSS / JavaScript 등을 볼 수 있음 - 해당 코드를 수정해 마음대로 변경 가능 - HTML 구조 및 CSS 값 등을 확인 가능 - 특정 요소의 코드 보기 / 크기 줄이기 / 모바일 버전 확인 가능 - 맥 개발자 도구 단축키 = [ option + command + i ] |
2. CSS 참조 방식
- CSS 참조 방식은 인라인 방식 / 내장 방식 / 링크 방식으로 나뉜다.
인라인 방식
- 요소의 style 속성에 직접 스타일을 작성하는 방식 ( 선택자 없음 )
- 각각의 태그마다 전부 스타일을 적어줘야 함
- 아래에서 같은 스타일을 가진 태그를 사용하려 해도 코드의 복붙이 필요 = 즉, 재사용이 전혀 불가능
- 인라인 방식이 다소 불편하다는 단점이 있음
내장 방식
- HTML 의 <head> 태그 내부에 사용할 <style> 태그를 미리 선언해 사용
- 태그에 같은 스타일 적용이 가능
링크 방식
- style 을 하나의 css 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
- 재사용 가능
3가지 CSS 참조 방식이 멈출 경우? - 기본적으로 가장 늦게 읽히는 것이 우선으로 적용 됨 - 인라인 방식은 내장/링크 방식보다 무조건 우선 적용 됨 - 내장/링크 방식은 늦게 쓰여진 것이 우선 적용 됨 |
2. CSS 선택자
CSS 작성법
CSS 선택자 ( Selector )
- CSS 는 HTML 요소의 style을 정의하여야 하므로 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 함
- 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단
CSS 속성 ( property )
- 선택자로 HTML 요소를 선택하고 { } 내에 속성 값을 지정하여 다양한 style을 정의 함
- 여러 개의 속성을 연속해서 지정할 수 있으며 세미콜론(;)으로 구분 함
- 속성은 표준 스펙으로 이미 지정되어 있는 것을 사용, 사용자가 임의로 정의할 수 없다
CSS 값 ( Value )
- 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위 등의 특정 단위로 지정
CSS 선택자 - 기본 선택자
- 별도의 테크닉 없이, 순수 호출 할 때 사용
기본 선택자 |
|
전체 선택자 |
모든 요소를 선택 * { } |
태그 선택자 |
태그 이름이 A 인 요소 선택 A { } |
class 선택자 |
HTML class 속성 값이 A 인 요소 선택 .A { } |
id 선택자 |
HTML id 속성 값이 A 인 요소 선택 #A { } |
- 코드 예시
/* 전체 선택자 */
* {
color: red;
}
/* 태그 선택자 ex. li / div / span ,,, 해당 태그만 변함 */
span {
color: red;
}
/* 클래스 선택자 : 특정 클래스를 가진 요소만 선택 */
.orange {
color: orange;
}
/* id 선택자 : 특정 아이디를 가진 요소만 선택*/
#orange {
color: blue;
}
/* id 선택자 > 클래스 선택자 로 더 강하기 때문에 우선 적용 됨 */
CSS 선택자 - 복합 선택자
- 특수한 요소를 호출하고 싶을 때, 기본 선택자 만으로는 선택이 불가능한 경우 사용
복합 선택자 |
|
일치 선택자 |
선택자 A와 Z 를 동시에 만족하는 요소 선택 A.Z { } |
자식 선택자 |
선택자 A의 자식 요소 Z 선택 A > .Z { } |
하위(후손) 선택자 |
선택자 A 의 하위요소 Z 선택. 띄어쓰기가 선택자의 기호 A .Z { } |
인접 형제 선택자 |
선택자 A 의 다음 형제 요소 Z 하나를 선택 .A + Z { } |
일반 형제 선택자 |
선택자 A 의 다음 형제 요소 Z 모두를 선택 .A ~ Z { } |
- 코드 예시
/* 일치 선택자 */
span.orange {
color: red;
}
/* 자식 선택자 : 부모 태그의 > 한단계 아래 자식 중 특정 요소 선택 */
ul > .orange {
background-color: gray;
}
/* 하위 선택자 : 부모 태그의 하위 요소 싹 다 선택 (단계 상관없이) */
ul .orange {
font-weight: bold;
}
/* 인접 형제 선택자 : +면 바로 다음 요소 선택, 바로 인접한 형제 요소만 선택 */
.orange + li {
font-size: 30px;
}
/* 일반 형제 선택자 : 다음에 오는 모든 요소 선택 */
.orange ~ li {
color: green;
}
CSS 선택자 - 가상 클래스 선택자
- 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 사용
- 각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 때 사용
- 특정 요소를 부정 할 때 사용
| 가상 클래스 선택자 | ||
| 사용자의 행동에 따라 변화 | :hover | 선택자 A 요소에 마우스 커서가 올라가 있는 동안 선택 A:hover { } |
| :active | 선택자 A 요소에 마우스를 클릭하고 있는 동안 선택 A:active { } |
|
| :focus | 선택자 A 요소가 포커스 되면 선택 A:focus { } |
|
| 요소의 상황에 따라 변화 | :first-child | 선택자 A가 형제 요소 중 첫째라면 선택 .A Z:first-child { } |
| :last-child | 선택자 A가 형제 요소 중 막내라면 선택 .A Z:last-child { } |
|
| :nth-child(n) | 선택자 A가 형제 요소 중 (n) 째 라면 선택 .A *:nth-child(n) { } |
|
| 부정 선택 | :not() | 선택자 Z 가 아닌 A 요소 선택 .A *:not(Z) { } |
- 코드 예시
/* 가상 클래스 선택자 */
/* hover : 마우스 커서 올렸을 때*/
a:hover {
color: red;
}
/* active : 클릭 할 때 */
a:active {
color: white;
background-color: black;
}
/* focus */
input:focus {
background-color: lightgrey;
}
/* :first-child :선택자가 형제 요소중 첫번째 요소라면 선택함*/
.fruits span:first-child {
color: red;
}
.fruits div:first-child {
color: blue;
}
/* last-child : 선택자가 형제 요소 중 막내,마지막 요소라면 선택 */
.fruits h3:last-child {
text-decoration: line-through;
}
.fruits p:last-child {
color: green;
}
/* nth-child(n) : 선택자가 형제 요소 중 n번째 요소라면 선택 , 0부터 시작 2n , 2n+1 */
/* 부정 선택자 not : () 안 태그를 제외한 요소 선택 */
.fruits *:not(span) {
background-color: aqua;
}
CSS 선택자 - 가상 요소 선택자
- 선택 된 요소의 앞, 뒤에 별도의 content 를 삽입하는 선택자
- 반드시 content 라는 속성을 사용
- 빈 값 ("") 이라도 넣어 주어야 적용 됨
- 실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용 됨
➡️ 쇼핑몰 페이지 메뉴에 HOT / 추천 등을 넣기 위해 별도 태그를 만드는 것이 아니라 가상 요소 선택자를 활용하면 편리함
| 가상 요소 선택자 | |
| ::berore | 선택자 A 요소의 내부 앞에 내용 삽입 .A::before { } |
| ::after | 선택자 A 요소의 내부 뒤에 내용 삽입 .A::after { } |
- 코드예시
/* 가상요소선택자 */
/* ::before : 선택자 요소의 내부 앞에 내용(content) 삽입 */
.fruits::before {
content: " 과일 목록 시작 ";
}
/* after 은 끝부분에 내용 삽입. 자동 줄바꿈 기능 ㅇ */
.fruits::after {
content: " 과일 목록 끝 ";
}
CSS 선택자 - 속성 선택자
- 지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자
| 속성 선택자 | ||
| 특성 속성만 지정 | [ ] | 속성 A 를 포함한 요소 선택 [A] { } |
| 속성과 속성의 값 지정 | [ = "" ] | 속성 A 를 포함하고 값이 Z인 요소 선택 [A="Z"] { } |
- 코드 예시
/* 속성 */
/* [] = 특정 선택 */
input[readonly] {
background-color: orange;
}
input[password] {
color: red;
}'개발 > HTML,CSS,JS' 카테고리의 다른 글
| [JS] JavaScript(1) - 개념 / 변수 /자료형 / 형변환 / 연산자 (0) | 2023.07.16 |
|---|---|
| [CSS] CSS(4) - transform / transition / animation (0) | 2023.07.16 |
| [CSS] CSS(3) - position / background / display (0) | 2023.07.16 |
| [CSS] CSS(2) - 폰트 / 속성 (0) | 2023.07.16 |
| [HTML] HTML 시작하기 (0) | 2023.07.07 |
