css7 [CSS] display:none; 과 visibility:hidden; display: none; 공간을 차지하지 않고 해당 div내 모든 요소를 보이지 않게 설정한다 = 다른 html에 영향 없음. 빈 공간 없음 visibility: hidden; 공간을 차지하며, 해당 div내 모든 요소를 보이지 않게 설정한다. = 다른 html에 영향, 빈 공간이 보임 토글하여 나타내고 지울 때의 display: none; 과 visibility:hidden; 의 차이: visibility display: none;에는 부드럽게 내용을 띄울 수 있는 transition을 적용할 수 없다! display는 transition-property 값으로 사용할 수 없는 속성이기 때문 대신 display는 keyframes로 애니메이션을 적용할 수 있다. [참고]: https://velog.i.. 2023. 6. 26. [CSS] box-shadow box-shadow div에 그림자를 넣고싶을 때 사용하는 css .box { box-shadow: 0px 5px 10px 5px #454545; } 옵션을 5가지 넣어줄 수 있는데, 각각을 순서대로 1 2 3 4 5라고 하면 1 : 그림자가 오른쪽으로 얼마나 이동할 것인지 (- 값을 넣으면 왼쪽으로 이동한다) 2 : 그림자가 아래쪽으로 얼마나 이동할 것인지 (- 값을 넣으면 위쪽으로 이동한다) 3 : 그림자의 부드러운 정도 4 : 그림자의 확장량 5 : 그림자의 색상을 넣어줄 수있다. inset 옵션을 넣으면 박스 내부에 그림자를 만들어줄 수 있다 .box { box-shadow: inset 5px 5px 10px 5px #454545; } 명확하게 보이라고 3번째 옵션인 그림자 부드럽게 보이기를 0으.. 2023. 6. 22. [HTML&CSS] input 태그 다루기 + 약간의 textarea input, textarea 태그는 사용자가 직접 입력할 수 있는 부분을 생성해준다 input input에는 type, value 등의 옵션을 넣어 입력받길 원하는 형식을 미리 지정해줄 수 있다. type ="옵션" button - 버튼 submit - 양식 제출용 버튼 imagesubmit - 이미지 버튼 reset - 양식 초기화용 버튼 text - 일반 문자 radio - 한개만 선택할 수 있는 컴포넌트. 기본 모양은 원형 checkbox - 다수(1개 이상)를 선택할 수 있는 컴포넌트. 기본 모양은 사각형 url - URL 필드 file - 파일 업로드 search - 검색 상자 hidden - 사용자에게 보이지 않고 서버로 넘기는 값 email - 이메일 필드 password - 비밀번호 필드 .. 2023. 6. 21. [CSS] image 다루기 이미지 색상 어둡게 / 밝게 만들기 img 태그 내에 이미지 밝기 설정을 해줄 수 있다. %가 낮을 수록 어둡고 흐려진다 filter: brightness(70%); filter 속성값을 이용해 흑백으로 바꿀 수도 있다 filter: greyscale(100%); filter brightness는 색감이 좀 흐려지면서 어두워지는 편이라 다른 방법을 생각해보았다 상위 div에 background-color를 설정하고 img의 opacity를 조절해주는 방식. 뒷 배경이 밝냐 어둡냐에 따라 색감이 조정된다 .parent_div { background: rgb(0, 0, 0); } .parent_div img { opacity: 0.7; } div 내 이미지 가운데 정렬 및 영역 바깥 숨기기 .parent d.. 2023. 6. 20. 이전 1 2 다음
