2023. 3. 23. 15:59ㆍ학습일지
1. 내 최초의 웹사이트 만들기
<html>
<head>
<title>home of my first website</title>
</head>
<body>
<!--
작성일 : 2023-03-23
작성자 : 고예진
내용 : 최초의 내 웹사이트를 만들어봄
-->
안녕하세요. jin의 최초의 웹사이트에 온 것을 환영합니다.
라이브 서버 확인!
</body>
</html>
2. 문단태그
<html>
<head>
<title> 문단 태그 </title>
</head>
<body>
<p>1. 문단태그</p>
<p>문단을 만드는 태그</p>
</body>
</html>
3. 제목태그
<!DOCTYPE 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>제목 태그</title>
</head>
<body>
<h1> 안녕하세요. 제목태그 h1</h1>
<h2> 안녕하세요. 제목태그 h1</h2>
<h3> 안녕하세요. 제목태그 h1</h3>
<h4> 안녕하세요. 제목태그 h1</h4>
<h5> 안녕하세요. 제목태그 h1</h5>
<h6> 안녕하세요. 제목태그 h1</h6>
</body>
</html>
4. 서식태그
<!DOCTYPE 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>서식태그</title>
</head>
<body>
<h2>서식 태그</h2>
<p>b 태그는 단순히 글자가 <b>굵게</b> 표현됩니다</p>
<p>stromg 태그는 중요한 글자를 <strong>굵게</strong> 표현합니다</p>
<p>i 태그는 단순히 글자를 <i>이탤릭체</i>로 표현합니다</p>
<p>em 태그는 중요한 글자를 <em>이탤릭체</em>로 기울여 표현합니다</p>
<p>del 태그는 글자를 <del>지운 것</del>처럼 표현합니다</p>
<p>ins 태그를 사용하면 중요한 글자에 <ins>밑줄을</ins> 그어줍니다</p>
<p>sup 태그를 사용해서 수식을 표현: x<sup>2</sup>+<sup>y</sup>3=z</p>
<p>sub 태그를 사용해서 화학식을 표현 : H2O</p>
</body>
</html>
5. 목록태그
<!DOCTYPE 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>목록 태그</title>
</head>
<body>
<h2>목록 태그</h2>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<hr>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<hr>
<dl>
<dt>류정원 선생님</dt>
<dd>김사과 학생</dd>
<dd>오렌지 학생</dd>
<dd>반하나 학생</dd>
</dl>
</body>
</html>
6. 이미지 태그
<!DOCTYPE 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>이미지태그</title>
</head>
<body>
<h2>이미지태그</h2>
<img src="sea1.png" alt="바다1 이미지">
<img src="sea2.png" alt="바다2 이미지">
<img src="sea3.png" alt="바다3 이미지">
<img src="sea4.png" alt="바다4 이미지">
<img src="sea5.png" alt="바다5 이미지">
</body>
</html>
✔️클라이언트(client)
서버로부터 서비스나 데이터를 요청하는 컴퓨터
✔️서버(server)
데이터를 포함하거나 네트워크의 다른 컴퓨터에서 액세스하는 기능을 제공하는 컴퓨터
HTML(Hyper Text Markup Language): HyperText(웹 페이지에서다른 페이지로 이동할 수 있는 것)
HyperText(웹 페이지에서다른 페이지로 이동할 수 있는 것) 기능을 가진 문서를 만드는 언어
CSS,Javascript
최초의 웹사이트
http://info.cern.ch/
✔️HTML 문서 만들기
- HTML 문서는 확장명을 .html로 저장
- 대소문자를 구별하지 않음
- 문자를 작성할 수 있는 에디터라면 어디든지 작성이 가능
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 명령어(태그) 형태로 괄호를 (예:<명령어>) 사용하여 표현
- 시작태그, 종료태그로 구성되어 있음 (예: <명령어>...<명령어>)
<html>
<head>
</head>
<body>
</body>
</html>
✔️live server 설치
HTML 문서를 선택 -> alt + L + O
✔️Wrap 줄바꿈 여부 제어에서 on 하기
✔️HTML의 특수 태그 # 나중에 인식 불가능할 경우 사용하기 위해
< :<
> :>
✔️띄어쓰기 :
✔️줄바꿈 태그
<br> = </br>
✔️주석
<!-- --> 한줄 또는 여러줄
✔️문단 태그
- 문단을 나타내는 태그
- 블록 태그 (한 라인을 모두 차지함)
<p>~</P>
✔️제목테그<h1>~</h1>
- h1~ h6까지 크기
- 블록 태그
- 검색엔진에서 제목으로 표현됨
✔️Auto Rename
- 시작태그와 종료태그가 변화하면 태그를 동일하게 변경
✔️서식 태그
- 글자를 꾸며주는 태그
- <b> : 텍스트를 굵게 표현
- <strong> : 텍스트를 굵게 표현, 리더기에서 거센발음
- <i> : 텍스트를 이탤릭체로 표현
- <em> : 텍스트를 이탤릭체로 표현, 리더기에서 거센발음
✔️웹 표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- w3c가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정
✔️웹 접근성
장애인, 고령자등이 웹사이트에 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장
✔️목록태그
- <ul> : 순서가 없는 목록 태그, 블록태그
* 김사과
* 오렌지
* 반하나
<ul>
* 김사과
* 오렌지
* 반하나
</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>
✔️이미지 태그
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지라고도 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집
2. 백터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집
✔️jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
✔️gif
-이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤,애니메이션)
- 8비트(256색상) 컬러만 지원
- 비손실 압축
✔️png
- gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- W3C 권장 포멧
✔️webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파 채널 지원(손실,비손실)
- 가장 완벽한 포멧
✔️속성
태그를 보완하는 역할
<!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-equive,author,viewprot,keyword,description등 여러가지 속성...
✔️이미지 태그
- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기 만큼만 영역을 사용)
<img src = '이미지가 위치하는 주소 또는 파일 경로' alt = '이미지를 대신할 문장'>
✔️무료로 png 얻을수 있는 곳
https://www.iconfinder.com/
'학습일지' 카테고리의 다른 글
| 20230327 kdt 학습일지 (2) | 2023.03.27 |
|---|---|
| 20230324 kdt 학습일지 (1) | 2023.03.24 |
| 20230322 KDT 학습일지 (0) | 2023.03.22 |
| 20230321 kdt 수업일지 (0) | 2023.03.21 |
| 20230317 kdt 시험 (2) | 2023.03.20 |