Day 01 __ HTML

KSGMN·2023년 9월 25일

목록 보기

1/1

📒 목차

1 인트로
-HTML의 구조

2 문자처리
- h1 - h6 
- p 
- a 
- span 
- br 

3 레이아웃
- header
- nav
- main
- section
- ul, ol
- table
- div 
- footer 

4 폼
- 검색 폼
- 로그인 폼

5 미디어
- img 

6 그래픽
- svg

7 기타
- 시멘틱 태그와 넌시맨틱 태그

a

<a href="https://https://velog.io/" target="_blank"
	style="color : red">벨로그</a>
target="_blank"  --> 새로운탭에서 링크열기

img

1. src(source) - 이미지의 소스(주소)
2. alt(alternative) - 이미지에 대한 설명(이미지 가져오기 실패했을때 설명글)
3. width - 이미지의 넓이

table

thead: table head
tbody: table body
tr: table row (행)
th: table heading (열제목)
td : table data (셀)

  <table border="1">
  <thead>
    <tr>
      <th>이름</th> 
      <th>원산지</th>
      <th>판매중</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>기네스</td>
      <td>아일랜드</td>
      <td>아니오</td>
    </tr>
    <tr>
      <td>하이네켄</td>
      <td>네덜란드</td>
      <td>예</td>
    </tr>

    <tr>
      <td>버드와이저</td>
      <td>미국</td>
      <td>예</td>
    </tr>

  </tbody>
</table>

이름	원산지	판매중
기네스	아일랜드	아니오
하이네켄	네덜란드	예
버드와이저	미국	예

📌 form

1. form
클라이언트의 정보를 서버에 전송하는 역할
예) 로그인, 검색, 회원가입, 게시물 작성 등
- action : 데이터를 전송할 서버의 주소

2. input
유저로부터 데이터를 입력받는 역할
- type : 입력받고자 하는 데이터에 따라 다양한 타입이 존재한다.
- name : 서버가 폼 데이터를 구분하는 기준
- placeholder : 입력해야하는 데이터의 예시

3. button
폼 제출용 버튼
- type : 버튼의 목적

검색 폼

google

검색

<form action="/search.php"> 
<h5>google</h5>
<input type="search" name="q" id="" placeholder="구글 검색">
<button type="submit">검색</button>

로그인 폼

아이디

비밀번호

비밀번호 표시

로그인

<form action="/login.php" method="post">
    <h1>로그인</h1>

    <div>
      <label for="username">아이디</label>
      <input type="text" name="username" id="username">
    </div>

    <div>
      <label for="password">비밀번호</label>
      <input type="password" name="password" id="password">
    </div>

    <div>
    <input type="checkbox" name="" id="show-password">
    <label for="show-password">비밀번호 표시</label>
    </div>

    <button type="submit">로그인</button>
</form>

label과 input은 세트이며 label의 for값과 input의 id값은 같아야 한다.

SVG

scalable vector graphic의 약자
수학적인 방법으로 그래픽을 표현한다
확대해도 깨지지 않는다
로고나 아이콘 등을 표현할 때 사용한다.

svg의 ellipse : 타원, cx,cy는 원의 중심(center xy), rx는 x좌표쪽(수평)반지름, ry는 y좌표쪽(수직)반지름

📌 nonsemantic semantic의 차이점

처음 배울 땐 div로만 구역나누고 특정구역 span으로 css 먹이는 줄 알았지만 Sematic으로 다양한 태그 있음을 배웠다.

웹페이지의 최상단 부분
보통 로고나 슬로건, 메뉴 등이 포함된다

<header>
 <h1>LOGO</h1>
 <p>welcome to company</p>
</header>

<small>은 텍스트 작게 쓸 때

aside

메인을 제외한 나머지부분(사이드느낌), 없을수도 있고 광고부분일 수 도 있음

<aside>
  <h3>추천 기사</h3>
  <ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
</aside>

KSGMN

ming

Day 01 __ HTML

html