• 회원가입
  • 로그인

[intro] CSS - 정의・장점・구문・초기화 + 주석

목차

  1. CSS 정의 (Cascading Style Sheets)
  2. CSS 주요 학습사항 ★
  3. CSS 장점
  4. CSS 구문 (내부스타일 기준)
  5. CSS 주석
  6. CSS 초기화 (= 크로스브라우징) - BS도 이거 사용 중
  7. CSS 관련 주소

 

CSS 정의 (Cascading Style Sheets)


마크업 언어가 실제 표시되는 방법을 기술. (= 스타일 정의)

 


PS.

 

Cascading 의미 : 

  • 적용 우선 순위에 따라 스타일 정의 위치가 계단식 폭포처럼 순차적으로 바뀌는 것.
  • (예) 홈페이지 제작자 정의 → 웹 사용자 정의 → 브라우저 정의

 

Style Sheets 의미 : 

  • 스타일을 정리한 문서.

 



1.
HTML , XHTML , XML 에도 사용 가능.
 
2.
한 마디로, 실제로 보여지는 외관 (옷) 역할을 담당.
 
3. 
예전엔 HTML이 웹페이지의 골격과 외관을 전부 책임졌으나,
현재는, 골격만 HTML이 책임지고, 외관은 CSS로 주로 해결. 
 
 

CSS 주요 학습사항 ★

 

  1. 기본 스타일링 속성 (예) font-size, color, background 등
  2. 레이아웃 보충 속성 (예) display, flex, float 등
  3. 반응형 속성 (예) @media 등
  4. 애니메이션 속성 (예) @keyframes 등

 

 

CSS 장점


한번 지정으로 여러 곳에 불러와 사용 가능.
그래서, 웹문서 스타일 관리하기가 용이. 

 

CSS 구문 (내부스타일 기준)


<style>
p {color:redfont-size:20px;} /* 홈짱닷컴 스타일*/
</style>

<p> 홈짱닷컴 (homzzang.com) </p>
 

[설명]
 
p
선택자 - 스타일을 지정할 대상 지정
 
colorfont-size
속성 - 어떤 스타일을 줄건지 지정
 
red20px
속성값 - 어떤 스타일을 구체적으로 어떻게 꾸밀건지 지정
 
: (콜론) 
속성의 속성값을 정의할 때 사용
 
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/

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012