카테고리 없음
웹표준과 접근성 5일차.
IAress
2012. 10. 17. 22:22
반응형
** 스타일 효과를 보다 정확하게 적용하기
1. 단일 선택자
- 일반적인 css 적용 방법
2. 다중 선택자
- 여러 개의 선택자에 동싱[ㅔ 같은 효과 적용
선택자, 선택자, 선택자....(효과)
3. 부분 지정 선택자
- 같은 선택자라 하더라도 감싸고 있는 선택자가 다른 곳에 효과 적용
선택자 선택자 {효과}
body [type="text"] { padding: 10px; border: 3px solid red }
해당하는 태그가 있는 것에 대해 효과 적용
** 요소 레벨(Element Level, 태그의 레벨 구분)
1. 블록레벨(Block Level)
- 독립된 행을 가지는 태그
- 다른 블록레벨 요소와 인라인 요소 포함 가능
- p, h, ul, ol, li, div......
2. 인라인 레벨(Inline Level)
- 범위 표시 기능
- 다른 인라인 요소는 포함할 수 있지만, 블록 레벨 요소는 포함 불가
- a, img, strong, em, span....
*** DIV ***
페이지 레이아웃을 구성하기 위한 요소
(테이블의 대체 요소)
** 기본 레이아웃 **
1. 상단요소
- header
- 문서 전체에 보여져야 하는 내용
- 상단로고, Top Menu, GNB
(Global Navigation Bar)
2. 내용요소
- content
- 페이지별 전달하고자 하는 내용
- 로그인, 배너, 게시판, 정보전달텍스트....
3. 정보요소
- footer
- 회사나 홈페이지에 대한 정보 입력
- 하단로고, 전화번호, 주소, 팩스번호,사업자 등록 번호, 통신판매번호, 개인정보보호정책....
1. 단일 선택자
- 일반적인 css 적용 방법
2. 다중 선택자
- 여러 개의 선택자에 동싱[ㅔ 같은 효과 적용
선택자, 선택자, 선택자....(효과)
3. 부분 지정 선택자
- 같은 선택자라 하더라도 감싸고 있는 선택자가 다른 곳에 효과 적용
선택자 선택자 {효과}
body [type="text"] { padding: 10px; border: 3px solid red }
해당하는 태그가 있는 것에 대해 효과 적용
** 요소 레벨(Element Level, 태그의 레벨 구분)
1. 블록레벨(Block Level)
- 독립된 행을 가지는 태그
- 다른 블록레벨 요소와 인라인 요소 포함 가능
- p, h, ul, ol, li, div......
2. 인라인 레벨(Inline Level)
- 범위 표시 기능
- 다른 인라인 요소는 포함할 수 있지만, 블록 레벨 요소는 포함 불가
- a, img, strong, em, span....
*** DIV ***
페이지 레이아웃을 구성하기 위한 요소
(테이블의 대체 요소)
** 기본 레이아웃 **
1. 상단요소
- header
- 문서 전체에 보여져야 하는 내용
- 상단로고, Top Menu, GNB
(Global Navigation Bar)
2. 내용요소
- content
- 페이지별 전달하고자 하는 내용
- 로그인, 배너, 게시판, 정보전달텍스트....
3. 정보요소
- footer
- 회사나 홈페이지에 대한 정보 입력
- 하단로고, 전화번호, 주소, 팩스번호,사업자 등록 번호, 통신판매번호, 개인정보보호정책....
반응형