HTML 정리(feat.생활코딩)

dev_bbie ·2023년 12월 19일

1. 하이퍼텍스트와 속성(a태그)

<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
(<a target="_blank" href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="전설적인 프로그래머">도널드 커누스</a>)

link를 만드는 방법

2. 태그의 중첩과 목록

li단독으로 태그 사용하는 게 아님.
ul태그는 그룹핑하는 효과(unordered list)
ol태그 : 순서가 있는 리스트(ordered list)

<ol>
  <li>기술소개</li>
  <li>기본문법</li>
  <li>하이퍼텍스트와 속성</li>
  <li>리스트와 태그의 중첩</li>
</ol>
<ul>
  <li>최진혁</li>
  <li>최유빈</li>
  <li>한이람</li>
  <li>한이은</li>
</ul>

기술소개

기본문법

하이퍼텍스트와 속성

리스트와 태그의 중첩

최진혁

최유빈

한이람

한이은

3. 문서의 구조

body는 웹 상에 보여주는 본문에 해당하는 태그들을 담음.

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
  <li>기술소개</li>
  <li>기본문법</li>
  <li>하이퍼텍스트와 속성</li>
  <li>리스트와 태그의 중첩</li>
</ol>
 
<h2>선행학습</h2>
 
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 
</body>
</html>

4. 단락 - p태그

<p> 블라블라 </p>

5. 줄바꿈 - br

태그 하나임
br태그 말고, p태그를 추천함

블라블라<br><br>
블라블라<br>

6. 이미지 - img

alt속성 : 이미지를 표시할 수 없을 때, 대안으로 보여주는 거

<html>
<body>
    <img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">
</body>
</html>

7. 표 - table

td : 항목 하나하나를 묶어줌.
tr : table row 약자로 같은 행에 속하는 td태그들 묶어줌.

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <tr>
        <td>이름</td>     <td>성별</td>   <td>주소</td>
    </tr>
    <tr>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
    </tr>
    <tr>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
    </tr>
</table>
</body>
</html>

thead, th, tbody, tfoot

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td >청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>청주</td> <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>  <td></td>      <td></td> <td>1500</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

표 병합 rowspan="2" colspan="3"

<td>최진혁</td>  <td>남</td>      <td rowspan="2">청주</td> <td>1000</td>
<td colspan="3">합계</td>      <td>1500</td>

그렇게 중요한 내용은 아님.

8. 입력양식 - form

사용자가 입력한 정보를 서버로 전송할 때 사용하는 그러한 것들
input 태그
form action="정보가 어디로 보내는지"

<form action="http://localhost/login.php">
    <p>아이디 : <input type="text" name="id"></p>
    <p>비밀번호 : <input type="password" name="pwd"></p>
    <p>주소 : <input type="text" name="address"></p>
    <input type="submit">

1) text

여러줄을 입력받을 때, textarea 태그

<p>textarea :
            <textarea cols="50" rows="2">default value</textarea>
        </p>

select 태그
option 태그

<body>
        <form action="http://localhost/color.php">
            <h1>색상</h1>
            <select name="color">
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <h1>색상2 (다중선택)</h1>
            <select name="color2" multiple> //여러개를 선택할 수 있게
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <input type="submit">
        </form>
    </body>

3) button

input type="button"
input type="reset"
input type="submit"

<form action="http://localhost/form.php">
        <input type="text">
        <input type="submit" value="전송">
        <input type="button" value="버튼" onclick="alert('hello world')">
        <input type="reset">
    </form>

4) hidden field

<input type="hidden" name="hide" value="egoing">

5) label

붉은색 파란색

<label>
	<input type="checkbox" name="color" value="red"> 붉은색
</label>
<label for="color_blue">
	<input id="color_blue" type="checkbox" name="color" value="blue">파란색</label>

https://www.codingfactory.net/11008
참고하기

6) method

form -> 사용자가 브라우저에 입력한 정보를 어떤 특정한 서버의 url로 전송
get방식과 post방식의 차이
method = "get" : 기본적으로 get방식으로 동작, url을 통해서 데이터를 전송
method = "post" : url이 아닌 다른 방법으로 데이터를 숨겨서 전송
form을 이용해서 전달한다 : post방식으로 전송한다.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/method.php" method="post">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>

7) 파일 업로드

<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="profile">

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="profile">
            <input type="submit">
        </form>
    </body>
</html>

