1. CSS
1-1. CSS란
- HTML, XHML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
- HTML는 CSS가 있기 전의 언어. CSS는 HTML이 생긴 후에존재
1-2. 선택자와 선언
- 어떤 태그를 디자인하기 위해서는 디자인하려는 태그를
- 선택하고(선택자)
- 선택한 대상에게 효과를 줘야한다(선언)
- css에서 가장 기본적인 문법
- 선택자(selector)와 선언(declare)
1-3. CSS 코드를 작성하는 기본 형식
<style>
selector {
속성1 : 값;
속정2 : 값;
}
</style>2. 기본 셀렉터의 종류
2-1. 기본 셀렉터 종류
- css에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그이름, 클래스 속성, id속성에 대한 명시가 있다.
- 태그 이름
- selector{...css 적용...}
- 특정 태그를 가리킨다. HTML내에 동일 태그가
- 존재할 경우 태그 요소를 일괄 처리한다.
- 클래스
- .selector{...css 적용...}
- 셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTML
- 태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다. 태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능하다.(재사용 목적)
- 이 경우 selector의 이름은 자유롭게 지정
- id
- #selector{...css 적용...}
- 셀렉터 이름 앞에 (#)을 붙여 표시하고 HTML
- 태그의 id 속성에 (#)을 제외한 이름을 명시하여 지정한다. id 속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.(고유특성 명시)
- 이 경우 selector의 이름은 자유롭게 지정
2-2. 조합형 셀렉터
tag.class{ 속성1 : 값1, 속성2 : 값2, ...}
tag#id{ 속성1 : 값1, 속성2 : 값2, ...}
- id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태
- 셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
- 태그, 클래스, 아이디를 독립적으로 명시할 때보다 우선적으로 적용된다.
2-3. AND의 의미를 갖는 콤마(,)
selector1, selector2, selector3, ...{
속성1 : 값1, 속성2 : 값2, ...
}
- 여러 개의 요소에 동일한 CSS내용을 적용하기 위해 셀렉터를 콤마(,)로 구분하여 일괄처리 할 수 있다.
- 태그, class, id 등 모든 형태의 css 셀렉터가 가능
3. 가상클래스
3-1. 가상클래스란?
- HTML 태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS셀렉터
- 가상클래스는 CSS의 셀렉터 이름 뒤에 ": 상황" 의 형식으로 명시한다.
4. 복잡한 형태의 셀렉터
4-1. 다양한 CSS 조합 방식
4-2. 자식 셀렉터
- ">"로 구분
- ">"는 HTML의 계층 구조의 표현
- A > B 일 경우 B 요소는 A의 1depth 안에
존재해야 한다.
4-3. 자손 셀렉터
- 자식 셀렉터가 반드시 1depth안에 존재해야
했다면, 자손 셀렉터는 depth를 제한하지 않는다. - 명시 과정에서 중간단계를 생략해도 된다. 몇 depth를 더 내려가던지, 지정한 태그의 범위안에 존재하기만 하면 된다.
4-4. HTML 속성에 따른 구분
- 스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태그 요소를 좀 더 구체적으로 가리킬 수 있다.
4-5. nth-child 가상 클래스
- 여러개의 요소 중 n번째 요소라는 의미로
:nth-child(n)형식이 추가 - 요소를 뒤에서부터 카운트 할 경우
:nth-last-child(n)를 사용한다.
5. css 우선순위
- 구체적인 것을 기준으로 우선순위가 정해진다
- style attribute
- id selector
- class selector
- tag selector
6. 웹 폰트
7. 문단관련 속성
7-1. text align
7-2. text-shadow
selector {
text-shadow : x-offset y-offset blur-radius color;
}- x-offset : 본체와 그림자의 가로축 거리(px)
- y-offset : 본체와 그림자의 세로축 거리(px)
- blur-radius : 번짐 정도
- color : 그림자의 색상
8. 박스
8-1. block vs inline
- element들은 크게 두가지로 구분된다
- block element : 화면 전체를 사용하는 태그
- inline level element : 화면의 일부를 차지하는 태그
8-2. 박스의 기본 크기를 결정하는 특성
- 가로축 : 부모를 가득 채운다
- 세로축 : 자신이 포함하고 있는 내용만큼 설정된다. 내용이 없을 경우 높이가 형성되지 않는다.
