bravo my life!

[HTML] 공부 일지. 초반부 복습. 본문

Study/HTML, CSS, JavaScript

[HTML] 공부 일지. 초반부 복습.

losajjang 2022. 1. 24. 00:02
728x90

스파르타코딩클럽 웹개발 강의 결제 전,

HTML의 초반을 잠시 복습해 보았다.

1. HTML 요소의 구조.

<p class="losajjang"> pjm </P>

<p : 태그 이름

class : 속성명

losajjang> : 속성값

pjm : 내용

</p> : 종료 태그

속성명은 언제나 소문자로 입력할 것.

속성값은 언제나 따옴표로 감쌀 것.


2. HTML TEXT 요소

ㄱ. <h>

제목 표현뿐만 아니라, 검색엔진이 검색할 수 있는 키워드가 된다.

제목 부분은 <big>, <bold> 태그의 사용을 지양한다.


ㄴ. <b>, <strong>

<b> : 폰트를 단순하게 굵은 폰트로 표현한다.

<strong> : 폰트를 굵게 표현하고 중요한 내용이라는 의미를 갖게 한다.

검색엔진은 <strong> 태그를 사용한 텍스트를 더 중요하게 인식한다.


ㄷ. <i>, <em>

<i> : 폰트를 단순하게 기울인다.

<em> : 폰트를 기울여 표현하고 중요한 내용이라는 의미를 갖게 한다.

검색엔진은 <em> 태그를 사용한 텍스트를 더 중요하게 인식한다.


ㄹ. <abbr>

축약형을 표현. <abbr> 태그가 적용된 텍스트 위에 마우스 커서를 위치 시 용어의 원형이 나타나게 된다.

ex) <abbr title="HyperText Markup Language>HTML</abbr>

축약형의 원형이 어떤 것인지 찾아보는 것을 좋아하는 나로서는 아주 애용할 태그인 듯하다.


3. HTML 기본 요소

ㄱ. 페이지 책갈피 태그

<a href="bookmark"><p>책갈피</p></a>

<h2><a name="bookmark"></a>책갈피</h2>

위와 같이 적용 후, 웹페이지상에서 <p> 태그가 사용된 책갈피를 클릭하면 <h2>가 사용된 책갈피로 이동한다.

위키 페이지에 많이 사용되는 태그이다.

이 또한 내가 좋아하는 태그이다.


ㄴ. <table>

행과 열이 계속 헷갈려서 익히기 힘들었던 태그였다.

ex)

<table>

<i--1행-->

<tr>

<td>1행 1열</td>

<td>1행 2열</td>

<td>1행 3열</td>

<td>1행 4열</td>

</tr>

<i--2행-->

<tr>

<td>2행 1열</td>

<td>2행 2열</td>

<td>2행 3열</td>

<td>2행 4열</td>

</tr>

</table>

은 아래와 같다.

1행 1열
1행 2열
1행 3열
1행 4열
2행 1열
2행 2열
2행 3열
2행 4열

border가 없기 때문에 테두리는 없는 상태이다.


ㄷ. <rowspan>, <colspan>

<rowspan> : 행 병합

<colspan> : 열 병합

1행 1열
2행 1열
1행 2열       1행 3열      1행 4열
2행 2열
2행 3열
2행 4열

 


곧 항해99를 결제하게 되면

스파르타코딩클럽의 웹개발종합반 강의를 듣게 된다.

그동안의 독학으로 쉽게 이해할 수 있을지 궁금하다.