SCSS - npm i scss (뭔가 잘 안된다면 npm i sass도 같이 해보기) - npm start ScssComponent.js import './style/ScssComponent.scss' import './style/style.css' const ScssComponent = () => { return ( Hello, Scss scss is... Scss01 Scss02 Scss03 Scss01 Scss02 Scss03 ) } export default ScssComponent App.js // 사용하지 않는 것은 절대 넣지 말 것 import './App.css'; import ScssComponent from './Component/ScssComponent'; function App()..

* { margin: 0; padding: 0; } li { list-style: none; } @mixin size($width, $height) { width: $width; height: $height; } @mixin test { border: 1px solid black; box-sizing: border-box; background-color: #ccc; } .container { display: flex; @include size(620px, 200px); @include test; .box { @include size(200px, 200px); @include test; &.box02 { margin: 0 10px; } @for $i from 1 through 3 { // for 사용. i..

box01 box02 box03 * { margin: 0; padding: 0; } li { list-style: none; } // 방대한 CSS 양을 줄이기 위해 만든 것이 SCSS임 $color_point: #8869ed; // 전역변수 (지역변수, 전역변수 개념있음.) @mixin size($width, $height) { width: $width; height: $height; } @mixin test { // 스타일을 미리 정해 놓음 (스타일 적용!!) border: 1px solid black; box-sizing: border-box; background-color: #ccc; } @function center($width) { // 계산식은 함수로 만들어준다. @return calc($w..

// 방법1. 변수로 저장 $width: 800px; $height: 300px; // 방법2. @mixin 사용 @mixin size($width, $height) { width: $width; height: $height; } .container { // 방법1. 사용 width: $width; height: $height; // 방법2. 사용 @include size(620px, 300px); }

Hello, Scss Scss is... Scss_01 Scss_02 Scss_03 * { margin: 0; padding: 0; } li { list-style: none; } .container { width: 500px; height: 300px; background-color: #ccc; margin: 0 auto; > h1 { // .container 안에 > h1을 넣어줌 color: blue; } ul { // 자식 사용법 -> 안에 넣어줌 > h1 { font-size: 20px; } li { width: 100px; height: 50px; border: 1px solid black; text-align: center; line-height: 50px; &:nth-child(3) { /..

* tiny

3rem font-size 2rem font-size 1rem font-size 16px font-size 3rem font-size 3rem font-size 3rem font-size

3em font-size 2em font-size 1em font-size 16px font-size 3em font-size 3em font-size 3em font-size

box01 box02 box03 box04

box01 box02 box03 box04

header contents lnb01 lnb02 lnb03 lnb04 cs_center footer

login

box01 box02 box03 box04 box05 box06 box07 box08 box09 box10

box01 box02 box03 box04 box05 box06 box07 box08 box09 box10

box01 box02 box03 box04 box05 box06 box07 box08 box09 box10

ham header lnb01 lnb02 lnb03 lnb04 lnb05 lnb01 lnb02 lnb03 lnb04 lnb05 visual_main event01 event02 notice01 notice02 notice03 notice04 copyright

full-page-screen full-page-screen box01 box02 header lnb01 lnb02 lnb03 lnb04 lnb05 visual_main event01 event02 notice01 notice02 notice03 notice04

color height move total bg_img mouse_on mouse_on 뒤집기 box09

Header menu01 menu02 menu03 menu04 menu05 menu_box contents wing_banner Top

color height

연합뉴스 > 한은 총재 "통화스와프 관련 미국 연준과 정보 교환"(종합) 지붕 뚫은 '킹달러'에 아시아 통화·증시 '휘청' MBC, 尹 비속어 보도 정언유착 의혹에 "SNS에 먼저 영상 퍼져" 日 무비자 개인 여행, 3차 접종 또는 72시간 내 음성 증명 필요 대우조선, 한화에 팔린다…2조원 유상증자 방식 한은 총재 "통화스와프 관련 미국 연준과 정보 교환"(종합) 뉴스홈 · 연예 스포츠 경제

box01 box03

sheet01 sheet02 sheet03 sheet04 sheet05

Web Mobile Game Simulation Data Rint Development HTML5 + CSS3 Basic HTML5 CSS3 JavaScript jQuery Node.js Main Article Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five cent..

header contents aside footer

header footer