EL2A의 티스토리

- 인라인요소와 블럭요소

인라인  요소

       1. 줄 바꿈이 일어나지 않는다.

       2. 인라인 요소 안에는 텍스트나 또 다른 인라인 요소를 포함할 수 있다.

       3. 인라인 요소는 블럭 요소를 포함할 수 없고, 블럭 요소 안에 포함되어야 한다.

블럭 요소

       1. 줄 바꿈이 일어난다.

       2. 블럭 요소 안에는 인라인 요소를 포함할 수 있다.

       3. 블럭 요소 안에 블럭 요소를 포함할 수 있지만, 경우에 따라 포함할 수 없을수도 있다.

- <p>

: 단락을 정의하는 태그로 '블럭 요소' 이다.

- <adress>

: 어떠한 주소를 적는 태그로써 이탤릭체로 출력된다.

- <em>

: 글자 기울이기

- abbr

: 마우스를 올리면 풀네임이 나온다.         ex) <abbr title="Long Term Evolution">LTE</abbr>

- ins

: 밑줄이 생긴다.                ex) <ins>밑줄</ins>

- del

: 삭제줄(가운데줄)이 생긴다.         ex) <del>삭제줄</del>

- sup

: 윗 첨자가 생긴다.         ex) 윗^첨자        윗^첨자

- sub

: 아랫 첨자가 생긴다. ex) 아랫_첨자                아랫_첨자

- 리스트

ol : 순차적 목록 리스트를 표시한다.

<ol>

       <li> 첫번째 </li>

       <li> 두번째 </li>

</ol>

ul : 비순차적 목록 리스트를 표시한다.

<ul>

       <li> 첫번째 </li>

       <li> 두번째 </li>

</ul>

- <form>

: 온라인 서식에서 작성한 값들을 서버 프로그램으로 전송하는 역할을 담당한다.

- <fieldset>

:  form 요소 안을 그룹화 하며 <legend>를 사용하면 제목을 쓸 수 있다.

<fieldset>

       <legend> 그룹 제목 </legend>

</fieldset>

       ※ input 요소

               text : 한 줄글 입력 상자

               password : 비밀번호 입력 상자

               radio : 라디오버튼

               checkbox : 체크박스

               submit : 제출, 전송 버튼

               reset : 초기화 버튼

               image : 이미지 버튼

               file : 첨부파일

- <textarea>

: 게시판의 입력 내용 등 여러 줄로 된 텍스트 상자를 생성

- <select>

: 선택 목록 상자를 생성하는 요소

- <label>

: 접근성을 향상시키기 위해서 사용한다.

- 마크업 요소

header : 문서의 윗부분

nav : 메뉴버튼

section : 문서내에서 의미가 같은 내용들을 묶어주는 요소

article : 컨텐츠 내용

aside : 메인 컨텐츠와 분리할 수 있는 독립적인 요소, 컨텐츠의 좌측이나 우측에 '사이드 바' 영역

footer : 꼬리말을 나타내는 요소

- <figure> / <figcaption>

: 사진이나 다이어그램 등 컨텐츠에 설명을 달 수 있다.

<figure>

       <img src="사진주소">

       <figcaption> 부가설명 적으면 됨</figcaption>

</figure>

- <mark>

: 글 내용에서 주의 깊게 볼 텍스트 내용을 강조

- <time>

: 날짜와 시간을 기계가 이해 할 수 있는 형태로 만들어 주는 요소

- <progress>

: 다운로드의 진행 상황 같은 내용을 나타냄

- <meter>

: 정해진 범위 값에서 현재의 상태를 나타냄

- 폼요소 (아직 모든 브라우저에서 새로 추가된 폼 요소를 지원하지 않을 수 있다.)

serch : 텍스트 입력시 지우기(x) 버튼이 나타난다.

email : 이메일 입력 형식과 맞지 않으면 오류 메시지

url : url 양식에 맞지 않으면 오류 메시지

tel : 전화번호 입력 박스

number : 숫자 입력 박스에 직접 입력하거나 상하 화살표를 눌러 선택이 가능

range : 숫자 범위가 '슬라이드 바' 로 표현

date : 날짜를 선택하는 큰 박스가 나옴 (연, 월, 일)

datetime : 마찬가지로 날짜 선택 박스

month :  날짜 선택 박스 (연, 월 만 선택가능)

time : 시간 선택 박스

color : 색상 선택 박스

