728x90 300x250 SMALL Front-end319 SCSS(SASS) CSS 차이 SCSS의 필요성 CSS의 단점 1. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. 2. 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다. .SCSS 사용시에는 위에 언급한 CSS의 단점을 보완할 수 있다. 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다. 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다. 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다. 대신 SCSS(SASS)는 브라우저가 이해할 수 없기 때문에 브라우저가 이해할 수 있는 CSS로 컴파일하는 과정을 거쳐야 하는 번거로운 부분이 있다. .css의 예시 /*.CSS*/ .cont.. 2021. 10. 24. [css] flex-flow, flex-direction, flex-wrap flex-flow는 flex-direction과 flex-wrap 속성의 단축 속성이다. 따라서 flex-flow를 이해하기 위해서는 먼저 flex-direction과 flex-wrap를 이해해야한다. flex-direction flex-direction은 플렉스 컨테이너 내에서 배치할때 방향을 설정하는 것으로 가로 열방향, 행방향, 열방향 역순, 행방향 역순을 지정할 수 있다. css: flex-direction 속성 열방향 배치 flex-direction: row; 열방향 역순 배치 flex-direction: row-reverse; 행방향 배치 flex-direction: column; 행방향 역순 배치 flex-direction: column-reverse; flex-wrap flex-wrap은 .. 2021. 10. 17. box-shadow 속성 그림자 효과 css box-shadow:none | 그림자값 그림자값 = inset 수평거리와 수직거리는 반드시 지정해야 하고 나머지 속성값은 옵션사항이라 필요할 때 사용하면 됩니다. box-shadow 속성 수평거리(필수속성) 그림자의 수평거리(수평으로 얼마나 떨어져 있는지) 양수값은 대상의 오른쪽, 음수값은 요소의 왼쪽 수직거리(필수속성) 세로로 얼마나 떨어져 있는지 양수값은 대상의 아래쪽, 음수값은 대상의 위쪽 그림자 표시 흐림정도 값이 커질수록 그림자가 부드러워지고 생략하면 기본값이 0이 되면서 진한 그림자를 표시한다. 그림자를 표시하면 음수값은 사용할 수 없다. 번짐정도 양수값은 그림자가 모든 방향으로 퍼져나가고 음수값은 모든방향으로 축소되어져서 보인다. 기본값은 0으로 설정된다. 색상 한가지 색상으로 표현할 수 .. 2021. 9. 9. 셀렉트 박스 css 셀렉트 박스 기본 css select { background: url(이미지경로) no-repeat right center; -webkit-appearance: none; /* 네이티브 디자인 안보이게*/ -mox-appearance: none; appearance:none; cursor : pointer; } select::-ms-expand { /* ie 10,11 화살표 숨기기*/ display : none; } 브라우저마다 셀렉트 화살표 모야이 다르게 보이기 때문에 안보이게 하고 bg 이미지를 넣어서 적용합니다. 화살표 이미지는 셀렉트 박스 오른쪽에 붙어서 표출되기 때문에 화살표 아이콘을 만들때 미리 여백을 줘서 만들도록 합니다 위 방법은 브라우저에 따라서 적용이 안될 수 있습니다. 옵션도 css.. 2021. 9. 4. 이전 1 ··· 56 57 58 59 60 61 62 ··· 80 다음 728x90 반응형 LIST