200829_TIL

📚 edwith 부스트코스 : 비전공자를 위한 HTML/CSS

Heading 태그: <h1></h1> 등, h6까지 있음

Paragraph 태그: <p></p>

Linebreak 태그: <br> (빈 태그)

텍스트 표현 태그: 굵게 <b> 기울여서 <i> 밑줄 <u> 중간선 <s>
.　　　　　　　　주의! <i>태그는 html5 에서 의미를 가지는 태그로 변경됨

Anchor 태그: <a href=""></a>, target 속성도 자주 쓰임
의미가 없는 컨테이너 요소: <div></div> (블록), <span></span> (인라인)

List 요소: <ul></ul> (순서x, li를 자식 태그로 가짐), <ol></ol> (순서o, li를 자식 태그로 가짐), <dl></dl> (dd, dt의 쌍을 자식 태그로 가짐)

Image 요소: <image src="" alt="">, width, height 속성을 사용하기도 함


Table 요소

• <table> : 표를 나타내는 태그
  <tr> : 행
  <th> : 제목 셀
  <td> : 셀
• 표를 구조적으로 파악하기 위해 사용하는 태그:
  <caption>: 표의 제목
  <thead>: 제목 행 그룹화
  <tbody>: 본문 행 그룹화
  <tfoot>: 바닥 행 그룹화
• rowspan="" : 행 병합, colspan="" : 열 병합
  
  

Form 요소

• input type=""에 들어갈 다양한 타입들
  text: 단순 텍스트 입력, placeholder 속성 사용 가능
  password: 공개할 수 없는 텍스트 입력, placeholder 속성 사용 가능
  radio: 중복 선택 불가한 라디오 버튼-name 속성으로 그룹화, checked
  checkbox: 중복 선택 가능한 박스-name 속성으로 그룹화, checked
  file: 파일을 업로드할 때 사용
  submit: form 값 전송
  reset: form 값 초기화
  image: submit과 동작은 동일, 이미지 삽입 가능-src, alt 속성 필요
  button: 아무 기능이 없는 버튼
• 폼 요소로 쓰이는 태그들 중 input을 받는 태그들
  <select>: 선택 목록 상자, 내부에서 으로 항목 나타냄, selected
  <textarea>: 텍스트 여러 줄 입력 시 사용, rows(줄 수), cols(글자 수) 속성과 함께 사용 가능
  <button>: select, reset, button 총 세 가지 타입
• form 요소들을 구조화하고 명시적으로 연결시키기 위해 사용하는 태그들
  <fieldset>: 여러 개의 폼 요소를 그룹화하여 구조적으로 만듦, 보통 form의 성격에 따라 구분
  <legend>: 폼 요소의 제목으로, 반드시 <fieldset>의 자식으로 최상단에 위치해야 함
  <label>: form 요소의 이름과 form 요소를 명시적으로 연결, form 요소의 id 속성값과 의 for 속성값을 같게 적어야 함
• <form> 태그: form 요소들을 모두 감싸는 태그, 데이터를 묶어서 실제 서버로 전송
  - action 속성: 데이터를 처리하기 위한 서버의 주소
  - method 속성: 데이터를 전송하는 방식 - get(데이터 노출), post

오늘 공부하면서 느낀 점

• Atom Editor를 설치하고 직접 코딩해보면서 배우니까 재밌었다.
• 전에 멋쟁이사자처럼 지원하려고 공부했던 내용이 새록새록 떠오른다. 얼른 복습 구간 지나서 새로운 내용을 배우고 싶다!