-인터넷 : 데이터를 보내는 회선/선로
-웹 : 회선/선로를 이용하는 서비스
Client : 요청(request)하는 주체
Server : 응답(response)하는 주체
* Protocol(=Rule) : 규칙
- 요청할때 정해진 규칙에 따라 요청해야 응답받는다.
■ HTML
HTML - 비어있는 웹페이지에서 뼈대를 만들어주는 설계도 (레이아웃)
CSS - 뼈대에 디자인을 해주는 것
==> 정적인 페이지
Tool : Visual Studio Code
실습 코드)
<!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>
안녕하세요! 제 인생의 두번째 웹페이지 입니다!
<!--
h태그 : 제목을 표시 할 때 사용 하는 태그
h1 ~ h6 : 6개의 태그가 존재 > 숫자가 커질수록 글자는 작아진다.
h1 ~ h3 가장 많이 사용이 된다.
-->
<h1>여기는 h1태그입니다!</h1>
<h2>여기는 h2태그입니다!</h2>
<h3>여기는 h3태그입니다!</h3>
</body>
</html>출력 화면)
- P태그는 태그가 끝나면 자동으로 개행이되고
- Span태그는 태그가 끝나도 개행이 되지 않는다
실습코드)
<!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>
<!-- 글자를 작성할 때는 크게 영역이 2가지가 있다.
1. <p> = 문단을 작성 할 때 사용이 되는 태그
- 특징 : 한줄 전체를 차지하기 때문에 자동으로 줄바꿈, 위아래 공백
2. <span> = 특정단어, 문장을 표시할 때 사용되는 태그
- 특징 : 아무런 기능이 존재하지 않는다(공태그)
3. <br> = 글자의 줄바꿈을 담당하는 태그
- 특징 : 열린태그만 있는 홀태그 구조를 가지고 있다.
- 이유 : 중간에 들어갈 컨텐츠가 없기 때문에 작성할 필요가 없다.
- 주의점 : <br/> 생략이 되어서 <br>
-->
<p>여기는 p태그 영역</p>
<p>여기는 p태그 영역</p>
<span>여기는 span태그 영역</span>
<br>
<span>여기는 span태그 영역</span>
</body>
</html>출력화면)
P태그의 영역)
SPAN 태그의 영역)
Span태그는 특정단어나 특정문장의 색상이나 디자인을 입힐때 사용한다
<b>태그 : 읽을때 그냥 읽어준다
<Strong>태그 : 읽을때 강조해서 읽어준다
실행코드)
<!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>
<!--
글자를 두껍게 해주는 태그
b태그 : 현재는 거의 사용되지 않는다(css디자인이 대체)
Strong태그 : 내용을 강조할때 사용(페이지를 음성으로 출력할 때 강조해서 발음)
글자를 기울려서 표시해주는 태그(참고문헌/사이트)
i 태그(이태릭태그) : 현재는 거의 사용되지 않는다(css대체)
- 현재는 아이콘을 대체해서 사용된다!
em 태그 : 내용을 강조(강조해서 발음)
-->
<p>안녕하세요 <b>박동명</b>입니다!</p>
<p>안녕하세요 <strong>박동명</strong>입니다!</p>
<i>i태그</i>
<em>em태그</em>
</body>
</html>출력화면)
*아이콘태그 모음 사이트!
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
ul태그 unorder list 순서없는 리스트
or태그 order list 숫자가 있는 리스트
li태그
실행코드)
<!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>
<!--
리스트 (목록)태그
ul태그(unorder list) : 순서가 없는 리스트를 제작(기호가 출력)
ol태그(order list) : 순서가 있는 리스트를 제작(숫자가 출력)
li태그(list item) : ul과 ol에 공통적으로 사용되는 태그, 실제 데이터를 작성하는 공간
-->
<ul>
<li>축구</li>
<li>야구</li>
<li>농구</li>
</ul>
<ol>
<li>물끓이기</li>
<li>김치넣기</li>
<li>고기넣기</li>
</ol>
</body>
</html><ul>태그 와 <ol>태그
실행 코드)
<!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>
<!--
이미지를 출력하는 태그
<img>태그 : src(source)안에 불러들일 파일의 경로를 작성
1. 내부 : 현재 작업중인 폴데어 이미지 파일이 존재할때 사용
- 장점 : 파일이 삭제 되지 않으면 영원히 사용이 가능
- 단점 : 용량이 커지고, 배포할때 불편
2. 외부 : 공개되어 있는 이미지 파일을 url을 통해서 받아와서 사용
- 장점 : 용량을 잡아먹지 않는다, 배포할때 편리
- 단점 : 인터넷이 되지 않는 환경에서는 사용불가, 원본이 삭제되면 이용할 수 없다
3. 필수속성
- src : 파일의 경로를 작성하는 속성
- alt : 파일의 문제가 생겼을때 대체텍스트를 출력할때 사용
-->
<img src="img.jfif" alt="쿼카사진입니다">
<br>
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjAxMjZfMjAw%2FMDAxNjQzMjA1ODI4MjM3.SUmJYlMe5SNM4KI9-W6oACyFqbAPyfwdCtls82tNczwg.T8xTbtiWY6t-rSg6i7VHzO_vrnuIeqX2uOixCZ9FNr4g.JPEG.216277%2FIMG_1797.JPG&type=sc960_832">
<!--
파일의 경로
절대 경로 : 변하지 않는 경로(url, 루트폴더로부터 작성)
상대 경로 : 현재 작업중인 파일을 기반으로 경로를 설정
0. WorkSpace에 같은 경로에 있는 경우 : "파일명.확장자"
1. 폴더를 들어가야 하는 경우 : "폴더명/폴더명/폴더명/파일.확장자"
2. 폴더를 나가야 하는 경우 : "../" 폴더를 나갈 수 있다.
3. 폴더를 많이 나가야 하는 경우 : 폴더의 개수 만큼 ../ 입력
4. 한번에 최상위 폴더(root)로 가는 방법 : 맨 앞에 /만 입력
* 경로를 작성할 때는 항상 출발점부터 목적지 순으로 작성
* 맨 마지막에 나온 내용이 최종 목적지(파일)
-->
<img src="../../img/img2/img.jfif">
<img src="/img/img2/img.jfif">
</body>
</html>출력화면)
PS.백엔드에 가고 싶지만 프론트도 알아야 백엔트파트도 업무에 쉬우니 잘 익혀두자!
'Study > HTML,CSS' 카테고리의 다른 글
| HTML/CSS기초 4일차 공간활용( margin, padding, border) (0) | 2022.10.06 |
|---|---|
| HTML / CSS기초 3일차 <css> (0) | 2022.10.05 |
| HTML/CSS기초 2일차 <a>,<table>,<Form>,<input> (1) | 2022.10.04 |