Day1: HTML 입문 1

HTML

프로그램 언어가 아닌 Markup Language_태그<> </>를 이용해 어떠한 요소를 화면에 표시하고 구성

 

태그의 요소

• inline: 연달아 작성된 태그는 서로 같은 줄에 표시
• block: 연달아 작성된 태그는 서로 다른 줄에 표시_앞선 태그가 표시되면 그 다음줄에 다음 태그가 표시

 

<title> - 제목 태그

 

head 에 <title> 태그를 작성하여 상단 탭에 출력됨

 

출력:

 

 

Block element

 

block의 성질을 갖고있는 <h1> ~ <h6>과 <p>태그를 사용해 작성

 

출력:

 

 

출력:

 

 

Inline element

 

inline의 성질을 갖고있는 <a>태그를 사용

 

출력:

 

 

<address> 태그

 

 

출력:

이 태그를 사용하면 글꼴이 이탤릭체로 적용됨

 

특수문자 리스트

HTML Standard

태그를 작성할 때 사용되는 '<(&#60;)'를 비롯한 여러 특수문자를 작성할 수 있음

 

 

<hr> 태그

 

 

태그 사이에 작성해 가로 구분선을 그어주는 태그_<hr> 혹은 <hr/> 태그 하나만으로도 작동됨

출력:

 

 

<br> 태그

 

 

inline 성질을 가진 태그를 block으로 바꾸어 줄 수 있는 태그

출력:

 

인용 태그

 

<blockquote> : block의 성질을 가진 인용 태그_해당 태그 사이에 다른 태그를 넣을 수 있음

<q> : inline의 성질을 가진 인용 태그_따옴표가 포함됨

 

출력:

 

 

텍스트 요소 태그

 

<em>, <i>

: emphasize(컨텐츠 강조), italic(외국어, 등장인물의 생각 등 일반적 산문을 벗어난 경우) _기울임 글꼴로 표현됨

<strong>, <b>

:strong(브라우저가 해당 텍스트를 중요한 부분으로 인식), bold(텍스트가 진해짐)_진한 글꼴로 표현됨

<abbr> : abbreviation은 준말 또는 머리글자를 나타냄, title이라는 속성을 이용해 커서를 올리면 설명을 제공

 

출력:

 

<del> delete(삭제글)

<ins> insert(추가글)

<sup> superscript(윗첨자)

<sub> subscript(아래첨자)

 

출력:

 

<imge> 태그 경로 설정

 

<img src="이미지 경로" /> _여닫는 태그 통합

절대경로:

특정 소스의 모든 경로를 모두 작성하는 방식으로

장점은 어떤 상황에도 파일 경로를 온전히 다 적어 파일 출력 시 문제가 생길 여지가 적으나,

단점은 입력한 내용이 길면 가독성을 해친다. → 절대 경로로 작성하는 편이 좋음

 

​상대 경로: 

현재 작성 중인 문서의 위치를 기준으로 겹치는 경로까지는 적지 않고 차이가 생기는 경로지점부터 파일명을 적는 방법으로

장점은 적은 내용이 적어서 가독성이 높으나,

단점은 html 파일의 위치가 옮겨지면 링크가 깨지기 쉽다.

→ src내부에 "../"를 작성하는 것으로 바로 상위의 폴더를 나타내어 주고 그 이후의 주소를 적어주는 것도 가능

 

출력:

 

<a> 태그

 

<a href="접속 경로">나타낼 문구</a>

anchor태그를 이용해 링크삽입 → 태그 사이에 <img> 태그를 작성해 image를 클릭하면 링크로 이동 가능

 

출력: