웹개발 스터디 : 4화 - HTML 태그 알아보기 2
HTML로 테이블과 입력창 규격 만들기
기본 웹개발 관련 상식을 검증하고, 웹개발 입문자들을 위한 자료용 문서입니다. 추후 부트스트랩과 워드프레스, 자바스크립트 프레임워크 등으로 연결되는 문서가 될 예정입니다.
문서 목록
1화 : https://brunch.co.kr/@clay1987/156
2화 : https://brunch.co.kr/@clay1987/157
3화 : https://brunch.co.kr/@clay1987/158
4화 : https://brunch.co.kr/@clay1987/159
HTML 알아보기
HTML 테이블 (표) 만들기 (HTML Tables)
HTML 언어에서 사용되는 테이블 (표) 규격에 대해 알아보자
가로 - 세로로 내용이 들어가는. 간단한 그 표가 맞다.
리스트에서 li가 개별 요소고, OL과 UL이 전체 리스트를 묶었던 것처럼.
마찬가지로 TD와 TR이 개별요소고. 그리고 그걸 다시 Table로 묶어줄 수 있다.
TD는 좌우 / 가로로 넓어지는 녀석이고.
TR은 상하 / 세로로 넓어진다는것만 기억하자.
<table>
<tr>
<td>UI디자인<td>
<td>모바일과 웹, 기타 기기를 위한 UI 디자인을 만듭니다.<td>
</tr>
<tr>
<td>웹개발<td>
<td>웹 규격에 맞게 디자인과 데이터를 연결합니다<td>
</tr>
</table>
개별 칸이 정확히 보이진 않아도 - 좌측 라벨과 우측 라벨이 분명히 만들어져있다.
꾸미는건 CSS에서 다루면 되니까. 일단 내용에만 충실해주면 된다.
여기에 표가 가지는 특정 상태값을 추가해보면
<th> 구분 </th>
<th> 설명 </th>
위에 구분값이 생겼다.
여기에 thead와 tbody까지 적용을 하고, 까지 적용해주니 훨씬 보기가 좋아졌다.
예제를 확인하고싶다면 이곳에서 확인할것...! MDN의 테이블 (표)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
HTML 알아보기
HTML 입력창 만들기 (Form)
HTML에서는 여러가지 입력창 규격을 지원한다. 물론 자바스크립트까지 깊게 들어가야 해당 내용들을 더 자유롭게 사용할 수 있지만. 일단 기본적인 규격들에 대한 부분을 알아보도록 하자.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
일반적으로 입력창은 사용자의 정보입력이나. 표기 / 수정 등에 사용된다. 직접적인 데이터 입력이 가능하면 적은 편이 사용자에게 좋긴 하겠지만. 어쩔수없이 규격을 입력해야하는 부분들이 있다. 이런 부분들을 입력창 형태로 만들어주곤 하는데.
네이버나 카카오같은 최신 서비스들도 CSS를 비활성화하면 이런 단순한 규격들과 입력창들로 이뤄져있다는걸 알 수 있다. 그러니 지금 하는 작업들은 꾸미기 이전에 '데이터들이 오고가는 통로'를 만들어주는 거라고 생각하면 이해가 쉽다.
입력창의 규격 예시<form> 태그로 묶어주고. 액션 타입을 결정하고. 라벨과 입력 규격 등을 정해주면 되는데. 이런 부분들은 모두 외워둔다기보다는. 자주 사용되는 기능들이나, 예제들을 자료로 갖고있으면 사용이 편하다. 또한 추후에 배우게되는 자바스크립트와 연관되어서. 어떤 데이터들을 '어떤 형태로 묶어줄지'에대한 부분을. 대략적으로나마 알아두면 좋다.
실제로 form이 보여지는 형태어차피 나중에 실무를 하게되면, 레퍼런스 사이트를 기반으로 작업을 하게되므로. 관련된 HTML 레퍼런스들을 미리 찾아두고, 해당 내용의 구조를 분석 / 이해하면서 나아가면 편리하게 작업을 할 수 있다.
form 태그는 기본적으로 'form' 규격과, 라벨 / 입력타입 규격으로 이뤄져있다. 입력 타입은 위의 그림처럼 여러 형태가 존재한다. 또한 웹브라우저별로 이런 기본 규격들에 대한 스타일이 다르기 때문에, 개별 웹페이지마다 - 크로스브라우징 테스트를 해주어야한다. 내가 내린 명령어는 동일하지만 ,그걸 브라우저별로 해석하는 방식이 여러가지라는 이야기다.
HTML에서 입력을 지원하는 목록들 (자세한 사항은 아래 링크를 참조) HTML에서는 다양한 입력규격들을 지원하고있다. 그리고 상황에맞게 이 내용들을 만드는게 중요한데. 사실 모든 규격들을 항상 사용하는 것이 아니기 때문에. '필요한 정보규격'에 맞게, 해당 예제들을 찾아서 수정해 사용하는걸 추천한다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
Form 규격중 입력창은 좌우너비를 조절할 수도 있고, 입력에따라 크기를 다르게 만들 수도 있다. 또한 CSS를 통해 해상도에맞게 반응형 형태로 입력창을 변형할 수도 있으니. 기본적인 단순 규격만으로 개별 요소들을 나눠놓기를 추천한다.
형태로는 비슷비슷해보이지만. 타입이 각자 text, email, tel, url 등으로 각자 다른걸 알 수 있다.
별도로 입력된 데이터들은 추후 자바스크립 등의 데이터 관련 모듈을 통해 - 해당 데이터를 어디로 옮길지. 누구한테 보내줄지.어떻게 쌓아올릴지 등을 직접 설정할 수 있다. 또한 웹 서버나 DB쪽을 공부하게된다면. 해당 데이터들을 다시 어떤 방식으로 관리할지에 대한 부분도 연관이 되므로. 입력창의 기능을 결코 간과해선 안된다.
HTML 알아보기
중간확인 테스트
위와 같은 내용을 직접 코딩하려면 어떻게 해야할까?
- 기본 보일러 플레이트 (기본 HTML 규격)을 깔고
1) H1 태그와 텍스트 부분을 넣어준다.
2) hr 태그를 통해 디바이더를 그려넣어준다.
3) A 태그 이후에 href를 통해 - 해당 MDN 문서의 링크를 넣어준다.
4) 테이블 구조를 만들어 두개의 TR과 TD를 각각 만들고, 텍스트를 입력해주면 완성.
원하는 내용만 정확히 알고있고. 모르는 내용은 자료를 찾아가면서 하더라도 크게 문제가 없다. 모든 내용을 항상 외우려하기보다는, 그때그때 필요한 자료를 찾아서 - 수정해 사용하는 습관을 들여보자.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
