HTML part 2.

졀·2023년 8월 13일

UDR 언더독레볼루션

HTML&CSS

목록 보기

2/3

📕 링크

: 현재 문서에서 다른 문서로 이동할 수 있는 수단

📖 a 태그 요소

: 링크는 anchor, a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만듦

인라인 요소, 콘텐츠는 주로 링크의 목적지를 나타냄
a 태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있음

<a href="https://www.naver.com" target="_self">
 현재 탭에서 열기(기본값)
 </a>
<a href="https://www.naver.com" target="_blank">
 새 탭에서 열기
</a>

a 태그의 href에는 웹문서의 주소 뿐 아니라 전화번호나 메일 주소 등을 지정할수도 있다. 이 때 각 유형별로 추가되는 텍스트가 있음

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>링크 만들기</title>
    </head>
    <body>

        <a href="https://www.naver.com/">
            네이버로 갑시다!
        </a>
        <br>
        <a href="https://www.google.com/">
            구글로 갑시다!
        </a>
         <!--a태그는 기본적으로 현재페이지에서 다른 목적지로 이동하고 싶을 때 사용하는 요소-->
        <br>
        <a href="https://www.google.com/">
            <img src="images/images.png" width="300"> <!--여기 텍스트가 아닌 다른 콘텐츠 들어갈 수 있음-->
        </a>
        <!--위의 a태그는 모두 눌렀을 때 현재 탭에서 새로운 페이지 열림 = target 속성이 지정이 안돼있어서 기본 값인 self에 맞춰서 동작하기 때문 -->
        <br><br>
        <a href="https://www.naver.com/" target="_self">
            네이버로 갑시다!
        </a>
        <br>
        <a href="https://www.google.com/" target="_blank">
            구글로 갑시다!
        </a>
        <!--target이 self: 현재 탭에서 열기, target이 blank: 새로운 탭에서 열기-->
        <br><br>

        <a href="tel:010-1234-5678">010-1234-5678</a>
        <br>
        <a href="mailto:id@naver.com">
            id@naver.com
        </a>
        <!--꼭 웹페이지가 아닌, 전화번호와 이메일보내기도 가능-->
        </a>
        </body>
</html>

<실습결과>(html 파일을 넣어도 가능)

📙 목록 표시하기

📖 목록

: 연관 있는 항목(item)들을 나열한 것을 의미
html 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분 (기호 표현 여부)
ex. <Unordered List>: 순서와 무관하게 같은 기호 사용해서 나열

토끼
다람쥐
청설모
호랑이
<Ordered List>: 각 항목 하나하나에 순서 매겨져 있음

HTML
CSS
JavadScript

✏️ 목록 태그

순서 없는 목록: <ul> , </ul>
순서 있는 목록: <ol> , </ol>
<li>태그는 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그
항목들(<li> 태그들)을 감싸는 태그가 무엇이냐에 따라 기호가 달라짐
=> <ul>,<ol>,<li>는 모두 블록 레벨 요소를 만드는 태그임

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>목록 만들기</title>
    </head>
    <body>
        <h1>귀여운 동물 목록</h1>
        <ul>
            <li><strong>강아지</strong></li>
                
            <li>고양이</li>
            <li>두더지</li>
            <li>햄스터</li>
        </ul>
        <hr>
        <h1>프로그래밍 공부 순서</h1>
        <ol>
            <li><mark>HTML</mark></li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>NODEJS</li>
        </ol>
    </body>
</html>

<실습결과>

📗 입력 요소 만들기

📖 input

: 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 '필드')을 나타냄
기본적으로 인랑니 요소이며, 단일 태그

✏️ Type 속성

: input의 핵심, type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라짐.
사용 가능한 type은 20여가지이며, 기본 값은 text(아무것도 지정하지 않았을 때)
type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이 보임

