CSS 문법
CSS 주요 속성
핵심: background / border / box-sizing / bottom / display / font / @import / left / height / margin / padding / position / right / text-align / top /
자주쓰임: animation / box-shadow / @charset / color / content / cursor / @keyframes / letter-spacing / line-height / max-height / max-width / @media / min-height / min-width / opacity / outline / overflow / pointer-events / resize / scroll-behavior / table-layout / text-decoration / transform / usesr-select / vertical-align / visibility / white-space / width / word-break / word-wrap / z-index
flex 관련 : align-content / align-items / align-self / flex / flex-basis / flex-direction / flex-flow / flex-forw / flex-shrink / flex-shrink / flex-wrap / jusify-content
grid관련: column-count / column-fill / column-gap / column-rule / column-rule-color / column-rule-style / column-rule-width / column-span / column-width / columns / gap / grid / grid-area / grid-auto-columns / grid-auto-flow / grid-auto-row/ grid-column / grid-column-end / grid-column-gap / grid-column-start / grid-gap / grid-row / grid-row-end / grid-row-gap / grid-row-start / grid-template / grid-tempate-areas / grid-template-columns / grid-template-rows
CSS 표기 팁
일정한 규칙으로 표기하면 중첩되는 스타일로 인해서 적용된 스타일이 망가지거나 유지관리가 힘들어진다.
일정한 표기패턴을 두고 관리하는 것이 좋음
box-sizing: border-box
position: relative|absolute|fixed|sticky
display: flex|block|inline-block|block
margin: 100px
padding: 100px
width: 100px
border: 1px solid #000
background: #fff
font-size: 16px
font-weight: 300(thin)|400(normal)|500(medium)|700(bold)
color: #000
text-align: center|left|right
overflow: auto|scroll|hidden
z-index:1
box-sizing (default: content-box)
box-sizing: border-box = box사이즈를 border까지
box-sizing: content-box = content 영역사이즈까지
크기를 100X100으로 설정하였지만 content-box 기준으로 100X100이기때문에 설정한 값인 border의 너비까지 포함되어 결과적으로는 10px씩 추가되어서 120X120으로 보이게 된다.
따라서 보이는 크기를 유지하기 위해서는 padding/border값을 빼주거나 더하는 계산이 필요할 수 있다.
- bordder-box로 설정한 경우
border+padding값을 포함한 크기 즉, 표현되는 크기가 설정한 100*100로 나타나기 때문에 설정값을 계산하지 않아도 된다.
CSS Emmet
mt10 -> margin-top:10px;
pb20 -> padding-bottom:20px;
w30 -> width: 30px;
h40 -> height: 40%;
bd -> border: 1px solid #000;
bgc -> background-color: #fff;
fsz50 -> font-size: 10px;
fw700 -> font-weight: 700;
c#ddd -> color:#ddd;
z1 -> z-index:1;
참고:
http://www.tcpschool.com/css/css_intro_syntax
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
