• 회원가입
  • 로그인

[입문] CSS - 정의와 장점 + CSS 기본 문법

CSS (Cascading Style Sheets)

마크업 언어가 실제 표시되는 방법을 기술하며,  HTML  XHTML 심지어 XML 에도 사용 가능합니다.
한 마디로, 실제로 보여지는 외관 (옷) 역할을 담당합니다.
 
예전엔 HTML이 웹페이지의 골격과 외관을 전부 책임졌으나,
현재는 골격만 HTML이 책임지고 외관은 대체로 CSS가 책임지는 형태로 사용합니다.


 


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에서는 /*와 */사이에 필요한 내용을 메모합니다.
 

분류 제목
입문 CSS - 정의와 장점 + CSS 기본 문법
입문 CSS - 발전사 (CSS1 → .01 → CSS3)
입문 CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속성 강제 적용 !important
선택자 CSS - 선택자 (Selector) 종류
선택자 CSS - 아이디(id) 클래스(class) 선택자 ★
선택자 CSS - 전체 선택자 (*)
선택자 CSS - 요소 선택자 (요소)
선택자 CSS - 병렬 선택자 (요소,요소) - 요소 여러 개 나열 ★
선택자 CSS - 자손 선택자 (요소 요소) ★
선택자 CSS - 자식 선택자 (요소>요소) : (IE7) ★ (해당 요소에만 스타일 줄 때 사용)
선택자 CSS - 인접 선택자 (요소+요소) : (IE7) ★
선택자 CSS - 속성 선택자 (요소[속성]) : (IE7)
선택자 CSS - 속성 값 선택자 (요소[속성=속성값 단어]) : (IE7)
선택자 CSS - 속성 값 선택자 (요소[속성~=속성값 단어]) : (IE7)
선택자 CSS - 속성 값 선택자 (요소[속성|=속성값 단어]) : (IE7)
목록
모바일 버전으로 보기