1. 기본 문법 및 사용 방법
1) CSS 기본 문법
선택자{
속성명 : 속성값;
}- 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
- {중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
- 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
- 속성값 : 어떻게 정의하고 싶은지에 대한 정보
2) 주석
/*주석 활용하는 방법*/
/*줄 띄우고
사용가능*/3) HTML에 CSS를 더하려면
-
인라인 스타일 : 태그에 직접 기술하기
- 따로 선택자 필요없음
- 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋음
-
스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
- HTML문서에
<style></style>태그를 추가하여 그 안에 CSS코드를 작성할 수 있음
- HTML문서에
-
문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
- 확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, HTML문서에 이를 연결해줄 수 있따. 이때는
<link>태그를 사용한다. <link>태그는 HTML문서의<head></head>내부에서 사용해야 함- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
- 확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, HTML문서에 이를 연결해줄 수 있따. 이때는
2. 선택자 1편
1) 선택자란?
선택자{
속성명 : 속성값;
}선택자 : 어떤 요소에 스타일을 적용할 것인지에 대한 정보
2) 선택자의 종류
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
3) 기본선택자
(1) 전체선택자
*{
color : blue;
}- 모든 요소를 선택한다.
- *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.
(2) 태그선택자
p{
color : blue;
}- 주어진 이름을 가진 요소를 선택한다.
- 유형 선택자라고도 한다.
- 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
(3) 클래스선택자
.text{
color : blue;
}- 주어진 클래스 속성값을 가진 요소를 선택한다.
- 주어진 클래스 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.
(4) 아이디선택자
#topic{
color : blue;
}- 주어진 아이디속성값을 가진 요소를 선택한다.
- 아이디는 고유한 식별자 역할을 하는 전역 속성이다.
4) 그룹선택자
h1, p, div{
color : blue;
}- 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
- 쉼표(,)를 이용해 선택자를 그룹화한다.
5) 선택자가 겹치는 경우
- 기본적으로 나중에 작성된 스타일이 적용된다.
- 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.
- ⭐선택자 우선순위⭐ : 아이디 선택자 > 클래스 선택자 > 태그 선택자
3. 텍스트 꾸미기 속성
- font-family : 글꼴을 정의한다.
- font-size : 글자 크기를 정의한다.
- text-align : 정렬 방식을 정의한다.
- color : 글자 색상을 정의한다.
1) font-family
*{
font-family : Times, monospace, serif;
}- Times를 우선 지정하되 지원되지 않을 경우 monospace를 지정한다.- 요소를 구성하는 텍스트의 글꼴을 정의한다.
- 글꼴명을 속성값으로 지정한다.
- 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다.
2) font-size
- 수치와 단위를 지정해 글자의 크기를 정의할 수 있다.
- px : 모니터 상의 화소 하나 크기에 대응하는 절대적 크기
- rem :
<html>태그의 font-size에 대응하는 상대적 크기 - em : 부모태그의 font-size에 대응하는 상대적 크기
3) text-align
- 블록 내에서 텍스트의 정렬 방식을 정의
- 미리 정의된 키워드 값을 지정한다.
- left/right : 왼쪽 또는 오른쪽 정렬
- center : 가운데 정렬
- justify : 양끝 정렬(마지막 줄 제외)
4) color
- 텍스트의 색상의 정의한다.
- 다양한 방법으로 색상 지정 가능
- 키워드 : 미리 정의된 색상별 키워드 사용
- RGB 색상 코드 : # + 여섯자리 16진수 값 형태로 지정
- RGB 함수 : Red, Green, Blue의 수준을 각각 정의해 지정
4. display 속성 & border 속성
1) 블록 레벨 요소 vs 인라인 요소
(1) 블록 레벨 요소
- 자기가 속한 영역의 너비를 모두 차지하여 블록으 형성한다.
- ex) div, p, h1 등
(2) 인라인 요소
- 자기에게 필요한 만큼의 공간만 차지한다.
- ex) span, a 등
2) display 속성
- display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할 지 정의한다.
/*
블록 레벨 요소인 div요소를 인라인으로 처리하고 싶으면
*/
div{display : inline;}/*
인라인 요소인 a요소를 블록 레벨로 처리하고 싶으면
*/
a{display : block;}3) display 속성값
- display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.
- inline : 인라인으로 처리한다.
- block : 블록 레벨로 처리한다.
- inline-block : 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다.
- none : 디스플레이하지 않는다.
4) border 속성
- 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
- border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는 데 이러한 '단축속성'이라 한다.
5) border 속성의 하위 속성
- border-color : color 정의 방식과 등일
- border-width : thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
- border-style : none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
📖출처
https://www.youtube.com/watch?v=576Bt8CVVJA&list=PLFeNz2ojQZjuRTQGNUf6ZTz8-YRLgFFvZ
내 꿈은 멋쟁이 개발자 (●'◡'●)