AI 웹개발반/HTML & CSS11 [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. [CSS] 댓글, 대댓글로 display: grid;를 더 알아보자 댓글과 대댓글을 배치하는 문제로 하루종일 고민했다 결론은 댓글과 관련된 대댓글을 한번에 들고있을 content box를 만들고, 댓글 관련 내용 밑에 대댓글 박스를 만들고, 대댓글을 쭉 생성하도록 하는 것 content wrapper를 만들고 그 안에 아래와 같이 div를 생성했다. sub-content-wrapper ㄴ comment-card - comment 관련 내용들 ㄴ cocomment-box ㄴ cocomment-card - cocomment 관련 내용들 댓글, 대댓글 창을 만들면서 한 페이지에 띄워줄 댓글과 대댓글의 양을 정해두고 페이지네이션을 적용하거나 (like 네이버카페) 혹은 제한없이 쭉 띄워줄 수 있겠다는 생각이 들었다. 댓글을 띄우는 양을 정하고싶다면, row를 grid-templ.. 2023. 6. 19. [TIL] html & css 공부, 'text' 텍스트 입력한대로 출력하기 필요한 부분에 태그를 사용한다 pre 태그 사용시 문장이 길면 줄바꿈이 되지 않고 영역 바깥으로 나가는데, pre 태그의 style에 추가하면 줄바꿈이 된다 word-wrap: break-word; 만약 위의 스타일이 적용되지 않는다면 white-space를 사용하여 글자를 개행해준다! white-space: pre-wrap; +++ white-space normal : 기본 값. 공백은 하나로 표시, \n은 무시, 긴 행은 필요 시 wrap nowrap : 긴 행이 wrap 되지 않는다. 나머지는 = normal pre : 여러 개의 공백과 개행문자가 모두 표현된다. 태그처럼 동작! 개행문자에서만 개행이 되고, wrap되지 않는다. pre-line : 공백은 하나로 표시, 긴.. 2023. 6. 16. 이전 1 2 3 다음
