2022.05.02 05:31 PM ~ 4-1 파일로 이동
Section 6: CSS: The Very Basics
＊ 글속 태그들 < >는 ( )로 대체
<< CSS >>
※ Cascading StyleSheets의 준말.
※ 사각적 표현에 스타일을 지정하고 조작할 수 있음.
(배경, 색상, 글자 크기 변경 등등....)-> CSS 규칙 :
대부분의 CSS 구현은 아래의 패턴을 따름.Selector 선택자 {
속성 property: value 값;
}
※ CSS를 적용하는 몇가지 방법
-> 1. HTML 코드에 직접 추가하기:
이것은 좋은 생각이 아님. 코드가 엄청 길어지고 지저분함
같은 스타일을 여러개에 적용해야 한다면 일일이 해야함
(태그 및 HTML 페이지들)-> 2. (STYLE> 요소를 사용하는 것:
문서이지만 요소에 중첩되지는 않음.
(head>(/head>사이에 쓰는 것.
But, 여러 문서나 페이지가 있다면 문제가 있음!-> 3. 별도의 외부 문서를 만들어 연결하기:
수많은 문서와 페이지들에 공통으로 적용할 수 있어서 가장 적절함!
"ㅇㅇㅇ.css" 형태의 'css'라는 파일 확장자를 가짐
<< 외부 CSS파일 연결하는 법 >>
-> 1. (link> 태그의 사용:
<head></head>사이에 아래와 같이 입력함. (link rel="stylesheet" href="파일이름.css">
<< ㅇㅇㅇ.css 파일 속에서 >>
※ 'background-color'는 해당 선택자의 배경색만 바꿔줌.
※ 'background' 속성은 배경색 뿐만 아닌 다양한 것을 지정 가능함
<< RGB & Named color (명칭있는 색상) >>
-> 1. Named color : 총 140개가 존재함.
plum, orange, magenta, lightskyblue 등의 이름이 있는 색상들.-> 2. RGB color : Red, Green, Blue 세가지 색상의 조합으로 만들어낸 색상.
R, G, B 각 세가지 채널의 범위는 최소 0(꺼짐) ~ 최대 255까지ex: Red : RGB(255,0,0) / Green : RGB(0,255,0) / Blue : RGB(0,0,255)
Black : RGB(0,0,0) / White : RGB(255,255,255)
※ 색상 찾는 법은 구글에서 'color picker'라고 검색하면 나옴.
<< Hex (16진법) 색상 >>
※ Decimal (10진법) : 0부터 9까지
※ Hexadecimal (16진법) : 0~9 그리고 A(10), B(11), C(12), D(13), E(14), F(15)(ex: #ffff00 => #(16진법) ff(red 채널 두자리) ff(green채널 두자리) 00(blue 채널 두가지)
만약 #CC55EE 라는 각 채널의 두자리들이 똑같은 경우라면 #C5E로 줄여서 쓸 수 있음)(ex1: Black : #000000(#000) / White : #FFFFFF)
