HTML설치
비주얼스튜디오 다운로드 -> 비주얼스튜디오코드 무료다운로드 (windows x64 사용자 설치 관리자) 설치
실행 후 왼쪽 맨밑 확장 -> Korean 설치 후 오른쪽아래 재실행
* c - prject - HTML새폴더 만들기
-----------------------------------------------------------------------------------------------------------------------------------------------------------
위 입력 후
실행 - > 디버깅 없이 실행 -> chrome
** Web 이란? **
Web(웹) 이란? , 사전적인 의미로 거미줄이란 뜻으로 it에서는 WWW (World Wide Web) 의 약자
** Web의 동작원리 **
- 브라우저에 ( http:// ) www.naver.com 이라는 는 일종의 url을 치면 브라우저는 서버에 url을 요청하고 서버는 저장되어있던 네이버의 HTML, CSS, Java Script파일 등의 구성파일을 보내면 브라우저에 나타냄.
** 클라이언트 - 서버 구조 **
- 클라이언트(Client)란?
서비스를 사용하는 사용자 혹은 사용자의 단말기를 가리키는말. (서비스를 요청하는 입장)
- 서버(Server)란?
서비스를 제공하는 컴퓨터이며, 다수의 클라이언트를 위해 존재하기 때문에 일반적으로 매우 큰 용량과 성능을 가지고 있음.
(서비스를 요청받고 서비스를 제공하는 입장)
웹이란? 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태.
인터넷이란? 1개 이상의 네트워크가 연결되어 있는 형태
- 프로토콜(Protocol) : 네트워크상에서 약속한 통신규약 (Http, FTP, SMTP, POP, DHCP)
- IP(Internet Protocol) : 네트워크상에서 컴퓨터를 식별할 수 있는 주소 (ip와 DNS는 1:1맵핑)
- DNS(Domain Name Service) : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열
- Port : IP주소가 컴퓨터를 식별할 수 있게 해준다면, Port번호는 해당컴퓨터의 구동되고 있는 프로그램을 구분 할 수 있는 번호
| - Example - http://www.daum.net/about/introduce * http - 프로토콜 * www.daum.net - 컴퓨터주소(DNS를 통한 IP주소로 변경) -> 예) <255.255.255.255> * about/introduce - Information path |
* cmd 명령 프롬프트에 ipconfig검색하면 내컴퓨터 ip 알 수 있음
* cmd 명령 프롬프트에 ping 주소 입력하면 DNS와 맵핑된 ip 알 수 있음
** HTML 이란? **
<!DOCTYPE html> //1)doctype (생략가능)
<html lang = "ko"> //2)<html> 태그
<head> //3)<head>태그
<meta charset="UTF-8">
<title>HTML 기본구조</title>
</head>
<body> //4)<body>태그
<h1>Hello, HTML</title>
</body>
</html>
Hyper Text Markup Language의 약자로 웹문서를 기술하는 언어, 웹문서를 표현하기 위해 태그들로 구성되어 있음.
1)doctype - 브라우저 선언문, 반드시 상단 웹표준과 관련
2)<html> 태그 - lang속성은 문서가 작성된 언어
3)<head>태그 - 브라우저 화면에 표시되지 않음, 문서의 기본설정 ( 보통 이페이지가 무슨페이지인지 설명 or body정보를 추가or보완)
4)<body>태그 - 브라우저 화면에 나타나는 내용, 태그들 대부분이 해당
* Visual studio code 에서 '! (느낌표) 하고 엔터' 치면 html기본 코드 제공
* HTML 요소 구조
HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당요소에 대한 추가적인 정보를 제공함.
HTML 요소는 시작 태그로 시작해서 종료 태그로 끝남
//HTML요소
<p class="para">TCPschool.com</p>
//<p class="para"> - 시작태그
// p-태그이름
// class - 속성명
//"para" - 속성 값
//TCPschool.com - 내용
//</p> - 종료태그
<b /> : 화면상 엔터키(줄바꿈)
* css 란?
Cascading Style Sheets의 약자로, HTML문서를 디자인적으로 예쁘게 만들어 정보를 가지고 있고, CSS는 화면상의 레이아웃 등을 컨트롤 하는 문서
a { background-color : yellow ; font-size : 16px ; }
//a - 선택자
//{} - 선언시작,끝
//background-color - 속성명
//yellow - 속성값
//font-size - 속성명
//16px - 속성값
** HTML 태그 **
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html연습</title>
</head>
<body>
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
<p>주로 본문에 사용되는 태그로서 단락을 구분합니다. <br /> 행바꿈 태그입니다.</p>
<p>주로 <b>본문</b>에 사용되는 태그로서 단락을 구분합니다. <br /> 행바꿈 태그입니다.</p>
<p><a href="http://www.daum.net">다음 웹사이트로 이동</a></p>
<p><i>KOREA</i></p>
<p>KOREA<sup>SEOUL</sup></p>
<p><ins>KOREA</ins></p>
<p><del>DELETE</del></p>
</body>
</html>
* 결과
** CSS 적용 **
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
font-size:60px;
color:green;
}
</style>
</head>
<body>
<h1>안녕하세요. 월요일입니다.</h1>
</body>
</html>
* 리스트 태그 - ol, ul, li
<ol> : 숫자나 알파벳 등 순서가 있는 목록
<ul> : 순서가 필요 없는 목록
<li> : list item의 약자
* 리스트 태그 - dl, dt, dd (dl안에 dt/dd 태그 올수 있다.)
<dl> : 사전처럼 용어를 설명하는 목록을 만들때
<dt> : 정의되는 용어의 제목을 넣을때
<dd> :
** 실습 (리스트) **
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>메뉴 리스트</p>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<p>지역 리스트</p>
<ol>
<li>서울</li>
<li>경기</li>
<li>충청</li>
<li>강원</li>
<li>제주</li>
</ol>
<ol>
<li><a href="http://www.google.com" target="_blank">구글</href></li>
<li><a href="http://www.daum.net" target="_self">다음</href></li>
</ol>
<br /><br />
<!--리스트 태그 dl, dt, dd-->
<dl>
<dt>메뉴 리스트</dt>
<dd>menu1</dd>
<dd>menu2</dd>
<dd>menu3</dd>
<dd>menu4</dd>
<dd>menu5</dd>
<dt>지역 리스트</dt>
<dd>서울</dd>
<dd>경기</dd>
<dd>충청</dd>
<dd>강원</dd>
<dd>제주</dd>
</dl>
</body>
</html>
** Table 태그 **
** 테이블만들기 **
<table> : 테이블을 만드는 태그
<th> : 테이블의 헤더 부분을 만드는 태그
<tr> : 테이블의 행을 만드는 태그
<td> : 테이블의 열을 만드는 태그 (왼쪽정렬기본)
** 테이블 디자인 변경 **
border : 테이블의 테두리 (border="1") - 숫자가 높을수록 테두리가 두꺼워짐
bordercolor : 테이블의 테두리 색상 - default 검정색
width : 테이블 가로 크기
height : 테이블 세로 크기
align : 정렬 (테이블안에 있는 값들을 정렬시키는 기능)
bgcolor : 배경색
colspan : 가로합병(열 합병)
rowspan : 세로합병(행 합병)
** 실습 (테이블) **
<!DOCTYPE html>
<html>
<!--
<head>
<meta charset="UTF-8">
<title>테이블테스트</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="#FCFA76">
<tr>
<th>번호</th>
<th>이름</th>
</tr>
<tr>
<th>1</th>
<th>첫번째 순서</th>
</tr>
<tr>
<th>2</th>
<th>두번째 순서</th>
</tr>
</table>
</body>
-->
<head>
<meta charset="UTF-8">
<title>Table 실습문제1</title>
</head>
<body>
<table border="1">
<tr>
<th>영화제목</th>
<th>연도</th>
<th>감독</th>
<th>평가</th>
</tr>
<tr>
<th>라이프오브파이</th>
<th>2013</th>
<th>이안</th>
<th>8.68</th>
</tr>
<tr>
<th>레미제라블</th>
<th>2012</th>
<th>톰후퍼</th>
<th>8.28</th>
</tr>
<tr>
<th>장고: 분노의 추적자</th>
<th>2012</th>
<th>타란티노</th>
<th>8.29</th>
</tr>
</table>
</body>
</html>
'수업끄적끄적_7MONTH > HTML' 카테고리의 다른 글
| 12/08 수업 (26일차) _ 평행이동 / 애니메이션 (1) | 2023.12.08 |
|---|---|
| 12/07 수업 (25일차) _ 선택자 / (2) | 2023.12.07 |
| 12/06 수업 (24일차) _ Table 태그 속성 / Img 태그 / Input태그 / Form 태그 / 레이아웃 구성 태그 - div, span / CSS란? (1) | 2023.12.06 |