본문 바로가기

'.' Programs/CSS

 (101)
규칙 규칙 css의 규칙은 크게 선택자(selector) 와 선언(declaration) 으로 구성되며, 선언은 속성(property)과 값(value)으로 구성된다. 규칙의 왼쪽에 선택자가 위치하며, 오른쪽에 선언이 위치한다. 선택자 (selector) : 스타일을 부여할 요소(대상) 선언 (declaration) : 요소에 부여하려는 스타일(방법)으로 "{...}" 안에 지정한다. 속성(property) : 요소에 부여하려는 스타일 속성으로, W3C 가 정한 표준 속성 외에도 각 브라우저들이 별도로 지정하는 브라우저 확장 속성이 있다. 값(value) : 요소에 부여하려는 스타일 속성의 값으로 , 속성마다 지정할 수 있는 값이 정해져 있다. 선택자 선택자는 문서 계통(document tree) 과 사용자와..
선택자 선택자 선택자는 문서 계통(document tree)과 사용자와의 상호작용(user interactive) 및 부가정보에 의해 스타일을 지정 할 대상을 선정한다. 선택자 종류/패턴 선택자는 p처럼 HTML 요소 하나일 수 있으며, p span.act 처럼 여러 선택자들이 복합될 수 있다. 복합될 수 있는 특징 때문에 선택자를 개별 이름보단, 특정한 패턴으로 구분한다. 문서 계통에 의한 구분 : 전체 선택자, 타입/요소 선택자, 자손 선택자, 자식 선택자, 첫째 자식 가상 클래스, 인접 선택자 사용자 상호작용에 의한 구분 : 동적 가상 클래스, 링크 가상 클래스 추가 정보에 의한 구분 : 언어 가상 클래스, 속성 선택자, 상태 선택자, 클래스 선택자, 아이디 선택자 CSS 2.1 선택자 선택자 이름 설명 ..
display Display 개요 : 이 속성은 요소가 화면에 출력될 형식을 지정한다. HTML의 모든 요소는 기본 출력 형식이 정해져 있으며, (예:p 요소는 block 형식) 사용자 에이전트의 기본 스타일에서 이 형식을 지정하고 있다. 제작자는 display 속성으로 HTML 기본 출력 형식을 변경해서 다양한 화면을 구현 할 수 있으나, 자칫 오용할 경우 사용자의 경험을 혼란시킬 수 있다. 하지만 , XML은 기본적으로 출력될 형식이 없기 때문에 display 속성을 반드시 사용한다. 정의 display 설명 값 inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-gro..
값 (Value) 값 (value) 값 지정 규칙 : 두개의 값 A, B를 모두 순서대로 지정한다. | : A 또는 B 중의 하나를 지정한다. 두개의 값 사이에 바(|)가 있다. || : A 또는 B 중의 최소한 하나를 지정한다. A나 B또는 A,B 모두 지정할 수 있다. [ ] : 여러개를 그룹으로 묶는다. * : A를 0번 이상씩 지정할 수 있다. 값 다음에 별표문자(*)로 표시한다. + : A를 1번 이상씩 지정할 수 있다. 값 다음에 더하기(+)문자로 표시한다. ? : A를 지정해도 되고 안해도 된다. 값 다음에 물음표로 표시한다. {숫자1,숫자2} : A를 최소 숫자1번에서 최대 숫자 2번까지 지정할 수 있다. (예) [A||B] | C* = A 나 B중에서 하나 이상이나 C를 0번 이상 지정하는 것 중에서 하나..
미디어 미디어 Media 속성 media 속성 설명 all 모든 표현 미디어에서 사용된다. aural 음성 합성기나 스크린 리더, 문서를 음성으로 표현해주는 기타 장치에서 사용한다. braille 점자 장치로 문서를 표현할 때 사용한다. embossed 점자 출력 장치로 인쇄할 때 사용한다. handheld PDA나 웹 접속이 가능한 핸드폰 같은 휴대폰 장치에 사용한다. print 시각이 있는 사용자를 위한 문서를 인쇄할 때나 문서의 인쇄 미리보기에 사용한다. projection 발표를 하면서 슬라이드쇼를 보여줄 때 사용하는 디지털 프로젝터 등에 사용한다. screen 데스크탑 컴퓨터의 모니터 같은 스크린 매체를 이용해서 문서를 표현할 때 사용한다. tty 문서를 텔레타이프처럼 피치가 고정된 환경으로 전송할 때..
visibility Visibility 개요 : 이 속성은 요소가 화면에 보일지, 숨길지, 겹칠지를 지정한다. 정의 visibility 설명 값 visible | hidden | collapse | inherit 기본값 inherit 적용대상 모든 요소 상속 안됨 백분율 사용불가 미디어 visual 값 값 설명 visible 보이도록 지정한다. hidden 숨기도록 투명하게 지정한다. 자신의 영역을 그대로 보존해서, 화면 배치에 영향을 준다. collapse 겹치도록 지정한다. 테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 숨기도록(hidden) 해석된다. inherit 부모 요소의 값을 상속 하도록 지정한다. 예제 - View Source-----------------------------------..
Position Position 개요 : 이 속성은 요소가 위치할 방식을 지정한다. top, right, bottom, left 속성으로 간격(offset)을 지정할 수 있으며, z-index로 z축 순서를 지정할 수 있다. 단 정상(static)위치는 지정할 수 없다. 정의 position 설명 값 static | relative | absolute | fixed | inherit 기본값 static 적용대상 생성된 내용을 제외한 모든 요소 상속 안됨 백분율 사용 불가 미디어 visual 값 값 설명 static 정상적으로 지정한다. 'top', 'right', 'bottom', 'left' 속성을 지정할 수 없다. relative 상대적인 위치를 지정한다. 'static'과 같은 정상 흐름을 유지하며, 지정한 오프셋..
Top Top 개요 : 이 속성은 위치된 요소의 위쪽 간격(offset)을 지정한다. 정의 top 설명 값 | | auto | inherit 기본값 auto 적용대상 위치된 요소 상속 안됨 백분율 용기 블럭의 크기를 참조 미디어 visual 값 값 설명 길이를 지정한다. 백분율(%) 값을 지정한다. 부모 요소를 기준으로 계산된다. auto 자동으로 계산된 크기를 지정한다. inherit 부모 요소의 값을 상속하도록 지정한다. ------------------------------------------------------------------------------------ View Source : ---------------------------------------------------------------..

티스토리툴바