여러 통신망을 하나로 연결한다는 의미의 Inter-network에서 시작된 말로 전세계 컴퓨터를 하나로 연결하는 '컴퓨터망'을 의미한다.

이러한 인터넷은 '클라이언트'와 '서버'로 구성되어 있으며, 'TCP/IP'라는 기본 프로토콜을 통해 제공된다.

2. 웹이란?

Web(World wide web)으로 인터넷으로 연결된 사용자들이 정보를 공유할 수 있는 공간을 의미한다.

현재는 웹과 인터넷이 혼용되어 사용되고 있지만, 실제로 웹은 인터넷에서 사용되는 가장 유명한 서비스일 뿐이다.

웹은 HTML 언어를 이용해 누구나 문서를 작성할 수 있으며, HTTP 프로토콜을 통해 누구든지 접근할 수 있다는 것을 특징으로 한다.

이러한 HTML 언어로 이루어진 사이트를 웹 페이지(web page)라 부르며, 이러한 페이지들의 집합체를 웹 사이트(web site)라 부른다.

3. 인터넷의 구성 요소

수많은 서버(서비스를 제공하는 프로그램이나 컴퓨터)와 클라이언트(인터넷을 사용하는 사용자나 사용자의 기기)로 이루어진 인터넷 시스템, 사용자가 요청하는 웹 페이지나 실행된 파일이나 그 결과를 전달하는 웹 서버, 웹 서버에서 웹 페이지를 가져오고자 할 때 사용하는 웹 브라우저

이 3가지로 이루어져 있다.

4. 인터넷 주소 체계

프로토콜이란 컴퓨터끼리 정보를 주고 받기 위한 암호로, 대표적인 프로토콜론 인터넷에서 사용되는 TCP와 IP, 웹에서 사용되는 HTTP, 파일을 주고 받을 때 사용되는 FTP가 있다.

인터넷 상에서 특정 컴퓨터나 서버를 알기 위해선, 도메인 네임과 IP 주소가 필요하다. 여기서 말하는 도메인 네임은 'naver.com'와 같은 문자와 점들로 이루어진 조합을 의미하며, 네트워크 상에서 각각의 컴퓨터를 식별하게 만든 호스팅명을 말한다. IP주소는 '202.179.177.22'처럼 0부터 255까지의 십진수 네 개로 구성된 주소로, 인터넷 상에서 컴퓨터가 서로를 식별하기 위해 부여된 번호를 말한다.

따라서 엄밀히 말하자면 인터넷 주소는 IP 주소만을 의미한다. 그러나 DNS 서버가 도메인 네임을 입력을 자동적으로 IP 주소로 변환해줘, 편안하게 사용할 수 있게 해주고 있다.

위 그림은 사용자가 인터넷 창을 로드할 때의 과정을 도식화한 것으로, 총 8단계로 이루어져 있다.

12단계, 소비자가 입력한 url을 http 프로토콜로 변환해 DNS에 업로드한다. 3단계, 업로드한 URL 중 도메인에 해당하는 부분을 뽑아 IP 주소로 변환해 URL과 함께 출력한다. 4단계, HTTP 프로토콜을 이용해 HTTP 요청 메세지를 만들어 TCP 프로토콜을 통해 해당 IP주소의 컴퓨터에 전달한다. 56단계, HTTP 요청 메세지를 받은 HTTP 프로토콜이, 이를 이용해 URL 주소를 웹서버에 전달하고, 웹서버에서 URL과 일치하는 데이터를 출력한다. 7단계, 받은 HTTP 메세지를 TCP 프로토콜을 통해 원 컴퓨터로 전송하고 도착한 HTTP 메세지를 HTTP 프로토콜을 이용해 웹페이지 데이터로 변환한다.

5. 검색엔진

검색엔진은 정보수집 -> 색인 분류 -> 검색의 순서로 이루어진다. 주로 로봇인 크롤러가 돌아다니면서 정보를 수집한 뒤, 이를 색인 분류해 두고 사용자가 키워드를 검색하면 이를 보여주는 과정을 거친다.

검색엔진은 크게 3가지 종류가 있는데, 1) 로봇, 2) 디렉토리 검색, 3) 메타 검색이 있다.

