본문 바로가기
728x90
반응형

CSS127

[CSS] 모든 브라우저에서 같은 결과를 보기위한 reset.css 각 브라우저별 기본 설정값이 다르기때문에 모두 같은 스타일 적용을 위해서 초기화를 해주어야한다. 아래의 사이트에서 선택하여 한가지를 사용하면 된다. http://html5doctor.com/html-5-reset-stylesheet/ HTML5 Reset Stylesheet | HTML5 Doctor We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to.. 2019. 6. 20.
[SCSS] 작성법 14 - SCSS 작성시 사용가능한 내장함수 [CSS/SASS] - [SCSS] 작성법 13 - 연산하는 값 사용하기 - 색상함수 mix(색1, 색2) : 색1과 색2를 섞은 색으로 나타납니다. lighten(색, %) : 색1을 %만큼 밝게 만들어줍니다. darken(색, %) : 색을 %만큼 어둡게 만들어줍니다. saturate(색, %) : 색상의 채도를 % 만큼 올립니다. desaturate(색, %) : 색상의 채도를 % 만큼 올립니다. grayscale(색) : 색상의 회색으로 변환합니다 invert(색) : 색을 반전시킵니다. rgba(색, 알파값) : 알파값(0-1) 투명도 지정 opacify(색,%) , fade-in(색,%) : 색상을 더 불투명하게 만듭니다. transparentize(색,%), fade-out(색,%) : 색상.. 2019. 6. 17.
[SCSS] 작성법 13 - 연산하는 값 사용하기 [CSS/SASS] - [SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기) 보통 css에서 연산하는 값을 사용하기 위해서는 calc()함수를 사용해야합니다. SCSS에서는 연산하는 값을 사용가능합니다. div{ $wid : 100px; width: $wid; height: $wid * 2; font-size: $wid/4 + 3; } 아래와 같이작성후 컴파일 한다면 아래와 같다. div{ width: 100px; height: 200px; font-size: 28px; } [CSS/SASS] - [SASS/SCSS]작성법 1 - 변수 사용하기 [CSS/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기 [CSS/SASS] - [SCS.. 2019. 6. 17.
[SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기) [CSS/SASS] - [SCSS]작성법 11 - 상위선택자 & $w 변수는 .list 안에선언되었기 때문에 {}안에서만 사용가능합니다. 하지만 .list {}안에 중첩되는 선택자들은 하위선택자입니다. 이때 @at-root 를 사용해 중첩밖으로 빼내도록 컴파일 가능합니다. .list{ $w : 100px; li{ width: $w; } @at-root .box{ width: $w; } 컴파일하면 아래와 같습니다. .list li{ width: 100px; } .box{ width: 100px; } .list 안에 중첩되어 선언되었지만, @at-root 를통해 컴파일시 중첩밖으로 벗어납니다. [CSS/SASS] - [SCSS] 작성법 13 - 연산하는 값 사용하기 2019. 6. 17.
728x90
반응형

티스토리툴바