🖥Frontend/HTML

HTML

코너(Corner) 2021. 2. 4.

HTML

서버와 클라이언트

클라이언트 : 서버에게 요청하는 것
서버 : 요청받은 서비스를 제공(응답) 해주는 것

웹(Web)

요청과 응답이 일어나는 장소

웹 브라우저(Web Browser)

사용자의 요청에 맞는 주소로 찾아가서 인터넷의 컨텐츠
(문서와 그림, 멀티미디어 파일 등)를 검색 및 열람 후
사용자에게 응답하기 위한 응용프로그램의 총칭이다.

프로토콜(protocol)

사람끼리 소통할 때 서로 이해할 수 있는 공용어를 사용해야 하듯이

컴퓨터 끼리도 공용어를 사용해야 한다. 이러한 공용어를 원활하게 통신하기
위해 필요한 규약을 프로토콜이라고 한다. (규칙과 약속)

http:// (HyperText Transfer Protocol)
클라이언트와 서버간의 웹 페이지 등의 자원을 통신하는 규약
텍스트로 통신하기 때문에 가로채어 본다면 누구든 내용을 볼 수 있다.
따라서 개발자들은 소스코드 내에서 암호화를 한다.

https:// (HyperText Transfer Protocol Secure Socket)
SSL(Secure Socket Layer) 프로토콜을 이용하여
자원을 공개키 암호화 방식으로 암호화해서 통신하는 규약.
서로 다른 키 2개가 존재하고 1번 키로 암호화 했다면
반드시 2번 키로만 복호화 할 수 있다.
SSL인증서 구입 비용 및 갱신 비용이 발생하고 HTTP에 비해서
서버에 부하가 더 많아진다.

IP(Internet Protocol)

사람이 태어나면 출생신고를 하고 고유 번호인 주민번호를 발급받는다.
이를 통해서 서로를 구분하듯, 네트워크 상에서 인터넷에 접속할 때
다른 컴퓨터와 구별될 수 있도록 하는 고유 번호를 IP주소라고 한다.

W3C(World Wide Web Consortium)

월드 와이드 웹을 위한 표준을 제정하고 관리하는 중립적인 기관이다.

-- 대표적인 웹 표준 언어

HTML(HyperText Markup Language)
웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 마크 업 언어이다.
또한 정보에 특정 표시를 해줄 수 있는 언어이다.
마크업 언어란 태그 방법 체계를 의미하며, 태그 등을 이용하여 문서나
데이터의 구조를 기술하는 언어이다.
CSS(Cascading Style Sheets)
구체적으로 어떤 스타일로 요소가 표시 되는 지를 정하는 규격이다.
HTML로 문서를 구조화 하는 것 뿐만 아니라 꾸미기도 할 수 있지만,
동일한 디자인을 사용한 문서가 여러 개 있다면 변경 시 모두 하나씩
수정해야 하기 때문에 불편하다.
CSS는 이런 문제를 해결함과 동시에 웹 페이지에서 내용과 스타일을
분리하고 역할도 분리해준다.(분업)
XHTML(Extensible HTML)
기존에 사용되던 HTML 규격이 가진 문제점을 극복하고,
보다 다양한 분야에 응용 될 수 있도록 해주는 여러가지 확장된 기능을 포함한다.
하지만 XML 기반으로 만들어졌기 때문에 지원되지 않는 브라우저도 있다.
따라서 HTML과 XHTML은 사실상 큰 차이가 없이 사용된다.
XML (Extensible Markup Language)
데이터 전달, 세부설정.
어떠한 데이터를 설명하기 위해 임의로 지은 태그로 데이터를 감싼다.
태그로 데이터를 설명하며, 이것이 데이터의 표시(Markup)가 되고
추가적인 데이터가 생기면 태그 추가와 태그 내부 내용 추가를 할 수 있다.
따라서 데이터 전달과 세부설정에 목적이 있다.
```
<? xml version="1.0"?>

<컴퓨터언어>

<c언어>c</c언어>

<자바>java</자바>

<파이썬>python</파이썬>

</컴퓨터언어>
```