첫 번째 로봇은 Naver, google과 같은 유명 검색엔진들이 사용하는 방법으로 크롤러가 돌아디면서 데이터를 수집해 이를 색인 분류한 뒤 검색 키워드가 입력되면, 이를 보여주는 방식이다.

두 번째 디렉토리는 직접 사용자가 데이터를 분류해야 하는 방식으로, 현재는 잘 쓰이지 않는 방법이다.

마지막 메타는 자체적으로 데이터를 보유하고 있진 않고, 검색 시 다른 검색 엔진에서 데이터를 찾아봐 이를 보여주는 방식이다. 두 번에 걸쳐 검색이 진행되기 때문에 느리다는 것이 특징이다.

이렇게 많은 검색 방식을 통해 검색이 이루어지는데, 자신의 페이지를 검색에 잘 노출시키기 위해서 키워드(keyword)나 링크(link)를 정리하는 것이 검색 엔진 최적화(SEO)이다. 최근에는 소비자의 유입을 이뤄내는 마케팅 기법 중 하나로 취급되어, 그 중요성이 늘어나고 있다.

link href="style.css" rel="stylesheet" "text/css"/>

head 요소에서 link 요소를 사용해 css파일을 연결하는 방법이다. 이 link 요소는 여러 개를 넣는 것도 가능해, 여러 css 파일을 연결할 수 있다는 것도 특징이다.

Style 요소로 연결

css 파일을 분리하지 않고, 바로 스타일을 적용하는 방법이다. 해당 페이지에만 적용되기 때문에, 임시적으로 테스트를 위한 페이지를 만들 때 주로 사용한다.

<style type="text/css">
.title{
font-align:center;
}
</style>

Style 속성을 통해 연결

해당 요소에만 스타일을 적용하는 방법이다.

<title sytle="color:white">Style</title>

다음과 같이 직접적으로 해당 요소에 스타일을 적용하고 따옴표 안에 스타일을 작성한다.

px 제일 많이 사용하는 고정적 단위로, 모니터 해상도 단위인 픽셀을 대상으로 한다.

% 비율을 나타내는 상대적(가변적) 단위인 퍼센트다. 상위 요소가 100px인데 50%를 적용하면 50px이 된다.

em 글자 크기에 사용되는 상대적인 단위다. 소수점은 '0.x'로 표현할 수 있다. 상위 요소 글자가 100px인데 2em을 주면, 200px이 된다.

<색상 단위>

색상 이름 'black'처럼 색상 이름을 직접 적는 방법으로, 17가지의 표준색을 포함해 대략 140개 정도의 색상 이름이 있다.

RGB rgb는 각각 빛의 삼원색인 Red, Green, Blue를 나타내며, 앞선 색상 이름보다 더 자세히 색상을 표현하는 방법 중 하나이다.

<span style="color:rgb(105,15,100)">RGB</span>

위 코드를 실행하면 이렇게 실행된다.

숫자가 높을 수록 해당 색상이 높아진다는 것이며, 그 숫자값은 0~255까지 사용할 수 있다. 그리고 전체색이 많아질수록 색은 밝아지고, 전체색이 적어질수록 색은 어두어진다. 즉, (0,0,0)은 검은색이고 (255,255,255)는 흰색이다.

Hex 16진수로 색상을 표현한 방식으로 헥스코드라 불린다.

#4169E1

위와 같은 방식으로 표현하며 각 두 자리마다 r, g, b를 뜻한다. 즉 41가 red,69가 green, e1이 blue이다. 헥스 코드로 나타낼 수 있는 색상의 수는 총 166=16,777,216가지로, RGB보다는 좀 더 범용적으로 쓰이는 편이다.

<img src="image.jpg" alt="이미지의 묘사 내용" />

alt 해당 이미지를 설명해주는 부분으로, 150자 이내여야 한다.

<img src="playing-guitar.jpg" alt="기타치는 모습" height="500" width="400" />

width, height width, height 속성은 각각 이미지의 너비와 높이를 뜻한다.

2. 목록 요소

HTML에서 문서 목록을 나타내는 요소로는 ul, ol, li 태그가 있고, 정의 목록으론 dl, dt, dd태그가 있다.

Ul 요소는 Unordered List의 줄임 말로, 순서가 없는 목록 요소를 뜻한다. Ol 요소는 Ordered List의 줄임 말로, 순서가 있는 목록을 말한다. 이 ul, ol 요소 안에 li 요소가 들어가는데 목록 항목을 표현한다.

