728x90 반응형 공부/프론트9 [html/css/js] 테이블 태그 안에 답글 기능 구현 이번에 유저들의 메시지를 테이블 안에 구현하는 와중에 답글 기능이 필요해서 구현 방법을 정리해보려고 한다. 답글 기능을 구현할 때 메시지들을 단순히 ul 안의 li로 구성한다거나 div로 구현한다면 간단하게 구현할 수 있겠지만 테이블 형식으로 메시지에 대한 정보를 보여줘야 했기 때문에 table을 사용하여 구현하였다. 다음은 내가 구현한 코드이다. table{ border: 1px solid black; border-spacing: 0px; border-radius: 12px; } .hidden{ display: none; } 닉네임 작성 내용 답글 개구리 포스팅 재미있게 봤습니다. 답글 강아지 많은 도움이 되었습니다. 답글 실제로는 데이터를 받아와서 테이블을 동적으로 만들어주지만 이번 포스팅의 목적이 .. 2024. 4. 6. [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. 이전 1 2 3 다음 728x90 반응형
