본문 바로가기
  • purple-whale

전체 글33

@media : 반응형 사이트 설정하기(1600px 이하) @media를 사용하면 화면 크기에따라 반응하는 사이트를 만들 수 있다 예)화면이 1599px 이하일 경우, 배경색을 blue, 글자색을 whith 적용 화면이 1280px 이하일 경우, 배경색을 greenyellow, 글자색을 whith 적용 //width≤1599px @media screen and (max-width:1599px){ body { background: rgb(0, 0, 255); color: rgb(255, 255, 255); } } //width≤1280px @media screen and (max-width:1280px){ body { background: rgb(173, 255, 47); color: rgb(255, 255, 255); } } 기본값을 하나씩 변경하는 느낌으로 코.. 2021. 1. 25.
카드형 레이아웃 만들기 - PC버전 가로 5, 세로 4의 카드형 레이아웃 : alticle을 만든 후 가로 20%, 높이 25%를 적용하여 5X4 스타일의 레이아웃을 만들어줍니다. $b : #000; .container { height: calc(100vh - 50px); background: rgb(238, 238, 238); article { width: 20%; height: 25%; float: left; overflow: hidden; background: $b; &:nth-child(1) { background: rgba($b, 0.1); } &:nth-child(2) { background: rgba($b, 0.15); } &:nth-child(3) { background: rgba($b, 0.2); } &:nth-child(.. 2021. 1. 25.
SCSS - calc() : 너비, 높이 연산으로 구하기 calc()를 사용하여 요소의 높이를 계산합니다. .container { height: calc(100vh - 50px); } calc(값1'한칸띄움'-'한칸띄움'값2) 반드시 한칸씩 띄워야지 적용됩니다!! 2021. 1. 25.
Bootstrap - container (컨테이너) Fixed Container 고정 컨테이너 .container : 반응형 고정 너비 컨테이너를 제공 너비(max-width)가 화면의 크기에 따라서 바뀝니다. 매우작음 2021. 1. 23.
Bootstrap link 하기 MaxCDN css는 에 안에 넣어줍니다. script는 안 또는 밑에 넣어줄 수 있습니다. bootstrap의 css 파일은 나의 css 파일보다 윗쪽에 넣어줍니다. (위에서 부터 순서대로 읽어오기 때문에) 파일 다운받은 후 링크 시켜 사용할 수 있습니다. getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 2021. 1. 23.
SCSS 주석 넣기 // 주석은 SCSS파일에서만 표기되고 /**/ 주석은 CSS, SCSS 파일 모두에 표기됩니다. 2021. 1. 22.
SCSS 연산자 scss에서는 연산이 가능합니다. ( +, -, *, / , % ) h1의 가로 값은 변수wrapW에서 3을 나눈 값으로 넣어주고 #gnb의 가로 값은 변수wrapW에서 2을 나눈 값으로 넣어주고 header { height: 200px; background: $green; display: flex; justify-content: space-between; h1 { width: $wrapW/3; } #gnb { width: $wrapW/2; height: 100px; background: $tomato; li { float: left; } a { display: block; &:hover { color: $tomato; } } } } 2021. 1. 22.
SCSS - @import 하기 css안에 다른 css 불러오기 : @import url(주소); @import url(../reset.css); scss에서 css 불러오기 : @import url(주소); @import url(../css/reset.css); @import url(../css/main.css); scss에서 scss불러오기 : @import '파일명'; *언더바는 입력하지 않음 @import 'contents'; ※ scss파일 이름 앞에 _(언더바)를 넣어주면 css폴더에 해당 파일이 추가되지 않습니다. ※ css파일은 지워도 다시 생성되지만, reset.css파일은 생성되지 않으니 삭제하지 마세요. _(언더바)를 넣어서 css가 생성되지 않은 scss 파일은 comm.scss 파일에서 불러와야 적용이 됩니다. .. 2021. 1. 22.
SCSS : @mixin - @include 사용하기 @mixin 지시문을 사용하여 웹사이트 전체에서 반복적으로 사용하는 css코드를 만들 수 있습니다. @include 지시문으로 @mixin을 적용 시켜 줍니다. _mixin.scss 파일을 만든후, @mixin 이름 {명령문} 을 정의합니다. @import 'mixin'; 을 상단에 넣어 파일을 링크시킨 후, 적용해줄 부분에 @include 파일명; 을 작성합니다. 자주 사용하는 @mixin //가로 가운데 정렬 @mixin posX { position: absolute;left: 50%;transform: translateX(-50%); } //세로 중앙 정렬 @mixin posY { position: absolute;top: 50%;transform: translateY(-50%); } //가로 세로.. 2021. 1. 22.
SCSS 작성 하기 형제 선택하기 : name { &형제name {명령문} } .sec-g { &.sec-sns{ h2 { font-size: 30px; color:$green; } } 마우스 오버 했을때 효과 넣기 : name {&:hover {명령문}} a { display: block; &:hover { color: #dddddd; } } 자신의 명령어는 중괄호안에 바로 작성, 붙어있는 명령어는 중괄호안에 '&'을 앞에 써준후 작성 가상클래스 넣기 : 텍스트 하단에 밑줄을 추가하는 등의 경우 가상클래스로 처리 가능 name { &::가상클래스name {명령어} } h2 { font-size: 20px; font-weight: bold; text-align: center; padding-bottom: 5px; &::af.. 2021. 1. 22.
SCSS 변수 SCSS 변수 SCSS를 사용하면 다음과 같은 변수에 정보를 저장할 수 있습니다. strings numbers colors booleans lists nulls SCSS는 $ 기호와 이름을 사용하여 변수를 선언합니다. $variablename: value; 다음 예제에서는 myFont, myColor, myFontSize 및 myWidth라는 4 개의 변수를 선언합니다. 변수를 선언 한 후에는 원하는 곳에서 변수를 사용할 수 있습니다. $myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor;.. 2021. 1. 21.
SCSS란? 선행 지식 : HTML, CSS SCSS를 사용하면 변수, 중첩 규칙, 믹스 인, 가져 오기, 상속, 내장 함수 및 기타 항목과 같이 CSS에 없는 기능을 사용할 수 있습니다. 변수 사용이 가능하기 때문에 색상 등을 변수로 지정하여 사용하면 색상값을 변경할 경우, 변수 부분의 값만 변경하면 간단하게 모든 색상 변경이 가능합니다. /* define variables for the primary colors */ $primary_1: #a2b9bc; $primary_2: #b2ad7f; $primary_3: #878f99; /* use the variables */ .main-header { background-color: $primary_1; } .menu-left { background-color: $p.. 2021. 1. 21.
SASS 컴파일 하기 (window) SASS 컴파일을 위해 node-sass가 필요하고 node-sass를 설치하려면 node.js가 있어야합니다. 1. node.js 설치하기 '안정적, 신뢰도 높음'을 설치해주세요. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org '안정적, 신뢰도 높음'을 설치해주세요'안정적, 신뢰도 높음'을 설치해주세요 설치후 '윈도우' + 'S'를 눌러 Node.js command prompt 를 검색하여 열어주세요. 아래 명령어를 입력하여 node.js와 npm 설치를 확인합니다. (버전 정보가 나와야 잘 설치된 것) node -v npm -v npm list.. 2021. 1. 21.