1. 모던 웹 기술의 이해
VS Code Extensions
- Prettier
- Live Server
- CSS peek
- HTML CSS Support
- IntelliSense for CSS class names in HTML
1. 웹 기본 기술 이해와 정리
모던 프론트엔드
-
HTML은 구조, CSS로 디자인
-
반응형과 호환성 고려
-
Javascript Only (Vanilla JS)
-
미진한 JS 문법을 개선한 Javascript ES6
웹 기본 기술
-
웹페이지는 HTML, CSS, JavaScript 로 표현된 파일이다.
-
웹브라우저는 이것을 읽어서 사용자가 볼 수 있도록 한다.
-
클라이언트: 주소에 맞는 HTML 파일을 요청
-
서버: 요청을 받아서 HTML 파일을 웹 브라우저에 전송, HTML 파일이 저장된 곳
2. HTML 기본
HEAD, BODY
- head 태그 안에는 html 문서 전체를 대표하거나, html 문서 전체에서 필요한 데이터를 넣음
- title: html 문서 제목, 주로 해당 웹페이지를 보여주는 웹브라우저 상단(탭)에 표시
- meta: html 문서를 대표하는 정보를 넣는데 사용
- body 태그 안에는 html 문서에 표시되는 내용을 넣음
<!-- --> // html 주석
META
HTML은 구조, CSS로 디자인
반응형과 호환성 고려
Javascript Only (Vanilla JS)
미진한 JS 문법을 개선한 Javascript ES6
웹페이지는 HTML, CSS, JavaScript 로 표현된 파일이다.
웹브라우저는 이것을 읽어서 사용자가 볼 수 있도록 한다.
클라이언트: 주소에 맞는 HTML 파일을 요청
서버: 요청을 받아서 HTML 파일을 웹 브라우저에 전송, HTML 파일이 저장된 곳
HEAD, BODY
- head 태그 안에는 html 문서 전체를 대표하거나, html 문서 전체에서 필요한 데이터를 넣음
- title: html 문서 제목, 주로 해당 웹페이지를 보여주는 웹브라우저 상단(탭)에 표시
- meta: html 문서를 대표하는 정보를 넣는데 사용
- body 태그 안에는 html 문서에 표시되는 내용을 넣음
<!-- --> // html 주석META
문서 전반에 걸친 정보를 표시하기 위한 설정
- charset: 문자 인코딩 설정
- name: 메타 정보 이름
- meta viewport: 초기 viewport에 대한 설정
Viewport
현재 화면에서 보여지고 있는 직사각형 영역, 웹브라우저 상에서는 현재 창에서 문서를 볼 수 있는 전체 화면을 의미
LINK
html 문서에 필요한 외부 데이터(css 파일, 아이콘 파일 등)를 가져오기 위해 사용
- rel: html 문서와 외부 데이터와의 관계 표시
- href: 외부 데이터 파일 위치 지정 (상대 경로 또는 절대 경로로 설정)
STYLE
css 코드를 html 문서 내에서 작성할 때 사용
모던 웹에서는 css 코드를 파일 형태로 link 태그를 사용해서 가지고 오는 방법을 사용
SCRIPT
javascript 코드를 html 문서 내에서 작성할 때 사용
<script src="js/main.js"></script>2.1. 주요 body 내의 태그
h1 ~ h6
제목 태그
크로스 브라우징 이슈를 해소하기 위해 태그에 표현 서식이 들어있는 경우는 모두 삭제하고 css stlye을 별도로 적용한다.
p
문단 표시 태그
a
하이퍼링크 설정 태그
<a href="signin.html" taget="_black">링크를 넣을 문자열</a>target: 링크된 URL 이동방법 지정_self: 현재 브라우저에 띄움_blank: 새로운 브라우저 탭에 띄움 (또는 브라우저 설정에 따라 새로운 브라우저 창)
ol, ul, li
리스트 관련 태그
ol: 순서가 있는 리스트ul: 순서가 없는 리스트- ol과 ul 내에
li태그를 사용해서 각 리스트 아이템을 표시
img
이미지 삽입 태그
<img src="sshin.jpg" alt="프론트엔드 엔지니어 sshin"- src: 이미지 파일 위치 (상대경로 또는 절대경로로 설정)
- alt: 이미지 대체 텍스트
alt는 웹 접근성을 높이는 필수 속성이다. (구글 SEO)
div
division의 약자로, html 문서의 특정 부분으 ㄹ 지정하는데 사용 (화면에 표시가 달리지는 부분은 없다.)
모던 웹에서 css 또는 javascript로 html 문서의 특정 부분을 제어할 때 사용
table
표 구현을 위한 태그
<body>
<table>
<thead>
<tr>
<th>제목 열1</th>
<th>제목 열2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 열1</td>
<td>내용 열2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>표의 마지막 열1</td>
<td>표의 마지막 열2</td>
</tr>
</tfoot>
</table>
</body>- thead 나 tfoot은 표에서 한 번도 안나오거나, 한 번만 나와야 함, tfoot은 thead 보다 뒤에 위치해야 함
- thead: 제목으로 구성된 열들을 가진 행 표시
- th: 제목으로 구성된 각 열을 표시
- tr: 표의 내용을 나타내는 각 행들을 표시
- td:표의 내용을 나타내는 각 열들을 표시
- tfoot: 표의 마지막 행을 표시
- colspan: td 태그에서 사용, 열을 확장
- rowspan: td 태그에서 사용, 행을 확장
thead, tbody, tfoot은 html5에서 정의된 태그로, tr과 td로만 구성해도 문제 없음
form
사용자 입력을 받는 테그로 input 태그 등과 함게 사용됨
-
action: 사용자 입력을 받은 데이터를 처리할 URL
-
method: HTTP method, post (POST 매서드) 또는 get (GET 매서드)
-
target: 링크된 URL 이동방법 지정, _self, _blank
HTTP
웹 상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜이다. 클라리언트가 HTTP 프로토콜을 통해 서버에게 요청을 보내면 서버는 요청에 맞는 응답을 클라이언트에 전송한다. 이때, HTTP 요청에 포함되는 HTTP 메소드는 서버가 요청을 수행하기 위해 해야할 행동을 표시한다. GET과 POST는 이 메소드의 일종이다.
GET
서버로부터 정보를 조회하기 위해 설계된 메소드이다. GET은 요청을 전송할 때 필요한 데이터를 body에 담지 않고, 쿼리스트링을 통해 전송한다. URL 끝에
?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 한다. 만약, 요청 파라미터가 여러개이면&로 연결한다. 쿼리스트링을 사용하게 되면 URL에 조회 조건을 표시하기 때문에 특정 페이지를 링크하거나 북마크할 수 있다.쿼리스트링을 포함한 URL 샘플: www.example-url.com/resources?name1=value1&name2=value2
불필요한 요청을 제한하기 위해 요청이 캐시될 수 있다. js, css, 이미지 같은 정적 컨텐츠는 데이터양이 크고, 변경될 일이 적어서 반복해서 동일한 요청을 보낼 필요가 없다. 정적 컨텐츠를 요청하고 나면 브라우저에서는 요청을 캐시해두고, 동일한 요청이 발생할 때 서버로 요청을 보내지 않고 캐시된 데이터를 사용한다. 정적 컨텐츠가 캐시돼 컨텐츠를 변경해도 내용이 바뀌지 않는 경우가 종종 발생하는데, 이때 브라우저의 캐시를 지워주면 다시 컨텐츠를 조회하기 위해 서버로 요청을 전송한다.
POST
리소스를 생성/변경하기 위해 설계된 매소드이다. GET과 달리 전송해야될 데이터를 HTTP 메세지의 body에 담아서 전송한다. HTTP 메세지의 body는 길이의 제한없이 데이터를 전송할 수 있다. 그래서 POST 요청은 GET과 달리 대용량의 데이터를 전송할 수 있다. 또한, POST는 데이터가 body로 전공되고 내용이 눈에 보이지 않기 때문에 GET보다 보안적 관점에서 안전하다고 생각할 수 있지만, POST 요청도 크롬 개발자 도구, Fiddler와 같은 툴로 요청 내용을 확인할 수 있기 때문에 민감한 데이터의 경우에는 반드시 암호화해 전송해야 한다.
POST로 요청을 보낼 때는 요청 헤더의 Content-Type에 요청 데이터의 타입을 표시해야 한다. 데이터 타입을 표시하지 않으면 서버는 내용이나 URL에 포함된 리소스의 확장자명 등으로 데이터 타입을 유추한다. 만약, 알 수 없는 경우에는
application/octect-stream으로 요청을 처리한다.GET과 POST의 차이
GET은 Indempotent, POST는 Non-indempotent하게 설계되었다.
Indempotent(멱등)은 수학이나 전산학에서 연산의 한 성질을 나타내는 것으로, 연산을 여러번 적용하더라도 결과가 달라지지 않는 성질을 말한다. 즉, 동일한 연산을 여러번 수행하더라도 동일한 결과가 나타난다.
GET으로 서버에 동일한 요청을 여러번 전송하더라도 동일한 응답이 돌아온다. 이에따라 GET은 설계원칭에 따라 서버의 데이터나 상태를 변경시키지 않아야 Idempotent하기 때문에 주로 조회를 할 때에 사용해야 한다. 예를들어, 브라우저에서 웹페이지를 열거나 게시글을 읽는 등의 행위는 GET으로 요청하게 된다.
반대로 POST는 Non-idempotent하기 때문에 서버에게 동일한 요청을 여러번 정송해도 응답은 항상 다를 수 있다. 이에따라 POST는 서버의 상태나 데이터를 변경시킬 때 사용된다. 게시글을 쓰면 서버에 게시글이 저장되고, 게시글을 삭제하면 해당 데이터가 없어지는 등 POST로 요청을 하게 되면 서버의 무엇인가는 변경되도록 사용된다. 이처럼 POST는 생성, 수정, 삭제에 사용할 수 있지만, 생성에는 POST, 수정은 PUT 또는 PATCH, 삭제는 DELETE가 더 용도에 맞는 메소드라고 할 수 있다.
https://hongsii.github.io/2017/08/02/what-is-the-difference-get-and-post/
input
사용자 데이터를 입력받는 주요 태그
주요 속성 외에도 다양한 속성을 가지고 있다. 참고
| 속성 | 설명 | 주요 값 |
|---|---|---|
| type | 사용자 입력을 받는 인터페이스 설정 | button, checkbox, color, email, radio, text 등 |
| maxlength | 사용자 입력 문자열 최대 길이 | 정수 |
| minlength | 사용자 입력 문자열 최소 길이 | 정수 |
| autofucus | 페이지 로드 시, 해당 사용자 입력창에 커서가 자동으로 높이도록 하는 설정 | autofocus |
| autocomplete | 자동완성 기능 설정 | on 또는 off |
input type별 샘플코드-HTML form 태그 정리
2.2. Semantic Web
시멘틱 웹이란 웹페이지 각 요소에 의미를 부여해서, 단순 키워드 중심 검색을 뛰어 넘어, '의미'와 '관련성'을 기반으로 보다 진보된 검색 또는 서비스가 가능토록 하는 시도
- header
- nav: 네비게이션
- aside
- section: 본문의 여러 내용을 포함하는 부분
- article: 본문의 주 내용
- footer: 하단부
형식에 맞추어 html 코드를 작성함으로서, 검색엔진 등에서 작성한 웹페이지를 더욱 잘 이해할 수 있게 하는 기술로 생각할 수 있다. 이는 각 부분을 지정하는데에만 사용되며, 실제 위치와 웹상의 표현 등은 전적으로 css를 통해 작성해야 한다.
Author And Source
이 문제에 관하여(1. 모던 웹 기술의 이해), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@24siefil/1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
