책으로 배우는 비전공자 코딩 챌린지 4일차 - HTML 태그와 특징(inline & box요소)

- index는 웹 사이트 홈페이지의 기본 파일 이름이다. 파일명을 index.html으로 작성하는 것이 관례임

- 첫 프로그래밍의 실습은 "hello world" 출력으로 시작하며 이는 오래된 관행이다.

 

HTML 태그

<태그명> 요소 </태그명>

태그는 여는 태그와 닫는 태그로 이루어져 있으며 닫는태그 안에는 /(슬래시)가 들어간다.

<태그명 요소>

닫는 태그 없이 자체적으로 이루어진 태그는 '단일 태그' 혹은 '자체 닫기 태그(self closing tag)'라고 부른다.

종류: input, img, link, br, hr 등이 있다.

 

HTML 태그 특징

모든 태그는 inline요소 또는 block요소의 성질을 가지고 있다.

요소	inline	block
특징	- 영역을 생성할 수 없는 태그로 컨텐츠 크기만큼만 영역으로 가질 수 있다.  - inline태그 안에 inline태그는 가능하나 block태그는 담을 수 없다.	- 컨텐츠의 크기와 관계없이 (화면 가로 크기) 한 줄의 너비를 차지한다. - block태그 안에는 다른 모든 태그들을 담을 수 있다.
태그 종류	span, a, img, li	div, p, h, ul, ol

 

 

HTML에서 자주 사용되는 태그 목차

1. h 태그
2. div 태그
3. p 태그
4. span 태그
5. link 태그
6. img 태그

 

1. h태그

- heading의 약자며 제목을 나타내는 태그이며 문단 처음에 배치한다.

- 검색엔진은 h태그를 통해 키워드를 파악하기 때문에 제목을 h태그로 작성하는 것이 검색 확률을 높여준다.

- block 요소이므로 태그 하나 당 한 줄의 너비를 가진다 (자동 줄 바꿈) 

- h1~h6은 1에 가까울수록 중요도가 높아지며 글자의 크기 또한 커진다.

- h1은 문서 당 한 번씩만 사용한다.

<h1>h1태그입니다</h1>
<h2>h2태그입니다</h2>
<h3>h3태그입니다</h3>
<h4>h4태그입니다</h4>
<h5>h5태그입니다</h5>
<h6>h6태그입니다</h6>

html에 위와 같이 작성했을 때 화면에 보여지는 이미지

2. div 태그

- div는 division의 약자로 페이지 안에서 영역을 나누거나 생성할 때 사용한다.

- 주로 HTML의 요소들을 하나로 묶는데 자주 사용되며 이는 스타일을 한 번에 적용하기 위함이다.

<div style="background-color: #333333; color:#ffffff; text-align:center">
	<h1>div태그</h1>
	<p>division의 약자로 페이지 안에서 영역을 나누거나 생성할 때 사용한다.
     주로 HTML의 요소들을 하나로 묶는데 자주 사용되며 이는 스타일을 한번에 적용하기 위함이다.</p>
</div>

위 html 코드대로 작성했을 때 나타나는 화면

 3. p 태그 

- p는 paragraph의 약자로 문단을 나누는 데 사용한다.

- p태그의 위아래로는 약간의 여백이 자동으로 삽입된다.

- P태그 안에 작성된 텍스트는 여러 번 적용된 띄어쓰기를 반영하지 않는다

<p>
      p는 paragraph의 약자로            문단을 나누는데 사용한다.<br>
      p태그의 위아래로는 약간의 여백이 자동으로 삽입된다.<br>
      <br>
      P태그 안에 작성된 텍스트는 여러번 적용된 띄어쓰기를 반영하지 않는다
</p>

※ <br> 태그는 break의 약자로 줄 바꿈 해주는 단일 태그이다.

※ 띄어쓰기를 그대로 반영하고 싶을 땐 <pre> 태그를 사용해야 한다.

<pre>
      p는 paragraph의 약자로            문단을 나누는데 사용한다.
      p태그의 위아래로는 약간의 여백이 자동으로 삽입된다.
      <hr>
      P태그 안에 작성된 텍스트는 여러번 적용된 띄어쓰기를 반영하지 않는다
</pre>

※  <hr> 태그는 글 사이에 수평 가로 구분선을 넣어주는 단일 태그이다.

4. span 태그 

- span은 텍스트의 특정 부분을 묶어 따로 스타일을 적용시킬 때 주로 사용한다.

	<h1>span태그</h1>
	<p>텍스트의
	<span style="border: 3px solid red">특정 부분</span>
	에 효과를 주고 싶을 때 사용합니다.</p>

5. link 태그

<link rel = " 속성 " href = " 파일 경로 "> 

- link는 현재 파일과 다른 파일의 연결 관계에 대한 정보를 표현하는 데 사용한다.

- css 파일이나 이미지 파일, 폰트 연결 등에 사용된다.

- 안에 들어가는 rel은 relations의 약자로 대상 파일의 속성을 알려준다.

- href는 hyper-references를 나타내며 연결 시 참조할 파일의 위치를 알려준다. 

 

<link rel = "stylesheet"  href = "style.css">

- css파일 연결 시 작성되는 코드이다. vscode에서 link:css를 작성하면 위와 같은 코드가 자동 완성된다.

 

6. img 태그

- img는 images의 약자로 HTML에 이미지를 삽입하는 단일 태그이다. 주요 속성으로 src, alt가 들어간다.

- width(너비), height(높이) 속성을 넣어 이미지 크기를 수정할 수 있으나 스타일적인 부분은 css에서 다룬다.

<img src = " 경로 "  alt = " 대체 텍스트(설명) " >

- src는 source의 약자로 이미지 경로를 나타낸다.

- alt는 alternative의 약자로 이미지가 뜨지 않을 경우 보여줄 대체 문구를 나타낸다.

<img scr="C:\computer.jpg" alt="컴퓨터이미지">

img코드로 작성했을 때 나타나는 이미지로 오류가 생기면 "컴퓨터이미지"문구가 출력된다.

 

코딩 상식 👀

- 컴퓨터는 2진수(0과 1로만 이루어져 있는 수) 언어를 사용한다.

- 사람의 언어로 컴퓨터에게 명령을 내리기 위해서는타이핑하기 위한 에디터와 우리의 언어를 기계어로 번역해주는 컴파일러가 필요하다.

- 이러한 에디터와 컴파일러를 모두 포함하고 있는 환경을 IDE라고 부르며 개발자들은 프로그래밍을 하기 위해서 IDE프로그램을 설치한다.

-IDE(Integrated Development Environmnet) 즉 통합 개발 환경은  코딩, 디버그, 컴파일, 배포 등의 기능을 제공하는 소프트웨어며 종류로는 VS, Xcode, Eclipse, Jetbrains series 등이 있다.

-보통 코드가 프로그램이 되려면  전처리 - 컴파일 - 어셈블러 - 링커 단계를 거치는데 단계별로 프로그램을 별도 사용하게 되면 번거롭다. IDE는 이러한 과정을 한 번에 해결해주므로 굉장히 편리하다.

-소스 코드를 기계어로 변환해 주는 과정을 컴파일이라고 하며 인터프리터 언어는 컴파일 단계를 거치지 않고 직접 실행하거나 중간 코드로 변경 후 실행한다.