이번에는 <p> 태그와 <br> 태그에 대해서 공부 해봤다.

일반적으로 <p> 태그는 하나의 문단을 의미하고,

<br> 태그는 강제로 줄바꿈을 의미한다.

<p> 태그를 사용하면 문단으로 정의되기 때문에
<p></p>
<p></p>
사이에 어느정도 공백이 존재합니다.

<br> 태그를 사용하게 되면 강제 줄바꿈 ( Enter )가 되기 때문에
줄바꿈<br>
줄바꿈
이 된다면 사이 공백이 존재하지 않는다.

정도의 차이지만 HTML5의 웹표준으로 <br> 태그의 남용을 자제하고 있다.

<br> 태그를 사용하지 않고, 원하는 곳에서 줄바꿈 처리하는 방법
1. <p> 태그를 사용하고 style을 줘서 문단과 문단 사이의 간격을 없애도록 하자
2. <p> 태그에 고정 가로크기를 줘서 그 이상 넘어가면 자동으로 줄바꿈이 처리된다



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



div 태그는 분할하는 역할을 한다.

div 태그 같은 경우는 header, side-bar, main-body, footer 등등 위치를 지정하고
각각 독립된 영역을 지정해주는 엘리먼트이다.

<div> header </div>
<div> side-bar </div>
<div> main-body </div>
<div> footer</div>

라고 했을 때 각각 독립적인 영역이 지정된 것이고
css를 이용해서 스타일을 주면 된다.

div의 특징으로는 

<div> 내용</div><div> 내용</div>

이렇게 썻을때
`내용내용`
이런 식으로 출력되는 것이 아닌
내용
내용
이런 형식으로 출력이 된다.

css로 스타일을 지정해주지 않는 이상
div는 width의 전체를 차지하고, 내용이 없는 부분에는 margin으로 채워져서
내용
내용
형식으로 출력되게 되는 것이다.



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



간혹 width에 padding과 margin을 사용하게 되면 width 따로 padding과 margin이 따로 적용되어서
원하는 사이즈가 나오지 않을 때가 있다.
그럴 때에는 width와 padding, margin을 합치는 css를 이용하면 된다.

box-sizing: border-box;

'WEB > CSS' 카테고리의 다른 글

[CSS] <ul> <li>로 테이블 만들기  (0) 2017.11.27
[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27



contextmenu="return false"       우클릭 방지
ondragstart="return false"         드래그 방지
onselectstart="return false"       선택 방지

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



위 아래 자간 설정은
line-height: 10px;

좌 우 자간 설정은
letter-spacing: 10px;

소숫점 단위까지 설정이 가능하며 눈에 뛰는 단위는 0.1 단위까지다.

'WEB > CSS' 카테고리의 다른 글

[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27
[CSS] 위에서 아래로 그라데이션 주기  (0) 2017.11.27

+ Recent posts

티스토리툴바