[HTML] q 태그의 사용법과 엘리먼트의 종류

개발/HTML 2017. 8. 4. 01:46

HTML 문장 안에 인용구가 있을 경우 q 엘리먼트는 사용한다.

쌍따옴표("")로 감싸여져서 보여지지만, 브라우저마다 다르다. (기울임체 또는 들여쓰기 등등...)

어쨋거나 이 태그를 사용하는 것은 좀더 의미를 두기 위해서이다.



<blockquote> 태그 역시 동일하게 인용구를 보여주는 기능을 수행하는데, 차이점은 다음과 같다.


<q> : 짧고 핵심적인 인용구를 작성하는데 적합(즉, 짧은 인용구)

<blockquote> : 완전한 문단을 인용하는데 적합(즉, 긴 인용구)  들여쓰기가 되어 가독성이 높아짐.

<em> : 문구 인용, 단어를 강조하고자 한다면 em 엘리먼트를 사용.


1. 블록 엘리먼트(Block Element)

2. 인라인 엘리먼트(Inline Element)

3. 빈 엘리먼트(Empty Element) : br, img 등등...


블록 엘리먼트

- 독립적이다.

- 시작과 끝이 분명하게 정해져있고, 그 안에 콘텐츠를 갖고 있다.


인라인 엘리먼트는 텍스트의 흐름 내부에 정해진다.

빈 엘리먼트는 <br>이 대표적이다 : 라인 브레이크의 의미만 갖을 뿐 아무런 기능. 의미가 없는 태그

'개발 > HTML' 카테고리의 다른 글

HTML5에서 텍스트 관련 태그 설명 모음  (0) 2017.09.07
Textarea 글 입력 시 비정상적인 커서 문제  (0) 2017.08.22
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
HTML의 기본적인 개념 정리  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
Posted by sungho88
,

[HTML] a 태그 사용법과 href의 상대 경로 지정하기

개발/HTML 2017. 8. 4. 01:03

<a href="./content.html" style="font-weight:bold;">A태그입니다</a>


a 엘리먼트 : 다른 페이지와 연결되는 링크를 생성하기 위해 사용.
<a>와</a>안에 작성된 "A태그입니다"는 라벨 역할을 수행하여 여기에 링크가 걸리게 됨.

즉 , A태그입니다를 클릭했을 떄, content.html로 이동함. 
href 속성은 브라우저에게 링크의 목적지를 알려줌. (속성은 엘리먼트를 커스터마이즈하기 위해 사용)
href : hypertext reference의 약자
경로가 변경되었다면, 이미지 등이 깨져서 나오게 된다. 파일의 경우 404 에러가 발생한다(파일 못 찾음
이 경우에는 정확한 경로를 작성해줘야한다.
해당 HTML 파일과 동일한 폴더에 있다면 위와 같이 작성하면 되지만, 어떤 폴더에 하위로 들어갔다면 그 경로를 정확히 기입해주어야 파일을 찾을 수 있다.

aa 폴더 안에 index.html파일이 존재한다. sub01.html이 aa폴더에 존재한다면 

href="./sub01.html" 로 쓰면되지만,


aa 폴더 안에 bb 폴더 안에 존재하는 sub02.html의 경우에는 


href="/bb/sub02.html" 으로 지정해주어야 한다.


반대로 상위(부모) 폴더로의 이동은 즉, sub02.html에서 index.html로 이동하기 위해서는 


href="../index.html" 으로 작성하면 된다.


참고로 .. 은 상위(부모) 폴더로의 이동을 의미하며, / 는 경로의 각 부분을 구분한다.


이것이 바로 상대 경로(Relative Path)이다.


'개발 > HTML' 카테고리의 다른 글

Textarea 글 입력 시 비정상적인 커서 문제  (0) 2017.08.22
[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
HTML의 기본적인 개념 정리  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
Posted by sungho88
,

HTML의 기본적인 개념 정리

개발/HTML 2017. 8. 4. 00:38

HTML : HyperText Markup Language 


[웹 서버]

- 웹 브라우저의 요청(Request)을 기다리는 하나의 컴퓨터라고 할 수 있다.

- 웹 서버는 브라우저의 요청에 따라 웹 브라우저에게 응답(Response)을 하는 역할을 한다.

- 24시간 쉬지않고 작동해야만 한다.

- 웹 서버는 HTML 파일이나 각종 리소스들을 저장하고 있다.


[웹 브라우저]

- 브라우저에서 어떤 사이트를 열때는, 웹 서버에 해당 HTML 페이지를 요청해야한다.

- HTML은 브라우저에게 웹 페이지의 구조와 내용에 대해 알려준다.


요즘 에디터들은 자동 완성 기능이 훌륭하다.

아톰(Atom) 같은 경우, 확장자를 .html로 하면 HTML로 인식하여 여러 단축키를 사용할 수 있다.

html파일에 html이라 입력을 하게 되면 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>


  </body>

</html>

이렇게 자동으로 html 태그 구조가 생성된다.

<> 안에 오는 단어 또는 문자를 태그(Tag)라 부른다.
태그 : 브라우저에게 작성한 텍스트의 구조와 의미에 대해 알려준다.

- HTML 문서에 적힌 탭, 리턴, 개행 등 대부분의 공백을 무시한다.

매칭 태그: 시작태그와 종료태그가 존재하는 태그
Ex)
<html> </html> : 이 파일이 html 파일이라고 명시하는 태그
<head> </head> : 타이틀 등 웹 페이지에 관련된 정보를 포함 
<body> </body> : 웹 페이지의 모든 내용과 구조를 포함. 사용자의 눈에 보이는 웹 페이지의 내용.

<title> 안녕하세요. 반갑습니다. </title>


위 문장 처음부터 끝까지 전체를 엘리먼트(Element)라 부르며, 이 경우 title 엘리먼트로 부름.


<style> 엘리먼트는 HTML 태그 내에 head태그 안에 위치해야 함.

<style type="text/css">

또한 type이라는 속성을 갖음. 이것은 스타일의 종류를 브라우저에게 알리는 역할.

즉, CSS를 사용할 것이므로 위와 같이 작성

속성(Attribute) : 엘리먼트에 대한 추가적인 정보를 제공해주는 것.


CSS란?

HTML이 홈페이지의 구조만을 표현하는데 사용되지만, (홈페이지 구조 설계 = 개발)

CSS는 홈페이지의 스타일을 입히는데 사용됨. (홈페이지 꾸미기 = 디자인에 가까움)


정리


1. HTML과 CSS는 웹 페이지를 만들기 위해 사용하는 언어

2. 웹 서버는 HTML과 CSS로 만들어진 웹 페이지들을 저장하고 서비스를 제공하기 위한 용도.

3. 브라우저는 웹 페이지를 요청하여 HTML과 CSS를 기반으로 콘텐츠를 표현함.

4. HTML은 웹 페이지를 구조화하는데 사용

5. CSS는 Cascading Style Sheet의 약자. HTML의 디자인 스타일을 제어하는데 사용.

6. 엘리먼트는 시작태그, 콘텐츠, 종료태그 세 가지로 구성됨.(예외도 존재 : <img >)


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////


'개발 > HTML' 카테고리의 다른 글

[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
HTML 내용물 가운데 정렬하기  (0) 2017.01.23
Posted by sungho88
,

티스토리툴바