생활코딩 HTML 강의를 듣고 개인적으로 정리한 글입니다
https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb
WEB1- HTML & Internet
www.youtube.com
atom을 사용하여 실습하였다
html 열기 – 폴더 생성 후 선택 -> 오픈
html TAG(태그) 정리
<meta charset=“utf-8”> utf8로 문서를 읽게한다(한글 사용이 가능해진다)
<!doctype html> 이 문서는 html타입이라는 선언
<string> </strong> : 글자 크기를 굵게 변경
<u></u> 밑줄(underline)
<style> :색 바꾸기
<style = “color:red”> </style>
<h1></h1> h의 숫자가 증가할수록 크기가 작아진다
<h2> </h2>
.
.
.
<h6></h6>
<p></p> 줄 바꾸기 (단락 나눌때 사용)
<br></br> 줄 바꾸기 (p를 자주쓰며, 강제로 줄을 바꿀때 주로 사용한다)
<img> 이미지삽입
<img src=“이미지 파일 이름.jpg” width=“100%”>
<li> = list 목록
<ul></ul> li의 부모 unodered list
<ol> </ol> 숫자가 자동으로 넘버링된다 ordered list
html의 모든 태그는 head와 body안에 존재한다
<head>
<body>
</body>
</head>
<a></a> anchor 링크걸기
<a href=“” target=“” title=“”>
깃헙에서 웹 호스팅하기
소스코드를 안전하게 백업하고 협업하기 위해 생긴 사이트 : git
로그인 후 repository-> new를 눌러 repository 생성 -> 파일 올리기(index.html이 포함되어야 한다)
깃헙 프로필 클릭 -> settings -> pages -> source의 branch를 main으로 변경하고 save 클릭
actions에서 실시간으로 진행되는걸 볼 수 있다
html div 태그 : 웹 사이트의 레이아웃을 만들 때 주소 사용하는 태그
| 태그 | 속성 | 비고 |
| <div></div> | style | 스타일 |
| width | 가로 크기 | |
| height | 세로 크기 | |
| border | 테두리 굵기 | |
| background-color | 배경 색상 | |
| float | 정렬 | |
| margin | 여백 |
<span>태그 div와 p와 같이 웹페이지의 일부분에 스타일을 적용시키기 위해 사용된다
span 태그 내부에 객체가 들어가면 객체의 크기만큼 공간이 할당된다
css나 javascript로 일부분을 변형시키는 것이 가능해진다
| 태그 | 속성 | 비고 |
| <span> | display | display 요소 변경 |
| width | 가로 크기 | |
| height | 세로 크기 | |
| background-color | 배경색 변경 | |
| color | 글자 색 변경 | |
| font-style | 글자 형식 변경 | |
| margin | 외부 여백 설정 | |
| padding | 내부 여백 설정 | |
| border | 테두리 설정 |
html은 프로그래밍 언어가 아니다
program에서는 '순서'라는 개념이 아주 중요한데 (ex. 연주회 프로그램을 보면 순서대로 진행되는 것처럼)
때문에 프로그래밍은 순서를 만드는 행위로 볼 수 있고,
프로그래머는 순서를 만드는 사람이라 정의할 수 있을 것이다.
->따라서 시간의 순서에 따라 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식이 프로그래밍이라 할 수 있다
이에 따르면 html은 프로그래밍 언어가 아니다.
html은 웹페이지를 묘사하는 언어이기에 시간의 순서에 따라 일을 할 필요가 없기 떄문이다.