WEB1 HTML & Internet
기획
무언가를 만들기 이전에 가장 먼저 해야 하는 단계이다. 큰 틀에 대한 계획을 짜는 것이다.
구현
계획한 것을 토대로 차근차근 실제로 만들어 가는 과정이다. 구현에는 원인과 결과가 존재하는데, 개발자가 원인에 해당하는 프로그래밍 언어로 구성된 code, source를 제공하면 그 결과로 application, program, web page, web site 등이 나오게 된다. 웹을 구현하기 위해서 가장 먼저 알아야 하는 것이 HTML이다.
HTML
웹의 경우 public domain(저작권이 없다)이기 때문에 누구든 자유롭게 개발하고 배포할 수 있다.
개발 환경 세팅은 다양하게 존재하고 사람마다 다르기 때문에 검색을 통해 원하는 것을 사용하면 된다.
환경이 준비 되었다면 우리는 '.html' 확장자를 가지는 파일을 하나 생성하고 그곳에서 HTML을 채워가며 웹을 만들어 갈 것이다.
🍯tip! Ctrl + o(알파벳) : 브라우저에서 파일 열기 단축키
HTML의 기본문법
- tag(태그)
HTML에서 일반적으로 사용하는 문법으로 태그 내부에 컨텐츠를 작성하며 내용을 추가할 수 있다.
형태 : <시작 태그></종료 태그>의 형태가 일반적이며, 종료 태그가 필요 없는 <시작 태그 />의 형태도 존재한다.
부모와 자식 : <부모태그><자식태그></자식태그></부모태그>의 형태로 존재하고 내부 태그를 자식, 외부 태그를 부모라고 부른다 - attribute(속성)
태그 내부에서 필요한 값을 제공받을 때 사용된다. 태그마다 공통으로 사용되는 속성과 개별적으로 사용되는 속성이 존재하며 필수적으로 입력해야 하는 속성 또한 존재한다.
형태 : <태그 속성="값"></태그> - element(요소)
'시작 태그 + 내부 컨텐츠 + 종료 태그'를 통틀어서 나타내는 말이다.
태그와 속성은 상당히 다양하기 때문에 자주 사용되는 태그 정도만 암기해두고 필요하면 그때그때 찾아서 사용하면 된다. 태그 순위 사이트를 참고해 높은 순위의 태그 정도는 암기하도록 하자.
같은 동작을 하는 태그가 여러 종류가 있다. 하지만 상황에 따라 다른 의미로 사용되거나 특정 사용자 예를 들어 시각 장애인에게 제공되는 기능에 따라 적절히 의미에 맞는 태그를 사용하는 것이 중요하다.(접근성)
HTML 기본 구조
<!doctype html>
<html>
<head>
<title>웹 상단 제목</title>
<meta charset="utf-8">
</head>
<body>
내용들...
</body>
</html>VSCode를 사용하는 경우 자동으로 기본 구조를 제공해준다.
🍯tip! 한글이 깨지는 경우 <meta charset="utf-8">을 <head> 안에 설정하면 된다.
공부할 경우 참고할 만한 사이트
출처 & 참고
WEB1-HTML&Internet, 생활코딩, 2024.03,28
'개발' 카테고리의 다른 글
| 웹 개발 3회차 with.생활코딩 (0) | 2024.04.04 |
|---|---|
| 웹 개발 2회차 with.생활코딩 (0) | 2024.04.01 |
| 프리온보딩 4회차 1월 (0) | 2024.01.12 |
| 프리온보딩 3회차 1월 (0) | 2024.01.10 |
| 프리온보딩 2회차 1월 (0) | 2024.01.05 |
