3D Web Art

한 라인당 세개씩 나오는 갤러리 리스트가 있다고 가정해 보자.css 의 display 는 flex 로 구성 된다고 가정해 보자.가정된 레이아웃의 이미지는 아래와 같이 나오게 될 것이다. 안에 들어간 이미지와 텍스트는 무시하고 이 레이아웃만 구성하기로 해보자 HTMLdiv class="gallery">    div class="item">    div>    div class="item">    div>    div class="item">    div>    div class="item">    div>    div class="item">    div>    div class="item">    div> div> SCSS.gallery {    display: flex;    flex-wrap: wra..

sass/scss는 프로그래밍처럼 조건에 따라 생성되는 스타일시트가 다르게 컴파일 되도록 설정할 수 있다. 방식 1. 속성의 값에 직접 조건 주기 // 변수 지정$w1: 750px;$w2: 900px; // 공통.section1, .section2 {    height: 50px;}.section1 {    width: $w1;     background-color: if($w1 > 750, orange, red);}.section2 {    width: $w2;    background-color:  if($w2 > 750, orange, red);}위 조건문의 해석 : if(조건식, 참일떄 실행, 거짓일때 실행).section1 의 $w1은 (750 > 750) 이 거짓이므로 background-co..

@content@mixin을 사용하다 보면 동일한 내용을 가져다 쓰게 되어 편리하기도 하지만 가끔 한두가지의 예외 경우로 추가 사항이 생길 때가 있다. div가 있고 그 안에 div 있다고 가정을 해보자바깥쪽 div는 wrap라는 클래스를 가지고 안쪽 div는 box라는 클래스의 div라고 가정해 보자 wrap div의 스타일시트는 .wrap {    position: relative;    width: 100%;    height: 100%;} .box div의 스타일시트는.wrap .box {    position: absolute;    width: 100%;    height: 100%;} 여기서 공통된 부분 보면      width: 100%;    height: 100%; 이 두가지 부분을 m..

scss를 사용하다 보면 반복문을 사용시 사용안할때 보다 빨리 css구문이 작성될 때가 많다.예를 들어 margin-top을 10, 20, 30, 40, 50 .... 으로 여러개를 만들어 놓는다고 가정해 보자클래스명은 mt-10, mt-20 .... 으로 200까지 만든다고 하면 20개의 클래스를 만들어 둘 필요가 생긴다.이떄 반복문을 사용하여 mt- 이후는 자동 증가하도록 하면 작성해야될 구문이 짧아지고 자동으로 20개의 클래스가 만들어 지도록 작성할 수 있게 된다.뿐만 아니라 컬러도 미리 만들어 놓은 컬러 값이 있을 경우 텍스트 컬러는 text-[color] 동일한 색의 배경색인 경우 bg-[color] 로 반복문을 사용하여 자동으로 클래스 구문을 생성 할 수 있다. 참고 function.scss ..

[필수]연관 스크립트 개요Mobile에서 px 를 사용 하지 않는 이유는 여러 이유가 있지만 기본적으로 디자이스 간의 사이즈가 각각 다르기 떄문에 큰 사이즈에서 보는 화면과 작은 사이즈에서 보는 화면이 다르기 때문일 것입니다.px는 고정 사이즈로 디바이스가 커지면 오소의 사이즈는 상대적으로 작아지고 디바이스가 작아지면 요소의 사이즈는 상대적으로 커집니다.rem또한 그냥 사용한다면 기본적으로는 px와 뭐가 다른데? 라고 할 수도 있지만 최상위 html element의 px에 따라 1rem의 사이즈가 변경되는 점을 이용한 테크닉을 알려 드리려 합니다.예를 들어 최상위 요소인 html 요소의 폰트 사이즈가 16픽셀이라고 가정해 봅니다.디바이스 사이즈가 430픽셀(아이폰 프로 맥스 기준)일 떄와 375(아이폰 ..

프로그래밍적으로 설명 하자면 @mixin은 각각의 재활용 함수를 만들어 놓는것이고 @include는 만들어 놓은 @mixin을 사용 하는 것이다.** 하나의 가정 및 약속을 미리 정해 놓는다.예)_icon.scss 에 아이콘을 만들어 보려 한다.1. css폴더와 동일한 레벨에 img폴더가 존재한다2. img폴더에 icon폴더가 있고 아이콘 이미지는 이 폴더안에 들어간다.***** ppr(number) : SCSS Basic grammar - functions(px to rem automatic conversion) 참조_mixin.scss@mixin iconSettings {    display: inline-block;    vertical-align: middle;    background-posit..

** scss/_partial/functions.scss ** 2024.04 rem($px) ** 2024.05- rem함수로 사용시 오류- 원인 : sass/scss 공식 문서상에서 중지함.- 이유는 사용자가 직접 만든 rem() 함수와 기존 rem() 함수가 충돌할 수 있어 중지함- 사용자 정의 함수를 바꿈- ppr($px) - 의미 : pixel per rem 기본 _reset.scss 또는 _common.scss에서 기본 폰트 사이즈 정의html {    font-size: 16px;} scss 파일 내의 단위에 ~~px 대신 ppr함수로 대체함예1) font-size: 16px; ==> font-size: ppr(16); === css컴파일 결과 : font-size: 1rem;예2) font-..

1. scss 는 css의 귀속을 표현 할 때 {} 안에 새로운 스타일을 작성한다. 아래의 html을 꾸며중 스타일시트를 작성해 보자. - html 구조container">                         - scss.container {    width: 1024px;    margin-left: auto;    margin-right: auto;    .box {        width: 100%;        display: flex;        flex-wrap: wrap;        .item {            width: 25%;        }    }} - css compile 결과.container {    width: 1024px;    margin-left: aut..

1. basic tree structurescss ▸ css_name.scss         ▸ _partial ▸ _scss_pieces.scss                          ▸ _scss_pieces.scss 2. css_name.scss inner setting@import "_partial/_scss_pieces.scss";@import "_partial/_scss_pieces.scss";@import "_partial/_scss_pieces.scss";....Description - pieces : 조각, 일부분, 파편 3. Practical Use Examplesscss ▸ css_name.scss         ▸ _partial ▸ _button.scss           ..

1. VS code 에서 Live Sass Compoler 를 설치하고 설정 버튼을 눌러 아래와 같이 세팅 합니다 2. 확장 설정 클릭후 settings.json 편집 클릭  3. 전체 내용 제거 후 아래 세팅 코드 복사하여 붙여 넣기 {    "liveSassCompile.settings.autoprefix": [        "> 1%",        "last 2 versions"    ],    "liveSassCompile.settings.generateMap": false,    "liveSassCompile.settings.formats": [        {             "format": "expanded",            "extensionName": ".css",     ..