- 인터넷(1960 도입): 웹을 포괄하는 개념. 웹, 이메일 등 수많은 것들이 인터넷 위에서 동작
- 웹(1990 도입): 웹브라우저, 웹서버, html 발명
- 클라이언트: 고객(갑). 서버에 정보를 요청하는 개인 기기(노트북, 스마트폰 등)
- 서버: 을. 개인 기기로 정보를 전송하는 컴퓨터
- ht(hypertext: 서로 연결된 문서, 링크)m(markup: 정보를 태그로 정의하는 방식)l(language: 언어): 웹페이지를 만들기 위한 언어(약속된 문법, 단어로 만들어야 함)
- tag
<태그명 속성명1=”속성값1” 속성명2=”속성값2”>컨텐츠</태그명>- 속성(태그의 부가적인 정보)은 없을수도 있음
- 닫히는 태그 </태그명>이 필요 없는 태그의 경우 <태그명 /> 로 사용
- 개발도구: 구글 크롬의 인스펙터와 네트워크 감시, 에디터
- DOCTYPE: 브라우저에게 해당 html이 어떤 표준에 따른 것인지를 알려주는 것으로 문서 최상단에 기입. 최신 버전은 !DOCTYPE html
- 기본형식
<html>
<head>(문서를 정의하는, 설명하는 메타 데이터)</head>
<body>(문서에 표시되는 컨텐츠)</body>
</html><body>
1-1. 링크
<a href=”링크를 클릭했을 때 도착할 URL” title=”설명” target=”문서가 로드될 대상”>링크이름</a> - target: _self, _blank, 프레임명 등이 있음
- _self: 현재의 문서가 사라지고 현재의 문서가 로드되었던 프레임에 문서를 로드
- _blank: 새로운 창(탭)을 띄우고 거기에 문서를 로드
- 프레임: 한 문서 안에 다른 문서를 로드할 수 있는 기능
1-2. 문단(paragraph): 하나로 묶을 수 있는 짧은 단위
<p>문단에 해당하는 내용(텍스트)</p>- 줄바꿈(line break):
문장<br/>
- 엔터키를 눌러도 줄바꿈되지 않음, br키를 이용해야 함 - 띄어쓰기:
문장$nbsp;문장
- 스페이스바를 누르면 한 칸 띄어쓰기되지만 여러번 눌러도 한 칸만 띄어쓰기됨. $nbsp;를 연달아 써야 함
1-3. 이미지 삽입
<img src=”이미지가 위치하는 URL” alt=”대체텍스트” width=”폭” height=”높이” longdesc=”이미지와 관련된 링크” />- 크기를 입력하지 않을 경우 원래 크기로 로드되며, 폭이나 높이 중 하나만 입력할 경우 원래 이미지의 비율에 맞게 크기가 변함
- 대체텍스트(alternative): 이미지가 로딩되기 전이나 이미지를 로딩할 수 없는 경우 이미지의 위치에 대체텍스트 표시
1-4. 목록(ul>li, ol>li): 연관되어 있는 항목들을 나열할 때 사용. - ul: 순서가 없는(unorderded) 항목들
<ul> <li>항목</li> </ul>- ol: 순서가 있는(orderded) 항목들
<ol> <li>항목</li> </ol>- 리스트의 항목 함수로 추가 가능
1-5. 아이프레임(iframe): 페이지 안에 다른 페이지를 삽입하는 것.
<iframe src=”불러올 웹페이지의 URL” scrolling=”스크롤링 허용여부(yes/no/auto)”>iframe을 지원하지 않는 브라우저일 경우의 대체정보 </iframe>- 스크롤링의 기본값은 auto로, 스크롤이 필요할 경우만 스크롤 지원
1-6. 프레임(frame): 하나의 화면을 여러 개의 페이지를 분할해서 삽입하여 채우는 것.
<frameset cols/rows=”열/행의 크기(,로 구분)”> <frame src=” 불러올 웹페이지의 URL” name=”프레임의 이름”> </frameset>- body 태그 대신 frameset 태그 사용.
- 현 html에서는 권장되지 않음
1-7. 이스케이핑: 이스케이프 코드를 활용하여, 어떤 단어가 html 코드로 해석되지 않게 하는 것. - 이스케이핑 도구를 활용하여 단어를 이스케이프 코드로 번역할 수 있음
- 이스케이프 코드
-- & → & 표시
-- < → < 표시
-- > → > 표시
-- " → " 표시
-- ' → ' 표시
1-8. 표
<table> <tr> <th>제목</th> <tr> <td>데이터</td> </tr> </table>- tr은 줄, td는 칸, th는 항목명. rowspam/colspan으로 칸 합치기 가능
<head>: 문서를 설명하는 태그들이 위치하는 태그. body 태그의 정보를 설명하는 메타 정보
- meta: 문서에 대한 정보를 기술하는 태그
<meta name=”” content=”” />- title: 페이지의 제목을 정의. 브라우저 상단에 표시되며 검색엔진에서 제목으로 페이지를 검색할 수 있게 함
<title>제목</title><form>: 사용자의 데이터를 서버에 전송하는 방법
<form action=”서버로 전송할 데이터를 수신할 URL” method=”데이터를 전송하는 방법”> 컨트롤을 생성하는 태그(텍스트 필드) </form>- method
- get: action에 입력한 URL에 파라미터(?로 구분)의 형태로 전송. 전송할 수 있는 정보의 길이가 제한되어 있으며 퍼머링크로 사용될 수 있음
- post: header의 body에 포함해서 전송. 전송될 수 있는 정보의 길이 제한이 없으며 퍼머링크로 사용 불가
이미지 출처: 이고잉님의 생활코딩-HTML 기초(https://www.inflearn.com/course/html-%EA%B8%B0%EC%B4%88)
- 서버: 정보를 제공하는 쪽. 개인용 PC와 똑같음-단지 웹서비스가 돌아가는 컴퓨터일 뿐임. 개인용 PC도 서버가 될 수 있음. 서버들이 모여있는 곳을 IDC라고 함.
- 클라이언트: 정보를 제공받는 쪽. 서비스를 받는 컴퓨터, 브라우져등을 의미함
- 서버-클라이언트 모델: 클라이언트가 요청하면 서버가 응답하는 것을 통해서 웹서비스가 운영되며,이 모델이 극대화된 것이 클라우드 컴퓨팅. 모든 에플리케이션을 웹서버에서 제공하고 컴퓨터는 브라우져를 통해서 시스템을 이용(구글의 웹에플리케이션들과 크롬 OS)
- 웹서버: 인터넷을 통해서 웹페이지, 이미지들을 클라이언트들에게 제공해주는 소프트웨어. 오픈소스 Apache 와 MS의 IIS가 가장 많이 사용됨
- 텍스트 입력: 사용자로부터 텍스트를 입력받아 서버에 전송
1) 텍스트 필드: 한 줄 정도의 단문에 적합
<input type=”text” name=”값(데이터)의 이름” value=”데이터의 값” disabled=”disabled” readonly=”readonly” />- disabled: disabled를 설정하면 텍스트 필드가 불능 상태가 되어, 서버로 전송해도 이 데이터는 서버로 전송되지 않음
- readonly(읽기 전용): readonly를 설정하면 서버로 데이터가 전송되나 텍스트 필드에는 더 이상 값이 입력되지 않음
2) textarea: 여러 줄의 텍스트 전송시 이용
<textarea name=”값의 이름” rows=”행의 수” cols=”열의 수” disabled=”disabled” readonly=”readonly”>값</textarea>- 입력할 텍스트의 행,열 길이를 정할 수 있음
3) 비밀번호: 보안이 중시되는 데이터의 입력
<input type=”password” />- 입력하는 데이터의 내용이 입력창에 보이지 않으며 복사가 안 됨.
4) 히든 필드: 화면상에 표시되지 않는 컨트롤을 생성
<input type=”hidden” />- 서버로 전달할 데이터이지만 사용자에게는 노출할 필요 없는 데이터인 경우 사용
- 선택
- 여러 항목 중에서 하나만을 선택할 수 있게 하는 컨트롤
<input type=”radio” name=”값의 이름” value=”값” checked=”checked”>- checked: checked로 설정할 경우 디폴트가 선택된 상태가 됨
- 콤보박스: 여러 개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤
<select name=”값의 이름” multiple=”multiple”> <option value=”선택할 경우 name의 값이 됨” selected=”selected”>값에 대한 표시값</option> …option들 반복 </select>- 라디오 버튼과 항목의 나열 모양이 다름
- multiple: multiple을 설정하면 여러 개의 항목을 선택할 수 있는 컨트롤이 됨
- 체크박스
<input type=”checkbox” name=”값의 이름” value=”값”>- 여러 개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤.
- name을 ”값의 이름[]”으로 설정하면 응답을 배열(array)로 인식
- 파일 업로드
<input type=”file” name=”서버쪽에서 파일을 식별하기 위한 이름” />- 업로드할 파일을 선택할 수 있는 컨트롤을 생성
- URL: 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 유니크한 위치 정보
ex)
이미지 출처: 이고잉님의 생활코딩-HTML 기초(https://www.inflearn.com/course/html-%EA%B8%B0%EC%B4%88)
- 경로
- 상대경로: 문서를 기준으로 한 다른 리소스들의 위치정보
- 절대경로: 문서의 위치를 가리키는 도메인을 포함한 전체 위치정보
- 검색엔진최적화
검색엔진에 잘 노출될수 있도록 하는 활동. 검색은 정보를 찾는 행위이고, 웹에서 정보를 표현하는 언어는 HTML이기 때문에 의미에 맞는 HTML 코딩은 자연스럽게 검색엔진 최적화에 기여
Back-end Junior Developer