-
dl/dt/dd
- dl : 항목과 설명이 있는 리스트
- dt : 개별 리스트의 제목
- dd : 제목에 따른 설명
- a :
- 링크를 걸지 않더라도 사용하면 하나의 항목으로 정확하게 선택할수 있도록 하기 때문에 많이 사용한다.
- a는 margin이 먹지않는다
- margin은 테두리 밖의 간격이기 때문에 테두리는 영역이 있어야 입힐 수 있는데 a는 영역이 없다 -
clear
-
body
-
style
- float은 주변에 다른 요소들 까지 영향을 미친다.
- 특정 부분에만 clear : left를 해주면 float : left속성으로부터 벗어난다.
- div.first에서는 float이 block으로 바뀐다.
-
position
- position은 특정요소의 위치 속성을 지정해준다.
1. static : 기준이 되는 요소에 사용
- relative만으로 기준을 삼을수 있기 때문에 static은 사용을 잘 안한다.
2. relative : static을 기준으로 움직인다.
- 만약 없으면 옆에 있는 relative를 기준으로 삼는다.
3. absolute : 부모를 기준으로 움직인다.
- 부모가 없으면 body기준으로 움직인다.
- 다른요소의 방해를 받지 않고 공중에 뜬 것처럼 움직인다.
- 다른 요소의 위에 올라오기 때문에 팝업창으로 많이 활용한다.
4. fixed : 스크롤을 움직여도 계속 고정되어있다. -
z-index
- z는 3차원적인 두께를 의미한다
- 요소들간에 누가 사용자의 평면상 위로 올라가느냐를 지정한다
- 예를들어 둘다 absolute일 때( z-index를 지정해주지 않으면 뒤에 있는 요소가 위에 올라간다 )
- z-index가 클 수록 위로 올라간다.
- #div3보다 div2의 z-index가 크기 때문에 맨위에 div2가 있을 것이다.
- opacity : 투명도를 의미하며 0~1까지 있다. -
Sprite image
- 여러장의 이미지를 하나의 이미지로 병합 해놓은 이미지이다.
- 여러이미지를 효과적으로 사용 할 수 있다.
-
body
- 테두리가 생기는데 img태그에는 이미지가 없으면 엑박을 표시하는데 이 때 생기는 엑박 테두리임
- 테두리를 없애주기위해 투명이미지 넣어준다.
- list형태로 넣으면 테두리가 생기지 않는다.
-
style
- background-image로 하면 안된다
- background : url(./spriteImg.png) x좌표 y좌표 ( 브라우저 f12에서 확인 가능 )
- .bird1:hover를 통해 마우스를 올렸을때 좌표에 변화를 줘서 이미지를 바뀌게 했다.
-
커서모양 바꾸기 a태그 아니어도!
- pointer는 일반 손모양이고 다른것도 많다
