코딩하는라민

IOS 웹뷰 화면 button (or a) 태그 텍스트 색상 파란색으로 나오는 문제 해결  window 환경에서 프로젝트를 진행하다보니 ios 웹뷰에서 어떻게 보이는지 신경쓰지 않았었다.프로젝트가 어느 정도 기본 기능이 완성되고, vercel 을 통해 배포를 진행했다. 배포하면서 아이폰 or 아이패드로 확인하는 과정에서 특정 텍스트 색상이 파란색으로 보였다.프로젝트를 하면서 발견할 수 없었던 문제였는데 배포하면서 뒤늦게 문제를 발견했고 구글링을 통해 문제를 해결했다. 발견한 이슈 위는 react 로 만든 캘린더 컴포넌트의 일부인데, 캘린더 헤더가 푸른색으로 보인다.프로젝트의 테마 색상 목록에도 없던 색상이었다. 문제가 발생한 부분window 환경으로 돌아와서 문제의 부분에 태그를 확인해보았다. 문제가 발..

[React+TS] Styled-components theme 적용하기  이전 프로젝트들은 GlobalStyle 에 `:root` 를 이용해 테마 색상을 정의해서 사용했다. styled-components 에도 이러한 기능이 내장되어 있어 사용해보고자 한다. styled-components 는 `The..

[React] Styled Component (CSS-in-JS) 📌 CSS in JS? CSS in JS는 기존의 CSS 스타일링의 방식과 다르게 스타일 정의를 별도의 CSS 파일이 아닌 JS 파일에 작성하는 스타일 기법을 말한다. JS 파일에서 작성해서 바로 컴포넌트에 적용하기 때문에 손쉽게 스타일을 적용할 수 있다. CSS in Js 라이브러리에는 Styled Components, emotion, styled-jsx 등이 있다. 이러한 CSS in JS 라이브러리 중에서 가장 많이 사용되는 것이 Styled Component 라이브러리이다. 📌 Styled Component Styled Component 는 스타일링 파일을 따로 두지 않고 동일한 컴포넌트에서 컴포넌트 이름을 사용하듯 스타일을 지정할..

[CSS] JS 없이 탭메뉴 만들기 JS 없이 페이지를 만드는 과제를 하다가 알게된 코드! CSS 로도 간단하게 탭메뉴를 구현할 수 있다는 걸 알게되고 바로 적용해보았습니다. 1. HTML Menu01 Menu02 Menu03 안녕하세요 1페이지입니다. 프론트엔드 공부중인 코딩하는 라민입니다. 🐥🐥🐥 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate beatae id eius modi eveniet facere dolorum fugiat esse repellendus sunt qui dolorem laudantium nesciunt ipsum, libero blanditiis error voluptatum maxime. 마지막 페이지..

[CSS] 카드 뒤집히는 효과 만들기 포트폴리오에 사용한 효과중에 하나인 카드 뒤집히는 효과입니다. 앞면에는 타이틀을 적고 뒷면에는 내용을 적어 마우스를 올리면 카드가 회전하면서 뒷면의 내용을 볼 수 있게 해주는 효과입니다. CSS 만으로도 간단하게 표현 가능한 효과. 디자인 요소를 추가해서 타로카드를 뒤집는 것과 같은 연출을 만들어낼 수 있습니다. 1. 마크업 앞면 뒷면 앞면 뒷면 앞면 뒷면 ✅ wrap 안에 박스(card)를 해주고싶은 카드 수 만큼 만든다. ✅ card 안에 card_box 를 만들고 그 안에 카드의 앞면(front)과 뒷면(back)을 만들어준다. 2. CSS *{ font-size: 30px; font-weight: bold; } #wrap{ width: 800px; height..

margin auto 속성으로 정렬하기 웹디자인기능사 공부하다가 margin-left: auto 속성이 나왔다. margin: 0 auto; 만 사용하다가 margin-left: auto 속성을 보고 margin 속성에 대해 궁금해져서 이것저것 만져보면서 가지고 놀아보았다. 1. margin: 0 auto; 기존에 많이 사용하던 margin 0 auto 속성 .box{ width: 400px; height: 400px; border: 1px solid black; margin: 0 auto; } ▶ 요소를 가운데 정렬할 수 있다. ▶ margin: 0 auto; 는 위아래의 마진을 0으로, 좌우 마진을 자동으로 조정해주는 것 ▶ margin: 0 auto; ⇔ margin: 0 auto 0 auto; 2..

CSS border 여러줄 겹치는 경우 겹침 현상 없애기 1. position과 border로 겹친부분 배경색으로 처리해서 안보이게 만들기 ① position 을 주고 top 마이너스 값으로 위치를 조정하여 완전히 겹쳐 한줄처럼 보이게 만들어준다. ② border-bottom 을 배경색과 동일한 색으로 지정한 후 ③ z-index 로 밑의 div 보다 앞에 보이게 만들어준다. z-index → position 을 준 경우 겹친 요소에 대해 수직 위치를 지정할 수 있다. 숫자가 클 수록 제일 위에 오게 되며, 숫자가 작을수록 숫자가 큰 것보다 아래에 보이기 때문에 가려져서 보이지 않을 수도 있다. 기본값은 auto이며, 속성이 주어지지 않았다면 0으로 취급함. 레이어같은 느낌 hello Laudantium..

퀵메뉴 만들기 margin 을 이용한 퀵메뉴 만들기 Home Blog Contact #quickmenu{ width: 100px; position: fixed; right: 0; top: 50%; transform: translateY(-50%); } #quickmenu a{ width: 150%; height: 20px; line-height: 20px; margin-bottom: 5px; padding: 15px; transform: 1s; display: block; font-weight: bold; } #quickmenu li:hover{ margin-left: -50%; } #quickmenu li:first-child{ background-color: pink; } #quickmenu li:n..

Box 정 가운데 정렬하기 1. position - 요소들을 배치하는 속성 - top, left, bottom, right 으로 위치 지정 가능 - relative : 자신을 기준으로 위치 지정, 다른 요소에 영향을 주지 않고 자신만 움직임. - absolute : relative 된 부모 속성을 기준으로 위치 지정 - fixed : 위치 고정, 헤더를 고정할 경우 헤더 바로 아래 요소를 헤더 높이만큼 마진으로 아래로 이동시켜줘야 겹치는 부분이 생기지 않음 - static : 기본값, 지정해준 position 속성값을 초기화 시켜줌 .wrap{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .wrap{ width: ..

태그의 우선순위 ( ID & Class 선택자 ) 1. ID 선택자 & Class ID 선택자 : # - Id는 유일한 값. - 한개만 적용 가능(같은 id를 다른 데에 사용 불가능) Class : . - id 와 달리 같은 class 를 여러 개 적용 가능 → 공통 적인 것의 속성을 변경할 때 사용 ID Class #wrap{ width: 100px; height: 100px; background-color: pink; } .wrap{ width: 100px; height: 100px; background-color: skyblue; } 2. BOX - 보이지 않는 상자 - 감싸는 역할만 한다. - box : 아래로 쌓이는 것이 특징(Block 속성) - 홈페이지의 레이아웃을 div 로 뼈대를 잡고 시..