• Q&A
  • 회원가입
  • 로그인

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

4,363  

목차

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

 

CSS 정의 (Cascading Style Sheets)


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

 


PS.

 

Cascading 의미 : 

적용 우선 순위에 따라 스타일 정의 위치가 계단식 폭포처럼 순차적으로 바뀌는 것.

(예) 홈페이지 제작자 정의 → 웹 사용자 정의 → 브라우저 정의

 

Style Sheets 의미 : 

스타일을 정리한 문서.

 



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

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/

 



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