2020/06/21 - [HTML&CSS&JS] - [HTML5] HTML 시작하기 2 (절대경로, 상대경로, A태그)
[HTML5] HTML 시작하기 2 (절대경로, 상대경로, A태그)
2020/06/21 - [HTML&CSS&JS] - [HTML5] HTML 시작하기 1 [HTML5] HTML 시작하기 1 1) 웹으로 사용할 워크스페이스 폴더를 하나 만들고 2) 아파치 톰캣 9버전을 zip버전으로 다운받는다. https://tomcat.apache.org..
analysis-flood.tistory.com
저번에 했던 a태그에 이어서, 블럭 태그인 div태그와 인라인 태그인 span 태그를 알아보자.
div 태그와 span태그의 공통점은, HTML 문서의 구조를 나타내지 않고,
사용자의 필요에 따라 요소들을 묶거나 구별할 때 사용할 수 있다.
<div> 태그는 블록 태그로서, 줄바꿈 용도로 사용할 수도 있고, 너비나 높이같은 조절이 가능하다.
<span> 태그는 인라인 태그로서, 자신의 영역만을 차지하여 주변 요소와 어우러질 수 있다.
따라서 너비와 높이는 지정할 수 없다.
간단한 예제로 살펴보자~
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> div, span </title>
<body>
<div> div01 </div>
<div style = "background-color : gray"> div02 </div>
<span> span01 </span>
<span style = "background-color: yellow"> span02 </span>
<div style = "background-color : silver; width : 300px; height : 200px; text-align: center" >300px 200px div</div>
<div style = "background-color: red"> <span> div안의 span </span></div>
</body>
</html>이렇게 코딩을 하면,
이렇게 보인다. 즉, div는 한 줄을 차지하고 있는 블록태그임을 확인할 수 있고,
span은 그대로 이어져 나오는 인라인 태그임을 확인할 수있다.
그렇다면, 밑에있는 div는 어떨까? 너비를 300px, 높이를 200px를 주었기 때문에,
그냥 한 줄이 아니라 일정 영역을 차지하게 된다.
맨 아래처럼, <div>영역 안에 <span> 태그를 넣었지만 어떠한 구분 없이
자연스럽게 div처럼 보이게 사용할 수 있다.
앞서 말했던 것처럼, div 태그는 너비와 높이가 조절이 가능하지만,
span 태그에서는 해당 속성을 써도 먹히지 않는다.
이제 p태그에 대해서 알아보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
첫번째 문장입니다.<br>
두번째 문장입니다.<br>
세번째 문장입니다.<br>
<p style = "background-color:green">
나는 p태그. 인용구이다.
</p>
<p style = "background-color: gray"> 나도 p태그 </p>
<p style = "background-color: orange"> 너두? 나두 </p>
<div style = "background-color:yellow">
첫번째 문장입니다<br>
두번째 문장입니다
</div>
</body>
</html>
위 코드를 실행하면 이렇게 나온다!
즉 간단히 요약하면 이렇다.
<br> : 줄을 바꾸는 태그. 텍스트 쓰다가 엔터 쓰는 거랑 똑같다.
스페이스바로 띄어쓰는 것은 한 칸만 먹히고, 나머지는 먹히지 않는다.
: 이것이 바로 하나의 공백 문자이다. 이것을 원하는 만큼 넣어주면 그만큼 spacebar를 누른 효과를 얻는다.
<p> 태그는 블록태그이며, 문단 구분을 해주는 역할을 한다.
<p> 태그를 3번 연달아 써주었는데 알아서 문단처럼 구분이 되는 모습을 확인!
이제 마지막! <hr>태그를 알아보자
hr태그는 한글에서 --- 와 같은 역할을 한다. 일종의 구분선이랄까..
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> hr tag </title>
</head>
<body>
<br>
<hr>
<hr width = '200px'>
<hr width = '30%'>
<hr width = '60%' color = #8B9BEA size = '10'>
</body>
</html>
맨 위가 기본적인 hr태그. 전체 한 줄을 모두 차지한다.
width는 마찬가지로 구분선의 넓이가 줄어든다.
여기서, px와 %의 차이는 무엇일까?
px는 일종의 fixed한 개념이고, %는 flexible한 개념이라고 보면 된다.
창을 띄워서, 크기를 줄여보자. 그러면, px로 지정한 hr태그는 일정 크기를 유지한다.
그러나, %로 지정한 hr태그는 반응적으로 해당 창의 30%만 차지하게 된다.
즉, 반응형 웹을 구현할 수 있다.
또, color는 기존의 내장된 색상을 사용할 수도 있지만,
우리가 널리 알고있는 RGB형식이나 다른 형식들도 사용할 수 있다!!
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML5] <audio> <video> <iframe> < embed> 태그 (0) | 2020.06.21 |
|---|---|
| [HTML5] <ol> <ul>, <li>, <header>, <section>, <footer> 태그 (0) | 2020.06.21 |
| [HTML5] <h> < img> <select> 태그 (0) | 2020.06.21 |
| [HTML5] HTML 시작하기 2 (절대경로, 상대경로, A태그) (0) | 2020.06.21 |
| [HTML5] HTML 시작하기 1 (Apache Tomcat 9 설치) (0) | 2020.06.21 |