웹 접근성

모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수
있도록 보장하는 것을 의미한다. 마우스가 없는 환경이나 키보드만을
조작해야할 경우, 신체적 장애로 인해 특수한 환경하에 접속을 해야되는 경우,
브라우저별, 모바일 환경에서 접속해야 하는 경우와 같이 다양한 플래솦ㅁ에서도
정보 제공이 다름이 없어야 한다는 것이다.

TOMCAT 톰캣 설치

구글에 tomcat -> download -> tomcat 8.5 .zip 버전(무설치) ->

c드라이브에 압축풀기 >

실행 : bin\startup.bat 프로그램 실행

포트번호 변경,환경 설정 : conf\server.xml

포트 변경 : server.xml 에서 8080 혹은 개인이 설정한 포트번호를 찾아서 (주석이 없는 코드) 수정

startup.bat 실행하자마자 종료될 때

환경변수에서 새로 만들기

변수명 : CATALINA_HOME

변수 값 : C:\apache-tomcat-8.5.61 (혹은 버전 폴더명)

PATH 들어가서 추가

%CATALINA_HOME%\bin

전체 확인 후 다시 시도

HTML

마크업 언어

HTML은 프로그래밍 언어가 아닌 마크업 언어이다. 마크업 언어란 우리가
보는 웹 페이지가 어떻게 구조화되어 있는지를 브라우저로 하여금 알 수 있도록
하는 언어이다.

HTML의 요소

<p> <!-- 여는 태그 (Opening Tag), 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성된다. -->
     You are better <!-- 요소의 내용이며, 단순한 텍스트를 작성한다. -->
</p> <!-- 닫는 태그(Closing Tag), 요소의 이름 앞에 슬래시가 있다. 
사용한 요소가 닫는 태그를 필요로 할 때에는 닫아준다. -->

각각을 모두 요소 (Element)라고 한다.
요소의 이름은 대소문자를 구분하지 않지만 가독성에 있어서
소문자로 작성하는 것을 권장한다.

<HTML> 보다는
</HTML>

<html>
    이렇게
      </html>

내포된 요소(Nesting elements)

요소 안에 다른 요소를 넣는 기법.

<p>
    You are <strong>much</strong> better
</p>

<div>
    You are <strong>much</strong> better
</div>

속성(Attributes)

요소는 속성을 가질 수 있다.

<p class="conversation" id='data'> <!-- 태그가 닫히기 전 속성을 넣는다. -->
    You are much better
</p>

속성은 요소에 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다.
특히 id와 class 속성은 스타일에 관련된 내용이나 기타 내용을 위해
해당 태그를 찾을 수 있는 구분점 역할을 수행한다.

속성 사용 시 주의사항

요소 이름 다음에 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 하고,
여러 속성이 있을 경우에는 속성 사이에도 공백이 있어야 한다.
속성이름 다음에는 등호(=)를 작성한다.
속성 값은 따옴표 안에 작성한다.(생략이 가능한 속성도 있다.)

HTML 주의사항

HTML은 대소문자를 구분하지 않는다.
속성의 값은 따옴표를 사용하지 않아도 되는 경우가 있지만,
띄어쓰기가 있을 경우 반드시 따옴표를 작성한다.
HTML에서 작은 따옴표와 큰 따옴표는 둘 다 같은 의미이다.
```
 둘다 사용할 때 "javascript:alert('a');"
```
[index.html] 3개

인기 있는 웹사이트로 이동하기 : a태그, 새 탭

[siteMoa.html]

네이버

구글

전부 a태그, 이미지태그 사용

HTML 요소

[요소의 종류]

블록(block) 레벨 요소 vs 인라인(inline) 요소

블록 레벨 요소(Block-level elements)
- 웹 페이지 상에 블록을 만드는 요소.
  코드 상에 한 줄로 이어 써도 앞 뒤 요소 사이에
  새로운 줄을 만들고 나타난다.