ol 요소는 보통 숫자 0부터 시작한다. 그러나 ‘start=”숫자”’를 통해 숫자를 지정하거나, ‘reversed’를 통해 역순으로 표현할 수도 있다.

<ul>
  <li>밥 짓는 방법<li>
<ol start="10", reversed>
  <li>쌀을 씻는다</li>
  <li>물에 담근 채 30분간 기다린다</li>
  <li>손등에 물이 찰 만큼만 물을 남기고 물을 버린다</li>

dl 요소는 Description List의 줄임 말로, dl 요소는 개념과 정의로 이루어진 목록이다. 개념은 dt요소로 정의는 dd요소로 작성한다

ol과 ul은 li요소만을 자식으로 두듯, dl은 dt와 dd만을 자식으로 둘 수 있다. 이때 주의할 점은 dt는 인라인 요소이며, dd는 블럭 요소이기 때문에 dt 안에는 블럭 요소가 들어갈 수 없다는 것이다.

<dl>
  <dt>dl요소는</dt>
    <dd>개념과 정의로 이루어진 목록이다.</dd>
</dl>

3. 의미없는 div/span, 그리고 class 요소

div, span 요소는 아무런 의미를 가지고 있지 않다. 주로 필요에 따라 그룹을 만들거나, css로 조절하기 위해 사용한다. *마크업(문서의 내용 이외에 문서의 서식, 구조 등을 표현하기 위한 부가적인 정보)을 하면서 가장 많이 사용하게 될 요소라 볼 수 있다.

div는 블럭 요소, span은 인라인 요소로, 둘 다 자기자신을 중첩할 수 있다. 특히, div는 레이아웃 잡는 용도로 많이 쓰기 때문에 많이 중첩된다.

Class 속성

<style type="text/css">
.index{
  color: blue;
  text-align:center;
}
</style>

<span class="index">여기는 개발블로그입니다.</span>

div와 span 요소는 보통 class 속성과 같이 사용하는데, class에서 이름을 붙이고 css에서 그 이름을 선택자로 사용하기 때문이다.

<span class="index home">여기는 개발블로그입니다.</span>

class는 값을 띄어쓰기로 구분할 수 있어, 여러 개의 요소를 동시에 사용도 가능하다.

4. Class 속성과 Id 속성의 차이

먼저, Class와 ID 속성은 규칙에 맞춰 작성해야 하는데, 이는 다음과 같다.

1. 첫 글자는 알파벳으로 시작해야 합니다. (a~z 또는 A~Z)
2. 두 번째부터는 알파벳과 숫자 그리고 '-' 또는 '_'가 사용될 수 있습니다.
3. 대소문자를 구분합니다.
4. 가능한 예시 : abc, Hello, button-2, simpleText, mark_test 등등
5. 잘못된 예시 : 2rd, $uper, ch#1, -top, ^^, rec*3 등등

위의 방식만 지키면, 어떤 명칭도 상관 없다는 것이 특징이다. 그러나 중간에 띄어쓰기 사용시 ex) index home, 각각을 클래스로 이해해 2개의 클래스가 만들어진다. 따라서 한 개를 의도 했다면 index-home과 같이 붙여 쓰는 것이 좋다.

Class 관련 Tips

기왕이면 두 가지 단어가 혼합된 클래스(ex. index-home)를 만들 시, '_', '-' 둘 중 하나로 표기하는 것이 제일 좋다. 또한 하나를 선택했으면 그것만 꾸준하게 사용해 실수를 방지하는 것이 중요하다. 그리고 대소문자를 섞어쓰는 것보단 소문자 혹은 대문자만을 사용하는 것이 좋다.

Class요소와 id요소의 차이점

id요소 페이지 내에서 딱 한 번만 선언할 수 있다. 예컨대, index란 아이디 명을 한 번 선언했을 시 다른 요소들은 절대 index란 아이디를 사용할 수 없다.

