목차
CSS 정의 (Cascading Style Sheets) CSS 주요 학습사항 ★ CSS 장점 CSS 구문 (내부스타일 기준) CSS 주석 CSS 초기화 (= 크로스브라우징) - BS도 이거 사용 중 CSS 관련 주소
CSS 정의 (Cascading Style Sheets)
즉,
CSS는 웹 페이지의 스타일과 레이아웃 정의에 사용되며, HTML 과 함께 웹 페이지의 시각적 디자인을 결정 함.
웹 개발자와 웹 디자이너는 사용자 경험이 좋도록 콘텐츠 전달에 효과적인 웹페이지 구성 위해 노력해야 함.
PS.
Cascading 의미 :
적용 우선 순위 에 따라 스타일 정의 위치가 계단식 폭포처럼 순차적으로 바뀌는 것.(예) 홈페이지 제작자 정의 → 웹 사용자 정의 → 브라우저 정의
Style Sheets 의미 :
2.
한 마디로, 실제로 보여지는 외관 (옷) 역할을 담당.
3.
예전엔 HTML이 웹페이지의 골격과 외관을 전부 책임졌으나,
현재는, 골격만 HTML이 책임지고, 외관은 CSS로 주로 해결.
CSS 주요 학습사항 ★
기본 스타일링 속성 (예) font-size, color, background 등레이아웃 보충 속성 (예) display, flex, float 등반응형 속성 (예) @media 등애니메이션 속성 (예) @keyframes 등
CSS 장점
CSS 구문 (내부스타일 기준)
<style>
p {color : red; font-size : 20px; } /* 홈짱닷컴 스타일*/
</style>
<p> 홈짱닷컴 (homzzang.com) </p>
[설명]
p
선택자 - 스타일을 지정할 대상 지정
color , font-size
속성 - 어떤 스타일을 줄건지 지정
red , 20px
속성값 - 어떤 스타일을 구체적으로 어떻게 꾸밀건지 지정
: (콜론)
속성의 속성값을 정의할 때 사용
color : red속성:속성값 세트를 선언(declaration) 이라 함. ※ 각 선언은 ; (세미콜론) 으로 구분.
※ 이러한 선언들은 전체를 중괄호 즉, { } 로 묶음.
속성값은 작은따옴표( ' )나 큰따옴표( " )로 묶거나 그냥 쓸 수 있음.
그러나, 속성값이 띄어쓰기 된 경우엔 반드시 따옴표로 묶어야 함.
/* 주석 내용 */ : 실제 화면엔 안보이면서도 CSS 코드엔 보이는 걸 주석이라고 함.
CSS에서는 /* */
PS. CSS 스타일 종류
CSS 주석
[용도]
1. CSS 코드 설명.
2. CSS 실행 차단.
[구문]
/* 주석 처리할 내용 */
PS1. 가독성 위해 주석 처리할 내용 앞뒤로 공백 권장. (공백 없어도 작동.)
PS2. 한 줄 주석과 여러 줄 주석 모두에 사용 가능.
PS3. <style> 태그 사용하는 내부스타일이나 외부스타일 파일에서 사용.
PS4. 중괄호 안팎에서 모두 사용 가능.
[예제1] - 중괄호 밖에서 사용 가능.
<style>
/* 제목 색깔 */
h1 {
color: red;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
[예제2] - 중괄호 내부에서도 사용 가능.
<style>
h1 {
color: red; /* 제목 색깔 */
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
[예제3] - 여러 줄 주석 가능.
<style>
/* 홈짱닷컴
Homzzang.com 색깔 */
h1 {color: red;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
[예제4] - 특정 CSS 속성 실행 차단.
<style>
h1 {/*color: red;*/ text-decoration:underline}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
[예제5] - 여러 CSS 라인 실행 차단.
<style>
/*
h1 {
color: red;
text-decoration:underline;
}
*/
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
PS. HTML 주석 / JS 주석 / PHP 주석 / SQL 주석
CSS 초기화 (= 크로스브라우징) - BS도 이거 사용 중
https://necolas.github.io/normalize.css/
https://necolas.github.io/normalize.css/8.0.1/normalize.css
CSS 관련 주소
mdn CSS 강의
https://developer.mozilla.org/en-US/docs/Web/CSS (영어)
https://developer.mozilla.org/ko/docs/Web/CSS (한국어)
브라우저의 CSS 속성・속성값 지원 확인.
https://caniuse.com/
postCSS : 브라우저 호환성 위한 CSS 도구.
https://postcss.org/
최신댓글