```
<p>apple</p> <div>banana</div><p>pear</p>
```

인라인 요소(inline elements)
- 보통 블록 레벨 요소 내에 포함되어 사용된다.
  새로운 줄을 만들지 않고 작성한 단락 내에 나타난다.
```
      <p><a>apple</a><span>banana</span></p>
```

블록(block)

(<p>, <h>, <ul>, <div>, <ol>, <form>, ...등)

div 태그

div 태그는 다른 html요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록 요소이다.
주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.

인라인(inline)

(span, a,img, em, strong, sup, sub, ..등)

span 태그

span 태그는 텍스의 특정 부분을 묶는 데 자주 사용되는 요소이다.
주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.

페이지 내부 링크 이동 (책갈피 이동) 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 책갈피</title>
</head>
<body>
        <!--  
            <a> 태그의 id 속성을 이용하면 간단한 책갈피를 만들 수 있다.
            우선 책갈피를 통해 가고 싶은 위치에 태그를 만들고 id 속성을 작성한다.
            작성한 id속성값을 이용하여 다른 <a>태그에 링크를 건다.
        -->
        <h1 id="menu">페이지 책갈피</h1>
        <p><a href="#book1">북마크 1로 이동</a>
        <p><a href="#book2">북마크 2로 이동</a>

        <h2>제목1</h2>
        <p>1번째 단락</p>
        <h2>제목2</h2>
        <p>2번째 단락</p>
        <h2>제목3</h2>
        <p>3번째 단락</p>
        <h2>제목4</h2>
        <p id="book2">4번째 단락</p>
        <h2>제목5</h2>
        <p>5번째 단락</p>
        <h2>제목6</h2>
        <p>6번째 단락</p>
        <h2>제목7</h2>
        <p>7번째 단락</p>
        <h2>제목8</h2>
        <p>8번째 단락</p>
        <h2>제목9</h2>
        <p>9번째 단락</p>
        <h2>제목10</h2>
        <p>10번째 단락</p>
        <h2>제목11</h2>
        <p>11번째 단락</p>
        <h2>제목12</h2>
        <p id="book1">12번째 단락</p>
        <h2>제목13</h2>
        <p>13번째 단락</p>
        <h2>제목14</h2>
        <p>14번째 단락</p>
        <h2>제목15</h2>
        <p>15번째 단락</p>
        <h2>제목16</h2>
        <p>16번째 단락</p>
        <h2>제목17</h2>
        <p>17번째 단락</p>

        <p><a href="#menu">[메뉴로 돌아가기]</a></p>

</body>
</html>

태그
웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그.
사용자가 입력한 데이터를 다른 페이지로 전송할 때 form 태그를 사용한다.

<form action="데이터를 전달할 URL혹은 페이지경로" method="전송방식" name="이름">
</form>

※method : get, post, delete, patch, put, ...등

action은 생략이 가능하고 생략하면 현재 페이지로 이동한다.

method는 생략이 가능하고 생략하면 get방식이다.

input 태그

입력받기 위해 사용되는 태그

size : 글 상자의 크기(값의 길이X)
maxlength : 값의 최대 길이
placeholder : 사용자가 입력하기 전에 미리 보여줄 메세지
readonly : 수정할 수 없도록 하는 설정
value : 미리 값을 지정 (파라미터의 value값)
required : 필수 항목
name : 요소의 이름을 설정 (파라미터의 KEY값)

type 값

<input type="값">

*text : 텍스트 입력(작성한 텍스트가 눈으로 보임)
*password : 텍스트 입력(작성한 텍스트가 눈으로 안보임)
*radio : 여러 개 중 하나의 옵션만 선택 가능
*checkbox : 여러 개 중 다수의 옵션 선택 가능
*file :파일 전송 (첨부파일에서 사용)
color : 원하는 색상을 정의
*email : 이메일 입력(골뱅이 포함)
url : http://로 입력
tel : 핸드폰 번호 입력
*date : 날짜 입력(브라우저별로 달력 UI가 다름)
number, min, max, step : 숫자입력(수치를 조절할 수 있는 상하 버튼 생성)
range : 일정 범위 안의 값만 입력
search : 검색어를 입력 (X버튼이 생겨서 전체 삭제 기능 지원)
*button, submit, reset : 버튼

