html5 강좌38 9. Form-related Elements 9. Form-related Elements 여러분이 웹사이트를 만들 경우 바라보는 관점에서 따라서 중요한 것들이 차이가 있을 수 있겠지만 웹사이트를 방문하는 사용자와의 상호작용 관련 부분은 공통적으로 중요하다고 생각할 것입니다.. HTML5에는 사용자로부터 문자, 숫자, 문자열 등과 같은 입력값들을 입력받을 수 있는 inputBox, 버튼(button), 체크박스(checkbox) 같은 컨트롤들을 자식 요소들로 가질 수 있는 컨테이너 역할을 하는 form이라는 웹 페이지의 요소를 이용합니다. 사용자들을 폼(Form)을 통해서 자신이 방문하는 웹사이트과 통신을 할 수 있습니다. 예를 들면 온라인 쇼핑, 선호도 조사 같은 온라인 조사에 참여 등과 같은 양방향 통신이 가능하도록 하는 것이 폼(Form)이라고.. 2013. 7. 31. 8.5 셀 내부 정렬하기 8.5 셀 내부 정렬하기 셀 안의 정렬을 보면 기본적으로 좌측(left) 정렬되어 나타나게 되는데 위의 결과에서 보는 것처럼 숫자 형태나 퍼센트 형태는 오른쪽 정렬을 하는 것이 더 보기 좋을 수 있습니다. 이와 같이 셀 내부의 정렬을 하는데 있어 HTML5 이전 버전에서는 수평 정렬에는 align 속성을, 수직 정렬에는 valign 같은 속성을 td 요소에 직접 사용하였는데 HTML5에서는 이 방법보다는 CSS를 이용하여 설정하도록 권장하고 있습니다. 따라서 이를 CSS를 이용하여 설정하는 방법을 소개하면 다음과 같습니다. 메모장으로 “cellspacingandcellpadding.html”을 열고 다음과 같이 코드를 변경합니다. align, valign 예제 위에서 CSS의 text-align 속성은 .. 2013. 7. 31. 8.5 여백 주기 8.5 여백 주기 table 요소에 대한 여백은 table 요소의 셀 사이의 여백을 나타내는 cellspacing 속성과 하나의 셀 내에서 셀에 있는 텍스트나 이미지 같은 내용(content)와의 여백을 나타내는 cellpadding을 사용할 수 있으며 다음과 같은 형식으로 사용할 수 있습니다. 메모장으로 “colspanandrowspan.html”을 열고 다음과 같이 코드를 수정합니다. 위와 같이 table 내의 셀 간의 여백을 5pixel로 설정하고 메모장에서 다른 이름으로 저장을 선택하여 “cellspacingandcellpadding.html”로 저장합니다. IE9를 통해 보면 다음과 같이 셀 간 여백이 설정되어 나타납니다. 이제 “cellspacingandcellpadding.html” 파일에서.. 2013. 7. 31. 8.4 셀 합치기 8.4 셀 합치기 table 요소 내에서 2개의 셀 이상을 합칠 때 사용할 수 있는 속성은 세로 방향 즉 행(row)과 관련 형태로 합칠 때는 rowspan 속성을 사용하고 가로 방향 즉, 다수의 칼럼(column)에 대해서 합칠 때 colspan 속성을 사용합니다. 그래서 table 요소의 td 요소에 사용하는 형식은 다음과 같이 나타낼 수 있습니다. 물론 테이블의 헤더를 나타내는 th 요소에도 colspan, rowspan 속성을 이용할 수 있습니다. 이제 다음과 같은 결과를 출력하는 간단한 예제를 해봅니다. 메모장을 열어서 기본적인 HTML5 문서의 코드를 작성한 후 … 블록을 다음과 같이 작성하여 셀 합치는 방법에 대해서 해봅니다. 업체(차종) 지지율(%) 조사시점 조사방법 표본수 조사기관 HYU.. 2013. 7. 31. 이전 1 2 3 4 5 6 7 ··· 10 다음