input태그의 타입이 무엇이든지 예외없이 지정간으한 속성도 존재
: name
: name은 식별자 역할을 하는 속성, 입력항목에 대해 이름을 지정해주는 속성

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>다양한 입력 요소 만들기</title>
    </head>
    <body>
        <!--각 입력요소는 유형이 다르기 때문에 서로 추가할 수 있는 속성의 종류가 조금씩 다름-->
        <input type="text" placeholder="메시지 입력..!"/><br><br>
        <!--텍스트->문자를 입력받을 수 있는 입력요소, 입력전에 안내 메시지 만들기(속성은 placeholder)-->
        <!--안내메시지는 사용자가 입력하기 전에만 나타남-->
        
        <input type="text" maxlength="5"/><br><br>
        <!--텍스트의 갯수 제한-->

        <input type="button" /><br><br>
        <!--클릭을 입력받는 입력요소, 아무것도 쓰여있지 x-->
        <input type="button" value="PUSH"/><br><br>
        <!--글 써주기 : value -->

        <input type="color" /><br><br>
        <!--팔레트 뜸-->
        <input type="color" />색을 골라보세요!<br><br>
        <!--옆에 텍스트 뜨게 하는 편이 더 좋음-->

        <input type="range" /><br><br>
        <!--range는 어떤 범위가 주어지고, 그 범위내에서 bar을 움직여 숫자로 된 값을 골라봐라는 입력 요소-->
        <input type="range" max="100" min="0" step="10"/><br><br>
        <!--수치와 관련된 속성 추가, 최대값과 최소값, 단위 넣기 (마우스, 키보드로 작동 가능)-->
        
        <input type="date"/><br><br>
        <!--date 타입 추가만으로 편하게 날짜 선택 가능, 달력이 나오므로 원하는 날짜 선택하면 입력창에 표시-->
        
        <!--name: input이라는 동일한 이름을 가진 태그들 사이에 서로를 식별하기 위해 존재-->
        <input name="text" type="text" maxlength="5" placeholder="메시지 입력..!"/> <br><br>

        <input name="push" type="button" value="PUSH"/><br><br>

        <input name="color" type="color" 색을 골라보세요!/><br><br>

        <input name="score" type="range" max="100" min="0" step="10"/><br><br>

        <input name="birthday" type="date"/><br><br>
        <!--name은 id나 클래스처럼 사용자가 그 값을 정해줄수 있는 속성-->
    </body>
</html>

<실습결과>

📘 select 그리고 textarea (input 외 입력요소들)

📖 select

: 보기 중에 골라보자
다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴
메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시
select에는 input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있음 (value는 실제로 처리될 값을 나타냄 - 나중에 select를 통해서 선택된 결과를 바탕으로 실제 서버프로그램이 값을 처리할 때 사용되는 값)

📖 textarea

: 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소
textarea 역시 name을 추가해 구별해줄 수 있는 입력 요소 (input은 한 줄 밖에 쓸 수 없음, textarea는 텍스트가 많아져서 줄수가 길어지는 경우에 자동으로 스크롤 생김)
+) select, textarea는 추가적인 속성을 여러가지 사용해서 다양하게 요소 사용 가능(둘 다 인라인 요소)

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>다양한 입력 요소 만들기</title>
    </head>
    <body>
        <h1>키우고 싶은 동물 고르기</h1>
        <select name="pet">
            <!--select도 입력요소므로 네임 추가해서 항목의 이름 붙여줌-->
            <option>강아지</option>
            <option>고양이</option>
            <option>햄스터</option>
            <option>앵무새</option>
        </select>

        <h1>키우고 싶은 동물 고르기 value와 속성 추가해보기</h1>
        <select name="pet" multiple>
            <!--multiple: 값을 요구하지 않는 속성, 써두기만 하면 multiple인 것. 안쓰면 아닌것 multiple 하면 여러개 선택할 수 있도록 펼쳐진 메뉴 나타남. CTRL누르면 여러개 선택 가능-->
            <option value="dog">강아지</option>
            <option value="cat" selected>고양이</option>
            <!--selected도 multiple처럼 써있으면 작동하고 아니면 적용 x, 값 따로 요구하지 x, 기본적으로 선택된 상태에서 시작-->
            <option value="hamster">햄스터</option>
            <option value="parrot">앵무새</option>
            <!--value를 추가한다고 해서 표면적으로 생김새가 달라지지 x, html 문서를 사용한 사용자가 입력요소에서 무언가를 선택했을 때 어떤 결과물을 내는 서버 프로그램을 다룰때 중요-->
        </select>
        <br>

        <textarea></textarea>
        <textarea>기본적으로 쓰여 있는 텍스트</textarea>
        <!--사용자는 기본적으로 쓰여 있는 텍스트를 지우고 쓸 수 있고, 써진 상태에서 내용을 이어서 쓸 수 있음-->
        <!--name과 다른 속성 추가 가능-->
        <textarea name="content" rows="10" cols="10">기본적으로 쓰여 있는 텍스트</textarea>
        <!--rows는 행 수, cols는 열 수(문자 10개 정도 들어감, 문자나 글꼴 따라 너비가 다르므로 10개정도임)-->
        <!--textarea 우측 하단 빗금 세모를 잡고 크기 조절 가능-->

    </body>
</html>

<실습결과>

📕 폼(form)1 - 서버와 클라이언트

📖 form

: 사용자가 입력한 데이터(입력값-input, select,textarea와 같은 입력요소에 입력된 값)을 서버로 보내기 위해 사용하는 태그 (입력요소들을 감싸는 태그, 자기가 감싸고 있는 입력요소의 값을 서버로 보냄)
+) 서버란 정보를 제공하는 호스트(host)

📖 서버와 클라이언트

