'CSS'에 해당되는 글 2건

  1. 2008.07.29 css제대로 사용하기
  2. 2008.07.29 CSS적용 체크포인트 4가지
web standard/css2008. 7. 29. 10:36

css제대로 사용하기

01 / html과 css의 관계

    • html : 컨텐츠의 내용과 구조 표시
      • 컨텐츠가 문단인지<p>, 인용문인지<blockquote>, 리스트형태<ul>인지에 따라 적합한 엘리먼트로 표기
      • 컨텐츠가 문서내에서 가지는 의미에 따라 <div>와 적절한 id, class 속성표기(나타내고자 하는 컨텐츠를 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup을 만드는 것이 웹표준의 목적)
      • 웹표준의 목적 : 컨텐츠의 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup하는 것.

    • css : 문서의 내용과 표현을 분리하는것
      • 문서의 내용은 html로 작성하고 표현은 css로!!

 

 

02 . css의 일반선택자

  • 일반선택자(selector) 종류
    • (*) : 공용선택자 ㅣ 모든 태그에 적용
    • (a) : 타입선택자 ㅣ 태그 <a> 지정
    • (.A) : class 선택자 ㅣ 클래스가 A인 태그에 적용
    • (#A) : id 선택자 ㅣ 아이디가 A인 태그에 적용


  • (*)공용선택자
     * {
        margin: 0;
        padding: 0;
     }
    페이지 내의 모든 <h1>,<h2>,<p>,<form>,<blockquote> 등의 브라우져 기본 마진과 패딩을 가지고 있는 엘리먼트들의 여백을 없앤다.

     div.search * {

                        vertical-aling: middle;

     }

    div.search안의 모든 엘리먼트가 세로로 가운데 정렬이 되게 된다.


  • (a)타입선택자 : 해당엘러먼트를 선택하여 속성 부여

  • 클래스선택자 : 한페이지에서 여러번 사용가능

  • 아이디선택자 : 한페이지에 한번만 사용할 수 있다.

    [출처] 웹표준가이드(4) / css선택자와 선언종류|작성자 마그리뜨

    • 'web standard > css' 카테고리의 다른 글

    줄바꿈 완련 style  (0) 2012.08.23
    파폭용핵  (0) 2010.11.17
    CSS 이야기: overflow 속성의 float 해제 효과  (0) 2010.03.05
    css 핵  (0) 2008.07.29
    CSS적용 체크포인트 4가지  (0) 2008.07.29
    Posted by 수라
    web standard/css2008. 7. 29. 10:35

    CSS적용 체크포인트 4가지

     

    • HTML, XHTML, XML 등의 markup 문법 확인 감사(DTD선언에 기초한 문법 확인) ⇒ http://validator.w3.org
    • XHTML  의미와 구조적 구성
       <title> 각각의 문서 내용에 적합하게 사용해야 한다.  
       <h1>~<h6>

      문서내 중요도의 단계에

       <ol>,<ul>,<p>

      <blockquote>,<del>

      		  각 엘리먼트들이 의미에 맞게 사용되도록 한다.
       <div>,<span>,id,class  문서작성 후 의미에 따라 구분해준다.

    • 표준문법사용
       주석문처리
      1. css주석처리 /*comment*/
      2. html, 다른 언어
        • <!--여러줄 주석처리-->
        • //한줄주석처리
       단위 표기
      1. 0을 제외한 모든 값에 단위표기
      2. 구문이 끝날때는 세미콜론 표시(;)
       색상 표기

       #rrggbb형식 - color: #ff0000; (color: #f00;)

      rgb(r,g,b) 형식 - color: rgb(255,0,0); (color: rgb(100%,0%,0%);)

    •  표준에 적합한 브라우저를 기본으로 작업

      [출처] 웹표준가이드(5) / css적용 체크포인트 4가지|작성자 마그리뜨

    'web standard > css' 카테고리의 다른 글

    줄바꿈 완련 style  (0) 2012.08.23
    파폭용핵  (0) 2010.11.17
    CSS 이야기: overflow 속성의 float 해제 효과  (0) 2010.03.05
    css 핵  (0) 2008.07.29
    css제대로 사용하기  (0) 2008.07.29
    Posted by 수라

    티스토리툴바