hwlink

고정 헤더 영역

글 제목

메뉴 레이어

hwlink

메뉴 리스트

  • 홈
  • 태그
  • 방명록
  • 분류 전체보기
    • Memo
    • Library
    • Coding
      • Svelte,Sveltekit
      • React
      • JS
      • CSS
      • 알고리즘
      • Error
      • TypeScript
      • WEB
      • Network
    • Git
    • Code
    • 마우스버리기
    • Project
      • Weasly(화장품결제구독서비스)
      • Hines(리빙쇼핑몰)
      • 기업협업
    • book

검색 레이어

hwlink

검색 영역

컨텐츠 검색

Coding/CSS

  • [CSS] aspect-ratio 속성 이용하여 반응형 비율 조정

    2022.05.05 by hwlink

  • [CSS] 상대단위 rem em

    2022.05.02 by hwlink

  • [CSS] Tailwind CSS

    2022.01.16 by hwlink

  • [CSS] background 이미지로 처리된 말풍선, css로 처리 확장성

    2022.01.12 by hwlink

  • [Sass] Compile 파일 관리

    2022.01.02 by hwlink

  • css layout 정리 position inline inline-block block

    2021.11.02 by hwlink

[CSS] aspect-ratio 속성 이용하여 반응형 비율 조정

aspect ratio aspect ratio 속성은 박스, 이미지, 동영상을 정해둔 비율대로 줄이거나 늘릴 수 있어 반응형 디자인에 탁월합니다. aspect ratio 브라우저 접근성 internet explore에선 지원하지 않기 때문에 사용할 시에는 환경을 잘고려해야합니다. aspect-ratio 사용법 width:200px; background:red; aspect-ratio: 16/9; // 16:9비율로 지정 aspect-ratio: 4/3; // 4:3비율로 지정 원하는 비율로 설정해주면 됩니다. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Coding/CSS 2022. 5. 5. 01:23

[CSS] 상대단위 rem em

상대단위 px(약 0.0264cm), pt 같이 고정된 절대단위의 값이 아닌 브라우저가 어떤 기준에 따라 계산한 값 대표적으로 em, rem, %, vw, vh가 해당된다. 본 글에서는 rem, em을 다루겠습니다. rem / em 공통점 em, rem 둘 다 font-size의 속성 값에 비례해서 결정되는 상대단위입니다. ex 1) font-size 16px 0.5em = 16px x 0.5 = 8px 1em = 16px x 1 = 16px 2em = 16px x 2 = 32px ex 2) font-size 20px 0.5rem = 20 px x 0.5 = 10px 1rem = 20 px x 1 = 20px 2rem = 20 px x 2 = 40px em, rem 동일하게 동작합니다. rem / em ..

Coding/CSS 2022. 5. 2. 21:49

[CSS] Tailwind CSS

프리온보딩 참여 과제를 진행하면서 반응형 페이지를 구현하여야 하는데 마크업을 어떤 스타일로 진행해야 할 지 고민 하던 중 이전부터 쓰고 싶던 Tailwind CSS를 적용해보았다. 사용방법은 공식문서를 참고 하는 것이 더욱 좋을 것 같아 정의와 장단점만 기록하려 한다. Tailwind CSS Tailwind CSS는 Utility-First Fundamentals CSS 프레임워크다. 미리 세팅된 유틸리티를 클래스명에 부여만 해주면 빠른 마크업이 가능하다. 기본 CSS로 작업시 코드 ChitChat You have a new message! Tailwind CSS로 작업시 코드 ChitChat You have a new message! 장점 1. 일관된 디자인 색을 예로 들면 같은 값에 같은 명도,채도의..

Coding/CSS 2022. 1. 16. 22:39

[CSS] background 이미지로 처리된 말풍선, css로 처리 확장성

문제점 프로젝트 진행 중 프로필 클릭 시 background-image 말풍선으로 구현된 유저 private 리스트가 나오는 모달이 있었는데, logout 하단여백이 너무 타이트하다고 느껴 리팩토링을 진행하여야겠다고 생각하였다. 1차해결 처음엔 단순하게 width 값을 늘려주어 하단 여백을 늘려야겠다고 생각하여 기존 width:150px >>> width:165px로 조정해주었다. width 조정해주었더니 하단 여백은 해결이 되었다. 근데 만약 리스트가 추가된다면? 백그라운드 이미지를 교체하거나 사이즈를 일일이 조절해줘야하기 때문에 비효율적이라고 생각하였다. 최종해결 리스트가 추가될 때를 생각하면 어떻게 구현해야 할 지 고민하다가 말풍선을 css로 처리한다면 될 것 같다고 생각하여 검색을 해보았더니 말풍..

Coding/CSS 2022. 1. 12. 18:16

[Sass] Compile 파일 관리

Scss 폴더관리 프로젝트 진행 시 개별 scss파일에 _sample.scss 언더바를 붙이면 컴파일이 발생하지 않는다. 그럼 컴파일이 일어나지 않는다면 스타일이 적용이 안되는데 어떡하나? 방법은 main.scss에서 _로 만든 scss파일들을 import 해서 한번에 컴파일 해주어 용량을 가볍게 관리하여 성능에 이점을 줄 수 있다.

Coding/CSS 2022. 1. 2. 22:58

css layout 정리 position inline inline-block block

참고:https://ko.learnlayout.com/position.html 1. position 속성 - relative, absolute, fixed position 프로퍼티에는 다양한 값을 설정할 수 있다. position: relative .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } position: fixed 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. 주로 메인페이지 헤더부분에 많이 사용한다. .fi..

Coding/CSS 2021. 11. 2. 20:46

추가 정보

인기글

최신글

페이징

이전
1
다음
TISTORY
hwlink © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바