CSS
-
BootstrapCSS/BootStrap 2021. 6. 29. 00:45
Bootstrap 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 출저 - 위키백과 https://ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC) CDN 을 통한 Bootstrap 적용 NPM 을 통한 Bootstrap 적용 #npm init..
-
SCSS 문법 알아보기 2CSS/SCSS 2021. 6. 27. 21:31
반복문 /* SCSS */ /* -js- for (let i = 0; i < 10; i += 1) { console.log(`loop-${i}`) } */ // 1~10까지 반복 = 10번 반복 @for $i from 1 through 10 { // #{변수} - 문자 보간 .box:nth-child(#{$i}) { width: 100px * $i; } } /* CSS */ .box:nth-child(1) { width: 100px; } .box:nth-child(2) { width: 200px; } .box:nth-child(3) { width: 300px; } .box:nth-child(4) { width: 400px; } .box:nth-child(5) { width: 500px; } .box:nt..
-
SCSS 문법 알아보기 1CSS/SCSS 2021. 6. 26. 12:42
주석 1. /* 내용 */ - 여러 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타남 2. // - 한 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타나지 않음 중첩 /* SCSS */ .container { ul { li { font-size: 40px; .name { color: royalblue; } .age { color: orange; } } } } /* CSS */ .container ul li { font-size: 40px; } .container ul li .name { color: royalblue; } .container ul li .age { color: orange; } 상위(부모) 선택자 참조 /* SCSS */ // & - 상위 선택자 참..
-
SCSSCSS/SCSS 2021. 6. 26. 11:46
SCSS (Sass) CSS 전처리기 (Pre-Processor) 중 하나이며, 웹에서 동작 가능한 표준의 CSS로 컴파일해서 동작 CSS와 비교했을때 - CSS보다 심플한 표기법으로 CSS를 구조화하여 표현이 가능하다 - 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다 - 표준 CSS보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다 SCSS 설치 NPM을 통해서 설치 1. 터미널에서 npm init -y 2. npm i -D parcel-bundler (parcel-bundler 설치) 3. npm i install --save-dev node-sass
-
CSS 속성 알아보기 (변환)CSS/CSS 2021. 4. 29. 14:58
transform transform: 변환함수1 변환함수2 변환함수3 .....; transform: 원근법 이동 크기 회전 기울임; 요소의 변환 효과를 지정하는 속성 2D 변환 함수 /* 단위 px */ translate(x, y) /* 이동(x축, y축) */ translateX(x) /* 이동(x축) */ translateY(y) /* 이동(y축) */ /* 단위 없음(배수) */ scale(x, y) /* 크기(x축, y축) */ scale(배수) /* 크기(x축, y축) */ /* 단위 deg */ rotate(degree) /* 회전(각도) */ skewX(x) /* 기울임(x축) */ skewY(y) /* 기울임(y축 */ 3D 변환 함수 /* 단위 deg */ rotateX(x) /* 회전..
-
CSS 속성 알아보기 (전환)CSS/CSS 2021. 4. 28. 17:18
transition transition: 속성명 지속시간 타이밍함수 대기시간; transition: width .5s; /* 속성명 지속시간 */ transition: width .5s, background-color 2s; /* 속성명 지속시간 2개 */ transition: 1s .5s; /* 지속시간 대기시간 */ 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 속성명(transition-property) 지속시간(transition-duration) - 단축형으로 작성할 때 필수 포함 속성! 타이밍함수(transition-timing-function) 대기시간(transition-delay) transition-property 전환 효과를 사용할 속성 이름을 지정 기본값(all) - 모든 속성..
-
CSS 속성 알아보기 (정렬)CSS/CSS 2021. 4. 28. 10:00
Flex Container 와 Flex Items 개념 Flex Container - display: flex가 들어있는 요소 Flex Items - Flex Container의 자식 요소 Flex Container - 부모 요소에 작성 display: flex; display: flex; display: inline-flex; /* display: 값 - 요소의 화면 출력(보여짐) 특성을 지정하는 속성 */ Flex Container의 화면 출력 특성을 지정하는 속성 flex - 블록 요소와 같이 Flex Container 정의 inline-flex - 인라인 요소와 같이 Flex Container 정의 flex-direction flex-direction: 값; flex-direction: row; ..
-
CSS 속성 알아보기 (배치)CSS/CSS 2021. 4. 28. 01:07
position position: 값; position: static; position: relative; position: absolute; position: fixed; position: sticky; /* 스크롤 영역 기준 */ 요소의 위치 지정 기준을 지정하는 속성 기본값(static) - 기준 없음 relative - 요소 자신을 기준 absolute - 위치 상 부모 요소를 기준 fixed - 뷰포트(브라우저)를 기준 position 속성의 값으로 absolute, fixed 가 지정된 요소는, display 속성이 block으로 변경됨 top, bottom, left, right /* position과 같이 사용하는 CSS 속성, 음수도 사용 가능하다 */ top: 값; bottom: 값; ..