[정리]html

14 May

1. ID와 클래스의 쓰임의 차이

클래스는 다수의 요소에 사용이 가능하기 때문에 특정 요소를 유일한 스타일로 쓰고 싶다면 ID를 쓰는 것이 좋다.
-id 사용 방법: #id, p#id
1)#id :  해당 아이디를 가진 요소에 효과 적용
2)p#id: p요소가 해당 아이디를 가지고 있다면 p요소 선택????

2. 스타일 시트 리믹싱

CSS스타일을 여러개 작성하여 한페이지에 여러가지 스타일 적용가능

1)link를 여러개 작성하면 가장 하단의 link가 우선순위로 적용됨
: 상속 개념이 적용되며 상단의 CSS의 효과가 재정의 되지 않으면 그대로 사용함.

2)미디어 상황에 따라서 다른 효과 적용가능-미디어쿼리(440p)
: media=”screen, print 등등”,  max-device-width= 30px, min-device-width, max-width
=>미디어쿼리는 활발히 개발되고 있는 영역임(http://www.w3.org/TR/css3-mediaqueries/)

3. 정렬 요소들
text-align 같은 정렬 속성은 모든 인라인 요소에 적용됨(리스트, 이미지, 단락 등등)
하지만 블럭요소에 적용해야만 작동하며, 인라인 요소에 바로 적용하면 작동하지 않음.

4. 블럭요소에 선언된 ID 사용.
블럭 요소에 아이디가 선언되었을 경우. 그 사용은 #id h2{~~}와 같은 방법으로 사용되어야 한다. h2#id{~~}와 같은 방법으로도 사용 가능 하고 블럭 내부에만 효과가 적용되지만, 만약 블럭 외부의 동일한 요소 속성이 (h2) 선언 되었을 경우 블럭 내부에 적용하고자 했던 속성이 적용되지 않고 외부에서 먼저 선언되 효과가 적용되게 된다.

원리가 무엇인가? :  ID가 선언된 블럭 속의 요소에 접근하고자 할때는 먼저 아이디에 접근하고 그리고 그 안의 요소에 접근하는 것. 그리고 ID나 클래스가 선언된 요소(블럭요소 안에 있지 않은)에 접근할 때는 요소에 먼저 접근하고 나서 아이디나 클래스에 접근한다.

5. 줄간격 비율 속성으로 바꾸기
css  div같은 블럭 요소에 별도의 font-size 설정이 없다면 body와 같은 상위 요소의 속성을 상속 받는다. 이때 블럭요소 div에 line-height를 설정할 경우. 우선순위에 따라서 font-size를 선택하여 line-height속성을 적용한다. 하지만 여기서 블럭요소 div에 h1과 h2같이 font-size가 다른 요소가 존재 하더라도 기본으로 설정된 font-size에 비례해서 line-height를 설정해, 충분한 줄간격이 확보되지 않는 경우가 발생한다.
이 경우 line-height: 1; 과 같이 숫자로만 비율을 설정해주면 각의 요소의 font-size에 적절하게 비례하는 크기로 line-height를 설정한다.

6. 속성 간단하게 작성하기
padding & margin : 위 오른쪽 아래 왼쪽 순서로 입력
border & background : 순서 자유롭게 입력, 세부 속성은 레퍼런스 참조
ex)border- width,style,color
background-color, image, repeat
font : font-style font-variant font-weight(선택사항) font-size(필수)/line-height(선택)  font-family(필수)

7. span 요소
span 요소는 인라인 콘텐츠를 논리적으로 분리 혹은 묶는다.
특정요소를 아주 강하게 강조하고 싶으면 em이나 strong같은 요소를 사용하는 것이고, 스타일 변경을 원하는 경우 span을 사용한다.
인라인 요소의 패팅은 좌우에만 추가 된다. 이미지는 다른 인라인 요소와 다르게 블록처럼 작동한다.

8. 의사 클레스
클래스는 아니나 클래스 처럼 스타일을 명시하는 것을 허용하기 때문에 의사클래스라 한다. 하지만 HTML내부에 직접 입력하진 않는다. 또한 방문자들이 페이지를 사용하는 동안 발생하는 현상에 기반을 두고 여러가지 꾸미기를 제공한다.

9. 캐스케이드
여러 스타일 시트 중 어떤 스타일을 사용할 지 브라우저가 결정하는 방법
작성자>사용자>브라우저 정의의 우선순위를 기준으로 결정하며 그 내에서 여러개의 링크가 존재하는 경우
0 0 0
1)선택자가 id를 가지고 있는 경우 각각 1점
2)선택자가 클래스 혹은 의사 클래스를 가지고 있는 경우 각각 1점
3)선택자가 요소의 이름을 가지고 있는 경우 각각1점
으로  계산해서 크기가 큰 스타일 시트가 우선순위를 가지게 된다.

10. 플로우 속성
플로우 속성은 left와 light가 있으며 해당 블록 요소는 레이아웃에서 떠있는 형태가 된다.
다른 블록 요소는 float 속성이 적용된 블록 요소를 무시하고 인라인 요소는 해당 블럭 요소를 피해서 배열 된다.
플로우 속성이 없는 경우 인라인 요소의 마진은 서로 겹치지 않고, 블록 요소의 마진은 큰쪽으로 합쳐진다.
플로우 속성이 적용된 블럭요소의 경우 상단의 마진은 무시되지 않지만 나머지는 무시된다.(상단 블럭요소의 마진 이후에 배열되기 때문에)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: