CSS
CSS3 스타일 시트
HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
CSS 스타일 시트 구성
| CSS 스타일 시트 구성 | |
|---|---|
| 셀렉터 | CSS를 HTML 페이지에 적용하도록 만든 이름 |
| 프로퍼티 | 스타일 속성 이름 |
| 값 | 프로퍼티 값 |
CSS 주석
/* 주석 내용 */CSS 스타일 시트 적용
- 인라인 스타일(Inline style)
- 내부 스타일 시트(Internal style sheet)
- 외부 스타일 시트(External style sheet)
인라인 스타일
<태그 이름 style="속성 이름: 속성 값">- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용
- 해당 HTML 요소에만 스타일을 적용할 수 있음
- 하나의 요소에 여러 개의 스타일 적용 시, 각각의 값은 세미콜론(;)으로 구분
내부 스타일 시트
<!DOCTYPE html>
<html lang="en">
<head>
<title>태그로 스타일 만들기</title>
<style>
body {
background-color: linen;
color: blueviolet;
margin-left: 30px;
margin-right: 30px;
}
h3 {
text-align: center;
color: darkred;
}
</style>
</head>head태그에style태그를 사용하여 CSS 스타일을 적용style태그는 여러 번 작성 가능- 하나의 스타일 시트로 합쳐져서 적용
- 해당 HTML 문서에만 스타일을 적용할 수 있음
외부 스타일 시트
- 확장자가 .css인 파일에 스타일 시트 저장
- 웹 페이지에서 CSS3 스타일 시트 파일을 불러서 사용
- 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소
- 웹 사이트의 전체 웹 페이지 모양의 일관성 확보
- 한 번 수정으로 전체 페이지 수정 가능
style태그를 사용하지 않음
CSS3 스타일 시트 파일 불러오는 방법(1)
link태그 이용
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>| link 태그 구성 | |
|---|---|
| href | style.css 파일 불러오기 |
| type=”text/css” | 불러오는 파일 타입 알려주기 |
| rel=”stylesheet” | 스타일 시트 삽입 |
CSS3 스타일 시트 파일 불러오는 방법(2)
- @import 이용
<style>
@import url(style.css);
/* @import url('style.css'); */
/* @import "style.css"; */
</style>스타일 시트 우선순위
태그에 적용 가능한 스타일
- 개발자가 정해놓은 스타일 → 브라우저의 디폴트 스타일
- 스타일 시트 파일에 선언된 스타일 → 외부 스타일 시트
style태그에 선언된 스타일 → 내부 스타일 시트style속성에 선언된 스타일 → 인라인 스타일
스타일 합치기(cascading)
- 위의 4가지 스타일 시트가 태그에 동시 적용될 때, 스타일이 합쳐져서 적용
오버라이딩(overriding)
- 동일한 스타일은 순위가 높은 스타일이 우선 적용
!스타일 시트 우선 순위: 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 브라우저 디폴트 스타일
CSS 선택자
선택자(selector)
스타일을 적용할 대상을 선택하기 위해 사용
전체 선택자
- 와일드 문자(*)를 사용하여 모든 태그에 스타일을 적용시키는 선택자
태그 이름 선택자
- 태그 이름이 선택자로 사용
- 선택자와 같은 이름의 모든 태그에 스타일 시트 적용
id 선택자
- #으로 시작하는 이름의 선택자
- HTML 태그의 id 속성으로만 지정 가능
class 선택자
- .으로 시작하는 이름의 선택자
- HTML 태그의 class 속성으로만 지정 가능
!선택자 우선 순위: !important > 인라인 스타일 > id 선택자 > class 선택자 > 태그 이름 선택자
그룹 선택자
- 여러 선택자를 ,로 구분하여 같이 사용
- 같은 스타일 코드 중복 방지
결합 선택자
자식 선택자(child selector)
- 부모 자식 관계인 두 선택자를 ‘>’ 기호로 조합
div > b { color: blue; }
/* <div>의 직계 자식인 <b>에 적용되는 스타일 시트 */자손 선택자(descendent selector)
- 자손 관계인 2개 이상의 태그 나열
ul b { color: blue; }
/* <ul>의 자손 <b>에 적용되는 스타일 시트 */가상 클래스 선택자
- 선택하고자 하는 HTML 요소의 특별한 ‘상태(state)’를 명시할 때 사용
- 선택자:가상클래스 이름 { 속성: 속성 값; }
- 선택자.클래스이름:가상클래스이름 { 속성: 속성 값; }
- 선택자#ID이름:가상클래스이름 { 속성: 속성 값; }
종류
- 동적 가상 클래스
- 상태 가상 클래스
- 구조 가상 클래스
동적 가상 클래스
- 링크의 상태에 따라 각각의 스타일을 별도로 설정
- :link :visited :hover :active :focus
상태 가상 클래스
- 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정
- :checked :enabled :disabled
구조 가상 클래스
- HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있음
- :first-child :last-child :nth-child :nth-last-child
가상 요소 선택자
- HTML 요소의 특정 부분만을 선택할 때 사용
- 선택자::가상요소이름 { 속성: 속성 값 }
대표적 가상 요소
- ::first-letter 텍스트의 첫 글자만 선택
- ::first-line 텍스트의 첫 라인만 선택
- ::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용
- ::after 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용
- ::selection 해당 요소에서 사용자가 선택한 부분만 선택
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
