본문 바로가기

분류 전체보기

(59)
[Udemy] 가격표 페이지 만들기 https://smthousand.github.io/2022_practice/03_pricing-table/ 미디어 쿼리를 이용해 모바일, PC 디바이스에서 다르게 출력되도록 작업했다. 원래 PC 먼저 작업하고 모바일을 작업하는 편인데, 현업에선 모바일 디바이스 먼저 작업하는 일이 잦아 순서를 바꿔보았다. 모바일 디바이스 먼저 작업하게 되면 미디어 쿼리는 어떻게 작업해야 할까? 1분 코딩님의 게시글에 따르면 min-width를 사용해야 한다고 한다. min-width 는 최소 px 이상인 경우에 적용되는 코드다, 즉 min-width: 1600px 이라면 1600px 이상일 경우 적용된다는 소리다. @media (min-width: 1600px) { .panel { width: 60vw; } } 모바일 ..
[HTML, CSS] 반응형 이미지(picture, object-fit) picture 은 HTML5에서 추가된 요소 중 하나다. 미디어 쿼리를 이용해서 다양한 디스플레이에서 특정 이미지를 변경할 수 있기 때문에 반응형 웹페이지에서 쓰일 수 있다. 여러개의 source 요소와 하나의 img 요소를 사용할 수 있다. 위 소스에서 images 폴더 안엔 총 3장의 png가 있고 source 속성에서 노출될 디바이스 크기를 미디어 쿼리로 선언하고 srcset으로 출력될 이미지 경로를 작성해줬다. 참고로 source는 개수가 여러개 추가될 수 있지만 Img는 한장만 추가할 수 있다. 단순히 반응형 이미지 뿐만 아니라 파일 형식 지원이 한정적인 avif, webp 확장자는 대체 이미지를 제공할 수도 있다. webp 확장자 이미지를 png로 변경하는 법: https://m.post.na..
[CSS] calc() 사칙연산으로 속성값 정하는 방법 calc()는 calculator의 줄임말로 알 수 있듯 값을 사칙연산으로 계산해 정할 수 있는 css 속성이다. JavaScript의 함수와 비슷한 성격을 가졌고, 연산자인 +(덧셈), -(뺄셈), *(곱셉), /(나눗셈)으로 계산할 수 있다. JavaScript를 이용해 값을 수정할 수도 있지만 css로도 간단하게 처리할 수 있는 구문은 최대한 css와 html선에서 해결하는 게 좋다. mdn : https://developer.mozilla.org/ko/docs/Web/CSS/calc 코드리뷰 #53 .hero { width: 100%; position: relative; .ranking { position: absolute; top: 30px; left: -10px; &::after { conte..
[SCSS] mixin을 이용한 폰트 적용 방법 @mixin font-face($name, $path, $weight: null, $style: null, $exts: otf ttf) { $src: null; $formats: ( otf: 'opentype', ttf: 'truetype', ); @each $ext in $exts { $format: map-get($formats, $ext); $src: append($src, url(quote($path)) format(quote($format)), comma); } @font-face { font-family: quote($name); font-style: $style; font-weight: $weight; src: $src; } } @include font-face("Kano", "../font..
[HTML, CSS] 글자 백그라운드에 svg 파일을 삽입하는 법 결과물 best horror scenes .heading h1 span { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath style='fill:%23e7473c;' d='M279.6 160.4C282.4 160.1 285.2 160 288 160C341 ..
[VSCODE] 태그를 감싸는 감싸기(wrap) Emmet 퍼블리싱을 하다보면 태그 중간에 , , , , 등 특정 태그를 감싸야하는 경우가 있다. 처음부터 태그를 입력하면 좋겠지만 대부분 내용을 자료에서 복사해서 사용하기 때문에 나중에 감싸는 편이 효율이 좋다. 처음엔 일일히 타자로 작성했었으나 wrap emmet이 있다는 걸 알곤 해당 기능을 사용하고 있다. 사용법 1. 위 HTML에서 'everything'과 'random'에 태그를 추가하고 싶기 때문에 우선 해당 단어를 선택한다. (alt를 눌러 두 단어 동시 선택도 가능하다) 2. 그리고 F1을 눌러 나오는 검색창에 wrap이라고 검색하면 emmet 항목이 뜨는데 클릭, 혹은 엔터를 눌러 활성화 시켜준다. 3. a를 입력해주면 완료. 참고로 emmet이기 때문에 해당 규칙을 지켜 작성하면 이런식으로도 감..
2022년 웹디자인 분석 (07.03) Black Big Bold Typography 크고, 진한 타이포그래피는 여전히 강세인 듯 하다. 정형적인 레이아웃(헤더>네비-비쥬얼-컨텐츠)에서 벗어나 굉장히 파격적이고 어떻게 작동하는 지 어려울 정도로 실험적인 웹사이트가 등장하고 있다. https://www.caroselling.it/en/ https://eag.co.kr/ 국내 홈페이지도 랜딩 형식이 점점 많아지고 서브페이지는 최대한 간략화된다. 색상도 화이트(#fff)를 채용해 대비감을 확 늘리는 듯? 보수적인 건설이나 제작 기업에도 조금씩 채용되는 것을 보면 조만간 대세가 될 것 같다. 3D Modeling 좌측은 2009년 발매된 Apple의 iPhone 3GS의 아이콘 디자인이고 우측은 2020년에 업데이트 된 MAC OS Big Su..
[CSS] 미디어 쿼리 Mobile (Smartphone) max-width: 480px Low Resolution Tablets and ipads max-width: 767px Tablets Ipads portrait mode max-width:1024px Desktops max-width:1280px Huge size (Larger screen) max-width: 1281px and greater /* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1281px) { /* CSS */ } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */ @m..