HTML
01: 기본 태그
<html>, <head>, <body> 태그
<html> 태그는 HTML 문서의 시작과 종료를 나타내는 기본 태그로 특별한 속성이나 사용법은 없습니다. <head> 태그는 HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너로 다음을 포함합니다.
- <title>태그를 통해 브라우저 상단 타이틀 정의
- JavaScript 및 CSS 코드를 직접 작성하거나 외부 파일을 import 혹은 url link.
- <meta> 태그를 통해 언어설정, 브라우저 호환성설정 및 모바일 화면설정과 SEO(Search Engine Optimization) 정보를 제공함.
- <body> 태그 역시 특별한 사용법은 없으며 HTML의 메인 콘텐츠 영역을 정의하는 태그로 필수 요소임. 모든 콘텐츠는 <body></body> 사이에 위치해야 함.
<body>를 구성하는 여러 태그들은 각각 사용 목적에 따라 필요한 태그를 선택해 콘텐츠를 제작 하면 됩니다. 다만 이들 태그들은 다음과 같이 블럭 혹은 인라인 특성을 가지고 있으므로 화면에 여러 태그를 함께 배치할 때 이러한 부분을 고려해야 합니다.
블럭(Block) 태그
블럭은 태그 구성요소들이 라인 전체를 차지해서 한줄에 여러 요소가 위치하지 못하는 태그를 말합니다.
- <div>,<ol>,<li>,<h1>~<h6>등의 태그가 대표적임
- 예를들어 <h1>Hello</h1>world 라고 작성했을때 world 는 다음줄에 표시됨.
인라인(Inline) 태그
인라인은 태그 구성요소들이 나란히 배치될 수 있는 태그를 말합니다.
- <span>,<a>,<img>등의 태그가 대표적임.
- 예를들어 사진1: <img src="1.jpg"> 과 같이 했을때 텍스트와 사진이 나란히 배치됨.
02: 제목 태그
콘텐츠의 제목들을 표시할때 사용할 수 있는 태그 입니다. 큰 글자의 텍스트로 출력되는데 단순히 크기가 중요한 것이 아니라 문서내 콘텐츠들의 대->중->소 제목으로 이루어진 문서 구조를 표현하기 위한 용도로 사용됩니다.
또한 구글 검색엔진에 제대로된 문서구조를 제공해 좀 더 정확하게 검색 되기를 원한다면 제목 태그들을 잘 사용해야 합니다.
<h> 태그는 heading 이라고 하며 <h1> ~ <h6>까지 있는데, 숫자들은 제목의 레벨을 나타냅니다. <h1>이 가장 높은 레벨로 크기가 가장 크며 <h6>이 가장 낮은 레벨로 크기가 가장 작습니다.
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
<p> 태그는 paragraph 로 문단을 구분하기 위해 사용 합니다. HTML에서는 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리하기 때문에 문단 구분 시 <p>태그를, 줄 바꿈시 <br>태그를 이용 합니다.
03: 문단 태그
<p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p>
result
This is a paragraph.
This is a paragraph.
This is a paragraph.
<br>태그는 닫는 태그가 없습니다. xml 규격으로 html을 표현하는 xhtml 시스템에서는 </br>과 같이 xml 규격에 따라 사용 할 수 있습니다. 또한 문단 구분을 위해 <br> 태그를 연속으로 사용하는 것 보다 <p>태그를 사용하는 것이 좋습니다.
<p> To break lines <br> in a text, <br> use the br element. </p>
result
To break lines
in a text,
use the br element.
HTML 소스 에서는 기본적으로 하나의 공백만 인식이 되고 줄바꿈의 경우에도 별도의 태그를 사용하지 않으면 한줄로 보이게 됩니다.
Hello World -> Hello World로 보임 Hello World -> HelloWorld로 보임
따라서 여러개의 공백을 넣으려면 를 사용해야 합니다.
Hello ** ** ** ** ** ** World -> Hello World
소스에 작성한 그대로 화면에 출력하려면 pre 태그를 사용해야 합니다.
<pre> Hello World !!! </pre>
위와같이 작성히 작성된 모양 그대로 화면에도 보이게 됩니다. 이 방법은 매우 특별한 경우에만 사용하며 일반적으로는 거의 사용할 일이 없습니다.
04: 형식 태그
형식 지정 태그들은 텍스트에 의미와 함께 효과를 부여 합니다. 텍스트를 굵게 출력하는 <b>, <strong>, 텍스트를 기울여 보여주는 <i>, <em>, 하이라이트 표시를 위한 <mark>, 문장의 취소선을 표시하는 <del> 등이 있습니다.
태그명 용도
| <i> | 이탤릭으로 텍스트를 기울임 |
| <b> | 굵은 글자 |
| <tt> | 타자기 글자 모양 |
| <u> | 밑줄 |
| <strong> | 강조 텍스트 - b 태그와 결과 동일 |
| <sub> | 아래첨자 |
| <sup> | 윗첨자 |
| <em> | 강조된 텍스트 - i 태그와 결과 동일 |
| <del> | 텍스트 취소선 |
| <mark> | 형광펜 형태의 하이라이트 표현 |
- <b>는 텍스트가 중요하지 않지만 단순 진하게 표시할 때, <strong>은 의미적으로 중요한 텍스트를 표시할 때 사용합니다.
- <i>는 단순하게 이탤릭체로 표시할 때, <em>은 특정 텍스트에 이탤릭체로 강조된 의미를 표현 할 때 사용합니다.
05: 목록 태그
목록 태그는 최신 HTML5 문서 작성에 있어 매우 중요한 태그중 하나 입니다. 카페나 블로그의 포스트 목록, 쇼핑몰의 상품 목록, 뉴스기사 목록 등 많은 웹 콘텐츠가 목록의 형태를 취하고 있기 때문에 이들을 표현하기 위한 목록태그는 레이아웃 지정을 위해 사용하는 <div> 와 함께 가장 많이 사용되는 태그중 하나 입니다.
목록을 만들기 위해서는 기본적으로 <ul> 또는 <ol> 태그를 사용하며 각각의 목록 아이템들은 <li>태그를 사용합니다. 단순한 리스트 나열 뿐 아니라 메뉴를 만들 때에도 사용합니다.
- <ol> Ordered List 로 번호를 메기는 순서가 있는 목록을 만듭니다.
- <ul> Unordered List로 순서없이 모양으로 목록을 만듭니다.
<ul> <li>Listenelement 1</li> <li>Listenelement 2</li> <li>Listenelement 3</li> </ul>
result
- Listenelement 1
- Listenelement 2
- Listenelement 3
<ol> <li>Listenelement 1</li> <li>Listenelement 2</li> <li>Listenelement 3</li> </ol>
result
- Listenelement 1
- Listenelement 2
- Listenelement 3
06: 하이퍼링크
하이퍼링크는 웹의 대표적인 특징으로 <a>(Anchor)태그를 사용해 만들수 있습니다. href속성을 사용해 이동할 콘텐츠의 주소를 기술하면 됩니다. 이동할 콘텐츠는 html 파일이나 이미지 혹은 .hwp, .pdf 등 모든 파일이 될 수 있으며 URL을 이용해 서버의 콘텐츠를 지정하거나 프로그램을 호출하는 것도 가능합니다.
다른 서버 컨텐츠로 이동하는 것이라면 href 에 http:// 로 시작하는 URL이 들어가야 합니다.
<a href="이동할 콘텐츠" title="말풍선 도움말" target="브라우저 윈도우 옵션">링크 텍스트</a>
href 에 들어가는 이동할 콘텐츠의 위치는 상대경로와 절대경로로 표현 할 수 있습니다. 내 컴퓨터가 아니라 html 을 서비스하고 있는 웹서버 컴퓨터에서 콘텐츠간의 위치 이므로 개념을 잘 이해해야 합니다.
상대경로와 절대경로
- 절대경로는 고유한 경로로 root(/)에서부터 시작되는 위치로 지정하는 방법.
- 예) /home/contents/img/1.jpg
- 상대경로는 HTML문서를 기준으로 경로를 지정하는 방법. -> 권장 방법임.
- 예) img/1.jpg, ../contents/img/1.jpg
- 내컴퓨터에 있는 콘텐츠로 연결하기 위해 c:\\user\\Document\\Desktop\\hello.html과 같이 로컬 컴퓨터의 절대 경로를 사용해서는 안됨.
target 속성 값
- _blank 새로운 웹 브라우저 창으로 오픈.
- _self 현재 웹 브라우저 창으로 오픈. (기본값)
- _parent 부모 웹 브라우저 창으로 오픈.
- _top 웹 브라우저 전체 영역에 오픈.
책갈피 구현
- <a>태그를 이용해 같은 문서 내에서 특정 위치로 이동하는 책갈피 기능을 구현할 수 있음.
- <p>태그의 name속성이나 id속성을 이용해 문서 내 이동위치를 지정하고 하이퍼링크에 href=#name(id) 과 같이 이동할 위치를 지정함.
메뉴 <a href="#m1">5.HTML이란 무엇인가?</a> ...... <p id="m1"></p> <h3>5.HTML이란 무엇인가?</h3>
이미지 링크
텍스트가 아닌 이미지를 링크로 사용할 수도 있습니다. 이 경우 <a><img></a> 형식으로 사용하면 됩니다.
HTML의 기초 명령어 및 그 적용 예시, 주의점
공부하면서 나오는 태그 그때 그때 확인하면서 보는 중
CSS
- Flex
- 아이템을 자유자재로 배치할 수 있기에 많이 쓰인다
- Grid
- 배치 형태를 고정시킬 때 쓰면 좋다
'React' 카테고리의 다른 글
| React 프로젝트 생성 후 만들어지는 폴더나 파일의 역할 (0) | 2024.11.26 |
|---|---|
| React - Component (0) | 2023.09.11 |
| React -event , state (0) | 2023.09.11 |
| React 시작하기 (0) | 2023.09.11 |
| 자바스크립트 공부용 (0) | 2023.09.11 |