HTML5 + CSS
[HTML5] HTML 데이터 속성
1. HTML 데이터 속성 HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다. 한마디로 자바스크립트에서 변수를 사용하듯이, 일종의 html의 변수 역할이라고 말할 수 있다. 2. 일반 속성과 데이터셋 속성 데이터셋도 일종의 속성(attribute)이다. 보통 html에서 속성이라 하는 것은 여러분도 잘 알듯이 id, class, src, title 등의 태그에 붙이는 어트리뷰트를 말한다. 이들 속성은 특정 태그의 소스 경로나 이름, 너비, 아이디를 기재하는데 정해져 있다. 그런데 html 태그에 그 엘리먼트만이 지니고 있는 고유한 커스텀 값을 지정해 사용하고 싶을 때가 있다. 마치 아래 코드처럼 input 태그의 value 속성으로 값을 기재해 주면, 자바..
[HTML5] 파일 동시 첨부 이슈
input태그로 파일 첨부 시 파일을 여러 개 동시에 선택할 수 있도록 설정하는 경우와 한 번에 하나의 파일만 선택할 수 있도록 설정해야하는 경우가 있습니다. multiple 속성을 사용하여 처리할 수 있습니다.
[Bootstrap] 회원가입 양식 페이지 만들기
안녕하세요 코북입니다. 오늘은 도시거북 회원가입 페이지를 구성해봤습니다. 부트스트랩을 이용해서 기본 창을 구성했고 디테일한 부분은 css속성을 바꿔서 조절했습니다. 코드와 구현 화면입니다. 도시 거북 아이디 비밀번호 비밀번호 재확인 비밀번호가 일치하지 않습니다 이름 생년월일 월 1 2 3 4 5 6 7 8 9 10 11 12 성별 남자 여자 거북 본인 확인 이메일 가입하기 배운 점 ,(comma)와 +를 이용해 css속성을 설정할 수 있다는 점을 알 수 있었습니다. 또한 margin과 padding의 차이점에 대해서 찾아볼 수 있는 시간이었습니다. 생년월일 입력창을 만들 때 display 속성을 이용해 table처럼 구현할 수 있었습니다.
[Bootstrap] 부트스트랩 버튼 정렬
안녕하세요 코북입니다. 오늘은 부트스트랩 작업하다가 잘 안 되는 부분이 있어서 기록하러 왔습니다. 다음 화면에 보이는 것처럼 아이디/비밀번호 찾기 버튼을 오른쪽 끝에 정렬하고 싶은데 계속 안 먹더라고요.. 기존 코드는 다음과 같습니다. 회원가입 아이디/비밀번호 찾기 위의 코드를 아래와 같이 바꾸어 줬더니 다음과 같이 정렬됐습니다. 아래는 코드와 구현 후 화면입니다. 회원가입 아이디/비밀번호 찾기 div태그 클래스에 col-lg-6 col-sm-12를 각각 추가했고, text-lg-start와 text-lg-end클래스를 이용해서 정렬해 줬습니다. col-lg-6에서 lg는 large이고 1200px을 의미합니다, col-sm-12에서 sm은 small이고 600px을 의미합니다. 각각의 숫자는 부트스트랩..