12일차 수업(KDT)_코리아IT강남점

카테고리 없음

by teminam 2023. 3. 23. 15:12

✨ 클라이언트(Client)
: 서버로부터 서비스나 데이터를 요청하는 컴퓨터

✨ 서버(Server)
: 데이터를 포함하거나 네트워크의 다른 컴퓨터에서 엑세스하는 기능을 제공하는 컴퓨터

✨ 클라이언트 사이드 언어
HTML(Hyper Text Markup Language)
HperText(웹 페이지에서 다른 페이지로 이동할 수 있는 것) 기능을 가진 무너를 만드는 언어

CSS(HTML보다 이쁘게 설계), JavaScript(웹 페이지를 동적으로, 다이나믹하게, 웹페이지를 수정변경을 실시간으로 해주는 언어)

# 융합과 협업능력 및 커뮤니케이션이 중요한데, 이를 위해선 다양한 분야에 발을 담가봤어야 소통이 가능. 따라서 요새 기업트랜드는
# 얕게 많은 것을 아는것이 중요.
# 나랑 팀이 다른데 저 개발자 편하게 내가 왜 도움을 줘야지? 하면 안됨.

✨ 최초의 웹사이트
http://info.cern.ch/

✨ HTML 문서 만들기
- HTML 문서는 확장명을 .html로 저장
- 대소문자를 구별하지 않음
- 프로그래밍 언어라고 하지않음. 로직과 알고리즘이 없기 때문. 언어라고 함. 그냥 만들어진대로 써먹기만 하는 것. 변형이 없음
- 문서를 작성할 수 있는 에디터라면 어디든지 작성이 가능
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 명령어(태그) 형태로 괄호를 (예: <명령어>) 사용하여 표현
- 시작태그, 종료태그로 구성되어 있음(예: <명령어> ... </명령어>)

<html>
 <head>

 </head>
 <body>

 </body>
</html>

✨ live server 설치
HTML 문서를 선택 -> 알트 누르고 있는 상태에서, L + O

✨ 가로 스크롤 없애기
파일 -> 기본설정 ->wrap 검색 -> word wrap을 on으로 설정

✨ HTML의 특수 태그
< : <
> : >
띄어쓰기 :  

✨ 줄바꿈 태그
 -> 

✨ 주석
 한줄 또는 여러줄

✨ 문단 태그 ~ 
- 문단을 나타내는 태그
- 블록 태그(한 라인을 모두 차지함)

✨ 제목 태그<h1> ~ <h1>
- h1 ~ h6 까지의 크기
- 블록 태그
- 검색엔진에서 제목으로 표현됨

Auto Rename
- 시작태그와 종료태그가 변화하면 태그를 동일하게 변경

✨ 서식태그
- 글자를 꾸며주는 태그
- : 텍스트를 굵게 표현
- : 텍스트를 굵게 표현, 리더기에서 거쎈 발음 (for 시각장애인)
- : 텍스트를 이탤릭체로 표현
- : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음 (for 시각장애인)

 글자를 굻게

✨ 웹표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정

✨ 웹접근성
장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장

✨ 목록태그
- <ul>: 순서가 없는 목록태그, 블록태그
 · 김사과
 · 오렌지
 · 반하나

 <ul>
 <li> 김사과</li>
 <li> 오렌지</li>
 <li> 반하나</li>
 </ul>

에밋(emmet)
- html, xml, xsl 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인
- 원래 젠코딩으로 부르다가 에밋으로 이름을 변경

- <ol>: 순서가 있는 목록 태그, 블록태그

 1. 김사과
 2. 오렌지
 3. 반하나

 <ol>
 <li> 김사과</li>
 <li> 오렌지</li>
 <li> 반하나</li>
 </ol>

vscode 코드정렬
전체선택: 컨트롤 + a
코드정렬: 컨트롤 + k + f

- <dl>:정의 목록 태그, 블록태그

류정원 선생님
 김사과 학생
 오렌지 학생
 반하나 학생

 <dl>
 <dt>류정원 선생님</dt>
 <dd>김사과 학생</dd>
 <dd>오렌지 학생</dd>
 <dd>반하나 학생</dd>
 </dl>

속성
태그를 보완하는 역할

<!DOCTYPE html> : HTML 버전
<html lang="en">: lang="en", 리더기의 언어를 설정(en: 영어, ko: 한국어)
<head>
 <meta charset="UTF-8">: charset을 "UTF-8" 설정, 전세계의 모든 국가의 os/브라우저에서 언어셋을 모두 설정
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 브라우저에서 최적의 크기로 페이지를 보여주고, 확대/축소를 금지
 <title>서식 태그</title>
</head>

메타 태그
- HTML 문서에 대한 정보를 정의할 때 사용
- <head>와 </head> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, description 등 여러가지 속성...

✨ 이미지 태그
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지라고도 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샾 등 툴로 편집

2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 갖고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집

jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합

gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트(256색상) 컬러만 지원
- 비손실 압축

png
- gif의 대체 포맷으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파채널(투명도) 지원
# R G B정보에 알파정보(투명정도)를 추가 튜플의 형태로
- W3C 권장 포멧

webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파 채널 지원(손실, 비손실)
- 가장 완벽한 포멧

✨ 이미지 태그
- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기 만큼만 영역을 사용)
 # 이미지 태그와 블록태그를 확실하게 구분하자!

 <img src='이미지가 위치하는 주소 또는 파일경로' alt='이미지를 대신할 문장'>

무료로 png이미지를 얻을 수 있는 곳
https://www.iconfinder.com/