내 인생 처음 웹 개발 공부, HTML부터 시작하였다.
생활코딩을 통해!
1. 웹사이트 만들기
1️⃣ 기획을 한다
2️⃣ 코딩을 한다
2. HTML이란?
- 하나의 프로그래밍 언어, 가장 쉬우면서 가장 중요한 언어, 웹사이트를 만들 때 쓰인다.
- 가장 큰 특징은 public domain(저작권이 없다)이라는점
3. HTML 코딩하기
- 태그
<>Text</> : 기본구조
<u>Test</u> : 밑줄 치기
abcde<br> : 줄바꿈, abcde뒤에 엔터키를 친 것과 동일한 효과
abcde<p>fghi</p>jkml : 단락구분, 'fghi' 위 아래로 공백 한 줄이 생긴다.
<h1>,</h1> ~ <h6>,</h6> : 제목을 위한 태그, h1이 제일 크다.
<li>one</li> : 목차 태그, notion에서의 bulleted list와 동일한 효과
<ul>,</ul> : 목차 태그에 대한 부모 태그, 목차태그들을 감싸주면 그들이 한 그룹이 된다.
<ol>,</ol> : 목차태그, <li></li>를 감싸주면 앞에 숫자가 붙게 된다.
<title>,</title> : “웹페이지(탭에 뜨는)”의 제목을 정해주는 태
<meta charset="utf-8"> : 파일을 열 때 utf-8로 열어라(한글이 표시 가능해짐)
💡 예제
<meta charset="utf-8">
<title>HTML CSS 스터디</title>
<h1>It is Opening!</h1>
<h2>Study WIth Me</h2>
<u>Hello? </u>Welcome!<br>
It<p>is</p>Opening
<ul>
<li>one</li>
<li>two</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
</ol>
1. 사진 삽입을 통한 속성 공부
<img src=”” width=””> : src는 이미지 소스에 대한 속성, width는 사진 크기에 대한 속성
2. 반드시 포함해야하는 태그
<!doctype html>
<html>
<head>,</head> : 본문을 설명하는곳
<body> : 본문
3. 링크 만들기
<a href=”” target=”” title=””> </a>
a = anchor(닻), 어떤 페이지에 정박한다 는 의미
h=hypertext ref=reference, 링크 주소<a href=”” target=”” title=””> </a>a = anchor(닻), 어떤 페이지에 정박한다 는 의미h=hypertext ref=reference, 링크 주소
target=”_blank” : 새 탭으로 열기
title=”” 툴팁으로 정보알려주기
💡 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML CSS 스터디</title>
</head>
<body>
<h1>It is Opening!</h1>
<h2>Study WIth Me</h2>
<u>Hello? </u>Welcome!<br>
It<p>is</p>Opening
<ul>
<li>one</li>
<li>two</li>
</ul>
<a href="https://www.naver.com/", target=”_blank” title=”IT IS NAVER”>NAVER</a>
<ol>
<li>one</li>
<li>two</li>
</ol>
</body>
</html>
4. 여러 정보
- 가장 처음의 웹사이트, 원시웹
웹이기 위해서 필요한 것을 모두 가지고 있으면서 그렇지 않은 것은 배제한 것
- 정보를 요청하는 컴퓨터, 클라이언트(고객) 컴퓨터 – 웹브라우저
- 정보를 응답하는 컴퓨터, 서버(사업자) 컴퓨터- 웹 서버
- HTML 언어는 웹 브라우저를 제어하는 방법을 배운 것
- 웹 호스팅 or 서버 운영을 이용하여 내가 만든 웹 브라우저를 모든 사람에게 공개하자!
'개발 공부' 카테고리의 다른 글
| 웹 지식 학습 - part 3 (0) | 2022.07.29 |
|---|---|
| 웹 지식 학습 - part 2 (0) | 2022.07.29 |
| 웹 지식 학습 - part 1 (0) | 2022.07.29 |
| HTML & CSS 실습1 (0) | 2022.07.10 |
| CSS (0) | 2022.07.10 |