Class요소 반면, 클래스는 여러 번 사용이 가능하다. 따라서 Class는 범용적 사용시, id는 단 한 번 사용하고자 할 때 사용한다. 또한 클래스는 앞서 말했던 것처럼 띄어쓰기를 이용해 한 요소에 여러 개의 클래스 이름을 지정해 줄 수 있다는 것을 특징으로 한다.(ex. Class="Home Index Casa") 반면 Id는 한 요소에 한 개의 이름만 지정해 줄 수 있다.

<span class="Edsheeran Ed Sheeran" id="X">
<h1>2014년 발매한 앨범</h1>
</div>
<span class="Edsheeran Ed Sheeran" id="%">
<h1>2017년 발매한 앨범</h1>
<p>Shape of you와 같은 유명곡이 수록되어 있음</p>
</div>

4. HTML의 메모 기능, 주석

<!-- 주석 내용 -->

주석은 메모로 사용되기 때문에, 소스상에서 요소의 시작이나 끝 등을 알려주는 용도로 사용된다.

<table>
  <th align="center">특수문자</th>
  <th align="center">문자설명</th>
  <tr align="center">
      <td align="center">
      &.n.b.s.p.;
       </td>
      <td>
      띄어쓰기
    </td>
   </tr>
  <tr>
      <td align="center">
     &.a.m.p.;    
      </td>
      <td align="center">
     엠퍼샌드 (and)
      </td>
   </tr>
</table>

-

<table> ~ </table>
:테이블 태그를 열고 닫을 때 사용한다.

<th> ~ </th>
:Table head, 표의 제목을 의미한다. 중앙정렬에 굵은글씨가 기본값이다.

<tr> ~ </tr>
:Table row로, 표의 가로줄을 의미한다. 왼쪽정렬에 보통 글씨가 기본값이다.

<td> ~ </td>
: Talbe data로, 셀을 만든다. 왼쪽정렬에 보통글씨가 기본값이다.

1. HTML, CSS, JS의 차이를 간단하게 설명하면, HTML는 내용, CSS는 외형, JS는 동작을 의미한다고 볼 수 있다.

​

2. HTML에서 말하는 tag(태그)는 3가지 유형이 있다. 여는 태그와 닫는 태그(서로 쌍을 이룬다), 스스로 열고 닫는 태그(혼자서 태그를 완전하게 한다)

​

3. 그리고 이 tag는 크게 2가지로 이루어져 있다. 요소(element), 속성(attribute) ex) img(요소) src(속성)="(속성값)"

​

4. URL 주소는 절대주소와 상대주소로 연결할 수가 있는데 절대주소는 절대적인 주소로, 링크 전부를 적어 넣는 것을 의미한다. 상대주소는 상대적인 주소로, 와 같은 링크로 '같은 폴더에 있는 파일을' 연결시키는 것이다.

​

Head 요소

1. 첫문장은 반드시 doctype!으로 문서 버전에 관한 정보를 명시해줘야 한다

2. head는 문서의 메타데이터(보이지 않는 데이터)의 집합이다. meta 속성="속성값": ex) meta name="description", meta keywords="keyword 나열"

​

블록과 인라인의 차이

블록(Block): 줄바꿈이 일어나는 것. 영역의 너비가 가로로 길게 퍼져있어서 행 전체를 포함한다. ex) p, h1, div

인라인(Inline): 줄 바꿈이 일어나지 않는 것 ex) a, img, strong, span

보통 블록은 블록끼리, 인라인은 인라인끼리 포함한다. 그러나 블록은 인라인을 포함하기도 하나, 인라인은 블록을 포함할 수 없다.

블록은 코끼리, 인라인을 뱀으로 바꿔 생각하면 이해하기 편하다. 코끼리는 뱀을 먹을 수 있으나, 뱀은 코끼리를 먹을 수 없다.

​

헤드라인 요소

ex) h1, h2 ...

숫자가 클수록 하위 항목이다. 하위 번호는 상위 번호에 종속된다.

​

문단을 표현하는 태그들

p 문단을 나타낸다. 블럭요소이지만 다른 블럭은 포함 시킬 수 없고 인라인만을 포함시킨다.

pre pre 안에서 작성되는 띄어쓰기, 줄바꿈은 그 대로 화면에 출력된다. 블럭요소이지만 다른 블럭은 포함시킬 수 없고, 인라인만을 포함시킨다

br 강제 줄바꿈

hr 수평선을 그리는 태그이다. 주로 화제 전환시 사용된다.

​

특수 문자

