본문 바로가기

TIL LIST

(39)
[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이기 때문에 해당 규칙을 지켜 작성하면 이런식으로도 감..
[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..
[SCSS] 설치 SCSS를 적용할 프로젝트 파일을 열고 cmd 터미널에 다음과 같이 입력한다. npx sass 그리고 packages 이름이 sass 인 것을 확인하고 y를 누른다면 설치가 완료된다. 컴파일 1. 본인이 작업할 scss 파일과 css 파일 두 개를 생성한다. 나는 style.css와 style.scss를 생성했다. 2. html 파일을 생성하고 css 파일을 stylesheet link 한다. hello, wolrd 3. cmd 터미널에 아래와 같이 입력하면 watch 명령어로 인해 scss 파일이 css 파일에 컴파일 되며 자동으로 css 형태로 소스를 업데이트 시켜준다. npx sass --watch 경로/style.scss 경로/style.css 4. scss 파일에 코딩하면 완료! body { b..
[chrome app 코딩 챌린지] 5. 위치 정보 가져오기(API) API는 직접 구현하기 힘든 서비스를 구현할 수 있게 해주는 프로그래밍 인터페이스다. 홈페이지에 카카오맵 또는 구글맵을 넣어 실시간 위치를 보여줄 수 있고, 카카오톡 API를 통해 메세지를 보낼 수도, 페이스북이나 인스타그램 API를 통해 게시글을 공유할 수도 있다. 위치, 소셜 뿐만 아니라 API는 다양한 방면에서 쓰이고 있다. mdn Web API 모음: https://developer.mozilla.org/ko/docs/Web/API 여기에서는 위치 API인 Geolocation API로 사용자의 위치 정보를 받아오고, 그 좌표를 open Weather API 에 입력해 현재 날씨 데이터를 실시간으로 업데이트 해준다. 코드 리뷰 function onGeoSuccess(position) { const..