CSS, CSS3   Cascading Style Sheet   종속형 스타일 시트

(2017-06-17)
통신/네트워킹통신이론
선로/전송
통신망 일반
회선교환(PSTN)
무선/이동통신
광통신
인터넷/데이터통신
 > 인터넷/데이터통신 1. 데이터통신망
2. 인터넷
3. 데이터 네트워크 설계

데이터 단위
프로토콜/계층
데이터 링크
TCP/IP
라우팅
인터넷 QoS
인터넷 관리
인터넷 응용
인터넷 기타
패킷교환(PSN)
인터넷 관련 기관
 > 인터넷 응용NetBIOS
DNS
가상단말
FTP
전자메일
VoIP
웹기술
VPN
무선인터넷
전자상거래
개인 컨텐츠
인터넷 기타 응용
 > 웹기술 1. 웹 이란?
2. 하이퍼텍스트

웹 구성
HTTP
웹 페이지
웹 식별
웹 서비스
차세대 웹
웹기술 기타일반
 > 웹 페이지마크업 언어
스크립트 언어
DOM,BOM
웹페이지 기능 요소
웹 디자인
 > 웹 디자인 1. 웹 디자인
2. 스타일 시트
3. CSS
4. CSS 선택자
5. CSS 속성 값

     
1. 종속형 스타일 시트 (CSS)HTML 태그 만으로 정해진 구조(layout/structure) 위주의 웹 페이지에다가, 
     다양한 표현 스타일 속성 정보를 추가 가능
     - 유연하고도 깔끔한  화면 구성을 가능하게 함
        . 스타일 속성 : 문서 내 문자의 활자,색,크기,위치 등에 관한 정보를 말함

  ㅇ W3C에 의해 개발됨  ☞ W3C CSS home


2. CSS 특징상속성
     - 하나의 태그로 정의된 스타일 속성을 이 태그와 관련된 모든 하위 태그에 종속적으로
       전달되게 함
        . 즉, 부모 태그의 어떤 스타일 속성을 자식 태그에서 상속 받을 수 있음

  ㅇ 문법이 쉽고 사용하기 편리
     - CSS 구문 형식 :  selector { property : value }

  ㅇ HTML 문서의 표현 방식을 확장시켜줌

  ㅇ 역사
     - 현재 CSS는 레벨 3까지 나와 있음  :  CSS1  1996년,  CSS2  1998년,  CSS3
        . CSS3는 계속 표준 작업이 진행되며, 혁신적이며 다소 복잡함을 더해가고 있음
     - HTML에서는 HTML 3.2 부터 CSS를 지원하기 시작함


3. 스타일 형식을 HTML, XHTML 에 부가하는 방법

  ㅇ Inline Stlye         : html 태그 매 요소 마다 스타일을 적용시킴 
  ㅇ Embeded Style Sheet  : html 문서내에 포함시킴
  ㅇ External style Sheet : 외부 .css 파일화하여 링크로 걸어줌
     - 例) <link rel="stylesheet" href="mystyles.css" type="text/css">


4. CSS 박스 모델 (Box Model)

  ㅇ CSS는 웹 페이지 안에 모든 요소(Element)를 사각형 박스 모델로 다룸

     

     - 주요 영역 구분
        . margin(마진) : 바깥 여백, border(테두리선) : 경계선, padding(페딩) : 안 여백
        . content(내용) : 실제 표시할 내용
     - 배경(background) : border,padding,content 영역 만 해당
     - 박스 크기 조정
        . 기본 => content 영역 만 해당
        . 옵션 => (border + padding + content) 영역 또는 background 영역 해당
           .. 옵션에 의한 박스 크기 조정은 box-sizing 속성 {box-sizing:boarder-box}에 의함


5. CSS 주요 문법

  ㅇ CSS 기본 구문 형식 :  selector { property : value }                 ☞ CSS 속성 값 참조
     - CSS 선택자 (selector)
        . HTML 요소들과 스타일 속성들 간의 관계를 맺어주기 위한 HTML 요소들의 선택 접근 형식
     - CSS 속성 값 (property : value)

  ㅇ CSS @ 규칙 (@-rule)
     - @import, @font-face, @media, @keyframe 등


[ 웹 디자인 ]1. 웹 디자인  2. 스타일 시트  3. CSS  4. CSS 선택자  5. CSS 속성 값  

 
        최근수정     모바일웹     참고문헌