본문 바로가기

HTML & CSS

 (36)
[css] 광원효과, glow 효과 css style 참고사이트 https://singun11.tistory.com/111 [TIL] box-shadow로 광원 효과처럼 보이네? 요즘 그냥 Github 페이지로 배포하는데 되게 되게 편해보여서 Github 페이지를 이용해서 여러개를 배포해보고 있었다.. 그러다가 오늘은 css-animation-study라는 레포를 만들고 animation 스킬들을 공부해 singun11.tistory.com box-shadow: 0 0 1px #dee9f19c, 0 0 2px #dee9f19c, 0 0 3px #dee9f19c, 0 0 4px #dee9f19c, 0 0 5px #dee9f19c, 0 0 6px #dee9f19c, 0 0 7px #dee9f19c, 0 0 8px #dee9f19c, 0 0 9px #dee9f19c, 0 ..
[CSS] 다크모드 - 삼성브라우저 스타일 이상하게 나오는 이슈 웹사이트 구현시 이슈가 발생했다. 아이폰이나 안드로이드 크롬 다 정상적으로 보여지는데 삼성 폰에서 기본 브라우저로 접속시에는 사이트의 배경이 검은색으로 자동 변경되어 스타일이 망가지는 것... 해결하려고 여러 방법을 시도해보았지만 실패 * 참고로 삼성 다크모드 기본 설정하는 방법은 (설정>디스플레이>다크선택) 이유는? 현재 삼성인터넷이 다크모드 설정을 강제적으로 바꾸는 기능을 지원해서 이슈가 일어났다..! prefer-color-scheme으로 dark설정시 변경하려 했지만 삼성에서는 지원하지 않는 기능이어서 적용이 안된던 것.(네이버도 들어가면 스타일 깨짐) 따라서 이는 자체 변경은 불가능하고, 내가 설정한 다크모드시 style을 보기 위해서는 따로 삼성브라우저에서 설정을 변경해야한다. 방법: 개인 삼..
[CSS] 반응형 미디어 쿼리 - 유튜브 강좌 정리(디자인베이스) https://www.youtube.com/watch?v=dtBNnijA1QU vw, %와는 다른것 % 는 상위개념의 패딩값까지 다 포함한 기준으로 vw는 패딩무시하고 뷰포트 기준으로 따짐 미디어쿼리 *진짜 많이 쪼개는데는 이렇게 1920~1080 (중간에 1440 분기) 1024~1078 태블릿, 모바일 보통은 아래로 나눔 * PC, 태블릿, 모바일 * PC, 모바일 (구분되는 것을 분기, 브레이크 포인트) 최대폭이 768일때 실행 @media screen and (max-width:768px) { } @media screen and (max-width:480px) { } 반응형작성시 분기점에서 flex-directionLcolumn; 으로 설정하면 아래로 떨어뜨리게 할 수 있다. 이때 item인 .c..
[CSS] rem으로 반응형 작성 방법 rem으로 반응형 작성 방법 * 1rem= html 요소에 지정된 폰트크기 1. html{font-size:62.5%;} 로 설정해준다. 브라우저가 지정해주는 기본 폰트 사이즈는 100%=16px 이걸 계산하기 쉽게 62.5%=10px로 변경해주는것이다. 따라서 위 설정을 통해 1rem=10px 이 된다. (16px *62.5%=10px // 62.5%=0.625) 이렇게 루트 단위를 설정하고 코드를 작성하면 단위계산이 편해진다! ex: 128px = 12.8rem, 4px=0.4rem (html 대신 *을 사용하기도 함) 2. 다른 반응형에 루트 폰트를 바꾸려면? @media (min-width: 768px) and (max-width: 1023px){ * { font-size: 50%; //8px }..
[SCSS] SCSS 설치, 설정하기 SCSS 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 SASS/SCSS 중첩, 변수 선언, 연산자 등 많은 장점 scss 설치하기 npm i -g sass scss파일 만든 후(Watch Sass클릭) import 시킨 후 오류 발생 ERROR in ./src/styles/banner.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1]...... Module build failed (from ./node_modules/resolve-url-load..
[SCSS] css가 다른 폴더로 컴파일 되는 것에 대한 오류해결(savePath) live sass compiler 라이브러리를 통해 VSCode오른쪽 아래 Watching... 버튼을 누르면 SCSS 파일이 CSS로 컴파일되어 생긴다. 그런데 SCSS를 작성중인 해당 폴더에 생기지 않고 계속해서 작성 폴더의 상위 폴더로 CSS파일이 생겼다.😢 이를 해결하고자 검색중 세팅파일에서 savePath를 변경하면 된다는 글을 발견하여, 시도했지만 계속 오류가 났다. 처음 시도했던 방법 Sass에 대해서 알아보자!(p.s. 셋팅/컴파일/포맷/경로설정) Sass 슬슬 파헤쳐볼까 (feat. map파일) velog.io 1. ctrl + , 단축키를 눌러 VSCode의 설정으로 가준다. 2. 설정 검색란에 json이라고 치고 settings.json에서 편집으로 들어가 준다. 3.여기서 아래와 같..
[CSS] 반응형에 따른 글자 자연스럽게 떨어드리기 1. 으로 묶은 후 block 으로 줬다가 inline으로 반응형때 바꾸면, 원하는 대로 글자를 아래 줄에 배치했다가 옆으로 붙일 수 있다. 2. word-break: keep-all; 을 사용하면 한글을 단어별로 떨어뜨릴 수 있다.
[css] 반응형 작성법 @media 768px 미만은 모바일 기기, 768px ~ 1024px 사이는 타블렛, 1024px 이상은 데스크탑 기기로 구분 # 해상도 size 변경 분기점 설정 데스크탑(1024px~) 타블렛(768px ~ 1023px) 모바일(360px-767px) 1 @media screen and (max-width:680px) { } 2. @media (min-width: 360px) and (max-width: 767px){ } 3 @media all and (min-width:1024px) { } @media all and (min-width:768px) and (max-width:1023px) { } 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px..

티스토리툴바