안녕하세요, 깨비도입니다.
블록몽키님에게 강의를 들은 후 직접 한 번 써보는 후기로,
본 작성자는 디자인 전공자이고 저와 같은 비전공자의 입장에서 쉽게 이해할 수 있도록 작성되었음을 알립니다.
0. Visual Studio Code
모든 파일은 확장자명이 있습니다.
이미지 파일 : jpeg, png, gif … / 어도비 파일 : psd, ai, pdf …
코딩을 짤 수 있도록 도와주는 프로그램, 비쥬얼 스튜디오 코드의 확장자명은
HTML
CSS
JS
기본적으로 세가지가 존재합니다.
이 세가지는 모두 코딩을 저장하는 한 형태의 확장자명이기도 하지만, 코딩 하는데에 꼭 필요한 '언어'라고 부릅니다.
그럼 오늘은 HTML을 먼저 살펴보겠습니다.
1. HTML이란?
HTML은 웹을 만들기 위해 사용하는 기본적인 언어의 한 종류입니다.
쉽게 이해하면 '화면을 구성하는 기본 페이지'를 만드는 것이라고 볼 수 있습니다.
html 파일은 어떻게 만들 수 있을까요?
1. New File을 선택합니다.
2. (파일명).(확장자명)의 형식으로 파일을 생성합니다.
html 파일을 생성하기 때문에 1.html이라는 이름으로 생성했습니다.
3. 파일을 본격적으로 작업하기 위해서 html 기본 틀을 불러올 것입니다.
이것의 명령어가 바로 'html : 5'입니다.
4. html 기본 틀 완성입니다.
2. HTML 태그 분석
HTML 태그를 완성하였지만 생전 처음 보는 단어들의 조합에 당황할 것입니다.
모든 것을 이해하려고 할 필요 없이, 크게 <head>와 <body>로 나누어지는 것만 알면 됩니다.
여기서 중요한 것은 모든 태그의 시작은 <태그명> </태그명> 이라는 것입니다.
이는 <head> , </head> 와 <body> , </body> 가 동일한 것으로 알 수 있습니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<head> 태그에서 주목해야할 것은 바로 <title>Document</title>입니다.
이는 홈페이지의 이름을 지어주는 것이라고 보면 되는데요.
인터넷 창에서 흔히 '탭'이라고 불리우는 것들을 말합니다.
순서대로 네이버의 페이지, 네이버 사전의 html 페이지, 블록몽키의 티스토리 페이지가 보이죠?
바로 이 네이버, 라고 표시되는 이름을 <title>Document</title> 여기에서 지정합니다.
html의 head 태그에서 이해해야할 것은 이것이 다입니다.
이번엔 body 태그를 볼텐데요.
head 태그가 뜻 그대로 머리, 제목이었다면 body는 몸통, 즉 내용입니다.
<body>
</body>
ex)
<body>
안녕하세요, 깨비도입니다.
</body>
이렇게 body 태그 안에 내용을 입력해주는 것만으로도 웹페이지에 내용이 출력됩니다.
안에 무슨 내용을 넣느냐에 따라 무수히 많은 화면을 구현해낼 수 있겠죠?
3. HTML 태그 종류
그렇다면 html 태그의 종류를 살펴보겠습니다.
(html 태그는 기본적으로 body 태그 안에 작성하게 됩니다.)
<h1> 태그
<h1>안녕 html</h1>
<h2>안녕 html</h2>
<h3>안녕 html</h3>
<h4>안녕 html</h4>
<h5>안녕 html</h5>
<h6>안녕 html</h6>
<h1>~<h6> , 총 6가지의 종류로 쉽게 '제목'을 지정해준다고 생각하시면 됩니다.
화면에는 이렇게 표현되는데요.
단순히 글씨의 크기와 두께만 다르게 표현되는 것이 아니라, 태그의 우선순위를 정해주기도 합니다.
<p> 태그
<p>안녕하세요, 깨비도입니다.</p>이 <p> 태그는 paragraph의 약자로
제가 입력한 '안녕하세요, 깨비도입니다.'라는 것을 문장이 아닌 문단 그 자체로 인식하게 만들어주는 태그입니다.
<hr>과<br> 태그
<p>안녕하세요, 깨비도입니다.</p>
<hr>
코딩은 정말 어려운 것 같아요.
<br>
하지만 열심히 하면 된답니다!<hr>과 <br> 태그는 따로 닫아주는 태그가 없습니다.
<hr>태그는 구분선, <br>은 줄바꿈을 해주는 태그이기 때문이죠.
사용 예시입니다.
<ul>,<ol>과<li> 태그
<ul>
<li> 이것은 리스트입니다.
<li> 기호로 구분되는 리스트입니다.
</ul>
<ol>
<li> 이것은 리스트입니다.
<li> 숫자로 구분되는 리스트입니다.
</ol>
이렇게 기호와 숫자로 구분됩니다.
<input>과<textarea> 태그
<input type = ''> input 태그의 기본 형태입니다. </input>
<br>
<input type = 'text'> input의 text 타입입니다. </input>
<br>
<input type = 'submit'> input의 submit 타입입니다. </input>
<br>
<input type = 'submit' value = '완료'>
submit 타입에 value값을 지정해주면 input 박스 안에 원하는 텍스트를 입력할 수 있습니다.
</input>
<br>
<br>
<textarea name=" " id=" " cols=" " rows=" " placeholder=" "></textarea>
textarea 태그의 기본 형태입니다.
<br>
<textarea name=" " id=" " cols="50" rows="20" placeholder="cols는 가로길이, rows 세로길이로 text area
박스 크기를 조절할 수 있습니다. placeholder는 text area의 기본 텍스트를 회색으로 보여줍니다.">
</textarea>
이렇게 보여지는 것을 확인할 수 있죠.
<a> 태그
<a href = ''> 링크를 이동할 수 있는 a 태그의 기본 형태입니다.</a>
<a href = 'http://www.naver.com'>
새 탭이 생기지 않고 현재 웹페이지에서 네이버로 갈 수 있습니다. </a>
<a href = 'http://www.naver.com' target = '_blank'>
새 탭이 생겨 새로운 웹페이지에서 네이버로 갈 수 있습니다. </a>a태그는 링크를 이동할 수 있도록 도와줍니다.
두번째 링크를 클릭했다면 현재 페이지에서 바로 네이버로 갈테고
세번째 링크를 클릭했다면 새로운 탭에서 네이버로 갈 수 있습니다.
첫번째 링크는 아무것도 걸지 않았으니 이동하지 않구요.
<img> 태그
<img src = '' alt = ''> 이미지를 첨부할 수 있는 img태그의 기본 형태입니다.
<img src = '이미지1.png' alt = ''>
첨부하려는 이미지가 html 파일과 같은 폴더 안에 있다면, 해당 이미지의 파일명만 입력해도 됩니다.
<img src = './이미지1.png' alt = ''>
첨부하려는 이미지가 html 파일과 같은 폴더에 있지 않다면 ./ 를 이용하여 폴더를 이동하여 이미지를 선택하면 됩니다.
이미지는 현재 크기 그대로 올라갈 것이며, 이미지의 크기 조절은 css를 통해 할 수 있습니다.
html의 설명은 여기까지였으며, 다음에는 css로 뵙겠습니다.
'Web Development > Front-end' 카테고리의 다른 글
| [Javascript] 계산기만들기 (0) | 2020.10.30 |
|---|---|
| [Zerocho-13] 2048 (MouseEvent, Switch) (0) | 2020.10.29 |
| [Zerocho-13] 자스스톤 (Call by Value, Constructor, this, 엄격모드) (0) | 2020.10.27 |
| [Javascript] TodoList (0) | 2020.10.26 |
| [Zerocho-12] 카드 짝 맞추기 (toggle, includes, 참조&복사, 팩토리패턴&프로토타입) (0) | 2020.10.25 |
