02. html 복습

거의 한 달 만에 작성하는 velog 다.
한 달 동안 공부를 하지 않은 것은 아닌데..
하루하루 공부 할 분량을 맞춰서 진행하기에 급급했다.

c언어 인강을 듣기로 하고, 3분의 2이상 수강을 하였는데
내용을 이해하기에 급급했다.
(그 마저도 다 이해되는 것도 아니고..ㅠㅠ)
점점 이렇게 공부하는게 맞는건가...? 하는 생각이 들다가
직접 코드를 쳐보고 실습하면서 익히는게 중요하다고 생각해서
html, css, java에 phython까지 기초를 다져주는 인강을 신청하게 됐다.

c언어를 배울 때 보단 이해도 더 잘 되고,
흥미도 생겨서 참말로 다행인데... 수박 겉핥기 식으로 조금씩 배워서 그런건지
(복습을 제대로 하지 않은 탓일까)
과제를 할 때는 어떤 코드를 쳐야할지 도무지 감이 잡히지가 않았다.

진도를 나가는 것 보다, 하나를 알더라도 제대로 알고가는 것이 중요하기에
html기초부터 다시 복습해보기로 다짐.

velog를 꾸준히 썼다면, 이거 읽어보면서 복습이 끝났을수도 있는데^^..

좀 더 치열하게 공부해보자고 다짐하며..

HTML 텍스트 기본 태그

1. 제목 태그
<'h1> ~ <'h6> 번호에 따라 크기가 달라짐.
h1은 한 페이지 당 하나.
정보의 구조를 나타내는 용도로만 사용


2. 줄바꿈 태그
<'br>. 단순한 시각적인 줄 바꿈. 닫는 태그 필요 없음
<'p>. CSS가 적용될 단위로 사용, 문단 구분 태그로 사용


3. 강조 태그
<'b> 단순히 진하게
<'strong> 정보적 강조.


4. 기울임 태그
<'i> 단순히 기울임
<'em> emphasize. 정보적 강조. 컴퓨터에게 중요한 정보임을 알림


5. 기타 태그들
<'mark> 사용자가 관심을 가질 만한 정보 강조
<'sup> 위첨자 / <'sub> 아래첨자
<'s> 취소선
<'blockquote> 텍스트가 긴 인용문에 사용
<'hr> 주제, 분위기 전환


6. 이미지 태그 <'img>
<'img src = " "> 이미지의 절대 경로
<'alt> 이미지 설명
<'img width > 이미지의 가로 길이


7. 하이퍼링크 태그 <'a>
<'a href> 하이퍼링크가 가리키는 URL
<'a target> 링크의 페이지를 열 창 지정

HTML 중첩 태그

1. 목록 태그

To-do-List 등 각종 정보 순번대로 나열시 자주 사용됨!!

• ul > li,
  ol > li
• ul : unordered list. 순서가 없는 리스트
  type 지정 가능
  
  
• ol : ordered list. 순서가 있는 리스트
  type, start 지정 가능
  
  
• li : list item. 목록의 요소

2. 테이블 태그

• table > tr > th, td
  table > caption
  
  
• table : 표
• tr : table row. 표의 한 열
  th : table header. 각 열, 행의 머리
  scope- 무엇의 머리인지 표시
  td : table data. 표의 각 칸
  colspan - 가로로 n개 칸 병합
  rowspan - 세로로 n개 칸 병합
  
  
• caption : 표의 제목
  
  tr (한 열) 안에 td (각 칸) 데이터가 들어감.

  <tr>
  	<td></td>
  	<td>아침</td>
     <td>점심</td>
     <td>저녁</td>
   </tr>
  > ```
  <br>

Inline Block level

1. inline 요소
   : 내용의 크기가 요소의 크기를 결정함 (자체 크기 없음)
   줄바꿈을 강제하지 않음
   ex) a, b, br, cite, img, input,lavel, script, span
   
   
2. block level 요소
   : 자체적인 크기와 여백을 가짐
   부모요소의 한 줄을 독점, 강제 줄바꿈
   ex) article, li,ol,ul,header, div, form, h1,footer
   
   
3. inline-block 요소
   : inline 요소와 block 요소의 특징을 혼합
   자체적인 크기와 여백을 가짐, 줄바꿈 강제하지 않음
   

HTML 구획과 시멘틱 요소

1. 구획을 나누는 태그

• <'div> : division
  다른 요소들을 묶거나 문서 구획을 나누는데 사용.
  스스로는 아무것도 표현하지 않는 순수 컨테이너
  코드로는 용도 추론 불가
  

2. Sementics - 의미가 부여된 태그
   각 구획의 용도와 내용의 의미를 태그로 알 수 있게 함

• <'header> : 페이지의 최상단.
  제목, 로고, 검색창 포함. 페이지의 소개,탐색에 도움을 줌

• <'footer> : 페이지의 최하단.
  작성자, 저작권 정보, 관련 문서 등 포함

• <'nav> : 링크 포함 (현재 페이지 내 구획, 다른 페이지 이동 포함)

• <'aside> : 문서의 주내용과 간접적으로 연관된 부분
  주로 사이드바에 사용

• <'main> : body의 주요 콘텐츠. 메인 콘텐츠

• <'section> : 콘텐츠 내 큰 단위의 독립적인 구획
  다른 시멘틱 태그의 의미에 해당하지 않는 구획

• <'article> : 독립적으로 재사용되거나 반복적으로 나타내는 구획

HTML 폼 사용하기

1. <'form>
   : 정보 제출에 사용되는 문서 구획. 내부 양식들의 부모, 컨테이너 역할
   입력된 정보들을 어떻게 서버에 전달할지 결정
   <'id> : 고유값
   <'method> : 입력된 정보들의 전달방식 (get, post)
   <'action> : 정보들을 처리할 서버상의 프로그램 지정
   <'autocomplete> : 자동완성
   
   
2. 폼 요소

• <'label> : 각 입력양식의 레이블을 표시 (for)
• <'input>
  id (고유값, label과 연결), autocomplete,
  autofocus (페이지로 들어올 때 커서가 위치) ,
  disabled (수정 불가, 값이 전송되지 않음),
  name (서버로 전송될 항목명),
  readonly (수정 불가, 입력된 값은 전송됨)
  • <'input type ="text">
    <'input type ="password">
    <'input type ="tel">
    placeholder (입력값이 공백일 시 보여질 텍스트),
    maxlength (최대글자수)
    
  • <'input type ="number">
    max,min,step (입력 가능한 값의 간격)
    <'input type="checkbox">
    checked (체크로 초기화 여부)
    <'input type="radio"> : 하나를 골라야하는 속성
    checked(체크로 초기화 여부),name (속한 선택지의 구분자)
    <'input type="file"> : 파일 첨부
    Multiple(여러 파일 가능 여부)
    
    
• select와 option
  • <'select> : 선택지
    (id - 고유값.label과 연결, name - 서버로 전송될 항목명)
    -<'option> : 선택 항목
    (value- 서버로 전송될 값,
    selected - 선택여부. select 하나 당 하나의 option에만 가능)
    
    
• <'textarea> : 여러줄의 텍스트를 입력할 수 있는 태그
  (placeholder,maxlengths,rows)
• <'button>
  (type - 버튼의 역할. disabled - 비활성화)