: 1. 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다
ex. 클라이언트: (네이버 홈페이지 주소를 입력하며) 저 네이버 홈페이지 보고싶어요. 요청할게요. 엔터!(엔터를 누르는 순간 = 요청 보내는 순간)
서버: 네 알겠습니다. 홈페이지 html 문서를 보내드릴테니 보세요!(응답으로 네이버 웹페이지를 보냄) (클라이언트 컴퓨터에서 멀리 떨어져 있는 네이버 서버가 인터넷 네트워크를 통해 요청 받음)
클라이언트: 네 제 웹브라우저에 네이버 홈페이지 오픈됐어요. 감사합니다^^

클라이언트가 어떤 요청을 보내는가에 따라 응답은 달라질 수 있다.
ex. 클라이언트: 로그인 시켜주세요
서버 : 네! 앗 근데 비밀번호가 틀리다
클라이언트: 헉 그렇군요
=> 로그인 양식은 세 개의 입력 요소로 구성되어 있으며, 세 개의 입력 데이터는 form을 통해 서버로 전송된다. 사용자의 요청에는 사용자가 입력한 값들이 포함됨(입력요소에 입력한 값)
=> html의 폼 태그는 로그인 양식과 같은 입력 양식을 구성하고 있는 여러 개의 입력 요소를 묶어서 입력된 값들을 한꺼번에 서버로 전송할 수 있게 도와주는 역할

📙 폼(form)2 - 폼 태그

📖 form

: form은 입력 요소들을 감싸며 입력 값을 서버 측으로 제출(submit)할 수 있다.
입력 요소 개수는 무제한
입력한 값을 전송할 때는 주로 타입 속성을 submit으로 지정해둔 input 요소를 사용함. (버튼 형태의 요소를 만들어주는 태그로 버튼을 누르게 되면 서버로 전송되는 요청이 진행되고, 서버 측에는 그 요청을 받아 일처리 진행)

✏️ form의 속성

: form은 입력값을 전송하여 서버에게 일처리를 요청하려고 사용하는 태그

action: 입력값을 전송할 서버의 url을 지정하는 속성 (url은 서버 프로그램의 주소나 파일명 등을 의미하는 말)
method: 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST등의 값을 지정할 수 있음)
ex.

<form action="example.php" method="POST">
</form>

위의 코드 예제는 example.php라는 서버 프로그램으로 입력값을 전송해 요청할 것이며 POST 방식으로 전송할 것.

✏️ GET vs POST

GET: 서버에 요청을 보내어 응답을 받아냄, 서버로부터 정보를 '가져오겠다'는 성격의 요청
ex. 서버에서 이미지 파일 받아오기나 기상청 날씨 정보 가져오기 등의 요청
POST: 서버에 요청을 보내어 작업을 수행함, 서버에 있는 데이터를 추가/수정/삭제 한 후 응답을 받아냄, 서버의 정보를 '조작하겠다'는 성격의 요청

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>서버에 요청을 보내자, 폼!</title>
    </head>
    <body>
       <!--가짜 서버 먼저 만들기(폼= 서버에 요청을 보내는 것)--> 
       <!--가짜 서버는 서버 프로그램을 만드는 형식 언어 php를 이용해 파일을 하나 만들고 그 파일을 가짜 서버로 이용 -->
       <h1>키우고 싶은 동물 고르기</h1>
       <form action="exam.php" method="POST">
        <!--임시 서버에 일처리 시키겠다-->
          <input type="text" placeholder="NAME" name="name">
          <!--입력요소 3개 text타입으로 내이름 입력받는 input1개와-->
          <br>
          <!--3가지 옵션 중 하나를 선택할 수 있도록 메뉴를 제공하는 select 있음-->
          <select name="pet">
            <option value="dog">강아지</option>
            <option value="cat">고양이</option>
            <option value="parrot">앵무새</option>
          </select>
          <br>
          <input type="submit" value="전송">
          <!--폼에 입력한 입력 값들을 서버에 보낼 수 있는 submit타입의 input 태그 -->
       </form>
    </body>
</html>

<실습결과>

졀

이전 포스트

HTML part 1.

다음 포스트

HTML part 2.

HTML&CSS

📕 링크

📖 a 태그 요소

실습방법

📙 목록 표시하기

📖 목록

✏️ 목록 태그

실습방법

📗 입력 요소 만들기

📖 input

✏️ Type 속성

실습방법

📘 select 그리고 textarea (input 외 입력요소들)

📖 select

📖 textarea

실습방법

📕 폼(form)1 - 서버와 클라이언트

📖 form

📖 서버와 클라이언트

📙 폼(form)2 - 폼 태그

📖 form

✏️ form의 속성

✏️ GET vs POST

실습방법

HTML part 1.

CSS

0개의 댓글