3D Web Art

@media (orientation: 방향) {    선택자 {        속성: 속성값;    }}orientation은 사용자의 디바이스 또는 브라우저의 방향을 의미하며 다음의 두 가지 값으로 나타낼 수 있다.portrait: 세로 방향landscape: 가로 방향 ✓ PC의 경우 브라우저의 가로x세로의 영향을 받는다.✓ 예를 들어 브라우저 창의 사이즈를 조정하여 가로x세로의 크기를 조정해서 보면가로사이즈가 세로사이즈보다 크면 landscape 이 적용 되고세로사이즈가 가로사이즈보다 크면 portrait 이 적용 된다. 사용 예) @media (orientation: portrait) {    .main-container {        background-color: orange;    }} @m..

한 라인당 세개씩 나오는 갤러리 리스트가 있다고 가정해 보자.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..

1. jQuery 인클루드jQuery를 사용하기 위해서는 가장 우선적으로 jQuery 라이브러리가 인클루드 되어야 한다.인클루드 방법은 2가지의 방법이 있다. 1) 아래 링크에서 원하는 버전의 jQuery를 직접 다운로드 받아 인클루드 하는 방법https://jquery.com/ 2) 기본 jQuery 1.11.1 버전에 직접 접속하는 방법(테스트 작성시 많이 사용되는 방법) 2. jQuery 준비 선언 - document ready1) 가장 많이 사용  되는 선언 방법$(document).ready(function() { ... code ... });2) 약식 선언 방법$(functiom() { ... code ... })3) 정식 선언식jQuery(document).ready(function() { ..

@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 ..

아래 정리가 잘 된 문서이다.참고하면 도움이 될듯하다.https://hhyemi.github.io/2021/06/09/arrow.html 일반함수와 화살표 함수를 사용시 이벤트리스너에서 차이가 확연히 날것이다.document.querySelector('selector').addEventLisetner("click", function(e) {    console.log(this);    // 일반함수에서 this는 셀렉터 자신을 반환한다.})결과 : 셀렉터의 html dom document.querySelector('selector').addEventLisetner("click",(e) => {    console.log(this);    // 화살표함수에서 this는 브라우저 window를 반환한다.})..

document.addEventListener("DOMContentLoaded", () => {    /* Code :    이 안에 코드가 작성이 되지 않을떄 떄로는 오류가 발생하기도 한다.    이유는 문서가 완전히 로드 되기 전에 스크립트가 실행게 되면    스크립트기 실행 되는 시점이 html dom이 그려지기 전이기 떄문에    해당 셀렉터에 해당 되는 html dom은 존재하지 않은 상태로 스크립트가 실행되어 오류가 발생되는 이슈가 가장 많이 발생되는 오류 원인이다.    다른 이유도 존재할 수 있음.    */});

[필수]연관문서jQuery Codeconst fontResponsive = () => {            let bodyFontSize = 16;            let maxWidth = 750;            let calc = 0;            let currentWidth = $(window).width();            //alert(11)            if (currentWidth > maxWidth) {                $('html').css({                    fontSize: bodyFontSize                })            } else {                console.log(22)   ..

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