블록요소와 인라인요소
블록 요소 (Block Element) - 영역을 만드는 것
- 블록 요소는 마크업시 자동으로 줄바꿈이 일어나는 요소를 말합니다.
- 블록 요소 안에는 또 다른 블록 요소, 인라인 요소를 포함O (블록/인라인 모두 블록 자식 가능)
- 사용 가능한 최대 가로 너비를 점유하며 가로, 세로의 크기를 지정할 수 있습니다.
- 대표적으로 <div>, <h1~6>, <p> 등 거의 대부분의 태그가 블록 요소 성질을 갖고 있습니다.
→ 수직으로 쌓인다 (태그를 같은 줄에 써도) → width, height에 따라 바뀔 수 있고 수직 배치 유지
인라인 요소 (Inline Element) - 텍스트를 만드는 것
- 인라인 요소는 마크업시 자동으로 줄바꿈이 일어나지 않는 요소를 말합니다.
- 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있고, 블록 요소를 포함할 수 없음
- 필요한 만큼의 너비를 사용하며, 가로 세로 크기를 지정할 수 없습니다.
- 대표적으로, <span> , <a>, <strong> 등이 있습니다.
→ 텍스트가 있는 만큼만 점유 = 필요한 만큼만 → 가로세로 지정이 안 됨!!!!!!!!!! → 이미지를 넣으면 이미지 만큼만 가로세로 변경
→ 인라인은 display: block; 속성을 지정하면 블록처럼 쓸 수 있음 (display: inline 디폴트값)
반대로 블록은 display:block 디폴트 값
// 블록요소
// h1+div+p +tab (에밋 문법)
<h1></h1>
<div></div>
<p></p>
// 인라인 요소
// span+em+a +tab (에밋 문법)
<span></span><em></em><a href=""></a>
//fz2e +tab -> font-size 2배(에밋 문법)
에밋 문법
빠른 코딩을 도와주는 플러그인으로 정해진 문자를 활용하여 tab 하면 적용 가능
- h$*6 : $*6 연속적인 숫자 1~6
- h${Hello}*6 :
- h${Hello$}*6 : 텍스트 Hello1~Hello6
<!--h$*6-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--h${Hello}*6-->
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
<!-- h${Hello$}*6 -->
<h1>Hello1</h1>
<h2>Hello2</h2>
<h3>Hello3</h3>
<h4>Hello4</h4>
<h5>Hello5</h5>
<h6>Hello6</h6>
각 태그의 주의사항
- 각 항목(li)의 정렬된 목록(ol)이나 정렬되지 않은 목록(ul)을 설정하여 사용합니다.
- ol 과 ul은 자식태그로 li만 사용 가능. ↔ li 의 부모는 ol, ul
- li는 단독으로 사용 불가
- 항목의 순서를 바꿨을 때 의미도 바뀐다면 <ol>을 사용하세요. 그렇지 않으면 <ul> 사용
- <b>, <mark>, <em>, <strong> 모두 구조적 강조이지 서식을 꾸미지 않음
- <br>, <pre> 를 통해 문단을 구분할 수 있음
- <a href="https://www.google.com" target="_blank">구글 링크</a>
—> target 속성 '_blank'를 사용하면 새 탭에서 링크 열림
// a 태그 활용
<div id="github">깃허브 링크</div>
<a href="../1. 요소 성질/1.블록요소.html">
블록요소 공부하기
</a>
<a href="tel:+821072709984">문의전화</a>
<a href="email:kitsnr08@gmail.com">메일</a>
<a href="#top">안녕하세요로 이동</a> --> 페이지에서 #top으로 이동
--> 일반적으로 맨 위로 가기 버튼 기능
<script>
github.onclick = e => {
window.location.href = 'https://www.github.com';
};
</script>
img
// 로컬은 상대경로로 사용 (보안을 위해..)
<img src="../../mymelody.png" alt="">
// 이미지 주소복사 -> url
→ inline-block 요소 (인라인처럼 수평배치 + 블록처럼 너비높이 조절 가능)
iframe
- 현재 문서 안에 다른 HTML 페이지를 삽입합니다.
유튜브에서 소스코드 복사하면 웹페이지에 임베드 할 수 있음
<iframe src="" frameborder="0"></iframe>
표 table
→ 게시판에서 많이 쓰는 형태
* table>tr*3>td*4 (3행 4열)
* tr>td*4 (1행 추가)
| <table> | 테이블 생성 | <--- 가로로 두 열을 병합 | 하면 colspan="2" |
| <tbody> | <tr>의 부모 | ↑ 세로로 | |
| <tr> | 테이블의 행 | | 여러 행을 병합하면 | |
| <th> | 테이블 머리글 | | rowspan="4" | |
| <td> | 테이블의 셀 데이터 | ↓ |
- rowspan : 여러 row를 하나로 병합하는 속성
- colspan : 여러 column을 하나로 병합하는 속성
// 열 병합
<tr>
<th colspan="5">안녕안녕</th>
</tr>
// 행 병합
<td rowspan="3"></td>
* 셀 병합 시 처음으로 rowspan, colspan 속성을 사용한 td를 제외하고
병합되는 셀에 해당하는 td는 작성하지 않아야 함
** table 자식 tr → tr의 부모는?
table 아님! 실제로는 tbody > tr ( table>tbody>tr>td )
정리
- HTML 태그들은 구조적 맥락에 따라 사용한다
즉, 어떤 서식, 스타일을 위해 사용하지 않는다. - 블록과 인라인 특성도 CSS를 통해 변경할 수 있다.
- img, iframe, table 관련 태그 주의사항을 알고 사용할 수 있다.
* 로렘입숨
웹디자인, 타이포 등의 작업을 하면서 필요한 대량의 텍스트를 무작위 생성
일종의 모형, 그리킹 Greeking
** VSCode 단축키
alt+shift+↓ : 코드라인 복붙
alt + ↓, ↑ : 코드라인 위치 이동
+ 상단의 File > preferences (기본설정) > 바로가기 키 (keyboard shortcut) 으로 커스텀 설정할 수 있음