9. 정보로서 HTML

1) meta

<head>
       <meta charset="utf-8">
       <meta name="description" content="생활코딩의 소개자료">
       <meta name="keywords" content="코딩,coding,프로그래밍,html">
       <meta name="author" content="egoing">
</head>

encoding - 정보를 화면에 저장
decoding - 저장 정보를 꺼내어 화면에 저장

가치있는 정보를 위한 meta tag

2) semantic 의미론적 태그

html 사전링크

어떤 종류들이 있느냐...
article : 본문
aside
details
figure
footer : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main
mark
nav
section
time

3) 검색엔진최적화

-> html 코드를 의미론적으로 타당한 태그로 잘 설명하는 것
1) title 태그를 이용하여 페이지의 제목을 나타내기
title 태그의 내용은 검색결과에 반영됨.

2) description 메타태그 사용시
->> 검색 결과 내용에 포함됨.

3) 페이지의 URL 구조 개선하기
html작성시, 그 컨텐츠를 잘 담고있는 이름으로 짓는게 좋다

4) 사이트 내에서 이동하기 쉽게 만들기

검색 엔진에게 사이트 내의 이동은 매우 중요함
홈페이지를 기반으로 한 이동 경로 계획하기

5) 검색 엔진을 위한 것이 아닌 사용자를 위한 컨텐츠를 작성

6) 이미지 관련 정보는 "alt"속성을 이용해 제공할 수 있다.

7) 제목 태그의 적절한 활용 -> 중요한 부분을 강조

8) robots.txt를 효과적으로 활용하기
(검색에 노출이 필요하지 않은 부분은 robots.txt로 제어)

9) 페이지랭크
어떤 사이트를 먼저 검색결과에 노출시키는가

10. viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일환경에서 브라우저가 알아서 화면조절하게 하려면
meta태그의 viewport를 이용해야한다.

11. iframe

웹페이지에 다른 웹페이지를 삽입하는 방법

<p><iframe src="http://opentutorials.org" width="1200" height="700" sandbox></iframe></p>

보안 취약함

12. 비디오 삽입 태그

<video width="400" controls>
	<source src="videos/small.mp4">
</video>

13. html5 사용 가능한가? 여부

caniuse.com으로 들어가서
검색해보기

14. HTML5 입력양식

input types

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
의도한 정보만 입력하도록 규제하는 기능 -> input의 type기능

<input type="number" min"10 max"15">

HTML5 입력 값 체크

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="register.php">
            <input type="text" name="id" placeholder="아이디를 입력" required pattern="[a-zA-Z].+[0-9]">
            <input type="email" name="email" placeholder="이메일 입력">
            <input type="submit">
        </form>
    </body>
</html>

dev_bbie

필요한 개발공부

이전 포스트

HTML 정리(feat.생활코딩)

1. 하이퍼텍스트와 속성(a태그)

2. 태그의 중첩과 목록

3. 문서의 구조

4. 단락 - p태그

5. 줄바꿈 - br

6. 이미지 - img

7. 표 - table

thead, th, tbody, tfoot

표 병합 rowspan="2" colspan="3"

8. 입력양식 - form

1) text

3) button

4) hidden field

5) label

6) method

7) 파일 업로드

9. 정보로서 HTML

1) meta

2) semantic 의미론적 태그

3) 검색엔진최적화

10. viewport

11. iframe

12. 비디오 삽입 태그

13. html5 사용 가능한가? 여부

14. HTML5 입력양식

input types

HTML5 입력 값 체크

[컴퓨터구조] 파이프라이닝

0개의 댓글

HTML 정리(feat.생활코딩)

1. 하이퍼텍스트와 속성(a태그)

2. 태그의 중첩과 목록

3. 문서의 구조

4. 단락 - p태그

5. 줄바꿈 - br

6. 이미지 - img

7. 표 - table

thead, th, tbody, tfoot

표 병합 rowspan="2" colspan="3"

8. 입력양식 - form

1) text

2) Dropdown list

3) button

4) hidden field

5) label

6) method

7) 파일 업로드

9. 정보로서 HTML

1) meta

2) semantic 의미론적 태그

3) 검색엔진최적화

10. viewport

11. iframe

12. 비디오 삽입 태그

13. html5 사용 가능한가? 여부

14. HTML5 입력양식

input types

HTML5 입력 값 체크

[컴퓨터구조] 파이프라이닝

0개의 댓글