본문 바로가기

개발34

table-layout:fixed으로 테이블 너비 고정하기 1. table-layout 셀 안의 내용에 따라 셀 너비를 고정할지, 변하게 할지 정하는 속성이다. 2. table-layout 속성 [table-layout : auto] 셀 안의 내용에 따라 셀 너비가 변동된다.(기본값) [table-layout : fixed] 셀 안의 내용에 따라 너비가 변하지 않고 고정되어 내용이 밖으로 나오게 된다. 3. 적용 예시 [HTML] table-layout : auto(기본값) Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Cell01 Cell02 Cell03 Cell04 Cell05 Cell06 Cell07 Cell08Cell08Cell08Cell08Cell08 Cell01 Cell.. 2022. 11. 24.
한 페이지에 여러개 모달 팝업창 띄우기 1. 소스 [HTML] 팝업 버튼창 버튼1 버튼2 버튼3 버튼4 모달01 모달02 모달03 모달04 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyul) on CodePen. 2022. 10. 27.
input radio 버튼 클릭하면 하단 내용 보이기 / 숨기기 input radio 버튼이 두 개 있을 경우 radio 버튼 하나를 클릭하면 해당 radio 버튼 내용이 display:block 되고 다른 radio 버튼 내용은 display:none 되는 방법을 연습해 보았다. 1. 소스 [HTML] 아이디 검색 방법 선택하기! 휴대폰으로 아이디 수신 휴대폰 이메일로 아이디 수신 이메일 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyul) on CodePen. 3. 제이쿼리 문법 정리 .val() : input, select 등의 form의 value값을 가져온다. 2022. 9. 21.
text-align으로 문단 정렬하기 1. text-align? text-align은 문단을 정렬하는 속성이다. text-align 사용 시 주의할 점은 block요소에서만 적용할 수 있다는 점이며 block요소 안에 정렬되는 것은 inline요소인 텍스트뿐만 아니라 이미지도 정렬된다. 2. text-align 속성 text-align: left 왼쪽 정렬 text-align: right 오른쪽 정렬 text-align: center 중앙 정렬 text-align: justify 양쪽 정렬로 왼쪽과 오른쪽의 가장자리 끝에 맞춰 정렬되는 것이다. 3. 적용 예시 block요소인 div에 text-align을 적용했을 때 텍스트가 잘 정렬된다. block요소인 div에 text-align: center을 적용했을 때 inline요소인 span과.. 2022. 9. 16.