부스트코스에서 '자바' 강의를 들었었는데, 이번에는 HTML/CSS 과정을 들어보았다.
사실 생활코딩을 통해서도 HTML이랑 CSS 강의를 들었었지만?
부스트코스를 통해서 들으면, 수료증도 발급을 해준다.
수료증이 있는 게, 내가 관리하기도 좋을 것 같아서!
부스트코스를 통해 들어보는 걸로 결정.
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
비전공자를 위한 HTML/CSS 강의이고, 이후에 JavaScript 강의를 들을 예정이다.
커리큘럼은 위와 같이 진행이 된다.
HTML 관련 기초강의를 들은 후, CSS 강의로!
1. HTML 이해하기
1) HTML 소개
Hyeper Text Markup Language
- 웹 페이지를 만드는 언어
- Hyper Text = 링크 : 단순 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트, 즉 링크
- Markup Language : 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있음
- 확장자가 html
- https://www.naver.com/
- HTML은 1990년대 영국 물리학자 팀 버너스리가 제안하여 개발
Reference
https://developer.mozilla.org/ko/docs/Web/HTML
*
어렸을 때, 의도하지 않았지만 html과 가까이 했던 적이 있다.
요즘은 잘 모르겠지만?
당시에는 다음 카페에서 글을 쓸 때, 배경화면을 바꾸거나?
혹은 폰트를 예쁘게 바꾸기도 했었다.
어린 나는 다른 사람이 글을 쓴 게시물들을 보며?
너무 예쁘다고 생각을 했고, 어찌어찌 검색을 하고 자료를 찾았다.
그리고 나 또한 html 태그를 이용해 글을 쓰기 시작했지.
html 태그가 뭔지도 몰랐지만, 우선 포스팅에 어떤식으로 보여지는부터 확인을 했던 기억이 있다.
어디를 바꿔야 뭐가 어떻게 바뀌는지를 추측할 수 있었으니까?
그렇게 해서 이 부분에 이미지를 넣으면 배경을 바꿀 수 있구나?
혹은 이 부분이 폰트를 바꿔주는 부분이구나?
아! 이걸 쓰면 다음 줄로 글이 넘어가는구나~!
추측할 수 있었던 것 같다.
그리고 이미지 같은 경우에는, 내 컴퓨터에 있는 이미지의 주소(?) 같은 것을 넣으면 엑박이 뜬느 걸 발견했었고?
그래서 당시에 엠파스였나?
엠파스 블로그에 이미지를 업로드하고, 그 주소를 복사해서 html에서 img 태그에 주소를 넣으면!
엑박이 안 뜨는 것도 발견할 수 있었지.
그때가 아마 최초의 html 경험?
당시에는 배경도 예쁘게 바꿀 수 있고, 폰트도 아기자기하게 바꿀 수 있어서 매우 만족했던 기억이 있다.
잊고 있었던 나의 추억 TML...★
2) HTML 문법 - 태그 - 1
- 태그, 속성, 태그의 중첩, 빈 태그, 공백, 주석
- HTML은 태그들의 집합
- 태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미
- 다양한 태그를 이용해 코드를 작성하면, 부라우저가 이를 인식해 내용을 표현
- 태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어감
- 대부분 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙음
<h1> Hello, HTML </h1>
- 내용을 포함한 태그 전체를 요소(Element)라고 함
- 태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용됨
Reference
https://developer.mozilla.org/ko/docs/Web/HTML/Element
2) HTML 문법 - 태그 - 2
- 태그(TAG), 시작 태그(여는 태그), 종료 태그(닫는 태그), 내용(Content), 요소(Element)
태그(TAG) -> 꼬리표, 이름표
<h1> Hello, HTML </h1>- <h1> => 태그 이름
- <h1> 시작태그 ~ </h1> 종료태그
- Hello, HTML => 내용
- 태그와 내용을 포함한 전부 => 요소(Element)
3) HTML 문법 - 속성
- 속성 명, 속성 값
- 속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미
속성 (ATTRIBUTE)
<h1 id="title"> Hello, HTML </h1>- 속성은 이름과 값으로 이루어져있고, 시작 태그 안에 선언을 할 수 있음
- 속성 값은 쌍따옴표(" ")를 사용해도 되고, 홑따옴표(' ')를 사용해도 됨
<h1 id="title" class="test"> Hello, HTMl </h1>- 여러 개의 속성을 선언할 수 있음
- 속성들의 선언 순서는 중요하지 않음
- 속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분
Reference
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
4) HTML 문법 - 태그 중첩
- 태그의 중첩이란 태그 안에 또 다른 태그를 사용하는 것
- 태그 중첩을 통해 부모 태그와 자식 태그의 관계가 만들어짐
- 중첩, 부모 태그, 자식 태그
태그 중첩 (NESTING TAGS)
<!-- 올바른 예 -->
<h1>Hello, <i>HTML</i></h>
<!-- 잘못된 예 -->
<h1>Hello, <i>HTML</h1></i>- 중첩 태그는 부모 태그를 벗어나서는 안 됨
5) HTML 문법 - 빈 태그
- 빈 태그, 중첩 불가능 태그
빈 태그 (EMPTY TAG)
<br>
<img src="">
<input type="">- 빈 태그는 내용이 없어서 종료 태그가 필요하지 않음
- 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않덛라도 다른 용도로 사용되는 태그
6) HTMl 문법 - 공백
공백 (SPACE)
<h1> Hello, HTML </h1>
<h1> Hello, HTML </h1>
<h1>
Hello,
HTML
</h1>
- HTML은 두 칸 이상의 공백과 개행을 모두 무시해버린다.
7) HTML 문법 - 주석
- 화면상에 표시되지 않고 코드 상에만 노출
<!-- 내용 -->
<!-- HTML은 두 칸 이상의 공백을 무시합니다. -->
<h1> Hello, HTML </h1>
<h1> Hello, HTML </h1>
<h1>
Hello,
HTML
</h1>- 메모의 목적으로만 사용
- 브라우저는 해당 부분을 인식하여 해석하지 않음
8) 문서의 기본 구조
- <!doctype>
- <html>
- <head>
- <body>
- <meta>
HTML 문서 구조 (HTML DOCUMENTS)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
- 문서 타입 정의: 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 함
- <html> 요소
- 문서 타입 선언 후에는 <html> 태그가 나와야 함. 자식으로는 <head> 태그와 <body> 태그가 있음
- <html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미
- <head>
- <head> 태그에 위치하는 태그들은 바루엊 화면에 표시되지 않음
- 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 함
- <meta> 태그의 charset 속성은 문자으 ㅣ인코딩 방식을 지정
- <body>
- 실제 브라우저 화면에 나타나는 내용이 들어감
부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록
'LEARN > HTML | CSS' 카테고리의 다른 글
| [부스트코스] 2-2 HTML 태그 (0) | 2022.03.13 |
|---|---|
| [부스트코스] 2-1 HTML 태그 (0) | 2022.03.12 |
| [CSS] 14~15 코드의 재사용 style.css 파일 생성 실습 끝 (0) | 2022.01.28 |
| [CSS] 10~13 그리드 , 미디어 쿼리 (0) | 2022.01.27 |
| [CSS] 8~9 박스 모델 display block , inline / margin padding (0) | 2022.01.27 |
