웹페이지 개요

KIP·2022년 6월 12일

~~웹페이지는 HTML,CSS,javascript로 표현~~

client ->(html파일 요청) ->server
server ->(html파일 전송) ->server

html

html언어 - 웹페이지를 만드는 언어
코드: 컴퓨터 언어로 작성된 문서


<!DOCTYPE html> <!-- 이 문서는 html언어를 사용 -->
<html lang="en"> 
<head> <!-- 문서의 전체 정보 -->

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 문서 실제내용 시작 -->
  // <태그 속성(attribute)="속성 값"> 표기내용 </태그>
</body>
</html>

DOCTYPE

해당 문서를 브라우저가 다르게 렌더링 하지 않도록 하기 위해, HTML문서임을 알려주는 특수태그

html

lang: 언어 (kor, us...)

문서 범위 설정 태그, html문서는 해당 태그로 오픈한 후 작성돼야 하고, 해당 태그로 닫는다.

head

title: 제목
meta: 여러가지 기능

title: html 문서 제목, 주로 해당 웹페이지 보여주는 최상단의 이름

meta: 문서 전반에 걸친 정보를 표시하기 위해 설정(정보를 검색엔진에 알려주는 기능도 한다.)**
meta는 attribute((charset(대표적으로 utf-8), name(author,descripition,keywords,viewport(화면에서 보여지고 있는 영역)...),content(attribute에 따라 추가적으로 적어주는 느낌 ex) name이 keywords => content: "html, js" or name = "author" => content="jace lee"),http-equiv(호환성 관련 태그(X_UA_Compatile),
))가 다양.
~~찾아보자~~
상용화 서비스를 위해서 검색엔진을 고려해야하기 때문에 meta를 default처럼 써줘야한다.

html파일을 웹브라우저에서 변환해서 보여주는 작업 = 렌더링,
이것을 담당하는 것은 렌더링 엔진 (호환성 이슈=>익스플로러)

link

rel: html문서와 외부 데이터와의 관계 표시(stylesheet, icon등 css파일, 아이콘 파일),
href: 외부 데이터 파일 위치 지정 (파일경로는 상대경로 or 절대경로) ....

 <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" type="image/x-icon">

sciprt

js코드를 html 문서 내에서 작성할 때 사용

파일 형태로 link로 가져오거나, script 태그를 사용해 직접 html에 넣는 2가지 방법으로 적용.
보통 코드의 제일 마지막에 넣는 경우가 많다

<script>
documents.getElementByid('...')

</sciprt>

css

html문서를 꾸미는 언어

modern front-end: html로 구조를 잡은 후 css로 그 구조에 style속성을 입히는 것.

css언어 적용
1.style속성으로 태그에 css넣기

...
  <b style="color:red; font-size:12px">ㅎㅇ</b>
 ...

head에 style태그로 넣기

...
<head>
<style type="text/css">
.course{
 font-size: 12px;
}
<head>
<body>
<div class="course">안녕</div>
</body>
...

CSS Selector
3.css파일로 넣기

<head>
 <link rel="stylesheet" href="파일위치"> //import해서 css파일 불러오기
 <head>

JavaScript

사용자와의 인터페이스를 프로그래밍으로 제공
처음에는 웹 브라우저만으로 사용하기 위해 제공->server(node.js)로도 사용가능(ES6의 탄생배경).
*웹 브라우저에서 지원을 해야한다.

태그 중 중요한 속성들(a, img, table, form, input...)

a tag

href: 주소 경로
target: _blank(브라우저를 새창에서 띄움)

img tag

