CSS

[CSS]텍스트에 그라데이션, 이미지 적용하기

위 사진과 같이 이미지가 아닌 텍스트 파일에 그라데이션 또는 이미지를 적용하는 방법을 정리하려고 합니다. Drawing With You .logo{ color: transparent; background: linear-gradient(rgba(112,255,238,.68), rgba(255,82,200,.68)); background-clip: text; -webkit-background-clip: text; } background에 원하는 색, 그라데이션, 이미지를 넣고 background-clip을 사용해주면 됩니다. background-clip 요소의 배경이 테두리, 안쪽여백, 콘텐츠 상자, 텍스트 중 어디까지 차지할 지 지정 color를 투명으로 지정하는 이유 텍스트에 색상이 적용되어있으면 뒤의 ..

[CSS] 박스 가운데 정렬 방법

웹 페이지를 구성하다 보면 가운데 정렬을 해야할 때가 오는데요! 저도 많이 해맸었고, 쉽게 이해하고 사용할 수 있도록 정리를 해보려고 합니다! 가로 가운데 정렬 하기 1. margin 사용하기 이 방법을 사용하려면 정렬하려는 요소의 넓이를 반드시!! 꼭! 지정해 줘야합니다. 그렇지 않으면 가운데 정렬이 되지 않아요 블럭 요소의 경우 요소의 넓이가 최대한 넓어지려는 특성이 있습니다. .box{ widht: 200px; height: 200px; margin: 0 auto; } 2. absolute 사용하기 absolute는 위치 상 부모요소의 기준으로 배치가 됩니다. 꼭 위치 상 부모요소를 확인 해줘야합니다. 주의! 부모 요소의 position의 값이 반드시 relative일 필요는 없습니다. .paren..

[CSS] background 관련 정리

https://amenable-isthmus-d92.notion.site/CSS-Background_23-02-20-c7b69e1ed1d14d34aa2a0d859cda2f81 CSS / Background_23.02.20 background-color amenable-isthmus-d92.notion.site css background 관련해서 공부한 내용을 정리 한 것입니다.

웹 접근성을 생각한 radio button style custom

아직 그림판 만들기 3을 제대로 작성하지 않아 추가를 해야하지만, css로 작업한 작업물이 웹 접근성을 떨어트리는 것이 있어 그것을 수정하려고 합니다. 웹 접근성이란? 고령자, 장애인 등과 같이 정보 소외 계층이 비장애인과 동등하게 원하는 정보를 자유롭게 접근하고 이용할수 있도록 보장하는 것 모든 것은 키보드로 접근이 가능해야 한다를 지키지 못했더라구요. 그래서 그 부분을 수정하려고 합니다. 제가 지키지 못한 대부분의 이유는 display를 none으로 설정 했기 때문입니다. 그럼 수정한 코드를 보여드리겠습니다! 브러쉬 모양 / O ㅁ 지우개 페인팅 초기화 #brush-zone{ list-style-type: none; margin: 25px 0 0 0; padding: 0; display: flex; ..

그라데이션 설정법

css 그라데션 주는 방법! 그라데이션은 크게 3가지가 있습니다. 1. 선형(linear-gradient) 2. 방사형(radial-garadient) 3. 각진 원형(conic-garadient) 각 속성엔 색상의 제한은 없지만 적어도 두가지 색상은 넣어줘야합니다. 1. 선형 그라이데이션(linear-gradient) 선형 그라이데이션은 기본적으로 위에서 아래로 진행됩니다. 하지만 방향을 바꿔 줄수도 있습니다. 색상 앞에 작성해주면 됩니다. - 방향 전환 - 대각선 그라데이션 - 각도 사용 방향 전환 - to bottom(default) - to top - to left - to rignt 대각선 그라데이션 시작하는 방향이 아닌 그라이데션이 진행되는 방향입니다. - to bottom left - to ..

Input 안에 버튼 넣어 이쁘게 만들기

오늘은~ input 창안에 버튼을 넣어 이쁘게 보이게 하려고합니다! Vue를 이용해 제작하고 있습니다. 많은 헤딩끝에 원하는 디자인대로 만들어 낸 과정을 작성합니다! 급하신분들은 맨 밑 '최종_최종최최종 코드'를 확인해주세요~! 1차 시도 처음엔 input창안에 button을 넣어서 원하는 디자인을 만들려고 했습니다. //첫 코드 input 안에 button을 넣으려면 한번 감싸줘야합니다. 저는 label을 사용해 감싸줬습니다. label{ position:relative } button{ position:absolute left:7px; top: 4px; } 이렇게 작성 해주고 input창 그림자도 넣어주고 사이즈도 맞춰서 각종 브라우저에 테스트를 해보았는데 이상하게 버튼이 가운데에 있지않았습니다.(두..