Hee Jun Kim🍀

바퀴를 다시 발명하는 한이 있더라도

Date:     Updated:

카테고리:

태그: ,


💡 유튜브 채널 ‘얄팍한 코딩사전’에서 제공하는 강좌를 보고 학습했습니다.
HTML과 CSS의 기초적인 내용을 웹에서 실습해볼 수 있는 강좌입니다.
강좌에서 배운 개념을 바탕으로 직접 문제를 만들고, 이를 풀어보는 식으로 독학했습니다.


수강할 때 사용한 코드 에디터는 VS code이다. 강의에서 소개해준 다양한 플러그인을 손쉽게 설치할 수 있다는 장점이 있다. 원래 쓰던 거니까 편하기도 하다.

시작, index.html 만들기

나는 디렉터리에 HTML-CSS라는 폴더를 만들고 index.html 파일을 생성해주었다. 작업은 이 파일에서 이루어질 것이다.

Emmet 명령어는 html의 기본 틀을 자동 작성해주는 명령어이다. !을 입력하고 TAB 키를 누르면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

자동 생성된 html의 기본 틀이다. 이 때 <html lang="en">을 <html lang="ko">로 바꿔줘야 한다. 이는 문서의 언어를 한국어로 지정한다는 의미이다.

우리는 <body>라는 부분에 내용을 작성해볼 것이다.

<body>
  안녕하세요.
</body>

이렇게 작성한 후 저장한 다음 index.html을 우클릭하고 Open with Live Server를 클릭해준다(Live Server라는 플러그인을 설치해야 가능!).

body 안에 작성한 ‘안녕하세요’가 하찮게 표시되는 걸 알 수 있다.

이렇듯 html은 웹사이트에 들어갈 내용물을 배치해주는 기능을 한다.

html로 인해 배치된 내용물은 css를 통해 꾸며진다. 폰트 종류나 색깔 사이즈 등 보기 좋게 가꾸는 역할을 하는 것은 css이다.

<body>
  자, 이제 body 사이에다가
이걸 복사해서 붙여넣고 브라우저에서 확인해보세요.

여기서는 이렇게 줄바꿈도 되어 있고
이렇게 탭  도 들어가 있고
이   렇   게 길게 띄어쓴 부분도 있지만

브라우저는 쏘 쿨하게 씹어넘깁니다.
</body>

만약 body 안에 저런 paragraph 덩어리를 세 개나 넣는다면 웹페이지에서도 저대로 보일까?

그렇지 않다. 띄어쓰기를 세번을 해도 한 번으로 간주하고, 줄바꿈도 무시한 채 한줄로 쭉 표시된다.

위 사진은 강의에서 제공한 해답이다. 저렇게 문서를 작성하면 앞전의 내용이 줄바꿈, 띄어쓰기가 바라는 대로 잘 들어간다.

특정 웹페이지의 html 파일이 어떻게 작성됐는지 확인하려면, 우클릭한 후 ‘페이지 소스 보기’를 클릭하면 된다. 그러면 위 사진 같은 소스코드가 뜨게 된다.

태그

html 문서에서 내용물이 무슨 요소인지 가리키는 용도로 태그를 사용한다.

<!--예시-->
<span> 내용 </span>

<!--가운데에 내용이 안 들어가는 경우-->
<input> <!--만 단독으로 쓰거나-->
<input /> <!--만 단독으로 쓰기-->

<br> <!--띄어쓰기는 단독으로쓰이는 태그-->

원하는 태그의 여는 태그를 입력하고 TAB을 누르면 닫는 태그가 자동으로 생성된다.

다음은 간단한 태그들을 표로 정리한 것이다.

태그 또는 구문 설명 비고
<h1> ~ <h6> 제목 숫자가 높을 수록 낮은 단계
<p> 문단 각각 줄바꿈이 됨 (기본 스타일일 때)
<br> 줄바꿈 닫는 태그 필요 없음. <br/>, <br />와 혼용되기도 함
<hr> 가로줄 닫는 태그 필요 없음
&nbsp; 공백 (스페이스) 스페이스를 강제할 때 사용

문단을 여러 개 만들고 싶다면, <p> </p>를 여러 번 입력할 것이 아니라 p*원하는 개수 + TAB을 누르면 문단 태그들이 원하는 만큼 생성된다.

사실 <p> 태그를 쓰지 않고도<br>을 통한 문단 나누기도 가능하다. 하지만 굳이 <p> 태그를 쓰는 이유는 문서 상에서 이 부분이 문단이라는 역할을 한다는 것을 명시하기 위함이다. 즉, 문서의 구조와 특성을 더 잘 나타내기 위함이다.


html의 주석

주석을 쓰는 방법은 <!--쓸 내용-->으로 쓰면 되는데, 주석처리할 부분을 드래그하고 Ctrl + /를 입력해도 편리하게 주석으로 바뀐다.

강조하기 위한 태그들

<b>태그 vs <strong>태그 겉보기엔 둘 다 bold체로 만들어주는 역할을 한다. 그러나 <strong>은 한 술 더 떠서 그 내용이 중요하다는 것을 명시해주는 역할까지 한다.

<i>태그 vs <em>태그 역시나 둘 다 글자를 기울이는 역할을 하지만, <em>은 앞선 <strong>처럼 내용의 중요성을 강조하는 역할까지 한다.

오늘날에는 html과 css의 기능이 완전히 분리되어 위같은 bold, italic체의 기능들을 모조리 css가 맡고 있지만, 웬만한 웹 브라우저에선 아직까지도 묵시적으로 위같은 html 태그를 용인하고 있다. 즉, 써도 잘만 적용된다.


첨자 태그

위첨자를 쓰고 싶다면 <sup>, 아래첨자를 쓰고 싶다면 <sub>를 쓰면 된다. 아래처럼 작성하면 X의 제곱과 물 화학식이 위첨자 아래첨자로 잘 들어간다.

x<sup>2</sup> H<sub>2</sub>O


밑줄 태그

철자 오류 밑줄을 긋고 싶다면 <u>을 쓰고, 취소선을 긋고 싶다면 <s>를 쓴다.

태그: ,

카테고리:

업데이트:

참고