Transition이란? Transition은 기본적으로, 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법입니다. 변화는 이동이 될 수도 있고, 크기의 변화일 수 있고, 색깔의 변화 등 무엇이든지 될 수 있습니다. 변화가 일어나려면 기본적으로 변화하기 "전"과 "후" 그리고, "언제" 변화할지가 있어야 합니다. 이때 "언제" 변화할지를 지정하는 것이 상태(State)입니다. 예를 들어, 마우스가 올라가 있는 "상태"(:hover) 일 때 변화하도록 Transition을 지정할 수 있습니다. 상태(State)에 대해선 아래 링크에서 자세히 설명하였습니다. [CSS] States (active, focus, hover, visited, focus-within) 위 그림처럼, transiti..
속성 선택자란? 모든 HTML은 태그로 이루어져 있습니다. 이 HTML을 꾸며주는 것이 CSS의 역할입니다. CSS는 HTML의 태그를 선택해서 꾸며줍니다. 이때, HTML의 속성과 속성값을 이용해서 HTML 태그를 선택하는 것이 속성선택자입니다. 속성 선택자를 사용하면 속성(attribute)을 통해 어떤 것이든 선택할 수 있게 해줍니다. 아래 예시를 통해 속성 선택자를 알아보겠습니다. 기초 사용법(예시) CSS부분의 input[type="text"] 부분이 속성 선택자입니다. See the Pen attribute_selector_base by netsus (@netsus) on CodePen. input 태그에 type 속성을 주고, 그 값을 text로 한 뒤에, 속성 선택자를 사용하여 배경색(ba..
선택자란? HTML을 구성하는 모든 것은 태그(tag)입니다. HTML 태그들이 정보를 표현하는 역할을 하는 것입니다. 그런데 HTML 태그만 있다면, 그냥 하나의 문서처럼 보일 것입니다. 웹 사이트가 보기 좋고, 예쁜 것은 CSS가 HTML을 꾸며주기 때문입니다. CSS가 HTML을 꾸미기 위해선 태그를 '선택'해야 합니다. 이 때 사용되는 것이 선택자(Selector)입니다. 선택자 종류 3개 기본적인 선택자는 크게 3종류로 태그 선택자, 클래스 선택자, ID 선택자입니다. 태그 선택자(Tag selector) HTML 태그를 선택합니다. ex) HTML의 모든 div 태그에 대해 색깔을 파란색으로 지정합니다. See the Pen zYBrGgJ by netsus (@netsus) on CodePen..
States란? 가상 선택자(Pseudo Selectors)의 상태를 의미합니다. 즉, 선택한 요소가 특정한 조건을 만족하면 가상 선택자로 지정한 상태가 됩니다. 예를 들어 :hover(가상 선택자)는 지정한 요소에 마우스를 가져가면 설정한 상태로 변화합니다. 예시와 함께 알아보겠습니다. States 종류 active: 마우스로 클릭했을 때의 상태. See the Pen states-active by netsus (@netsus) on CodePen. 위 예시를 보면 hello 버튼(button)을 클릭했을 때, 버튼의 색깔이 tomato(주황)색으로 변화하는 것을 볼 수 있습니다. hover: 마우스 커서가 대상 위에 있을 때. See the Pen states-hover by netsus (@nets..
position 이란? position은 보통 레이아웃에 사용되기보단, 위치를 아주 조금 위로, 아주 조금 오른쪽으로 옮기고 싶을 때 사용합니다. position 종류 Position 설명 static 기본값으로, width와 heigth 조절이 안됨 fixed 화면에 고정. 스크롤 변동해도 항상 그 화면의 그자리에 존재 relative 상하좌우로 요소(element)를 약간 움직일 때 사용 absolute 가장 가까운 relatvie 부모를 기준으로 위치 설정 position: static이란? position의 기본값(default)으로, 따로 position을 지정하지 않아도 적용됩니다. top, bottom, left, right를 이용해 위치를 지정할 수 없으며, 그저 왼쪽에서 오른쪽으로, 위에..
가상 선택자(Pseudo selector)란? 보통 선택자는 HTML 태그, Class, Id 등 HTML 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며줍니다. (선택자 개념: [CSS] 선택자(Selectors)와 조합(Combinators)) 하지만, 가상 선택자는 HTML요소를 직접적으로 선택하지 않고, 요소의 상태에 따라 선택하여 꾸며주는 것을 의미합니다. 가상 선택자는 가상 클래스(Pseudo class) 라고도 합니다. 기본적인 형태는 다음과 같습니다. selector:pseudo-selector { property: value; } 예시) HTML div 요소 중, 첫 번째(상태)와 마지막(상태)에 있는 div요소를 초록색으로 바꾸기 See the Pen pseudo-sele..
flexbox란? box를 원하는 아무 곳에 놓을 때 사용하는 기능입니다. 매우 유연하게 사용할 수 있기 때문에 flex라는 이름이 붙여졌습니다. 특징: 1) 자식 element에 지정하지않고, 부모 element에 지정합니다. (부모가 자식을 제어) 2) 부모 element를 flex 컨테이너로 지정해야 합니다. 즉, 부모 element의 CSS를 dixplay: flex;로 지정해야 합니다. 기초 속성 justify-content: 수평(가로)축 위치 조절 속성 (main axis) align-items: 수직(세로) 축 위치 조절 속성. (속성을 변화하여 축 회전이 가능하다.) (cross axis) justify-content (빨간색 박스가 3개 있을 때) flex-start: 기본값(defau..
display 1) inline: width와 height를 가질 수 없다. 2) inline-block: width와 height를 가질수 있고, element가 옆으로 오게한다. 단점: margin, padding을 주지않아도 요소간의 빈 공간이 자동으로 생긴다. 반응형 디자인을 반영하지 않기 때문에, 창크기가 다르면, 요소들이 다르게 보일 수 있다. 3) block: width와 height를 가질 수 있고, element가 아래로 온다.(각 요소옆에 아무것도 안온다.) b c d 결과
