코딩공부51 CSS selector 통합정리 CSS selector 통합정리 다양한 선택자 태그 유형 설명 버전 . .class {color:#fff;} 클래스 선택자 CSS1 # .id {color:#fff;} 아이디 선택자 CSS1 * * {color:#fff;} 전체 선택자 CSS2 element p {color:#fff;} 요소 선택자 CSS1 element, element p, div {color:#fff;} 그룹 선택자 CSS1 element element div p {color:#fff;} 후손 선택자 CSS1 element >element div >p {color:#fff;} 이웃 선택자 CSS2 element + element div >p {color:#fff;} 자식 선택자 CSS2 element ~ element div ~ p .. 2020. 10. 25. CSS tooltip, form, @, scroll tooltip 효과 어떤 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다. CSS를 이용하면 이러한 툴팁 효과를 간단히 설정할 수 있다. 다음 예제는 visiblility 속성을 이용하여 툴팁 효과를 구현하는 예제이다. .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-content { visibility: hidden; width: 300px; background-color: orange; padding: 0; margin-top: 10px; color: white; text-align: center; position: absolute; z-index: 1; } .toolt.. 2020. 10. 25. CSS 이미지스프라이트, 네비게이션바, 드롭다운 CSS image sprite 이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(spr.. 2020. 10. 23. CSS 위치속성, 플로트, 정렬 CSS float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다. 다음 예제는 이미지와 글자를 함께 출력하는 예제이다. img { float: left; margin-right: 20px; } clear 속성 clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다. .left { background-color: #FF8C00; width: 150px; height: 50px; float: .. 2020. 10. 21. CSS 위치속성 디스플레이, 포지션, 오버플로우 CSS display display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가진다. 1. 블록(block) display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. , , , , , 요소는 대표적인 블록(block) 요소이다. 2. 인라인(inline) display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소.. 2020. 10. 21. CSS 박스모델, 패딩, 테두리 padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받는다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있다. padding 속성 CSS에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공한다. - padding : 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있음 - padding-top : 윗쪽의 패딩(padding) 값을 설정함 - padding-right : 오른쪽의 패딩(padding) 값을 설정함 - padding-bottom : 아래쪽의 패딩(padding) 값을 설정함 -.. 2020. 10. 16. CSS 박스모델, 마진, 아웃라인 CSS 박스모델 (box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 아래와 같이 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다. Margin margin은 테두리(border) 외부에 생기는 여백이다. margin property 값은 마진 영역의 두께를 의미하며, 기본적으로 투명(trangsparent)하고 배경색을 지정할 수 없다. .content { margin: 50px; } Padding padding은 테두리(border) 내부에 생기는 영역이다. padding property 값은 패딩 영역의 두께를 의미하며 기본색은 투명(t.. 2020. 10. 15. CSS 크기, 크기 단위 CSS 크기 (Dimension) CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있다. CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같다. 속성 설명 height 해당 HTML 요소의 높이를 설정함. width 해당 HTML 요소의 너비를 설정함. max-width 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함. min-width 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함. max-height 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함. min-height 해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함. height와 width 속성 height와 width 속성은 HTML 요소의.. 2020. 10. 14. CSS 리스트, 테이블 CSS 리스트 (list) CSS를 이용하면 리스트에 다양한 효과를 적용할 수 있다. CSS에서 사용할 수 있는 list-style 속성은 다음과 같다. - list-style-type - list-style-image - list-style-position list-style-type 속성 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 한다. list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있다. .circle { list-style-type: circle; } .square { list-style-type: square; } .upperAlpha { list-style-type: upper-alpha; } .lowerRoman { lis.. 2020. 10. 14. CSS 배경, 그라데이션 CSS 배경 (Background) 웹 페이지뿐만 아니라 HTML 요소는 모두 각자의 배경을 가지고 있다. CSS의 background 속성은 이러한 각 요소의 배경에 다양한 효과를 줄 수 있게 해준다. CSS background 속성 속성 설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 이미지를 설정함. background-repeat 설정된 배경 이미지의 반복 유무를 설정함. background-position 반복되지 않는 배경 이미지의 상대 위치를 설정함. background-attachment 배경 이미지를 스크롤과는 무관하게 해.. 2020. 10. 14. CSS 색, 링크 CSS 색 (Color) CSS에서 색을 표현하는 방법에는 다음과 같이 세가지 방법이 있다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 W3C에서 정의한 16개의 html4 표준 색상 이름은 다음과 같다. 색상 이름은 대소문자를 구분하지 않는다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow .blue { color: blue; } .green { color: green; } .silver { color: silver; } RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합.. 2020. 10. 13. CSS 텍스트 CSS 텍스트 속성 텍스트 관련 속성은 Text Module Level 3에서 정의하고 있으며, 기존에 제공되던 속성 이외에 하이픈( - ) 및 구두점(.)과 탭 크기 지정 등의 속성이 추가되었다. 이번에는 기존 Text 속성과 함께 CSS3에서 추가된 다양한 텍스트 관련 속성에 대해 살펴보자. text-align text-align은 단락 내 텍스트의 가로 방향 정렬 방법을 지정하는 속성이다. 속성 값 중 left, right, center, justify, [string]은 CSS2.1에서도 정의된 속성 값이며, 나머지 속성 값은 CSS3에서 추가된 것이다. CSS2.1 속성 값 중에서도 justify와 [string]은 지원 브라우저가 없거나 기능이 명확히 구현되지 못하였으며, CSS3에서 추가된 .. 2020. 10. 13. CSS 폰트 CSS 폰트 속성 텍스트는 웹 콘텐츠의 가장 기본적인 구성 요소이다. 그러나 CSS3에서 추가된 웹 폰트 기능은 텍스트가 얼마나 디자인적인 측면에서 잠재력을 가지는지 보여주는 사례라고 할 수 있다. 이번에는 기존 CSS2에서 전통적으로 제공했던 폰트(Font) 관련 속성과 함께 CSS3에서 추가된 속성들을 살펴보자. font 속성 font는 폰트 관련 속성을 일괄적으로 지정하기 위한 대표 속성이다. font 속성 값은 기존 CSS2에서 지원했던 값 이외에 다양한 속성 값이 추가 되었다. font-style, font-size, font-family, font-weight 등의 속성 값을 공란으로 구분하여 작성한다. 이 중 속성 값이 기본 값인 하위 속성 값은 생략할 수 있지만 font-size 속성과 f.. 2020. 10. 13. CSS 선택자 CSS 선택자 선택자는 CSS에서 HTML의 특정 요소를 선택하기 위한 규칙으로, Selectors Level 3가 권고 표준안이며, 현재 Selectors Level 4가 개발 중에 있다. 특히 CSS3에서는 기존 CSS2.1에 비해 많은 선택자가 추가되었기 때문에 별도의 class나 id를 지정하지 않아도 요소를 다양하게 선택할 수 있다. 전체선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 요소를 선택하는 방법으로, '*'를 선택자로 선언한다. /* 예시 */ * { margin : 0 ; padding : 0 ; } 요소 선택자(Type Selector) 요소 선택자(Type Selector)는 HTML 요소를 선택하는 방법으로, 'h1', 'p',.. 2020. 10. 12. CSS 기본 CSS 기본 h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 한다 - 선택자(selector) : 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻 - 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻 - 값(value) : 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻 CSS 코드는 다음처럼 구성된다. selector { property: value } 이때 property와 value를 합쳐서 선언(declaration)이라고 한다. 여러 개의 선언 세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있다. 예를 들어 h1 { color: red; font-size: 20px; } .. 2020. 10. 12. 이전 1 2 3 4 다음
