아직까지 c, java, python, 어셈블리 정도만 해봤었는데,
드디어 내 의지로 배우는 첫 번째 언어라고 할 수 있는 html!을 해보려고 한다.
'생활코딩! HTML+CSS+자바스크립트'라는 책 으로 시작을 해보려고 한다.
근데 문제는, 여기서는 atom을 에디터로 쓴다.
하지만 옆에 있는 동기가 visual studio code로 쓰는 걸 추천해서, 이걸로 우선 연습해보려고 한다.
근데 정말 쉽고 재미있는 것 같다!
기본적으로 visual studio에서 html 파일 만들기부터 시작한다.
바탕화면에 새로운 폴더을 만들고, 그 이후에
vs code 왼쪽 상단에 있는 '파일'을 누르고,
방금 만든 폴더를 '폴더 열기'를 통해 만들어주면 된다.
그리고 그 이후에, 탐색기에서 '새 파일'을 선택해주면,
<원하는 이름>.html로 새로운 html 파일을 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
</body>
</html>이 모양새가 처음으로 배운 제일 기본 꼴이다.
여기서 < >안에 있는 아이들을 보고 tag (태그)라고 한다.
이 태그들이 사실상 하나의 명령어라고 할 수 있다.
오늘 배운 태그들을 함께 봅시당.
1. <strong> </strong>
두 태그 사이에 있는 단어들을 볼드체로 만들어준다.
(참고로 뒤에 있는 태그는 '닫는다'라는 의미를 만들어주기 위해 / 를 사용한다.)
2.<u> </u>
두 태그 사이에 있는 단어들에 밑줄을 친다.
3. <h1> </h1> ~~~~ <h6> </h6>
h1부터 h6으로 내려갈 수록, 점점 '덜 중요한 태그'를 의미한다.
즉 h1이 제일 크고 뚜렷한 태그이고, h6가 제목 중 제일 소제목을 의미한다.
h7부터는 존재하지 않는다.
4. <br>
줄바꿈을 하는 태그이다. (c에서 \n와 비슷한 존재)
반복적으로 <br>을 많이 사용하면, 더욱 큰 여백이 생긴다.
5. <p></p>
<br>처럼 줄바꿈을 하도록 도와주기는 하지만, paragraph의 앞글자 p를 따서 '문단'을 만들어준다라고 할 수 있다.
<p style="margin-top:40px;">와 같은 방식으로 여백의 크기를 설정할 수 있다.
6. <img>
image의 준말로, 사진 첨부를 의미한다.
그냥 <img>라고만 쓰면 어떤 사진인지, 크기가 어떤지 알 수 없기 때문에,
<img src="이름", width="100%>
와 같은 방식으로 쓴다.
7.<li> </li>
list의 준말로, 목록을 만들 때 사용한다.
특히, <li>의 부모 태그로는 <ul> </ul> 과 <ol> </ol>이 있다.
ul은 unordered list, ol은 ordered list로,
<ol>
<li>
hi
</li>
<li>
bye
</li>
</ol>와 같이 li의 밖에 ol이나 ul을 두면 된다.
ol인 경우 1. 2. 3.와 같은 서수가 생긴다.
8. <head>, <body>, <html>, <title>, <meta>
이 태그들은 거의 모든 코드에 들어간다.
굉장히 직관적인 이름들을 갖고 있다.
<title> 사이에 있는 내용은 나중에 웹사이트의 탭에 적히게 된다.
또한 기본적인 웹사이트의 뼈대, 즉 본문은 <body>에 들어간다
본문을 설명하는 내용은 <head>를 이용해서 만들어진다.
meta는 해당 문서를 어떻게 컴퓨터가 정리할 지 알려주는 태그이다.
우리는 UTF-8로 저장을 할 것이기 때문에, <meta charset="utf-8">을 적어준다.
이들을 모두 통틀어서 사용되는 <html> 태그는 이 문서가 html로 이루어져있음을 나타낸다.
또한, 관용적으로 html이 이 문서에 담겨져 있음을 나타내기 위해,
<!DOCTYPE html>을 문서의 맨 앞에 쓴다.
오늘 처음으로 html을 사용해봤는데, 과거에 사용해봤던 언어들과는 아예 다른 차원인 것 같다.
재밌고, 정말 색다르다.
앞으로도 더욱 열심히 공부하겠다.
'Computer Science > html + css + js' 카테고리의 다른 글
| CSS #2: 클래스, 박스모델, 그리드, 미디어 쿼리 (0) | 2022.12.28 |
|---|---|
| css #1: Selector, Declaration,Property (0) | 2022.12.23 |
| HTML 기본 함수 정리 <head, body, p...> (1) | 2022.12.23 |
| html+css 2일차: 웹의 기본 내용 (0) | 2022.01.08 |