기본문법
<태그>내용</태그>하나의 요소를 표현한다.
- <태그> : 열린태그 = 시작태그
- </태그> : 닫힌태그 = 종료태그
- 내용 : 요소의 내용(Contents)
부모와 자식관계의 이해
<태그><태그>내용</태그></태그>- 바깥쪽 시작태그와 종료태그는 부모요소를 뜻한다.
- 안쪽의 시작태그와 종료태그는 자식요소를 뜻한다.
<태그>
<태그>내용</태그>
</태그>일반적으로 부모와 자식요소의 구분을 위해 들여쓰기를 한다.
빈 태그
<태그>
<태그/>빈태그란 시작태그만 존재하고 종료태그가 존재하지 않는 태그를 의미한다.
따라서 내용(Contents)을 입력할 수가 없다.
빈 태그는 작성방식이 2가지가 존재한다.
- <태그> : 시작태그만 작성하는 방식
- HTML 1~4버전까지는 “/”를 붙이는 방식이 존재하지 않다가 4, 5버전 사이에 XHTML 버전이 나오면서 뒤쪽에 “/”를 붙이는 빈태그를 사용했다. 이 빈 태그는 빈태그에도 시작과 종료를 명시하기 위해 명확하게 알리는 역할을 했으며 HTML5가 나오면서 두가지의 방식을 모두 차용했다.
- <태그/> : 열리는 태그의 뒤쪽에 “/”를 붙인다.
속성과 값
<태그 속성="값">내용</태그>열리는 태그에는 ‘속성’과 ‘값’을 적용할 수 있다.
태그를 이용해서 기본적으로 사용할 수 있는 기능을 확장시켜 사용할 수 있다.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">ex) 예를 들어 meta 태그에는 charset속성과 해당값으로 ‘UTF-8’을 주었고,
두번째 meta태그에는 name, content속성을 주고 값을 적용할 수 있다.
<img src="./cat.jpg" alt="고양이"/>ex) img 태그에 src속성을 넣어 경로 값을 주어 이미지의 경로를 나타낼 수 있고 alt 속성에 대체 텍스트값을 지정해 이미지가 나오지 않을 시 대체로 나타낼 텍스트를 지정할 수 있다.
input 요소
사용자가 데이터를 입력하는 요소(태그)이다.
어떠한 데이터를 입력받을지에 대한 정보를 알려주기위한 속성과 값을 지정해줘야 한다.
<input type="text"/>
<input type="checkbox"/>- type 속성 : 어떠한 형식의 데이터 타입을 입력받을 건지 명시
- text : Text형식의 데이터를 입력받겠다고 type속성의 값으로 지정
- checkbox : 체크박스 형태의 데이터를 입력받겠다고 지정
글자와 상자
요소가 화면에 출력되는 특성으로 크게 2가지로 구분할 수 있다.
- 인라인(inline)요소 : 글자를 만들기 위한 요소들
- 블록(Block)요소 : 상자(레이아웃)를 만들기 위한 요소들
1. 인라인요소
인라인요소는 수평으로 쌓인다
span태그는 대표적인 인라인 요소이다. 본질적으로는 아무 의미가 없고 콘텐츠 영역을 설정하는 용도이다.
span과 같은 인라인 요소는 기본적으로 왼쪽에서 오른쪽으로 수평으로 쌓이는 특성이 있다.
<span>Hello</span>
<span>World!</span>이런식으로 span태그가 있다면 왼쪽으로 오른쪽으로 쌓이게되 화면에서는 ‘Hello World!’ 처럼 보이게된다.
인라인 요소는 줄바꿈을 하게 되면 화면에서는 띄어쓰기를 수행하기 되므로 Hello와 World사이에는 한칸의 공백이 존재하게 된다.
<span>Hello</span><span>World!</span>이처럼 줄바꿈을 하지 않고 span태그를 잇게 된다면 Hello와 World! 사이에는 빈칸이 존재하지 않게 된다.
span {
font-size: 100px;
}
body {
font-size: 100px;
}*참고로 span 태그를 선택해 font-size를 100px로 줄경우 Hello와 World!사이의 빈칸은 span태그의 내용이 아니므로 영향을 받지 않아 font-size가 그대로지만 body를 선택해 100px로 줄경우 바뀌게 된다
인라인요소는 콘텐츠 크기만큼 줄어든다
<span>Hello</span>
<span>World</span>인라인요소는 가로와 세로의 사이즈가 자신이 포함한 콘텐츠의 크기만큼 줄어들게 된다.
인라인 요소의 크기 조정
<span style="width: 100px;">Hello</span>
<span style="height: 100px;">World</span>span과 같은 인라인요소에 style속성을 주어 직접 크기를 조정해도 결과는 변화가 없다. span태그와 같은 인라인 요소들은 기본적으로 글자 요소이기 때문에 (글자요소는 크기를 갖지 않는다, font-size를 통해 글자의 크기를 조정하는 것은 가능하다) 크기를 조정하는 스타일은 적용시킬 수 없다.
<span style="margin: 20px 20px;">Hello</span>
<span style="padding: 20px 20px;">World</span>margin속성은 외부여백을, padding은 내부여백을 지정하는 css 속성이다.
인라인요소는 위, 아래의 여백은 정상적으로 적용이 되지 않고, 양 옆의 여백은 적용이 된다.
인라인 요소안에는 블록요소를 사용할 수 없다
<span><div></div></span>
<span><span></span></span>인라인요소안에 블록요소를, 즉 글자 안에 상자를 집어넣을 수는 없다.
하지만 인라인요소안에 인라인요소는 중첩해서 넣을 수 있다.
2. 블록요소
div태그는 대표적인 블록 요소로 본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도로 쓰인다.
블록요소는 수직으로 쌓인다
<div>Hello</div>
<div>World</div>블록요소는 수평으로 쌓이는 인라인 요소와는 다르게 수직으로 쌓여 Hello 줄바꿈후에 World가 나타난다.
블록요소의 가로와 세로너비
블록요소의 가로너비는 부모요소의 크기만큼 늘어날려 하고, 세로너비는 콘텐츠 크기만큼 줄어든다.
<div style="width: 100px;">Hello</div>
<div style="height: 40px;">Wordl!</div>블록요소는 상자의 개념이므로 당연하게도 세로사이즈와 가로사이즈를 지정할 수 있다.
블록요소의 여백
<div style="margin: 10px;">Hello</div>
<div style="padding: 10px;">World</div>블록요소는 좌우여백만 적용되는 인라인 요소와는 다르게 상하좌우 모두 여백이 모두 정상적으로 적용이된다.
따라서 블록요소가 인라인요소보다 시각적인 면에서는 더 유리하다.
블록요소는 인라인, 블록 모두 포함할 수 있다
<div><div></div></div>
<div><span></span></div>블록요소는 자식으로 블록요소(div)와 인라인요소(span)을 모두 포함시킬 수 있다.
정리
인라인 요소
- 수평으로 쌓인다.
- 콘텐츠의 크기만큼 가로, 세로 모두 줄어든다.
- css 스타일로 width, height로 가로, 세로 크기를 조정해도 효과가 없다.
- 여백을 변경할경우 좌,우의 여백만 변경된다.
- 자식요소로 인라인요소만 포함이 가능하고 블록요소는 포함할 수 없다.
블록요소
- 수직으로 쌓인다.
- 부모요소의 가로크기만큼 늘어나고, 세로는 콘텐츠의 크기만큼 줄어든다.
- 상하좌우 모두 여백이 잘 적용된다.
- 인라인, 블록 요소 모두 자식요소로 포함시킬 수 있다.
