HTML 1일차
about. What I learned/about.Gudi

HTML 1일차

APACHE 설치 및 적용

 

TOMCAT.APACHE.ORG 접속하여 설치하기

이클립스 열기 - PREFERENCE에서 GENERAL로들어가서 웹 브라우져에서 크롬으로 변경하기 - SERVER -RUN TIME … - ADD에서 아파치 경로 설정 - WEB에서 CSS,HTML,JSP 파일 모두 ENCODING을  UTF- 8으로 변경(변경의 이유 전세계에서 사용가능하게끔 언어 설정, 국제 표준이 UTF-8이다) - APPLY AND CLOSE

 

설치 후

이클립스에서 오른쪽 위에 커피콩을 선택하고 아래 콘솔뜨는 위치에서 서버선택

 

 

위에 PORTS를 처음 보면 8005와 8080으로 설정이 되어있다. 해당 포트들은 현재 SQL에서 사용하고 있는 PORT이기 때문에 10씩 더한 8015와 8090을 사용한다.

 

 

#INTERNET 과 WWW(WORLD WID WEB)의 차이

 

INTERNET은 장비와 장비들이 통신을 하기 위한 환경 구성

WWW는 INTERNET 상에서 데이터를 효과적으로 전달하기 위한 방법과 기술

 

#IP 와 PORT

INTERNET이라는 환경안에서 각각의 장비들을 빠르게 연결하고 데이터를 효과적으로 전달하기 위해 발전된 기술이 WWW이다.

각각의 장비를 연결하고 서로 데이터를 주고 받는 과정에서 해당 데이터가 어디서 왔는지 모른다면 효율성은 굉장히 떨어진다.

따라서 생긴 것이 각 장비의 주소인데 이걸 IP주소라고 이야기한다. 과거에는 IPV4를 사용했지만 현재는 IPV6를 사용하고 있다.

내가 기억해야할 IP는 두가지가 있다. 127.0.0.1(내컴퓨터) 192.168.X(0~255).X(0~255){사설망 : 외부접근이 불가능하다.}

 

이렇게 각각의 장비들은 IP를 가지고 있다. 그리고 우리는 이 장비(컴퓨터)를 가지고 원하는 서비스에 접속을 해야한다. 서비스는 하나의 PORT 즉 입구를 가지고있다.

 

생김새 IP:포트 ---> LOCALHOST:8090

예약 고정 PORT가 존재한다.

  • 21 : FTP
  • 22 : SSH
  • 80 : WEB
  • 1521 : ORACLE

하지만 개발자들도  매번 해당 IP를 직접 치는 것은 힘들다. 이 말은 사용자(USER)들은 사용하기 쉽지 않다는 이야기다.

이러한 불편함을 개선하고자 나온 게 도메인이다.

 

도메인은 IP주소를 사용자가 찾기 쉽게 문자형태의 주소와 연결시키는 것이다.

우리가 네이버 IP주소를 직접 치지 않고 'naver.com'을 검색하여 바로 접속할 수 있는 이유가 여기있다.

 

#HTML 시작

 

 태그의 형태는 계층형이다.

<H1>~<H6> : HEADING 크기별로 굵은 글씨로 단락 구성

<P> : 문단

<PRE> : 공백, 엔터 적용 문단

<BR/> : 줄바꿈

>&NBSP; : 스페이스

<HR/> : 가로선

<B> : 볼드채(굵게)

<I>,<EM> : 기울기

<SMALL> : 작게

<SUB> : 아래첨자

<SUP> : 윗첨자

 

 

<!DOCTYPE html><!--html 문서임을 지정  -->
<html><!-- html시작 -->
<head> <!--head : html 설정 -->
	<meta charset="UTF-8"> <!--meta : 정보  -->
	<title>테스트중</title> <!--title : 페이지 제목 -->
</head>
<body> <!--body : 화면에 보여질 영역  -->
<h1>Hello</h1> <!-- h1  ~ h6 : Heading. 1(크다) ~ 6(작다).bold 단락형성 -->
	 <h2>Hello</h2>
	 <h3>Hello</h3>
	 <h4>Hello</h4>
	 <h5>Hello</h5>
	 <h6>Hello</h6>
	Hello 가나다라마바사아자차카타파하<br/><!-- br: 줄바꿈  -->
	ABCDEFGHIJKLMN
	<p> <!-- p : 문단 구분 -->
	1213456<br/>
	ascdag
	</p>
	<hr/><!-- hr : 가로선 -->
		<pre><!--pre : 문단구분. 줄바꿈과 공백을 그대로 사용 .-->
		1213456
		ascdag
		</pre>
	<b>가</b>나<strong>다</strong><br/> <!-- B : bold.굵게 
 	strong : bold.굵게 강조 -->
	<i>라</i>마<em>바</em><br/><!-- i : italic. 
	기울기.em : Emphasized. 기울여 강조  -->
	<big>사</big>아<small>자</small><br/><!--big 크게.
	 현재 미사용. small : 작게 -->
	2<sub>m</sub><sup>2</sup><!--sub : 아랫첨자. sup : 윗첨자  -->
	</body>
</html><!-- html 종료-->

 

 

 

 

 

 

'about. What I learned > about.Gudi' 카테고리의 다른 글

CSS  (0) 2021.04.26
HTML2 -4/22  (0) 2021.04.23
4/9일 새로운 이야기 - DataBase(feat.Oracle)  (0) 2021.04.11
향상된  for 문에 대하여  (0) 2021.04.01
3/26 개념 및 암기할 것들  (0) 2021.03.31

    티스토리툴바