정의
- Cascading Style Sheet
- Cascading: 위에서 아래로 연속해서 떨어지는 느낌
- 세부적으로 정의된 것이 있다면 그것을 쓰고, 없다면 기본적인 것을 쓴다.
- Author Style: 개발자가 지정한 스타일 (최고 우선순위)
- User Style: 사용자의 취항에 맞게 정한 스타일 (중간 우선순위)
- Browser: 기본 스타일 (마지막 우선순위)
-> Cascading - important 키워드: cascading을 끊어냄
- 가능하면 쓰지 않는 것이 좋음
선택자
- HTML의 어떤 태글르 고를지 정하는 것
- * : 모든 태그
- tag: 태그의 이름을 가진 것을 고름
- #id: id를 고름
- .class: class를 고름
- [attribute]: 속성을 고름
/* 어떤 태그를 고를지 명시 */
selector {
/* 꾸미고 싶은 속성값 지정 */
property: value;
}
* {
color: green;
}
/* 아래에 있을수록 우선순위가 높아짐*/
li {
color: blue;
}
li#special{
color: pink;
}
.red {
width: 100px;
height: 100px;
background: yellow;
}
button:hover {
color: red;
background: beige;
}
a[href^="naver.com"] {
color: purple;
}더 자세한 것들
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
CSS selectors
CSS selectors define the elements to which a set of CSS rules apply.
developer.mozilla.org
아래의 게임을 통해 선택자를 익힐 수 있음
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
레이아웃
- display
- block: block level로 바꿈, 한 줄에 하나
- inline-block: 크기가 허용되면 한 줄에 여러개가 보이는데 block 단위로 됨
- inline: inline level로 바꿈
- 컨텐츠 자체만 꾸며주는 것 (block이 없음)
- position - 기본값: static
- static: html에 보이는 순서대로 보이는 것
- relative: 원래 있어야하는 자리에서 옮겨가는 것
- appsolute: 부모 내에서의 절대적 위치
- fixed: 윈도우 내에서의 절대적 위치
- sticky: 원래 있어야하는 자리에 있으면서 스크롤이 내려가거나 올라가도 원래 있던 자리에 그대로 붙어있는 것
caniuse.com 에 가면 브라우저의 호환성과 사람들이 많이 쓰는지 볼 수 있음
간혹 특정 브라우저에서 지원이 되지 않는 것은 postcss를 사용함
Flex Box
- float: 이미지와 텍스트를 어떻게 배치할 지 정하기 위해 나타남 (flex box가 생기면서 다시 원래 용도로 사용됨)
- 이해해야 할 2가지
- 컨테이너와 아이템에 적용할 수 있는 속성값
- 컨테이너에 적용할 수 있는 속성값
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- 아이템에 적용할 수 있는 속성값
- order
- flex-grow
- flex-shrink
- flex
- align-self
- 컨테이너에 적용할 수 있는 속성값
- 중심축과 반대축이 있음
- 수직이 중심축일 경우 수평축이 반대축이 됨 (vice versa)
- 컨테이너와 아이템에 적용할 수 있는 속성값
아래는 flex box를 익힐 수 있는 게임
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
flex box 참고 사이트
css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
그 외
<html>
<!-- 한꺼번에 아이템 만들기 -->
div.container>div.item.item${$}*10
<!-- 위처럼 쓰고 탭키를 누르면 자동으로 10개가 생성됨 -->
원하는 색을 선택하면 어울리는 색 조합을 보여주는 사이트
material.io/resources/color/#!/?view.left=0&view.right=0
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
'Study Log > Software Engineering' 카테고리의 다른 글
| 루비 온 레일즈 api 만들기 (2) (0) | 2021.08.22 |
|---|---|
| Ruby on Rails 공부하기_wsl2 환경 설정하기 (1) (0) | 2021.08.20 |
| HTML 한 페이지에 정리하기 (0) | 2020.09.18 |
| 데이그램 따라하기 - 4. Realm DB (0) | 2020.08.19 |
| 데이그램 따라하기 - 3. 커스텀 리스너 인터페이스 (0) | 2020.08.19 |
댓글