본문 바로가기

basic/CSS

 (16)
Simple reset css body,h1, h2, h3, h4, h5, h6,ul, ol, dl, dd,p,fieldset, legend { margin: 0; padding: 0;}body, input, textarea, select, button { font-size: 14px; font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;}ul, ol { list-style: none;}table { border-collapse: collapse;}em { font-style: normal}a { color: inherit; text-decoration: none;}a:hover { text-decoration: underline;}img { vertical-alig..
css blind 요소 숨김처리 기법 .blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
배경색 투명 background-color: transparent;
class 작명법 하위 부류는 __를 통해 표시하고 현재 클래스의 상태 또는 속성에 관련된 클래스를 추가로 넣을 경우 하이픈으로 넣어주자
Material Icon https://material.io/develop/web/getting-started Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io webpack install -> npm install @material/ripple Material Icons from Google Fonts CDN
a태그 클릭했을 때 새창으로 띄우는 법 a태그 안에 target="_blank" 속성을 부여해주면 된다.
Sass Scss npm node-sass .scss 확장자는 기존 css를 작성하는 방식과 유사하다. 반면에 .sass 확장자는 { } ;를 사용하지 않는다. 변수 선언은 $변수 이름; 재사용되는 스타일블록은 @mixin 스타일블록명(변수){ 함수내용 } @include 스타일블록명(값); &.클래스명은 현재 감싸고 있는 스타일 클래스와 같이 쓰였을 때를 가리킴 ex) .box 안에 &.red라면 .box .red 클래스가 같이 쓰인 경우를 말함 @import './경로'; 를 통해 다른 .scss파일을 불러올 수 있다.
overflow-x, overflow-y 스크롤 리액트에서는 overflowX, overflowY scroll, auto, hidden, visible(default) scroll은 스크롤바 항상표시 auto는 분량이 넘쳐서 스크롤 생길 경우에만 표시됨 www.w3schools.com/cssref/css3_pr_overflow-y.asp CSS overflow-y property CSS overflow-y Property Example Show different overflow-y property values: div.ex1 { overflow-y: scroll; } div.ex2 { overflow-y: hidden; } div.ex3 { overflow-y: auto; } div.ex4 { overflow-y: visible; } Try it Yo..

티스토리툴바