본문 바로가기

TIL LIST/HTML, CSS

(13)
[HTML, CSS] border 속성을 사용하지 않은 border 만들기 border 속성을 이용해 테두리를 만들면 컨테이너마다 동일한 값이 적용된다. 그런데 컨테이너가 서로 인접한 경우 border 굵기가 달라지는 불상사가 생긴다. DIV1 DIV2 그럼 border-left, right, top, bottom 속성을 이용해 일일히 값을 줄 수 있지 않을까? DIV1 DIV2 물론 간단한 구조라면 이 방법이 편하겠지만 복잡한 구조를 지닌 레이아웃이라면? 인접한 선의 위치를 하나하나 계산해서 border를 삭제하는 작업이 상당히 비효율적이라는 생각이 들것이다. 결과물 위 결과물에서 border 속성은 일절 사용하지 않았다. 그렇다면 저 주황색 테두리는 뭘까? header의 구조는 아래와 같다. Best Curry in Seoul and Great Value! If you a..
[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 ..
[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..