개인 공부용 블로그

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

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

xl 사이즈에서 margin, padding의 간격을 바꿔주고 싶다면 아래처럼 바꿔준다. 사이즈가 xs -> xl로 들어가는 시점에서 margin-top을 바꿀 예정이므로, mt-5 -> mt-xl-4로 margin-top 간격을 수정해준다.

반응형 웹에서 모바일로 진입하게 될 때 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를 통해 이미지가 유연하게..

강의 듣다가 break와 retrun 중 어떤것을 사용해야 하는지 의문점이 생겼다. break문 하나의 반복문을 탈출해서 다음에 있어야 할 기능을 실행한다. break문 종료 후 반복문을 벗어나 '이름찾기 종료'라는 콘솔이 찍힌다. return문 하나의 함수에서 탈출해서 종료시킨다. 함수 밖으로 빠져나갔기 때문에 '이름찾기 종료'라는 콘솔이 찍히지 않음 continue문 반복문 내에서 작업을 건너뛸 때 사용 10까지 반복하되 짝수에 해당하는 if문은 건너뛴다.

See the Pen 모달창 by limhaneul2244 (@limhaneul2244) on CodePen. 함수를 활용해 동일한 기능을 빼보도록 하자. //방법1 : 개별 class지정해서 함수를 별도로 뺀다. $('.footerTop .first').on('click', function () { popUp('#popUpPrivate'); }); $('.footerTop .last').on('click', function () { popUp('#popUpEmail'); }); //방법2 : 클릭한 값을 받아 if문으로 조건에 따라 달리함 $('.footerTop a').on('click', function () { let val = $(this).attr('class'); if( val === 'fi..

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..