네트워크와 네트워크 간의 통신이 필요하다. 즉, 네트워크 끼리 물리적으로 연결이 되어야 한다.
인터넷: 네트워크간의 통신을 하기 위한 여러 재반의 기술
웹: (영국 개발) 인터넷이라는 기술, 기반 위에서 문서 교환을 하기 위한 서비스를 영국의 어떤분이 만든 것
하이퍼텍스트: 클릭할 때 특정 문서에 대한 요청이 발생되고 해당 문서가 화면에 보이는 것
HTML: 하이퍼텍스트 기술을 사용해서 교환할 수 있는 문서
프로트엔드: client
백엔드: server
백엔드 request 를 받아 respose를 client에게 한다.
URL: 웹 상의 자원의 위치 지정 방법 통일
**
html의 기초
1. <h1> 시작시 </h1>로 끝난다. (모든 네임 전부)
2. 시작시에는 ! + enter 로 기본 element를 만들어준다.
3. 하나의 란을 지울 때에는 ctrl + shift + k 를 지우면 된다.
4. 주석 처리는 // 가 아닌 <!-- 를 입력하면 자동으로 주석처리 기능이 나온다.
* 기본 세팅
- Visual Studio 를 킨 후 파일을 만들어 준다.
- ! Enter 로 시작한 뒤, eg-> ko (기본 언어를 영어에서 한국어로)
(File에선 auto save 기능을 켜주어야 한다.)
- alt+l+o 연타시 웹 페이지 생성
<01>
<!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>Document</title>
</head>
<body>
<h1>안녕하세요</h1>
<h4>웹개발반입니다</h4>
</body>
</html>
<02>
<!DOCTYPE html>
<html lang="ko">
<!--HTML의 주석(comment)-->
<!--
- 여러줄 가능
- 한줄 주석 따로 없음
- 중첩된(nested) 형태의 주석 허용하지 않음
-->
<head>
<!-- <head> :
브라우저에 직접적으로 보여지진 않지만
'웹문서'에 대한 부가적인 정보나 설정값.
'브라우저'에서 다루어야 할 내용 포함. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <body>:
실제 브라우저 화면에 보여지는 내용 -->
<p>p태그는 문단(paragraph)를 나타내는 태그</p>
<p>문단과 문단 사이는 줄바꿈 된다.</p>
<!-- Lorem Ipsum 로렘 입숨
출판등에서 디자인이나 레이아웃을 보기위한 샘플
어느정도 분량의 텍스트로 글을 생성해주기 위해
https://www.lipsum.com/
-->
<p>html 안에서 아무리 enter를 쳐도,
space(공백)을 입력해도
1개 이상 한칸 띄기로 밖에 반영 안 됨
</p>
<!-- <br> 태그 (break)를 사용하면 브라우저에서 강제 줄바꿈됨
<br> 은 단독으로 사용되는 태그
칸 띄우기를 여러칸 하려면 라는 입력합니다. (non-break space)
-->
<p>html 안에서 아무리 enter를 쳐도, <br>
space(공백)을 입력해도
1개 이상 한칸 띄기로 밖에<br> 반영 안 됨
</p>
하하하하
<!-- Entity(엔티티):
HTML 코드는 < ~~ > 형식의 태그들로 구성되어 있다 보니
< 와 > 등을 나타낼 때는 특수한 방법을 사용해야 한다.
바로 & 로 시작하는 엔티티(Entity)라 불리는 것이다.
HTML에는 수많은 엔티티가 존재하지만, 다음 6개는 필수 암기!
non-breaking space
< less than <
> greater than >
& ampersand &
" double quotation mark "
' single quotation mark (apsotrophe) '
-->
<br>
<p>Entity(엔티티)</p>
<p>
<>&"'
</p>
</body>
</html>
<03>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>지윤이다</title>
</head>
<body>
<p>h 태그를 heading 혹은 headline이라 불리기도 한다.</p>
<p>웹문서의 제목을 나타냅니다</p>
<p>h1~h6 총 6가지 h태그가 있습니다.</p>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<p>웹 문서 검색시 SEO 와도 중요한 관련이 있는 태그이다.</p>
<!-- SEO (Search Engine Optimization)
검색엔진 최적화: 웹 문서가 검색엔진에 의해 더 잘 검색되고, 핵심키워드에서 더 좋은 노출도를 갖기 위해
이를 고려해서 웹 문서를 작성하는 것
요즘 SEO는 단순히 어휘의 반복 사용으로 인한 것은 인공지능으로 걸러냄.
Semantic tag 등을 잘 사용해야 함
-->
</body>
</html>
<04>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute</title>
</head>
<body>
<h1>Basic04_Attribute</h1>
<p>start tag 안에는 그 element의 부가적인 속성(attribute)를 지정해줄 수 있다</p>
<p>기본구문 attribute name(속성이름) = "attribute value(속성값)"이며</p>
<p>여러개의 속성을 지정해줄 수 있다. 띄어쓰기로 구분</p>
<p> 속성값은 반드시 따옴표 (쌍따옴표 혹은 홀따옴표) 쌍으로 감싸주자</p>
<p style="color:red"> style 이란 속성에 color:red 라는 속성값을 주면 글자가 빨간색이 된다</p>
<p style="background-color: cyan; color:yellow" title="이것은 툴팁입니다">
style 이란 속성에 "background-color:red; color:yellow"라는 속성값<br>
title 이란 속성에 "이것은 툴팁입니다"라는 속성값
</p>
</body>
</html>
<05>
<!DOCTYPE html>
<html lang="ko">
<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>Style</title>
</head>
<!--
HTML에서 Style 속성의 속성값에는
CSS(Canscading Style Sheet) 스타일 구문이 들어간다.
구문:
<tagname Style= "property:value;">
대표적인 스타일 property는
background-color 배경색
color 글자색
text-align 좌우정렬 (left, center, right)
font-size 글자크기 %, px 사용 가능
font-family 글꼴
한글 글꼴은 그 수가 많지 않아 선택의 폭이 좁다.
가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절
가변폭 글꼴을 사용하는 것이 좋다.
가변폭 글꼴: 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서
고정폭 글꼴: 굴림체(Gulimche), 돋움체(DotumChe), 바탕체(Batangche), 궁서체
-->
<body>
<h1 style="color:blue; font-family:GulimChe">굴림체</h1>
<h1 style="background-color: cyan; font-family: Gungsuh; text-align: right;">궁서체</h1>
<h1 style="background-color: rgb(156, 156, 138); font-family: Batang; text-align:center;">바탕체</h1>
<br>
<p style="font-size:200%"> 200% p 태그</p>
</body>
</html>
<06>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div, span 컨테이너</title>
</head>
<!--
다른 요소들을 담는 용도(컨테이너)로 주로 사용되는 태그 div, span
화면 레이아웃 상의 구역별로 나누는 용도로 많이 사용
** 단연코 가장 많이 사용되는 태그들
-->
<body>
<h2>컨테이너 태그: div,span</h2>
<div>div</div>
<div>div</div>
<div>div</div>
<hr>
<div style="background: yellow; padding:5px;">
div2
<div style="background:green; padding:5px;">
div21
</div>
div2
<div style="background:cyan; padding:5px;">
div22
<div style="background:violet; padding:5px;">
div221
</div>
<div style="background:lightgray; padding:5px;">
div222
</div>
</div>
</div>
<hr>
<!-- 컨테이너 역할 span div 와의 결정적 차이점은 inline 속성 -->
<span>span</span>
<span>span</span> <!--줄바꿈을 안한다-->
<span>span</span>
<hr>
<span style="background: yellow; padding:5px;">
span2
<span style="background:green; padding:5px;">
span21
</span>
span2
<span style="background:cyan; padding:5px;">
span22
<span style="background:violet; padding:5px;">
span221
</span>
<span style="background:lightgray; padding:5px;">
span222
</span>
</span>
</span>
<div style="border:1px solid blue">
hello hello<br>
안녕 안녕<br>
<p> div 안의 p 태그</p>
</div>
</body>
</html>
<07>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color</title>
</head>
<body>
<!--
HTML에서 생상값 지정하는 방법
1. 이름으로 지정: 많이 쓰는 색상에 대해 140종의 이름이 정의되어 있음
https://www.w3schools.com/colors/colors_names.asp
-->
<h1>많이쓰는 색상에 대해 140종의 색상이 정의되어 있음</h1>
<h1 style="background-color: tomato;">Tomato</h1>
<h1 style="background-color: orange;">orange</h1>
<h1 style="background-color: dodgerblue;">dodgerblue</h1>
<h1 style="background-color: mediumseagreen;">mediumseagreen</h1>
<h1 style="background-color: gray;">gray</h1>
<h1 style="background-color: slateblue;">slateblue</h1>
<h1 style="background-color: violet;">iolet</h1>
<h1 style="background-color: lightgray;">ightgray</h1>
<!--
2. rgb() 사용: rgb(255, 99, 71) <- Red, Green, Blue 값, 0~255
-->
<h1>rgb () 를 사용한 색상 표현</h1>
<h1 style="background-color:rgb(255,0,0);">rgb(255,0,0)</h1>
<h1 style="background-color:rgb(0,0,255);">rgb(0,0,25)</h1>
<h1 style="background-color:rgb(60,179,113);">rgb(60,179,113)</h1>
<h1 style="background-color:rgb(238,130,238);">rgb(238,130,238)</h1>
<h1 style="background-color:rgb(225,165,0);">rgb(225,165,0)</h1>
<h1 style="background-color:rgb(106,90,205);">rgb(106,90,205)</h1>
<h1> rgb값을 동일하게 주면, 회색색조의 색상 표현 가능</h1>
<h1 style="background-color:rgb(0,0,0);">rgb(0,0,0)</h1>
<h1 style="background-color:rgb(60,60,60);">rgb(60,60,60)</h1>
<h1 style="background-color:rgb(120,120,120);">rgb(120,120,120)</h1>
<h1 style="background-color:rgb(180,180,180);">rgb(180,180,180)</h1>
<h1 style="background-color:rgb(240,240,240);">rgb(240,240,240)</h1>
<h1 style="background-color:rgb(255,255,255);">rgb(255,255,255)</h1>
<hr>
<!--
3. 16진수 사용: #rrggbb 혹은 #rgb
-->
<h1> 16진수 값(HEX)로 색상 표현 가능 #rrggbb 형식</h1>
<h1 style="background-color: #ff0000;">#ff0000</h1>
<h1 style="background-color: #0000ff;">#0000ff</h1>
<h1 style="background-color: #3cb371;">#3cb371</h1>
<h1 style="background-color: #ee82ee;">#ee82ee</h1>
<h1 style="background-color: #ffa500;">#ffa500</h1>
<h1 style="background-color: #6a5acd;">#6a5acd</h1>
<hr>
<h1> 16진수 (HEX)으로 색상 표현 가능 #rgb 형식</h1>
<h1 style="background-color: #f00;">#f00</h1>
<h1 style="background-color: #00f;">#00f</h1>
<h1 style="background-color: #ab1;">#ab1</h1>
<h1 style="background-color: #0f2;">#0f2</h1>
<hr>
<!--
4. hsl 사용 :
ex) hsl(147,50%,47%)
hsl(hue, saturation, lightness)
hue 0 ~ 360 (색상/색조: 0 빨강 ~ 240 블루)
saturation 0% ~ 100% (채도: 0 흑백 ~ 100 풀)
lightness 0% ~ 100% (휘도/밝기: 0 블랙 ~ 100)
-->
<h1>hsl()으로 색상 표현</h1>
<h1 style="background-color:hsl(0, 100%, 50%);"hsl(0, 100%, 50%)></h1>"
<hr>
<!--
5. rgba color
rgba() alpha 0.0 (투명) ~ 1.0 (불투명)
ex) rgba (255, 99, 71, 0.6)
#rrggbbaa 혹은 #rgba
-->
<h1> rgba () 로 alpha 표현</h1>
<h1 style="background-color:rgba(255,00,71,0);">rgba(255,00,71,0);</h1>
<hr>
<!--
6. hsla color
-->
<br>
</body>
</html>
'JAVA' 카테고리의 다른 글
| [0114] JAVA1 - 자바의 기본 (0) | 2023.01.15 |
|---|---|
| [1227] 웹개발반2 (html) (1) | 2022.12.27 |
| Java2 Day01 (0) | 2022.09.24 |
| [11] JAVA_DAY11 (0) | 2022.08.10 |
| [08] JAVA_DAY08 (0) | 2022.08.09 |
