2009년 4월 15일

웹 표준 가이드북 – 실전 CSS 레이아웃


  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시키지 않음.