김 양의 멋따라 개발따기

1. html 코드  2. CSS 코드section{ position: absolute; top: 0; left: 0; width: 100vw; height:100vh; background-color: black; background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden;}span{ position: absolute; top:50%; left:50%; width: ..

1. 목표왼쪽에서부터 절반정도는 단일 색상 그 이후로는 위에서 아래로 내려오는 그라데이션이 들어가야 했음. 2. 코드linear-gradient를 두 개 쓰고 남은 부분에 투명색인 transparent를 주어서 해결!! background: linear-gradient(124deg, #D9E1FD 48%, transparent 48%), linear-gradient(180deg, #B411A7 0%, #5C0378 100%)

html{ -webkit-touch-callout:none; /* 롱터치시 팝업/링크 연동 화면 나타나지 않게 설정 */ -webkit-user-select:none; /* 테스트나 이미지 선택시 선택 안됨 */ -webkit-tap-highlight-color:rgba(0,0,0,0); /* 터치시 선택 영역 색상 조절 */ }

1. window.print() 함수를 사용하면 전체 부분이 프린트 됩니다. 2. 미디어 쿼리를 이용해 원하지 않는 부분은 display : none; 처리를 하면 원하는 부분만 인쇄가 가능합니다. @media print { .edit_wrapper{ display: none; } }

페이지 1 페이지 2 페이지 3 페이지 1로 이동 페이지 2로 이동 페이지 3로 이동

1. 결과물 2. 코드 .step_1 { background-color: #64a9cb; border-right: 3px solid #64a9cb; position: relative; padding-right: 4px; } .step_1 ::after{ content: ""; position: absolute; border-top: 22px solid transparent; border-right: 22px solid transparent; border-left: 22px solid #64a9cb; border-bottom: 22px solid transparent; left: 135px; top: 85px; } .step_2 { background-color: #4083a8; border-right: ..

1. 문제 상황 이미지를 div 태그가 감싸고 있는 상황에서 margin이나 padding 값이 없는 데도 아래 태그와 벌어지는 문제 발생 2. 문제해결 .wrap{ display: block; overflow: auto; height: fit-content; } fit-content로 높이를 주어 해결! https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content fit-content - CSS: Cascading Style Sheets | MDN The fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, bu..

1. keyframe 애니메이션 @keyframes fadeIn { 0% { opacity: 0; transform: translate3d(0, 0, -100%); } to { opacity: 1; transform: translateZ(0); } } @keyframes fadeOut { 0% { opacity: 0; transform: translate3d(0, 0, 100%); } to { opacity: 1; transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } @keyfra..

코드 //기본 filter: brightness(100%); //더 밝게 filter: brightness(140%); //더 어둡게 filter: brightness(40%); 결과

1. position이란? 문서 상에 요소를 배치하는 방법을 지정 top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정 2. position의 속성들 static 요소를 일반적인 문서 흐름에 따라 배치 top, right, bottom, left, z-index 속성이 아무런 영항도 주지 않음 기본값 relative 요소를 일반적인 문서 흐름에 따라 배치 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용 오프셋은 다른 요소에 영향을 주지 않음 absolute 요소를 일장적인 무서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치 조상 중 위치 지정 요소가 없다면 초기..