[HTML] 첫 연습

학습하며 만들어본 예제 및 설명

<!-- <h1> 페이지의 제일 메인 로고 이런게 들어감 h2 h3 이렇게 갈수록 중요도가 낮아짐  -->
<!-- p 문장 ~했습니다 이런태그가 들어감 문단안에 강조하는 글씨가 들어가면 strong태그로 처리 -->

<!-- ul 과일바구니 li 과일 리스트를 감싸는게 ul li  -->
<!-- dl dt dd dt는 리스트의 분류라고 보면돼 dd는 dt의 주제를 토대로 li처럼 작성
    ir기법으로 dt를 화면에 노출되지않게 함 / 화면에 렌더링이 안되게 하는 기법 -->
    <!-- span div  의미가 없는 태그야 항상 모든 태그를 감싸야해 -->
    <!-- html css js -> react -> react + ts -> next.js + ts -->
    <!-- 표를 만들때 정말 많이 쓰임 
        <table>
        <tr> 테이블 만들때 쓰임
            <td>날짜</td>
            <td>이름</td>
            <td>성별</td>
        </tr>
        <tr>
            <td>11/15</td>
            <td>김우직</td>
            <td>남자</td>
        </tr>
        <tr>
            <td>11/14</td>
            <td>박수진</td>
            <td>여자</td>
        </tr>
    </table> -->
    <!-- <span>관리번호</span> 애매한 것들 처리용 -->
    <!-- <form action="">  
        <input type="">
        <button></button>
    </form> 
    데이터를 전송하고 갱신할때 정말 많이쓰임
    -->
    <!--배달 어플같은거에서 메뉴 고를때 
        <select name="" id="">
        <option value="피자">1</option>
        <option value="감자튀김">2</option>
        <option value="떡볶이">3</option>
    </select> -->
    <!-- <span>1</span><br>
    <span>2</span><br>
    <span>3</span><br>
    <span>4</span><br> 
    br태그는 줄넘김 -->
    <!--<img src="" alt="로고입니다">-->
    <!-- <h1>사과하나</h1>
    <p>유압착즙으로 침전물 없는 맑은즙 짜드립니다.</p>
    <p>전화주시면 가지러<br>가고 <strong>배달해드립니다.</strong></p>
    <span>인천광역시 부평구 동암남로 4, 501호</span>
    <span>010.1234.5678/010.5678.1234</span> -->
    <!-- <ul>
        <li>Men</li>
        <li>Women</li>
        <li>Kids</li>
        <li>런칭캘린더</li>
        <li>ESSENTIAL</li>
    </ul>
    <ul>
        <li>전체보기</li>
        <li>신발</li>
        <li>의류</li>
        <li>스포츠용품</li>
        <li>언더웨어</li>
    </ul> -->
  

<!-- SPA MPA  react = SINGLE PAGE APPLICATION 기반 / MULTI PAGE APPLICATION -->

내용 정리

<h1> : 가장 중요한것을 나타낼때 주로 사용하는 태그이며 숫자가 커질수록 중요도는 떨어짐

<span> : 애매모호한 것들을 처리하는 태그
  
<ul> : 리스트를 감싸는 태그
  
<li> : 리스트 즉 목록들을 나열할때 주로 사용하는 태그
  
<div> : 컨테이너 단위로 의미가 없는 태그 부모태그들을 묶는 하나의 커다란 태그 
   \         
   <ul>
    |
   / \
 <li> <li>
  
<table> : 표를 만들때 정말 많이 쓰임
   |
  <tr> : 행을 나타내는 태그       
    |
  <td> : 열을 나타내는 태그
    
    
    ex
    
    1tr 1td -> 왼쪽 젤 위
    
    2tr 1td -> 한칸 내려옴
 
    
    
 <select> : 뭔가를 고를때 쓰는 태그 배달 어플처럼
   	|
 <option>
   
   
 <br> : 줄바꿈 태그
   
 <p> : 주로 문장을 나타내느 태그
  
   
 		  <form action=""> : 데이터를 전송하고 갱신할때 많이 쓰임
   	      /               \
 <button onClick="">  <input type="">
   
   
 <dl> : 리스트의 분류 
   |
 <dt>
   |
 <dd>
   
   
 <strong> : 문장안에 강조하는 글씨가 들어가면 주로 사용
   
   
 <img src = "" alt=""> : 이미지 삽입
   		|
 	   alt : 이미지 태그에서 스크린 리더로 읽는 형식적인 설명
   
 
   
   
   
   
   
#### 프론트엔드 마스터 커리큘럼
   
 html css js -> react -> react + ts -> next.js + ts 
   
   
   
   
**SPA(Single Page Application) **: 하나의 창으로 만들어진 페이지 (React)
   
**MPA(Multi Page Application) **: 여러 창으로 만들어진 페이지
  
**IR **: 웹에서 보이지 않게하는 기법 (CSS 코드로)
   
**SEO **: 검색엔진 최적화 (next.js)