::public/HTML & CSS(SCSS)40 참고사항. BEM CSS 작명 규칙 - : 일반적인 작명 __ : ~의 일부분 -- : ~의 상태 display: flex 이유? box-sizing: border-box; ; padding, border 값의 영향을 받지 않고 width, height 값의 크기를 가진다. position: absolute; ; 부모의 위치 값을 기준.(부모의 position 값 확인) position: relative; ; 자신의 위치 값을 기준. position: fixed; ; 현재 보고 있는 브라우저 전체장 기준.(스크롤에도 이동하지 않고 고정) 한번에 제어할 수 있는 형태로 구조를 잡기. 한 단어로 보이기 위해 를 사용한다. 반응형 사이즈를 표현하기. (ex. div>img) div 에 사이즈가 정해져있어야 하고 img에.. 2021. 9. 7. CSS - hover 효과 사이트. https://ianlunn.github.io/Hover/ Hover.css - A collection of CSS3 powered hover effects ianlunn.github.io 2021. 8. 19. SCSS - 내장 함수 내장 함수(Built-in Functions) Sass에서 기본적으로 제공하는 내장 함수. [참고] https://sass-lang.com/documentation/modules * [] 는 선택 가능한 인수. Zero-based-numbering 을 사용하지 않음. - 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞기. lighten($color, $amount) : 더 밝은색을 만들기. darken($color, $amount) : 더 어두운색을 만들기. saturate($color, $amount) : 색상의 채도를 올리기. desaturate($color, $amount) : 색상의 채도를 낮추기. grayscale($color) : 색.. 2021. 8. 3. SCSS - 함수 함수(Functions) 자신의 함수를 정의하여 사용할 수 있음. 함수와 Mixin은 거의 유사하지만 반환되는 내용이 다름. Mixin은 지정한 스타일을 반환하는 반면 함수는 보통 연상된 특정 값을 @return 지시어를 통해 반환됨. 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수의 이름이 충동할 수 있음. 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋음.(ex. red() -> extract-red()) - 조건과 반복(control Directives / Expressions) if(함수) 조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환. @if(지시어) @if 지시어는 조건에 따른 분기 처리가 가능하며 if 문과 유사.. 2021. 8. 2. SCSS - 확장 확장(Extend) 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우. 선택자의 확장 기능을 사용할 수 있음. *확장을 추천하지 않는 이유 - [참고]https://sass-guidelin.es/ko/#extend @extend 는 다음과 같은 문제를 고려해야 함. 1. 내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가? 2. 원치 않는 부작용이 초래될 수도 있는가? 3. 이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가? 결과적으로 확장기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있음. 따라서 확장은 사용을 권장하지 않으며 Mixin 을 대체 기능으로 사용하길 권함. 2021. 8. 2. SCSS - 재활용 재활용(Mixins) 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 기능. 선언하기(@mixin), 포함하기(@include). - 인수(Arguments) Mixin은 함수(Function)처럼 인수(Arguments)를 가질 수 있음. - 인수의 기본값 설정 - 키워드 인수(Keyword Arguments) - 가변 인수(Variable Arguments) 가변인수는 매개변수 뒤에 ...을 붙임. 가변인수를 전달할 값으로 사용하기. - Content 선언된 Mixin에 @content 이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있음. @content 부분에 추가적인 특정 CSS 속성들을 더 넣을 수 있음. 2021. 8. 2. 이전 1 2 3 4 ··· 7 다음
