css emmet
https://docs.emmet.io/cheat-sheet/
box-model
- css에서
box-sizing: border-box;로 두고 하면 padding값이나 border값이 늘어나도 내가 설정한 width와 height가 변화하지 않고 유지된다.
position
- css position은 기본 relative 이다.
- position: absolute
위치를 body가 아니라 부모 요소를 기준으로 잡는다. - position: fixed
스크롤의 위치에 상관없이 고정된 위치에 붙어있는다. 주로 navigation이나 챗봇으로 사용하는 요소에 사용한다. 다만 block 요소처럼 한 공간을 차지하는게 아니라 허공에 띄워져있는 것을 주의할 것. - position: sticky
어느 시점까지는 고정위치에 있다가 특정위치에서 위치를 바꿔 고정되게 하는 것으로 주로 모바일에서 많이 사용한다.
display
html에서 BLOCK 요소와 INLINE 요소가 나뉜다.
이를 세분화한 게 display이다.
-
flex
인라인 요소처럼 한 블록에 붙어서 표현된다. div도 인라인처럼 붙는다. -
inline
모든 div는 블록요소인데 인라인요소로 바꿀 수도 있다. 요소 뒤에 요소. 줄글처럼 표현된다. -
inline-block
div의 경우 블록요소로 표현되다가 inline-block이고 화면에 요소의 사이즈만큼의 공간이 있다면 인라인 요소처럼 요소 뒤에 붙게 된다. -
block
한 칸을 다 잡아먹는 블록 요소 -
none
none는 안보이게 만드는 것이다.
이외의 css
-
font-weight:
300 thin
400 normal
500 medium
700 bold
900 extra bold -
text-align:
left
right
center -
overflow:
auto - 내용이 넘치면 내부 스크롤 생성
hidden - 보여지는 부분만 보인다.
scroll - 내부 스크롤 생성. auto와 비슷하지만 내용이 많던 아니던 스크롤바가 생기지만 auto는 내용이 넘치면 스크롤이 생긴다. -
z-nation:
sign 맥락.
기본속성은 0;
일종의 레이어 같은 역할.
만약 z-index를 주었는데 변화가 없다면 positon:relative를 적어주면 되긴한다.
제일 좋은 건 곂치거나 상하위치를 고려해 미리 순서대로 작성하는 것이다.
선택자(selector)
기본선택자
*전체,div요소,.클래스,#아이디,[attr]속성값에 접근
그룹선택자
,다중으로 여러개 선택이 가능 .box1,.box2{}
.box.border-box{} class가 box이면서 border-box인 요소
.box{&.border-box{}}
결합자
>자식결합자~일반형제결합자+인접형제결합자
가상클래스선택자(의사 클래스)
-
-
버튼에 disabled 속성이 없을 때(not) hover하면 red를 표현해라.
-
-
checked
html
<input type="checkbox" id="check1">
<label for="check1">checking</label>
css
input[type="checkbox"] :checked + label { color: blue; }
가상요소선택자
-
-
::before ::after
html
<span>왈랄롤</span>
css
span {
&::before {
content: '('
}
&::after {
content: ')'
}
}
출력값
(왈랄롤)-> html에 ( )를 넣어주지 않았지만 css before after를 이용해 ( )를 표현해주었다.
css로 list-style: none;를 하면 ul,ol의 순서를 표현하는 점이 사라진다.
단축속성-여백
margin - top/ right/ bottom/ left;
margin : top right bottom left;
padding - top/ right/ bottom/ left;
padding : top right bottom left;
=> 0 auto 는 블록 요소가 가운데로 위치하게 된다.(단, 블록요소의 정확한 width값이 필요하다.)
단축속성-글꼴
font - style/ weight/ size/ family
line-height
font : style weight size/line-height family;
단축속성-테두리(border)
border - width/ style/ color;
border: width style color;
단축속성-배경
background - color/ image/ repeat/ position;
background : #000 url(images/bg.gif) no-repeat top right;
