[청년취업사관학교] html table, css (240625)

 

과제

 

내용 정리

• Form : 사용자로부터 정보를 입력받아 제출하기 위한 대화형 태그. 단순히 입력받은 값을 화면에 뿌리는 용도 외의 사용이 필요할 경우 사용.
  • method : 양식제출 시 사용할 http 메서드
    • post : 양식 데이터를 전송. 브라우저에 캐시 되거나 히스토리에 남지 않음.
      데이터와 쿼리 별도 전송. 길이제한이 없고, get보다 보안성 높음.
      • enctype : 양식 제출 시 데이터 MIME타입을 나타낸다.
        • application/x-www-form-urlencoded : 기본값
        • multipart/form-data : 이 존재하는 경우 사용
    • get : 양식 데이터를 URL과? 구분자 뒤에 이어 붙여 전송. 요청이 브라우저에 캐시 되어 저장됨.
      쿼리 문자열에 포함되어 전송되기 때문에 길지에 한이 있다. 보안상 취약점이 존재하므로 중요데이터 x
  • action : 작성 양식 데이터를 처리할 URL기입. 지정하지 않으면 form이 있는 페이지 URL로 제출.
  • autocomplete : 자동완성 값을 기본값으로 가질 수 있는지. (이전에 해당 양식에 입력된 값이 있는지)
    <input type = "email" autocomplete="on"/"off" />
• Label
  • 사용자 인터페이스 항목. input과 함께 사용
    • <label for ="uesr_id"> 아이디 </label>
      <input id="user_id" type="text"
    • <label> 아이디
      <input type="text">
      </label>
• Button
  • 사용자가 클릭할 수 있는 구성요소. 
  • 필요한 어디서든 배치 가능
  • 기본 행동이 없기 때문에 JS와 연결하여 사용. submit-제출/reset-reset
    • <a>와의 비교 : a는 하이퍼링크를 사용/ button은 js로 동작

 

• Table
  • 테이블 생성 시 사용. 컨테이너 요소.
    • tr : table row 테이블 행
    • th : table header 테이블 행 열 제목
    • td : table data 셀 내용
  • caption
    • 테이블 제목이나 설명
  • thead, tbody, tfoot
    • 테이블 머리글 본문 바닥글
    • 구역 나누는 요소(선택적으로 사용) 
  • span -> row/col(행/열) 병합
  • colgroup 
    • 테이블 열 그룹을 만들고 싶다면 사용

 

 

• css 상속
  • css 일부 속성은 자식에게 상속된다.
  • 아래 예시의 경우, color 속성은 h1, h2, p 모두에 상속되나 
    width, height 등의 경우 상속되지 않는다.
  • inherit : 선택 요소에 적용된 속성값을 부모와 동일하게 설정(상속시키기)
  • initial : 브라우저 기본 스타일 속성
    • + form 관련 태그들 또한 상속받지 않는다.

<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>

div {
color: red;
border: 5px solid pink;
}