- <required>

: 입력 필드에 값이 채워넣어지지 않았으면 오류메시지 송출

- <placeholder>

: 입력 필드에 입력형식 힌트 제공

- <autocomplete>

: 자동완성 기능 사용 여부

- <list>

: 직접 만들어 놓은 텍스트를 자동완성 기능 제공

- <autofocus>

: 페이지가 로드 됬을 때 입력 필드에 자동으로 커서가 이동

- <disabled> / <readonly>

: 시리얼 같은거 안적으면 "다음" 버튼을 비활성화 시킬때 사용

<disabled> : 어떤 조건에 만족하지 않았을 때 비활성화

<readonly> : 요소 값이 변경되지 않은 채 전송이 되어야 하는곳에 사용

- <pettern>

: 텍스트 값의 유효성을 검사해줌 ( 어떠한 조건을 만족하지 않으면 에러메시지)

리팩토링

- 똑같이 동작하는데 코드를 효율적으로 바꾸는 활동을 프로그래밍에서는 리팩토링이라고 한다.

웹호스팅 : 서버 한대에 여럿이서 같은 공간을 나눠 쓰는것. 

서버호스팅 : 서버 한대를 혼자 쓰는것 
클라우드 호스팅 : 서버 한대에 가상화로 단독 서버처럼 꾸며서 나눠 쓰는것 

웹호스팅: 한대의 물리적 서버, 즉 하드웨어 스펙상으로 한대의 서버에 여러명의 유저들이 각자의 공간을 할당받아서 물리적인 스펙을 서로 공유하면서 나눠 쓰는 형태입니다. 
그러다 보니, 한쪽이 급격하게 제한된 스펙을 사용하다보면 상대적으로 같이 공유하고 있는 유저쪽에 스펙이 떨어질수도 있고, 관리자 측에서 사용량을 제한을 두겠지만,

나눠 쓰는 유저가 많을수록, 사용할 수 있는 스펙에서 떨어집니다.또한 관리자 기능이 제한되므로 원하는 기능을 사용하기 힘들수도 있습니다. 
장점이라면 요금이 저렴하다 정도입니다. 

서버 호스팅: 말그대로 서버 한대 통째로 쓰는겁니다. 
물리적 하드웨어 한대 그대로 쓰는거죠. 내가 원하면 원하는대로 메모리를 늘릴수도 있고, 하드디스크 늘릴수도 있지만,

그만큼 돈도 들고, 서버 스펙이나 규격에 따라 제한이 있을수도 있겠죠? 램뱅크가 4개인데 메모리를 100기가 올리고 싶다고 해도 물리적인 하드웨어의 제한이 따릅니다. 
장점이라면, 내가 내 서버의 효율을 100프로 쓴다는거고, 단점이라면 물리적인 하드웨어의 단점이 어느정도 존재한다는 거죠. 

클라우드: 물리적 하드웨어 단점을 소프트웨어적으로 해결했다는 겁니다. 
서버 한대에 여럿이 사용한다는 건 웹호스팅 서비스와 비슷하게 생각할 수 있습니다. 
또한,  물리적으로 그서버가 날라가면 그 서버 안에 있던 같은 유저들 다 피해를 볼수도 있습니다. 
하지만, 그 서버 한대가 정말 서버 한대일 수도 있고, 클러스터링과 같은 여러대의 서버를 하나로 묶은 시스템일수도 있습니다. 대부분은 후자겠죠. 
그러다보니, 하나의 거대한 서버로 물리적 하드웨어의 제약은 거의 안받는다는 겁니다. 
그래서 메모리를 늘린다거나, 하드디스크 용량을 늘린다거나, 이러한 부분을 시간적 물리적 제약 없이, 무한적으로 늘릴수 있다는 장점이 있겠네요. 
게다가 요금도 서버호스팅보다는 비교적 저렴한 편입니다.(렌탈형 서버호스팅과 비교했을때요) 
기능상으로는 서버호스팅과 다를바 없이 같다고 볼수 있겠습니다. 
다만, 오에스 상에서 하드웨어 컨트롤하는 명령어같은건 사용이 제한될 수 있습니다. 
그래도 내 가상머신 안에서는 내가 관리자이므로 할당 받은 스펙을 100프로 다 사용할 수 있습니다.

출처 : http://www.clien.net/cs2/bbs/board.php?bo_table=kin&wr_id=2613151