형광펜효과 인라인요소 + 블록요소 알아보자

2015. 11. 10. 23:15

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

형광펜효과 인라인요소 + 블록요소 알아보자

형광펜 효과에 주기에 앞서서 인라인 요소와 블록 요소에 대해 이야기해 볼까 합니다.

HTML에는 인라인 요소와 블록 요소가 있습니다.

둘다 텍스트뿐 아니라, 인라인 요소 혹은 블록 요소의 속성을 띈 태그도 있습니다.

인라인 요소와 블록 요소의 각각의 특징입니다.

인라인 요소의 가장 큰 특징은 줄바꿈이 일어나지 않는다는 것입니다.

줄바꿈이 되지 않다보니 블록 요소안에도 들어갈 수있습니다.

하지만, 반대는 불가능합니다.

<a>,<b>,<i>,<img src=""> 등이 있습니다.

블록 요소는 항상 줄바꿈이 일어납니다.

<h1>~<h7>태그와 <p>태그 등이 있습니다.

인라인 요소와 블록 요소도 확인해 보고 현광펜 효과도 알아봅시다.

실제로 색이 들어간 모습을 보면 어떤게 인라인 요소이고 어떤게 블록 요소인지 비교적 알기 쉽게 볼 수 있으실 듯 합니다.

새롭게 추가되는 태그는 강제 줄바꿈 태그인<br>태그와

지정 부분에 현광펜 효과를 주는 <mark> 태그입니다.

이번에 예제를 만들어 보았습니다.

<body>부분 부터 보면, <h2>로 굵은 글씨로 주고,

인라인 요소와 블록 요소를 비교해 보기 위해 <p>태그를 준 문장과 주지 않은 문단을 만들어 주었습니다.

사이에 <br>태그도 사용해 보았는데요,

<br>태그의 경우에는 보통 코드를 작성하는 패드 안에서 줄바꿈을 해도 실제로 페이지에선 전혀 효과가 없습니다.

하지만, <br>태그를 사용하게 되면, 원하는 위치에서 줄바꿈을 할 수있습니다.

그리고, <head>에 공간을 만들어 놓고 사용하지 않고 있던 <style>시트를 써보아요.

해당 태그를 각각 지목해서 형광펜 효과의 색상을 변경해 보겠습니다.

텍스트의 바탕화면 색상이니 'background-color'입니다.:D

<mark>같은 경우 따로 스타일 시트를 주지 않는다면 기본 색상으로 밑줄이 쳐지지만,

저는 따로 색상을 각각 주었습니다.

실행 시켜 보시면 이렇게 색상이 변하신게 보이실 겁니다.

블록 요소 같은 경우엔 해당 영역을 지나쳐 색이 한줄 전체에 효과를 주었습니다.

하지만, 인라인 요소의 경우엔 해당 영역을 제외하곤 더이상 효과는 없습니다.

거기에 <br>태그로 줄바꿈을 해준것을 제외하곤

인라인 요소끼리는 줄이 바뀌는 것 없이 한줄로 나란히 붙는 것도 볼 수있습니다.

인라인 인라인 요소와 블록 요소를 잘 알고 있다면, 나중에 홈페이지를 만들 때, 더 효과적으로 사용 할 수있습니다.:D

은하수 골목