개발 메모리

이미지 스프라이트(Image Sprite)란? 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청해야하는데, 이미지가 많을 경우 웹 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지로, 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다. 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제 .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-re..

링크(Link) text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거한다. a:link, a:visited { background-color: #FFA500; color: maroon; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: #FF4500; } 링크(Link)의 상태 link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태 visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태 hover : 사..

Css 배경(Background) background 속성 축약 표현 background: color | image | repeat | attachment | position div { background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center; width: 50vw; height: 300px; } background-size 속성 CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있다. background-size 속성값이 contain면 이미지 비율은 유지하면서 크기를 가능한 크게 조절하므로, 배경 이미지의 크기가 해당 요소의 ..

Css 크기 단위 CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다. px 단위는 스크린의 화소(pixel)를 기준으로 하는 절대적인 크기를 설정한다. % 단위는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다. em 단위는 해당 글꼴의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다. rem 단위에서 r은 root를 의미하며, 최상위 요소(html)의 사이즈를 기준으로 삼아 크기를 설정한다. #large { font-size: 200%; } #small { font-size: 0.7em; } #fixed { font-size: 20px; } Viewport 단위 Viewport 단위는 웹페이지의 가시영역인 뷰포트를 기준으로 한 ..

블록 요소 정렬(align) margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다. 반드시 해당 요소의 width 속성값을 설정해야하며, 넓이를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백이 된다. div { width: 300px; margin: auto; } position 속성을 이용한 좌우 정렬 절대 위치 지정 방식으로 위치한 요소는 다른 요소와 겹칠 수 있기에, 이 특성을 이용하여 요소에 margin과 padding 속성값을 설정함으로써 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다. div { width: 300px; padding: 10px; margin: 0; positio..

display 속성 display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다. HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있는데, block, inline, inline-block, none값이 있다. none 값이면 공간조차 사라지며 해당 요소를 화면에 표시하지 않는다. /* display 속성의 기본 설정값의 변경 */ li { display: inline; } 블록(block) display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 넓이를 차지하고, 블록 요소 내에 인라인 요소를 포함할 수 있다. width, height, margin, padd..

박스 모델(box model) 모든 HTML 요소는 박스 모양으로 구성되는데 이것을 박스 모델이라 부른다. CSS에서 설정된 width와 height에 패딩, 테두리, 마진의 크기는 포함되지 않으며, width와 height을 비롯한 모든 박스모델 관련 속성들은 상속되지 않는다. 내용(content) : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. 패딩(padding) : 패딩은 내용과 테두리 사이의 간격으로 기본색은 투명하다. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리다. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격으로, 기본적으로 투명하며 배경색을 지정할 수 없다. div { width: 320px; background-color: red; padding..

사용자 인터페이스(user interface, UI) CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해준다. resize 속성 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생겨, 사용자가 직접 해당 요소의 높이나 너비를 변경할 수 있게 해준다. #width { resize: horizontal; } #height { resize: vertical; } #both { resize: both; } outline-offset 속성 outline-offset 속성은 해당 요소의 테두리와 아웃라인 사이에 공간(offset)을 추가해 준다. 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인으로, HTML 요소의 크기에..

CSS 선택자(selector)란? CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자를 사용하며, 복수개의 셀렉터를 연속하여 지정할 때는 쉼표 , 로 구분한다. h1, p { color: red; } 전체 선택자 CSS를 적용할 대상으로 head 요소를 포함한 HTML 문서 내부의 모든 요소를 선택하며, * 기호를 사용한다. * { color: red; } HTML 태그 요소 선택자 CSS를 적용할 대상으로 HTML 요소 이름을 직접 사용하여 선택할 수 있다. h2 { color: teal; text-decoration: underline; } 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 아이디 선택자는 특정 아이디 이름을 가지는 요소만을 선택해주며, 앞에 샵 기호 # 를 붙인다. HT..

@규칙(at-rule)들 Css에서 골뱅이 기호는 스타일 제어 규칙을 의미하며, 스타일 적용시에 사용한다. /* 스타일 시트 인코딩 정의 */ @charset /* 다른 스타일시트를 불러올때 정의 */ @import /* 네임스페이스로 접두사가 붙을때 정의 */ @namespace /* 미디어쿼리를 사용할때 정의 */ @media /* 페이지를 프린트 할때 레이아웃 설정을 정의 */ @page /* 글꼴을 사용할때 정의 */ @font-face /* 애니메이션을 제어하기 위한 정의 */ @keyframes /* 각 디바이스에 화면을 어떻게 표현할건지의 대한 정의 */ @viewport @import 규칙 @import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙으로, 문자 인코딩을 지..