728x90 반응형 전체 글313 [html/css] 테이블 꾸미기 (모서리 둥글게) 이번 포스팅에서는 테이블에 대해 알아보고 테이블을 꾸며보려고 한다. 우선 간단한 테이블을 만들어보자. 학번 이름 나이 111 김철수 22 222 김영희 23 평범한 테이블이 만들어졌다. 테이블을 사용할 때 주의할 점은 테이블은 기본적으로 셀 마다 거리가 존재한다. table, th, td 태그에 border: 1px solid black;를 입혀보자. table{ border: 1px solid black; } td{ border: 1px solid black; } th{ border: 1px solid black; } 만약 이 셀 간 간격을 없애고 싶다면 border-collapse를 collapse로 주면 된다. table{ border: 1px solid black; border-collapse: .. 2024. 4. 3. [html/css] input checkbox 커스텀 이미지 사용하기 이번 포스팅에서는 input checkbox를 커스텀해보려고 한다. 다음은 기본 input checkbox이다. 이 기본 input checkbox를 다음과 같이 변경해보자. 먼저 checkbox 이미지를 on, off 두 개를 준비한다. 이미지 뒤에 on, off를 붙여서 따로 저장하자. 1. input 태그 옆에 비어있는 label을 붙인다. label의 for 속성에 input 태그의 아이디를 입력하면 label을 눌렀을 때에도 해당 아이디를 가진 input 태그를 누른 것과 같은 효과를 가진다. label에 아무것도 넣지 않은 이유는 이 label에 이미지를 입힐 것이기 때문이다. 2. input 태그의 display를 none으로 변경한다. #check{ display: none; } 기본 체크.. 2024. 4. 2. [html/css/js] 모달 창 구현 방법 정리 이번 포스팅에서는 모달 창을 구현해보려고 한다. 이번 포스팅에서 우리가 구현할 모달 창의 기능들은 다음과 같다. 모달 창이 띄워지면 주변 화면이 어두워지면서 모달 창을 제외한 다른 요소들을 클릭할 수 없다.모달 창 내부의 X 버튼을 눌러서 모달 창을 닫을 수 있다. 모달 창을 제외한 배경을 클릭해서 모달 창을 닫을 수 있다.모달 창은 화면의 정중앙에 위치한다.모달 창 구현모달 창은 아래와 같이 간단하게 구현할 것이다. html 코드는 다음과 같다. 모달 창 X 모달 창 내용 아이디가 modal-wrapper인 div 태그는 모달 창이 띄워졌을 때 주변 .. 2024. 3. 26. [html/css] input 태그 안에 button 태그 넣기 개발을 하다보면 input 태그를 통해 입력 받아서 button 태그를 눌러 정보를 제출하는 상황은 자주 발생한다. 일반적으로 아래와 같이 input 태그 옆에 button 태그를 두면 쉽게 구현할 수 있다. 하지만 더 예쁘게 만들고자 아래와 같이 input 태그에 button 태그를 넣고 싶다면 어떻게 해야 할까? 우선 다음과 같이 태그를 배치해보자. 제출 이제 div, input, button 태그에 css를 넣어서 input 태그 안에 button 태그가 위치하도록 해보자. 먼저 div 태그의 css 코드이다. #container{ width: 300px; height: 50px; position: relative; display: flex; } position을 relative로 준 이유는 but.. 2024. 3. 25. 이전 1 ··· 10 11 12 13 14 15 16 ··· 79 다음 728x90 반응형
