TIL_10W5D_Web publishing (2)
언젠가는 슬기로울 전공의 생활 언넝 보고 싶습다...!!
디자이너의 코딩_웹퍼블리싱 (2)
01. CSS의 개념
CSS란?
HTML로 만든 뼈대에 색깔, 글꼴, 간격, 위치를 입혀서 예쁘게 만듦
HTML은 제목과 문단을 만들고, CSS는 제목의 글자를 파란색으로 바꾸고 크기를 키움
CSS의 풀 네임은 Cascading Style Sheets
Cascading: "차곡차곡 적용된다"
Style Sheets: 스타일을 적용하는 설계도
CSS의 구조
전체 구조는 rule set라 부름
선택자(Selector)
"누굴 꾸밀지 선택하는 이름표"
Ruleset의 맨 앞에 있는 부분임
HTMl에서 꾸밀 요소를 선택함
예로는
요소를 꾸미려면 선택자로 p를 사용
선언(Declaration)
"무엇을 어떻게 꾸밀지 적는 규칙"
Ryleset 안에 있는 한 줄의 꾸미기 명령
예 : color: red;는 글자 색을 빨간 색으로 바꾸는 규칙
속성(Property)
"무엇을 꾸밀지 결정하는 이름"
글자 색깔, 크기, 여백 같은 것을 꾸밀 때 속성을 사용
속성 값(Value)
"어떻게 꾸밀지 정하는 값"
속성이 실행되는 방식을 정함
예: color: red;에서 red는 글자 색을 빨간색으로 설정하는 값
CSS Ruleset 전체 구조 살펴보기
p {
color: red;
font-size: 16px;
}
p: 선택자 -> 문단을 꾸미겠다는 끗
color: red; 선언 -> 글자 색을 빨간색으로 바꿈
font-size: 16px; 선언 -> 글자 크기를 16픽셀로 바꿈
CSS Ruleset 작성 규칙
-
중괄호 {}로 감싸기
모든 선언은 {}로 감쌈 -
속성과 값은 클론 :으로 연결하기
속성과 이름 값 사이에 :를 씀
예시 : color: red; -
선언 끝에는 세미콜론 ; 사용
냅다 끼부리기
이런 식과 그 밖의 방식으로 실습을 진행하였음
폰트 스타일을 변경하는 것도 해봄 오호호
