Programming/기타 2009/04/15 13:04
  1. CSS 제대로 사용하기.
    1. HTML의미 바로 알기
      • HTML은 markup language이다.
      • 마크업 : 눈으로 보이는 글자 외에 원고에서 특정 부분의 의미가 무엇인가를 설명하고 그것을 표기하는 것.
      • 일반적으로 작업자들은 HTML을 markup하는 용도보다는 겉으로 어떻게 문서가 보이는 지 만을 나타내기 위해 사용.
    2.  HTML과 CSS의 관계

      • HTML : 컨텐츠의 내용과 구조를 표시.

      • CSS : HTML으로 제작된 페이지를 어떻게 표현해 내는지에 대한 것을 담당.

      • CSS의 가장 큰 목적은 문서의 내용과 표현을 분리하는 것.

  2. CSS의 개념 및 소개

    1. CSS(Cascading Style Sheet)란 무엇인가?

      • CSS : 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해서 사용하는 language

    2. CSS의 선언


      • p.text {

         margin: 0;
        }
      • p.text : 선택자
      • margin:0; : 선언부
      • p.text, 
        span.name {
         color: #666;
        }
         
      • 선택자는 콤마로 구분 가능하다.
      • 선언부의 내용을 두가지 이상의 요소에 적용할 때 사용한다.
      • h1 { font-weight: bold }
        h1 { font-size: 3em }
        h1 { color: #333 }
        h1 { margin: 1.5em 0 1em }
        h1 { padding: 0 0 0 8px }
         
      • 위의 경우 아래처럼 세미콜론으로 구분하여 선언 가능.
      • h1 {
         font-weight: bold;
         font-size: 3em;
         color: #333;
          margin: 1.5em 0 1em;
          padding: 0 0 0 8px;
        }
    3.  CSS 선택자
      1. 일반 선택자
        • 공용 선택자 * 모든 태그를 지정
          타입 선택자 A 태그 A를 지정
          클래스 선택자 .A 클래스가 A인 태그를 지정
          ID선택자 #A 아이디가 A인 태그를 지정
           
      2. 복합 선택자
        • 하위 선택자 A B 태그 A로 감싸져 있는 태그 B를 지정
          자식 선택자 A > B 태그 A로 감싸져 있는 태그 B중 한 단계 밑에 것을 지정
          인접 선택자 A + B 태그 A와 B가 연속으로 나와 있는 것을 지정
      3.  가상 클래스 선택자
        •  
          :first-child 선택자 A:first-child 태그 A로 감싸져 있는 가장 처음 태그를 지정
          언어 선택자 A:lang(B) 태그 A중 언어가 B로 설정된 것을 지정
          링크 선택자 A:link 태그 A중 링크가 걸려있으면 지정
          A:visited 태그 A중 링크가 걸렸고 사용자가 이미 클릭한 태그를 지정
          동적 선택자 A:active 태그 A중 사용자가 마우스를 누르고 있는 태그를 지정
          A:hover 태그 A중 사용자가 마우스 포인터를 위에 올려 놓은 태그를 지정
          A:focus 태그 A중 사용자의 키보드 입력을 받는 태그를 지정
      4.  동적 선택자
        •  
          :first-line 선택자 A:first-line 태그 A의 문단중 첫번째 줄을 지정
          :first-letter 선택자 A:first-letter 태그 A의 문단중 첫번째 글자를 지정
          :before 선택자 A:before 태그 A의 문단 앞을 지정
          :after 선택자 A:after 태그 A의 문단 뒤를 지정
    4.  CSS 선언 방법
      1. 외부 선언
        •  <link rel="stylesheet" type="text/css" href="myCss.css" /> 의 형식
      2. 엘리먼트에 직접 선언
        • <div style="padding: 10px; border: 1px solid #eee;"> 의 형식
      3. 사용자 정의 형식
    5. CSS 적용의 체크 포인트 4가지
      1. XHTML이 표준 문법이어야 한다.
      2. XHTML 문서가 의미와 구조적으로 구성되어야 한다.
      3. CSS가 표준 문법이어야 한다.
      4. CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
  3. CSS 레이아웃 기초
    1. 레이아웃에 사용되는 두가지 속성 position vs. float
      1. position
        • position은 static, relative, absolute의 세가지 값을 가질 수 이싿.
        • static : 기본값
        • relative : static과 같지만 offset을 지정 할 수 있고, 하위 엘리먼트 offset의 기준점이 된다.
        • absolute : 화면상에서 다른 컨텐츠에 위치에 영향을 미치지 않고 위치 지정이 가능하다. 보통 레이어라고 불리우는 것.
      2. float
        • float은 left, right, none의 세가지 값을 가질 수 있다.
        • left : 엘리먼트를 좌측으로 배치함.
        • right : 엘리먼트를 우측으로 배치함.
        • none : float시키지 않음.
추천은 주인장 아이지에게 큰 힘이 된답니다 ^-^*
태그 : Web 2.0,XHTML,웹표준,웹표준화,표준화
profile image
아이젝트 인터페이스&자기브랜드 연구소 아이지

아이지 | 자기브랜드 "아이젝트" 의 대표입니다. 내가 가지고 있는 IT적 기술을 통해 실 생활의 사람들의 편리한 삶을 만들고자 하는 미션을 가지고 있습니다. 거의 정체성이 불분명한 글을 무분별하게 작성하지만 대부분 사회 생활에서 오는 고찰 혹은 IT적인 이야기를 다룹니다. 현재 웹 프로그래머이지만 한개만 깊이 파는 스타일이 아니라서 다양한 언어 및 기술을 수시로 접합니다. 산업기능요원(병역특례) 복무중입니다. 락을 좋아하고 사랑합니다. LOVE

아이지님의 글 보기
의견 (1)