HTML&CSS 3일차(마지막)

박예원·2023년 8월 16일

1. CSS란?

CSS(Cascading Style Sheets)

Cascading: 계단식
Style: 멋을 내다
Sheets: (종이)한 장
=> 계단식으로 스타일을 정의하는 문서

확장자는 .css
HTML문서에 스타일을 추가하는 언어

2. CSS 기본 문법 및 사용 방법

CSS기본 문법

선택자{
	속성명: 속성값;
}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
{중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
속성값: 어떻게 정의하고 싶은지에 대한 정보

주석

/* 주석 */

HTML문서에 CSS문서 적용방법

인라인 스타일: 태그에 직접 기술하기

선택자는 필요x
웹콘텐츠와 스타일시트를 분리하기 위해서는 비추천

스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기

< style>< /style> 태그 안에 CSS코드 작성

문서간의 연결: 스타일시트 문서를 따로 작성하여 HTML문서와 연결하기

확장자가 * .css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, HTML문서에 이를 연결. >> < link>태그 사용.
< head>< /head>내부에서 사용해야 함
href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

3. CSS 선택자 1편

선택자

선택자{
	속성명: 속성값;
}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보

선택자 종류

기본 선택자
그룹 선택자
특성 선택자
결합 선택자
의사 클래스
의사 요소

기본 선택자 1. 전체 선택자

*{
	color: blue;
}

=> 문서 내 모든 요소의 글자 색을 파란 색으로 지정

*(애스터리스크): '문서 내의 모든 요소'를 의미

기본 선택자 2. 태그 선택자

p{
	color: blue;
}

=> 문서 내 모든 p태그 요소의 글자 색을 파란 색으로 지정

주어진 이름을 가진 요소를 선택
유형선택자라고도 함
주어진 이름을 가진 요소가 다수일 경우 해당 요소들을 모두 선택

기본 선택자 3. 클래스 선택자

.text{
	color: blue;
}

=> 문서 내 class가 "text"인 모든 요소의 글자 색을 파란색으로 지정

주어진 class속성값ㅇ르 가진 요소를 선택
주어진 class속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택

기본 선택자 4.아이디 선택자

#topic{
	color: blue;
}

=> 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정

주어진 id속성값을 가진 요소 선택
id는 고유한(unique)식별자 역할을 하는 전역 속성

그룹 선택자

h1, p, div{
	color: blue;
}

=> 문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란 색으로 지정

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
쉼표(,)를 이용해 선택자를 그룹화

선택자가 겹치는 경우

선택자가 겹치는 경우: 나중에 작성된 스타일이 적용
선택자가 다르지만 요소가 겹치는 경우: 선택자 우선순위에 의해 적용

선택자 우선순위

아이디 선택자 > 클래스 선택자 > 태그 선택자

5. display 속성 & border 속성

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하여 블록 형성(div, p, h1)

인라인 요소

자기에게 필요한 만큼의 공간만 차지(span, a)

display 속성

요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정의

border 속성

요소가 차지하고 있는 영역에 테두리를 그릴 수 있음
단축속성: 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있음

6. 박스모델 1편, 박스모델 소개

박스모델(Box-Model)

박스: 브라우저가 요소를 렌더링할때, 각각의 요소는 기본적으로 사각형 형태로 차지하는 영역
CSS는 박스의 크기, 위치, 속성,(색, 배경, 테두리 모양 등)을 결정

콘텐츠 영역: width, height (인라인요소에는 지정x)
안쪽 영역: padding
경계선(테두리): margin
바깥쪽 여백: border-width