선택 입력
select 요소는 여러 개의 옵션이 드롭다운 리스트로 되어 있으며, 그 중에서
단 하나의 옵션만을 입력받을 수 있다. option요소는 드롭다운 리스트에서
선택할 수 있는 각각의 옵션을 명시한다.

<select name="KEY값">
    <option value="실제 값">표현 값</option>
    <option value="실제 값">표현 값</option>
</select>

문장 입력
textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.

<textarea cols="가로글자수크기" rows="세로글자수크기">실제 값</textarea>

detalist
form요소에서 미리 지정된 옵션 목록을 제공.
사용자들이 특성 글자를 입력하면 그에 해당하는 미리 지정된 목록을 보여준다.

<input type="text">

<datalist id="datalist id값">
    <option value="실제 값" label="표기할 값1"></option>
    <option value="실제 값" label="표기할 값2"></option>
</datalist>

진행 정도
progress 태그를 이용하면 진행 정도를 나타낼 수 있다.

<progress value="현재 값" max="최대 값"></progress>

fieldset

fieldset 요소는 관련 있는 폼 필드 세트를 표시한다.
필드 세트는 form내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 의미한다.

legend

fieldset 요소의 제목을 표시.
묶음에 대한 설명을 할 때 사용한다.

form태그와 입력태그 속성 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form태그와 입력태그 속성 예제</title>
</head>
<body>

<h1>form태그와 입력태그 </h1>

    <form action="Login.jsp" method="post" name="joinForm">
        <p>아이디
            <input type="text" size="20" maxlength="12" placeholder="아이디를 넣어주세요."    name="userId" required="required">
        </p>
        <p> 비밀번호
            <input type="password" size="20" maxlength="12" placeholder="비밀번호를 입력해주세요." name="userPw" required="required">
        </p>        
        <fieldset>
            <legend>성별</legend>
            <p>
                <label>남자<input type="radio" name="gender" value="남"></label>
                <label>여자<input type="radio" name="gender" value="여" checked></label>
                <!--  checked 는 default 체크값-->
            </p>
        </fieldset>    


        </form>

</body>
</html>

HTML 실습

회원가입 페이지와 비슷하게 구현하기

<!DOCTYPE html>
<html lnag="ko">
    <head>
        <meta charset="UTF-8">
        <title>네이버 : 회원가입</title>
    <style>

#logo {
    width: 240px;
    height: 44px;
    cursor: pointer;
}