이스케이프 문자라고도 불린다. 태그로 인식되는 것을 방지하기 위해서 사용한다.

​

문구 요소

em: 기울어진 이텔릭체

strong: 굵은(bold)

blackquote, q, cite: 인용

ins: 새롭게 추가 됨 50회

del: 새롭게 삭제 됨 50회

• img 요소
• 목록 요소
• div/span/class
• HTML 주석

시스템 메모리를 관리하면서 자바 기반 애플리케이션을 위해 이식 가능한 실행 환경을 제공하는 것이다. 즉, 다른 프로그램을 실행시키는 것을 목적으로 하는 프로그램을 말한다. JVM은 2가지 기능을 수행하는데, 1. 자바 프로그램이 어느 기기 또는 어느 운영체제 상에서도 실행될 수 있게 하는 것("한 번 작성해, 모든 곳에서 실행")과 2. 프로그램 메모리를 관리하고 최적화하는 것(자동 메모리 관리)을 담당한다.

기술적으로 JVM은 코드를 실행하고 해당 코드에 대해 런타임 환경을 제공하는 소프트웨어 프로그램에 대한 사양(Specification)이라고 하나, 일반적으로는 자바 프로그램을 실행하는 방법이라 말한다. JVM의 설정을 구성한 다음 설정사항에 따라 실행 중에 프로그램 리소스를 관리하는 것으로, 개발자들이 말하는 JVM은 대개 어떤 기기 상에서 실행되고 있는 프로세스, 특히 자바 앱에 대한 리소스를 대표하고 통제하는 서버를 지칭한다.

간단하게 말하면 자바 애플리케이션을 클래스 로더를 통해 읽어 들여, 자바 API와 함께 실행하는 것이다.

자바 애플리케이션을 클래스 로더를 통해 읽어 들여, 자바 API와 함께 실행한다

​

2. 컴파일 하는 방법

​

JVM의 과정은 다음과 같다. 자바 컴파일러가(javac) 자바 소스 코드를(.java) 컴파일 하면(읽으면) 바이트코드가 포함된 클래스 파일로(.class) 변환한다. 이때 만들어진 Class 파일들을 클래스 로더가 JVM으로 로딩한다. 로딩된 클래스 파일은 execution engine을 통해 해석되어 Runtime Data Area에 배치된 채 실질적인 수행이 이루어진다. 이 과정에서 JVM은 필요에 따라 GC 작업을 수행한다.

따라서 자바 소스를 컴파일 하는 방법은 자바 컴파일러(Java compiler)가 자바 소스 코드(자바로 작성된)를 자바 가상 머신이 이해할 수 있는 자바 바이트 코드로 변환하는 것을 말한다. 자바 컴파일러는 자바를 설치하면 JAVAC.exe라는 실행 파일 형태로 설치된다.

Reference: https://aljjabaegi.tistory.com/387 https://velog.io/@dnjscksdn98/Java-What-is-JVM https://www.itworld.co.kr/news/110837 https://www.itworld.co.kr/news/109008 https://asfirstalways.tistory.com/158 https://sas-study.tistory.com/262 http://tcpschool.com/java/java_intro_programming *자바 API https://bvc12.tistory.com/133

첫 번째 기능은 링크로써의 기능이다. <href=" ">와 같이 사용하며, 이동할 위치를 의미하는 #id와 같이 온다.

두 번째 기능은 타겟으로써의 기능이다. <name 혹은 id>와 같이 사용하나 id 사용을 권장한다.name과 id의 차이는 name은 중복 사용이 가능하나, id는 중복 사용 불가능하다는 것이다.

타겟은 어디서 열 것인지를 결정한다. _self(현재창), _parent(부모창), _top(최상위), _blank(새창)

그러나 현재는 사용되지 않는 기능이다. 어디서 열지는 사용자의 권한이기 때문이다.

타겟에서 사용되는 rel 속성은 링크와의 관계를 의미한다. alternate(대안 페이지), bookmark(즐겨찾기), help(현재 페이지에 대한 도움 페이지), prev/next(현재/다음), search(검색페이지)

• Head 요소
• 블록과 인라인의 차이
• 헤드라인 요소
• 문단을 표현하는 태그들
• 특수 문자
• 문구 요소

2. Table 태그를 이용해 표 만들기