src: 이미지 주소 경로
alt=> img의 의미를 text로 표현 (웹접근성을 높이는 필수 속성처럼 다루는 것이 좋음(구글SEO(search engine optimization)문서에서도 alt권장)

table tag
thead>tr>th*n의 처음 제목 열 + tbody>tr>th의 중심 컨텐츠 + tfoot>tr>td의 마지막 열을 넣어서 검색엔진을 고려
(tr,td만 해도 호환성에는 문제가 없다.)
colspan, rowspan: 열이나 행 중에 가장 많은 열(n)을 기준으로 얼마만큼 합칠지를 말함
<table>
	<tr>
    	<td colspan="2"></td> 
        // 밑의 td가 2니까 n=2만큼의 너비(100%)를 가지게됨. 
        만약 밑의 td가 3개고 위의 colspan은 2라면 3개의 너비에서 2개(66.6%)만을 차지한다고 생각
    </tr>
    <td>
    	<td>1</td>
        <td>2</td>
    </td>
</table>

form tag

action: 사용자 입력 받은 데이터를 처리할 url
method: HTTP method (post || get)
target: 링크된 URL 이동 방법 지정: _self(현재 브라우저), _blank(새로운 브라우저 탭에 띄움)

input tag
type,
name,
submit,
value,
autofocus(페이지 로드 시, 제일 먼저 마우스 포커스를 자동으로 놓이게 하는 것),
autocomplete(자동완성 (on/off)),

Semantic Web

**header: 헤더

구조
nav: 내비게이션
aside: 옆에 위치하는 부분
section: 본문의 여러 내용을 포함하는 부분
article: 본문의 주 내용이 들어가는 부분
footer: 하단부**

웹페이지 각 요소에 의미를 부여해서, 단순 키워드 중심 검색을 뛰어 넘어, '의미'와 '관련성'을 기반으로 보다 진보된 검색 또는 서비스가 가능토록 하는 시도(HTML5에 제공되는 태그)

modern Web

웹 표준
웹 접근성
크로스 브라우징
이미지 포맷

웹표준

www의 측면을 서술하고 정의하는 공식 기술 규격

w3c의 권고안에 따라 정의된 웹 표준

html버전에 따라 deprecated 되는 태그 및 속성이

작성한 HTML 페이지가 표준에 부합하는지 확인하는 방법

웹 접근성

이미지 태그에 alt넣기, 청각장애인을 위해 영상에 자막 넣기, 키보드로 웹페이지 인터페이스 접근 가능 기능등 환경적 제한이 있는 사용자를 고려하여 웹 페이지를 작성하는 기법

웹 접근성 인증마크도 있으나, 현실적으로 스타트업에서는 구현이 어려움 (인증 테스트 받는데만 100만원 이상 필요)

테스트 사이트가 있음.

다양한 웹브라우저상에서의 동일한 사용자 경험을 위한 기술 또는 방법을 의미
웹브라우저별 html 문서 표현의 차이가 존재하며, 최신 표준은 지원되지 않는 경우가 있음.
ms의 ie가 문제 소지가 가장 많으므로, 해당 브라우저만 간단히 고려하면 됨

이미지

이미지는 비트맵과 벡터 이미지로 구분됨

비트맵 이미지는 픽셀 단위로 색정보를 가진 이미지 데이터(.jepg,jpg,gif,png 파일 확장자)
정교하고 다양한 색상으로 이미지 표현 가능, 단 이미지 확대 또는 축소시 이미지가 깨짐

벡터이미지는 수학정보로 모양정보를 가진 이미지 데이터(.svg)

jpeg(jpg) : 높은 압축률
-24비트 ,약 1600만 색상으로 고해상도 이미지 가능
-이미지 품질과 용량 조정 가능
-손실 압축(원본 이미지와 일부 다른정보)
gif: 동영상, 짤과 같은 이미지 가능
-8비트 색상만 지원
-비손실 압축(원본 이미지와 동일 정보)
png: 투명도 지원되는 gif 대체 포맷
-w3c 권장 이미지 포맷
-gif와 같이 동영상등은 지원 x
-24비트, 1600만 색상으로 고해상도 이미지 가능
-비손실 압축(원본이미지와 동일), 단 파일 사이즈가 상대적으로 다른 포맷에 비해 큼
webp: 동영상, 투명도 지원되는 jpg,png,gif 모두 대체하는 포맷
-구글개발
-일부 브라우저에서 미지원
-손실/비손실 압축 모두 지원

KIP

이전 포스트

what is HTMLcollection? NodeList?

다음 포스트

웹페이지 개요

html

DOCTYPE

html

head

link

sciprt

css

태그 중 중요한 속성들(a, img, table, form, input...)

Semantic Web

modern Web

what is HTMLcollection? NodeList?

알고리즘 정리(JS) -1일차

0개의 댓글