#header {
    padding-top: 62px;
    padding-bottom: 20px;
    text-align: center;
}
    </style>

    </head>
    <body>
        <!-- header -->
        <div id="header" align="center">
            <a href="https://nid.naver.com/user2/V2Join.nhn?token_sjoin=wjCpbSbIQl5VDKD2&langSelect=ko_KR&chk_all=on&termsService=on&termsPrivacy=on&termsLocation=Y&termsEmail=Y"
             target="_blank" title="네이버 회원가입 페이지 보러가기">
            <img src="https://m-logoproject.naver.com/img/naver_bi.png" id="logo">
        </a>
        </div>

        <form action="Login.jsp" method="post" name="joinForm">
        <!-- wrapper -->
        <div id="wrapper" align="center">

            <!-- content-->
            <div id="content">

                <!-- ID -->
                <div>
                    <h3 class="join_title">
                        <label for="id">아이디</label>
                    </h3>
                    <span class="box int_id">
                        <input type="text" id="id" class="int" maxlength="20">
                        <span class="step_url">@naver.com</span>
                    </span>
                    <span class="error_next_box"></span>
                </div>

                <!-- PW1 -->
                <div>
                    <h3 class="join_title"><label for="pswd1">비밀번호</label></h3>
                    <span class="box int_pass">
                        <input type="password" id="pswd1" class="int" maxlength="20">


                    </span>
                    <span class="error_next_box"></span>
                </div>

                <!-- PW2 -->
                <div>
                    <h3 class="join_title"><label for="pswd2">비밀번호 재확인</label></h3>
                    <span class="box int_pass_check">
                        <input type="password" id="pswd2" class="int" maxlength="20">

                    </span>
                    <span class="error_next_box"></span>
                </div>

                <!-- NAME -->
                <div>
                    <h3 class="join_title"><label for="name">이름</label></h3>
                    <span class="box int_name">
                        <input type="text" id="name" class="int" maxlength="20">
                    </span>
                    <span class="error_next_box"></span>
                </div>

                <!-- BIRTH -->
                <p>    생년월일<br>
                    <input type="text" size="5" maxlength="10" name="userYear" placeholder="년(4자)" required>
                        <select name="userMonth">
                            <option value="월">월</option>                    
                            <option value="1">1</option>                    
                            <option value="2">2</option>                    
                            <option value="3">3</option>                    
                            <option value="4">4</option>                    
                            <option value="5">5</option>                    
                            <option value="6">6</option>                    
                            <option value="7">7</option>                    
                            <option value="8">8</option>                    
                            <option value="9">9</option>                    
                            <option value="10">10</option>                    
                            <option value="11">11</option>                    
                            <option value="12">12</option>                                    
                        </select>
                    <input type="text" size="5" maxlength="10" name="userDay" placeholder="일" required>
                </p>

                <!-- GENDER -->
                <div>
                    <h3 class="join_title"><label for="gender">성별</label></h3>
                    <span class="box gender_code">
                        <select id="gender" class="sel">
                            <option>성별</option>
                            <option value="M">남자</option>
                            <option value="F">여자</option>
                            <option value="">선택안함</option>
                        </select>                            
                    </span>

                </div>

                <!-- EMAIL -->
                <div>
                    <h3 class="join_title"><label for="email">본인확인 이메일<span class="optional">(선택)</span></label></h3>
                    <span class="box int_email">
                        <input type="text" id="email" class="int" maxlength="100" placeholder="선택입력">
                    </span>

                </div>

                <!-- MOBILE -->
                <div>
                    <h3 class="join_title"><label for="phoneNo">휴대전화</label></h3>
                    <select name="userPhone1">
                        <option value="233">가나 +233</option>    
                        <option value="82">대한민국 +82</option>                
                        <option value="45">덴마크 +45</option>    
                        </select><br>
                    <span class="box int_mobile">
                        <input type="tel" id="mobile" class="int" maxlength="16" placeholder="전화번호 입력">
                    </span>
                    <span class="error_next_box"></span>
                    <button type="button" id="btn_area">인증번호받기</button>

                    </a><br>
                    <input type="text" value="인증번호" disabled>
                </div>


                <!-- JOIN BTN-->
                <div class="btn_area">
                    <button type="button" id="btnJoin">
                        <span>가입하기</span>
                    </button>
                </div>



            </div> 


        </div> 

     </form>

    </body>


</html>

'🖥Frontend > HTML' 카테고리의 다른 글

[CSS] iOS 브라우저 버튼 터치 확대 방지 (0)	2023.04.06
브라우저의 취약한 공격 수법, Tabnabbing 공격과 HTML rel=noopener 속성에 관하여 (0)	2022.05.22
HTML과 CSS 빠르게 이해하기 (0)	2022.05.06

HTML

HTML

서버와 클라이언트

웹(Web)

웹 브라우저(Web Browser)

프로토콜(protocol)

웹 접근성

TOMCAT 톰캣 설치

HTML

마크업 언어

HTML의 요소

내포된 요소(Nesting elements)

속성(Attributes)

속성 사용 시 주의사항

HTML 주의사항

HTML 요소

페이지 내부 링크 이동 (책갈피 이동) 하기

HTML 실습

'🖥Frontend > HTML' 카테고리의 다른 글

댓글

티스토리툴바