Front/CSS7

• 

  [CSS3] title 속성에 style 입히기 [CSS3] title 속성에 style 입히기 HTML 의 title 속성은 해당 요소에 대한 설명을 툴팁으로 제공해준다. HTML title Attribute HTML title Attribute Definition and Usage The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Applies to The title attribute is part of the Global At www.w3schools.com 1. 기본 title 속성 - CSS3 div { widt.. Front/CSS 2021. 5. 3.

• 

  [CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법 [CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법 아이콘과 같이 이미지를 생성받았는데, 투명한 배경에 해당 이미지 색상만 변경하고 싶다고해서 매번 이미지를 색상별로 요청할 수 없을 때 CSS로 이미지 색상 변경하는 방법이다. 참고로 정식 방법은 아니여서 정확한 색상표현이 되진 않는다. 위의 스프라이트 아이콘 이미지로 살펴보자. img { filter: opacity(0.5) drop-shadow(0 0 0 red); } red 자리에 원하는 색상을 넣으면 된다. 기존에 만들어진 이미지 색상의 투명도를 주고, 색상을 얹는 잔머리를 사용한 방식이라 정확한 색상이 표현되지 않고 혼합된 색상으로 표현되니, 협업이 힘들거나 커스텀이 필요한 경우에만 사용하기에 좋을 것 같다. - r.. Front/CSS 2021. 5. 3.

• 

  [CSS3] 요소 애니메이션 이벤트 transition, transform 속성 살펴보기 [CSS3] 요소 애니메이션 이벤트 transition, transform 속성 살펴보기 예제 이미지 화면은 클릭해야 보입니다. transition 트랜지션은 CSS 속성이 변할 때, duration (변화하는 시간)을 지정하여 일정 시간동안 변화를 나타내는 것 transition-duration : 변화하는 시간 (default: 0s) transition-delay : 시작 전 대기 시간 (default: 0s) transition-timing-function : 움직임을 조절 (defulat: ease) (linear / ease-in / ease-out / ease-in-out) transition-property : 트랜지션을 적용할 속성 명시 (default: all) transition : .. Front/CSS 2020. 9. 12.

• 

  [CSS3] CSS cursor 속성의 종류 살펴보기 [CSS3] CSS cursor 속성의 종류 살펴보기 cursor 속성은 지정한 요소 위에 마우스 커서가 올라갔을 때 표출할 모양을 지정한다. 속성 값에 마우스 커서를 올리면 각 값에 따라 커서 모양이 표출될 것이다. 구분 속성 값 설명 기본 cursor: auto 요소 타입에 맞게 표시할 커서를 자동으로 결정 cursor: default 기본 커서 값 cursor: none 커서 숨김 링크/상태 cursor: help 도움말 사용 가능 cursor: pointer 링크를 나타내는 포인터 cursor: progress 프로그램이 백그라운드에서 작업 중이며, 사용자가 인터페이스와 상호작용 가능(wait과 반대) cursor: wait 프로그램이 작업 중이며, 사용자가 인터페이스와 상호작용 불가능(progr.. Front/CSS 2020. 8. 31.

• 

  [CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기 [CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기 1. 형제 선택자 태그의 형제 레벨에 해당하는 요소를 선택한다. 자주 쓰이는 속성 선택자의 종류 label + input - label 태그 바로 뒤에오는 input 선택자 label ~ input - label 태그 뒤에 오는 모든 input 선택자 예제 - HTML 라벨 - CSS .control-form .control-label { color: red; } /* control-label 클래스 바로 뒤에 있는 control-input 클래스에만 스타일 적용 */ .control-form .control-label + .control-input { border: 1px solid red; } /* control-label 클래스 .. Front/CSS 2020. 8. 29.

• 

  [CSS3] Block Level 과 Inline Level, Inline-block Level 차이 및 요소 살펴보기 [CSS3] Block Level 과 Inline Level, Inline-block Level 차이 및 요소 살펴보기 요소가 차지하는 영역의 크기에 대해 살펴보자. block-level 과 inline-level을 쉽게 구분할 수 있는 방법은 컨텐츠가 한 라인에 복수로 올 수 있는지의 여부이다. block-level 요소는 한 라인에 하나만 위치할 수 있다. 즉, 영역의 width 값이 무조건 100%를 차지한다. 반면, inline-level 요소는 한 라인에 2개 이상이 올 수 있다. 이는 컨텐츠의 영역만큼 width 사이즈를 차지한다. 대표적으로 block-level 요소의 태그와 inline-level 요소인 태그를 통해 예제를 살펴보자. 예제 살펴보기 요소의 영역을 눈으로 확인하기 위해 다음과.. Front/CSS 2020. 8. 22.

• 

  [CSS3] CSS 정의와 선택자 및 스타일 적용방법 [CSS3] CSS 정의와 선택자 및 스타일 적용방법 CSS 란? 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어(ex. HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. - 출처[위키백과] CSS 선택자 (Selector) 다음 예제를 바탕으로 자주쓰이는 CSS 선택자를 살펴보자. 1.전체 선택자 *.. Front/CSS 2020. 8. 22.