개인 공부용 블로그

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

동일한 ui를 복사해서 붙여넣어야 할때 @extend 를 사용하면 css변환시 오른쪽 처럼 바꿔준다. 레이아웃, 버튼 같은게 동일하고 색깔만 다를경우 extend를 써주면 코드도 줄어들고 효율적일듯싶다.

마진상쇄란? 두개 이상 블럭요소의 마진이 겹쳤을때 한쪽의 마진값만 적용되는것. (좌우 마진은 겹치지 않음) 🙌문제점 왜 그러는지 찾아보다가 아래의 참고자료를 찾아보게 됨. 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; }

비디오태그 삽입시 초기 사이트 유입했을 경우 나는 동영상을 보고 싶지 않은데 자동으로 전체화면을 덮으며 동영상이 실행된다. (아이폰에서만 그러는듯) 이럴경우 video태그에 playsinline을 넣어주면 전체창을 통해 비디오가 재생되는 것을 방지해준다. 1. playsinline : 전체창 뜨게 하는것 방지하기 2. autoplay : 동영상 자동 재생 3. controls : 비디오 도구 생성시키기 4. loop : 동영상 반복 재생 5. muted : 음소거 6. poster : 동영상 재생 전 보여줄 썸네일 참고자료 HTML / video / 동영상 삽입하는 태그

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를 통해 이미지가 유연하게..

1. iframe을 삽입할 경우에는 iframe의 바깥에 부모로 하나를 더 감싸준다. .videoInner { position: relative; height: 0; padding-bottom: 56.25%; /*16:9의 비율인 경우 56.25%*/ /* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */ } padding-bottom 의 비율에 따라 저절로 줄어들면서 안에 있는 iframe이 깨지지 않게 된다. .videoInner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 15px; /*사이드 간격은 상황에 따라*/ box-sizing: border-box; } vide..

작업 하다가 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..