Study/CSS (11) 썸네일형 리스트형 Libraries Reset CSS a { /* inherit means having parent's color*/ color: inherit; text-decoration: none; } button:focus, button:active, input:focus, input:active, textarea:focus, textarea:active { box-shadow: none; outline:none; } ul, ol, li { list-style-type: none; padding-left: 0; margin-left: 0; } Modal .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20; background-col.. Selectors CSS의 문법은 크게 두 부분으로 나누어 볼 수 있는데, Selector와 Declaration(선언)이다. selector에서는 스타일링을 할 요소를 선택하고 선언부에서는 그 요소에 적용할 스타일링을 구체적으로 작성한다. 지금까지는 선언부에서 사용되는 속성들과 그 값들에 대해 알아보았다. 이제부터는 우리가 스타일링 하고싶은 요소를 선택, 지정하는 문법에 대해 알아보자. selector { property: value; } Type, Class, Id type | html 태그를 직접 선택 p { background-color: #0066ff; } class | html 태그에 지정된 클래스를 이용해서 요소를 선택 동일한 클래스를 가지고 있는 모든 요소에 같은 스타일링을 할 때 유용하게 사용 하나의 요소.. etc | box-shadow, overflow, transform, visibility Box Shadow box-shadow | 요소에 그림자 효과를 주는 속성, 아래의 다섯가지 속성값을 적용 h-offset | 그림자의 x축 방향(+, -) 길이 v-offset | 그림자의 y축 방향(+, -) 길이 blur px단위 0에 가까워지면 선명해 짐 spread | shadow size 보통 0으로 지정 color | shadow color 주로 rgba()를 이용해서 투명도를 지정 +) 어떻게 사용하느냐에 따라 아래와 같이 다양한 디자인을 구현할 수 있다. neumorphism generator 사이트 Overflow overflow | width와 height을 갖는 요소의 컨텐츠나 자식요소가, 그 요소의 사이즈를 벗어났을 때의 처리 방법을 설정할 수 있다. 다음과 같은 값을 갖는다. v.. Background background와 관련된 속성 background-color | 요소의 배경 색 지정 기본값 | rgba(0, 0, 0, 0) hex rgb rgba 140 named color background-image | 요소의 배경 이미지 지정 무료 이미지 사이트 | unsplash html의 src처럼, url()을 반드시 사용해 주어야 한다 background-repeat | backgound-image를 반복해서 출력 repeat(기본값), no-repeat background-size | backgound-size를 지정 contain | 요소의 크기에 맞춰서, 배경에 이미지 전체가 포함되도록(contain) 한다 cover | 요소의 크기에 맞춰서, 배경에 이미지를 잘라 넣는다 자체적으로 이미지 사.. Typography & SR only Typography typography란 활자를 읽기 쉬울 뿐만 아니라 보기 좋게 표기하기 위한 기술과 예술을 말한다. html에서 활자란 텍스트로 된 정보를 가리킨다. Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces(design), point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space b.. Float & Pseudo Element Float 먼저 float은 "떠다닌다"는 의미로, 이 속성을 적용한 요소는 부모 요소로 부터 floating 된다. 만약 float:left 라고 적용했다면, 부모 요소로 부터 완전히 벗어난 뒤, 해당 요소를 가능한 범위에서 가장 왼쪽에 배치한다. 이를 이용하면 여러 block 요소들을 한 줄에 가로로 배치할 수 있다. 하지만 layout을 완전히 망가뜨리기 때문에 지금은 잘 사용되지 않고, 오래 전에 작성된 코드를 유지 보수하기 위해 배운다. float 속성을 적용하면 생기는 일 부모 요소로 부터 floating된 자식 요소는 더이상 자식 요소로 취급 되지 않기 때문에, 남은 형제 요소들이 빈 자리를 채우게 된다. block 요소의 경우, height은 따로 지정하지 않으면, 자식 요소들의 heigh.. Responsive Design CSS Units CSS 문법은 크게 selector, property, value 세 가지로 나누어져 있다. value 중에서도 단위를 가지고 있는 값들이 있는데, 이 단위의 종류도 다양하다. Absolute unit px | pixels, 모니터 위의 가장 작은 화면 단위 고정된 값이기 때문에, 컨텐츠가 담겨있는 컨테이너의 크기가 늘어나거나 줄어들어도, 전혀 반응하지 않는다. 사용자가 브라우저에서 지정하는 폰트 사이즈에 반응하지 않는다(Cascading rule) pt | points Relative unit | Content is water 🥛 % 어떤 기준에 대해서 상대적으로 계산되는 값 어떤 속성의 값이냐에 따라 부모 요소 또는 자기 자신을 기준으로 한다. 예를 들어 어떤 요소의 width: 5.. Transition & Animation Transition | css 속성 값의 전환이 일어날 때 Transition의 속성값 transition은 우리가 요소의 모습을 변형할 때 이 변화의 속도와 방법을 조절해서 애니메이션을 더 부드럽게 만들어주는 속성이다. 다음의 네 가지를 속성 값으로 가질 수 있다. property | 변화가 일어날 css 속성 각각의 속성에 transition을 따로 지정하고 싶을 때에는 다음과 같이 코드를 작성 .like-button { transition: background-color 200ms ease-in 100ms, font-size 200ms ease-in-out; } duration | 변화의 지속 시간, 200~250ms를 가장 많이 사용 ms, s [timing-function] | 변화의 속도, 생.. 이전 1 2 다음
