youngik

이 글은 CSS 책을 보면서 따로 기록해두어 실제 사용가능할 정보를 기록해보려고 한다. 실제 html과 css를 구성을 할때에 많은 도움이 될 것 같은 부분들 1. width가 설정되어있지 않는 content는 상위태그의 width를 상속받는다. ex) 하이 2. 태그의 margin, padding을 설정하면 width가 늘어남 (width + 2*padding + 2*margin)만큼 3. div 크기를 유지하면서 padding을 설정하고 싶으면 div안에 div태그를 넣고 내용을 넣음 - 2번에 내용으로 하위태그에서 padding, margin을 설정하면 상위태그의 크기가 커지기 때문에 *변경 전 : 내용 (width : (600+(10*2)) => 620) *변경 후 : 내용 위와 같이 사용을 하면..

유사클래스란? - 특정 조건이 발생했을 때 마크업에 추가하는 가상의 클래스 - 가리키거나 or 클릭하는 사용자 행동에 반응해서 적용 : 앵커링크 :link : 기본적으로 {color:blue;, text-decoration:under-line;) 글자 파란색, 밑줄이 그어져있다. :visited : link를 방문하고나서, 변경되는 클래스, (사이트 방문기록, 쿠키를 지우면 다시 원상태로 되돌아온다.) :hover : 마우스를 올려놨을 때, 반응해서 동작하는 클래스 (마우스가 빠져나오면, 다시 원상태로 되돌아온다.) (다른 태그에서도 자주 쓰이는 것이기에 꼭 알아두기!) :active : 활성화가 됐을 때(=마우스를 클릭하고 있을 때) 반응하는 클래스 :focus : 키보드 tab키 or 마우스로 클릭해..

img파일을 src 속성으로 저장된 파일을 불러왔던 나는 Sprite img를 사용을 왜 해야할까? 생각이 들었고 찾아본 결과 극단적으로 한 웹페이지에 100개의 img를 로드했을 때 서버에 부과되는 트래픽과 1개의 큰 img를 불러와서 부분적으로 100개의 이미지를 잘라내서 쓰는 방법 중 어느것이 더 효과적일까? 당연히 후자이다. sprite img를 사용함으로써 http request를 줄임으로써 당연히 웹페이지의 속도 또한 향상이 된다. 당장 혼자서 만들고 접속하는 웹페이지는 문제가 없겠지만 1만명, 10만명,, 100만명이 접속하는 웹사이트라면 당연히 성능문제를 고려할 수 밖에 없다. 예를 들면 노트북이 같은 성능이라면 가벼운 노트북이 더 좋지 않겠는가? CSS sprite *css sprite ..