개인 공부용 블로그

a태그에 data-name을 넣어 글씨를 제어하고자 한다면, 아래와 같이 가상클래스를 통해 attr(내가 지어준 data값)에 접근 .downloadBtn a:before { content: attr(data-name); padding-left: 14px; display: flex; height: 100%; color: #fff; align-items: center; pointer-events: none; } search에 아이콘을 background img로 넣어 위치값을 조정하고자 한다면 아래와 같이 단축속성을 적용할 수 있다. .worksheet .search { background: #ae7c65 url() 15px center/22px auto no-repeat; } /* contents색상 |..

See the Pen Untitled by limhaneul2244 (@limhaneul2244) on CodePen. mask-image: radial-gradient(#fff, #000); ios에서 border-radius가 먹지 않으므로 필수로 지정해준다. 기본 56.25%가 iframe 너비이므로 width 값의 100%로 지정해주면 유튜브에 검정색 부분이 같이 보이기 때문에 그 부분까지 없애주려면 width의 비율 값을 177.78%로 지정해준다. 177.78인 이유는? 560 / 315 * 100% = 177.7777777777778 1차방정식으로도 정리 가능 560 : 315 = x : 100 315x = 56000 x = 177.7777777777778

마진상쇄란? 두개 이상 블럭요소의 마진이 겹쳤을때 한쪽의 마진값만 적용되는것. (좌우 마진은 겹치지 않음) 🙌문제점 왜 그러는지 찾아보다가 아래의 참고자료를 찾아보게 됨. 3-2. 부모 박스와 마지막 자식 박스의 하단 마진이 나란히 겹칠 때의 상황이었다. 🙌해결방안 부모박스에 padding 또는 border 값을 지정해 벽을 만들어주어야 한다. 마진 상쇄 규칙 적용 마진 상쇄는 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용됩니다. (inline, inline-block, table-cell, table-caption 등의 요소는 block-level이 아닙니다.) 마진 값이 0이더라도 상쇄 규칙은 적용됩니다. 좌우 마진은 겹치더라도 상쇄되지 않습니다. 마진 상쇄 규칙 예외 다음과 같..

반응형 웹에서 모바일로 진입하게 될 때 input text나 submit버튼들이 내가 원하는 모양대로 되지 않을 때가 있다. 이럴때 ios 스타일을 우선 없애주어야 한다. input[type="submit"], input[type="text"] { appearance: none; //기본 속성 제거 -moz-appearance: none; -webkit-appearance: none; border-radius: 0; //border 둥글게 처리되는것 제거 -webkit-border-radius: 0; -moz-border-radius: 0; }

See the Pen background-image by limhaneul2244 (@limhaneul2244) on CodePen. background-image를 이용해 자연스럽게 이미지가 줄어들게 하는게 쉽지 않아 시간이 있을 때 정리를 해보려고 한다. .container { width: 100%; height: 0; padding-bottom: calc(height/width * 100%); background-size: cover; background-image: url('이미지경로/이미지파일'); background-repeat: no-repeat; background-position: center; } height를 0으로 준 뒤 padding-bottom에 calc를 통해 이미지가 유연하게..

작업 하다가 a링크에 걸린 이벤트를 강제로 없애야 했는데 이때 유용하게 처리. 어떻게 활용할 수 있는지 알아보기 위해 정리해본다. pointer-event란? pointer-events : none; 으로 처리하게 되면 포인터 이벤트(클릭, 드래그, 호버)를 비활성화 시킬 수 있다. .hidden { /* 키워드 값 */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only..

form input[type="file"] 커스텀 하기 input file은 기본적으로 아래와 같이 나온다. 커스텀을 해야했는데 label로 감싸고 input을 내부에 넣어주었다. html 제출서류 이력서 이력서 첨부 css /* 이력서 파일 제출*/ .applyContainer form .submitFile {margin-bottom: 65px;} .applyContainer form .submitFile .fileBox {display: flex; align-items: center; height: 55px; padding-left: 18px; border-radius: 10px; background-color: #d0cccd;} .applyContainer form .submitFile .fileB..

.lineUp .sliderContainer > a {overflow: hidden; display: block; width: 250px; margin-right: 15px;} .lineUp .sliderContainer > a img {width: 100%;} .lineUp .sliderContainer > a img:hover {transition: .5s; transform: scale(1.03);} .lineUp .sliderContainer > a img:not(:hover) {transition: .5s; transform: scale(1);} 보통 :hover를 통해 색깔변경을 많이 해주는데 transform으로 이미지 확대나 변형 한 뒤 다시 부드럽게 돌아가게 하기 위해 간단하게 :not(..

See the Pen 입력필드 만들기(feat,폰트어썸) by limhaneul2244 (@limhaneul2244) on CodePen. #1. 폰트어썸을 이용해 입력필드 디자인하기 input태그에 css 속성을 적용할때는 아래와 같이 적용하는 습관을 들이는 것이 좋다. .item input[type=text], .item input[type=email], .item input[type=tel] { border:2px solid lightgray; border-radius: 8px; width: inherit; height: 40px; padding: 10px; box-sizing: border-box; padding-left: 45px; } .item input 과 동일하다. 단, input에 효과를..

css 변수 기본 사용법 .parent { --pwidth: 300px; /*-가 2개 붙으면 변수가 된다*/ width: calc(var(--pwidth) * 2); height: 100px; margin: 0 auto; background-color: orange; } 대쉬 기호를 앞에 2개 넣어주면 변수가 만들어지고 그걸 width값에 넣었음. See the Pen css에서 변수 사용하기 by limhaneul2244 (@limhaneul2244) on CodePen. **IE에서는 변수 사용 불가