HTML4 [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. [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. [TIL] html & css 공부, display: grid; ㅁㅁㅁㅁ ㅁㅁㅁㅁ ㅁㅁㅁㅁ css 그리드 시스템 공부 .card-container { #parent div width : 1200; display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, auto)); grid-template-rows: 300px 300px 300px; row-gap: 30px; column-gap: 20px; } .card-box { #child 요소 width: 480px; height: 270px; ... } auto-fill 속성을 사용하여 자동으로 가로 크기에 맞게 채워지도록 함 minmax에 원하는 최소 최대 크기를 지정하여 카드가 서로 침범하지 않도록 했다 높이는 flex할 필요가 없어서 고정된 크기를 주.. 2023. 6. 14. [TIL] Django form, admin 등 활용하며 익숙해지기 1. 장고의 form, 대체 무엇일까 받은 form 예제 코드와 form의 기능을 살펴보다 보니 html을 이해해야 form에 대한 이해가 가능할 것이라는 생각이 든다.. 문서를 따라 간단한 html을 만들어보자. 상품관리 : 로그인 결과물 : 한 줄로 떠서 보기 어려우니 div로 구역을 나누고, type="password"로 가려보았다. 상품관리 : 로그인 결과물 : 이제 장고의 Form을 다시 알아보자. form.py를 만들어 Form class를 설정하고, form.Form / form.ModelForm으로 일반, 모델 폼을 상속받아 적용하는 방식이다. Form (일반 폼) : 직접 필드를 정의, 위젯 설정이 필요하다 Model Form (모델 폼) : 모델과 필드를 지정하면 모델폼이 자동으로 폼 .. 2023. 4. 9. 이전 1 다음
