-
2강 - HTMLSSAC 입문과정 202105 2021. 5. 25. 01:04728x90
HTML 문법
<p>~~</p>
여는 태그, 닫는 태그가 존재하고,
가끔가다 각종 태그마다 속성이 존재하는데
똑같은 <p>태그여도 어떤 옵션을 넣을지 설정해 주는 거라고 보시면 됩니다.
HTML을 배울 때는 태그 종류가 굉장히 많습니다.
필요할 때 찾아쓰는 형식으로 진행하고 있습니다.
HTML 구조를 볼 건데요.
vscode를 열어 볼게요. 그리고 폴더와 파일을 만들어 보겠습니다.
1. file >> open folder 클릭
2. 가져올 folder를 선택하여 가져오면 됩니다.
가져올 폴더가 없다면 새로만들기>>폴더 바로 만들어서 폴더선택으로 가져오면 됩니다.
3. 선택된 SSAC05라는 폴더를 가져온 것을 확인할 수 있습니다.
4. SSAC05 폴더 안에 stydy 폴더 하나를 만들어 볼건데요.
SSAC05가 열려있는 상태에서 밑에 여백에 마우스 오른쪽 버튼을 클릭하면 옵션을 선택할 수 있는데,
new folder를 클릭합니다. 그리고 stydy폴더를 만들어 줍니다.
폴더 추가 아이콘을 클릭하여 study 폴더 안에 1-2라는 폴더를 만들 수 있습니다.
5. SSAC05 >> study >> 1-2 폴더 안에 index.html 파일을 추가해 보겠습니다.
6. index.html (확장자를 정확하게 적어줘야 함)을 적고
만들어진 파일 위에 마우스를 올려놓으면 위치를 알 수 있습니다.
혹은
만들어진 파일에 오른쪽 마우스를 클릭하여 Reveal in File Explorer 를 클릭하면
만들어진 파일 위치가 열리면서 위치를 확인할 수 있습니다.
7. HTML 기본구조 자동완성 기능입니다.
index.html 파일에 !(느낌표)를 입력 후 enter 또는 tab 를 눌러주세요.
----- HTML 기본 구조 설명 -----
처음에는 코드가 많은거 같아서 조금 헷갈리고 이게 무엇인가 라는 생각이 들 수도 있는데,
하나씩 설명해 드리도록 하겠습니다.
1. 첫 번째
<!DOCTYPE html> 이것은 이 문서는 HTML이야 라고 말을 하는 거구요.
옛날에는 HTML이라는거 말고도 다양한 문서 종류가 있었고 사실상 아무런 기능을 하지 않고 있으며 구분하기 위해서
관례상으로 적어 놓는 것입니다.
2. 두 번째 줄 html태그가 있고 lang 라는 속성이 있는걸 확인해 볼 수 있습니다.
html문서가 어떤 언어로 사용되고 있는가 라고 뜨는 겁니다. (지금은 lang="en" 영어로 되어 있음)
이 상태로 웹페이지 실행 시키면 창이 뜨게 됩니다.
(크롬일 경우) 한국어 페이지가 아닌거 같은데 혹시 구글번역기로 해석해 줄까? 라고 추천을 해주게 될겁니다.
반면에 한국말 "ko"저장하게 되면은 (크롬은) 번역할 필요가 없겠다 하면서 웹브라우저가 인식하게 됩니다.
3. html 태그 안에 자식태그로는 두가지의 태그를 확인할 수 있습니다.
바로 hear 태그와 body 태그인데요.
html문서 자체를 택배 상자로 비유를 해볼게요.
html 은 자체 박스를 의미하구요, head태그는 라벨지이며, body태그는 물건 입니다.
라벨지에는 실제 물건을 의미하지는 않지만 어떤 물건이 있는지, 누가 보냈고, 어디로 가는지, 어떻게 취급해야하는지
물건에 대한 설명하는 데이터가 있잖아요.
실제로 head 태그에는 html문서가 어떻게 적혀있고, 어떤 속성을 가지고 있는지 등 이런 데이터들을 넣는데 주로 사용을 합니다. 그런 데이터들을 우리는 메타 데이터라고 하구요.
즉, head태그에는 meta 데이터를 넣습니다.
body태그 안에 있는 데이터들을 실제 알맹이를 말합니다.
물건은 실제 body태그에 있는 데이터이다. 라고 이해하시면 됩니다.
그러므로 body 안에 쓰는 내용들을 실제 웹페이지에 보이는 내용들 입니다.
4. head 태그 내부를 보면은 meta 데이터 그리고 여러가지 속성들이 있죠.
그리고 title 태그.
이 문서의 title은 어떤 것인가? Document라고 적혀진 것을 HTML로 바꿔볼게요.
브라우저 탭이 HTML로 바뀐걸 확인할 수 있습니다.
이처럼 다양한 태그가 있고 그 태그마다 각자의 목적과 쓰임이 있습니다.
그것들을 하나씩 파악하고 알아나가면서 사용하는게 html을 배워나가는 방법이라고 할수 있겠습니다.
----- html 웹페이지 실행 방법 -----
index.html 클릭 후 오른쪽 마우스를 클릭하면, open with live server 를 클릭합니다.
그러면 코드를 작성할 때마다 바로 변화하는걸 보여주는 라이브 웹페이지를 확인할 수 있습니다.
만약, open with live server가 안뜬다면 마켓에서 "live server"을 꼭 install 해주면 됩니다.
(1강 때 vscode 설치한 후 live server install 해줬습니다.)
만약, open with live server 실행했는데, 기본 웹브라우저를 바꾸고 싶다면,
file >> preferences >>settings 클릭
user >> Extensions >>Live Server Config 클릭
Settings: Custom Browser 에서 웹브라우저를 바꿔주면 됩니다. (저는 크롬으로 변경)
----- 주로 사용하는 태그들 소개 -----
- <h1~6>: 제목이나 강조하고 싶은 부분을 나타내는 태그
- <img>: 이미지를 보여줄 수 있는 기능을 하는 태그
이미지 태그는 주고 사용하는 속성들로 src 소스와 alt 얼터널티브 속성이 있습니다.
이미지 태그는 다른 태그와 다르게 닫는 태그가 존재하지 않습니다.
src는 어떤 사진을 나타내고 싶은지 주소나 로컬컴퓨터에 저장되어 있는 그 값을 넣어주면 됩니다.
alt는 만약에 src소스가 뜨지 않거나 에러가 났을 때 "어떤 글자로 보여줄까"라는걸 의미합니다.
- <input>: 사용자의 입력을 받아 추후 자바스크립트에서 처리를 하기 위함
회원가입을 한다면 성함, 핸드폰번호 등을 넣잖아요. 그런것을 받을수 있는 태그가 input 태그 입니다.
input태그는 속성으로 type를 가지고 있습니다.
type="password" 를 하면 타입이 비밀번호여서 화면에 표시가 안됩니다.
이거 말고도 다양합니다.
type="button"으로 하면 버튼 형식이 됩니다.
type="checkbox" 타입도 가능하구요.
다양하게 있는데 주로 사용하게 될 것은 text, password, button, checkbox 이정도가 될거 같아요.
이 외에 어떤것이 있는지 궁금하면 구글에 검색해서 알아 볼 수 있습니다. - <a>: 링크 태그로 다른 페이지로 이동하거나 자바스크립트 함수를 실행시킬 때 사용 가능
a - anchor 엥커 태그는 배의 닻이라는 뜻입니다.
어떤 특정 싸이트로 이동할 때 이용합니다. 버튼을 누르면 네이버 뉴스로 이동을 하는 등 페이지 이동할 때
a태그를 이용한거라고 보시면 됩니다.
a태그의 속성값은 href가 있습니다.
<a href="https://www.naver.com/">네이버로 이동</a>
- <ul>, <ol>: 리스트를 표현하기 위해 사용하는 태그
list(리스트)를 나타낼 수 있는 태그입니다.
ul - unordered list라고 해서 순서가 없는 리스트
ol - ordered list 라고 해서 순서가 있는 리스트
- <div>: 네모난 박스라고 생각하면 됌. 대부분의 레이아웃은 div태그로 구성함
그냥 있을 때는 아무런 효과가 없습니다. 아무런 효과가 없기 때문에 좀 더 중요한거 같긴 합니다.
div태그는 어떤것이냐?
태그들의 구역을 나누어 줍니다. 태그들으리 담아서 넣어 놓는 주머니라고 생각하시면 됩니다.
같은 주머니에 넣은 애들은 같은 스타일(css)적용하고, 같은 함수를 적용하고 이런 식으로
레이아웃을 짤 때 굉장히 중요한 태그입니다.
div태그 말고도 다양한 컨테이너 태그들이 있는데, 주로 사용하는 것이 div 태그라고 보시면 됩니다. - <span>: CSS, JS를 적용시키기 위한 보이지 않는 의미상 존재하는 태그
span도 아무런 효과가 없습니다. 구역을 나누는 것도 아니고 이정표 같은 겁니다.
깃발을 꽂아 놓듯이 산에 올라가면 나무에 끈들이 묶여 있잖아요. 그런거 처럼
"나 여기에 뭐를 할거야" 할 때 주로 사용하는 태그입니다.
추후에 css 등을 배울 때 어떤 효용이 있는지 살펴보면 좋을거 같습니다.
----- 태그 분류 -----
1. Block Element vs Inline Element
블록 엘리먼트
- 언제나 줄바꿈
- 블록 엘리먼트 종류
<address><article><aside><blockquote><canvas> <dd><div><dl><dt><fieldset><figcaption><figure> <footer><form><h1>-<h6><header><hr><li><main> <nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
인라인 엘리먼트
- 공간이 충분하다면 줄바꿈을 하지 않고 옆에 표시
- 인라인 엘리먼트 종류
<a><abbr><acronym><b><bdo><big><br> <button><cite><code><dfn><em><i><img> <input><kbd><label><map><object><output> <q><samp><script><select><small><span><strong> <sub><sup><textarea><time><tt>< var >
2. Box Element vs Item Element
박스 엘리먼트 (아이템을 담는 공간)
- 자체로는 아무것도 표시되지 않지만, 레이아웃을 나누고 다른 태그를 담는 태그
- 박스 엘리먼트 종류
- <header><section><footer><article><nav><div><span><form> etc..
아이템 엘리먼트 (기능을 가지 태그)
- 박스 엘리먼트 내부에서 기능을 수행하는 태그
- 아이템 엘리먼트 종류
- <a><button><input><img><video> ..etc
----- 레이아웃 파악 -----
box가 어디에 어떤 부분이 같이 묶여 있을까 하는 보는 눈이 필요하다.
개발자마다 레이아웃 나누는 방법은 다양하므로 아래 이미지 또한 레이아웃 나눈 방법 중 하나이다.
'SSAC 입문과정 202105' 카테고리의 다른 글
2강 - css 2 (박스모델, display, postion) (0) 2021.05.25 2강 - CSS 1 (0) 2021.05.25 2강 - 코드가 왜, 어떻게 화면으로 표시가 되나요? (0) 2021.05.24 1강 - 개발 배경 지식(GIT) (0) 2021.05.20 1강 - 개발 배경 지식 (Library & Framework & API) (0) 2021.05.20