[2023 신입부원 기초 스터디] 조상혁 #1주차 - HTML알아가기

html을 간편하게 사용하기 위한 emmet

시작할 때는 ! 다음 Tab을 누르면 기본서식이 나온다.

🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리

 

HTML CSS 코드짤 때 유용한 Emmet 그리고 부가기능들 - 코딩애플 온라인 강좌

---

글꼴 테그 정리

 

● <h1> ~ <h6> heading

 웹 페이지의 제목 또는 부제목을 표현할때 사용한다.

(숫자가 작을 수록 큰 제목을 표시)

● <p> paragraph 

 하나의 문단을 표시할 때 사용한다.

● <hr> horizontal  rule

 가로로 선을 긋는 태그 (종료태그 없음)

● <br> break

 줄바꿈 태그 (종료태그 없음)

● <i> italic

 텍스트를 이텔릭체로 표시할 때 사용한다.

(단순표기)

● <em> emphasis

 텍스트를 이텔릭체로 강조할 때 사용한다.

(실제 페이지 내에 중요한 부분강조)

● <b> bold

 텍스트를 진하게 표기할 때 사용한다.

(단순표기)

● <strong>

텍스트를 진하게 강조할 때 사용한다.

(실제 페이지 내에 중요한 부분강조)

 

목록 테그 정리

 

● <ol> ordered list

 순서가 있는 목록을 표현할 때 사용한다. 

(type 속성으로 글머리 기호 변경가능)

+ 글머리 기호란 

대량의 텍스트를 효율적으로 정리해주는 도구
원문보기:
https://www.itworld.co.kr/tags/2423/%EC%9B%8C%EB%93%9C/103648#csidx17e47cbc0a6dac989f3bcedc7fe81c0 

● <ul> unordered lists

 순서가 없는 목록을 표현할 때 사용한다.

● <li> listed item

  목록하위 항목으로 사용

(<ul> 또는 <ol> 테그의 하위에 위치/독립사용 불가)

☆ <ul>테그 하위요소로는 <li>가 위치한다.

● <dl> definition  list

 사전처럼 용어를 설명하는 목록을 만든다.

☆<dl> 테그는 하나 이상의 <dt>-<dd>쌍의 테그가 존재해야한다. 단, <dt>-<dd>테그가 꼭 하나의 짝으로 지어져야 하는 것은 아니다.

● <dt> 

 정의되는 용어의 제목을 넣을 때 사용한다.

● <dd>

 용어를 설명하는데 사용한다.

☆ <dt>-<dd> 테그는 독립적으로 사용불가

 

---

표(table) 테그 

 

학교	학과	동아리
국민대학교	소프트웨어학부	최고의 웹동아리

• <table> : 표
• <tr> : 행 
• <th> : 열의 제목
• <td> : 내용 셀

Table 기본테그

●  <table>

 표를만드는 테그, 표전체를 감싼다

●  <caption>

 표의 제목이나 설명을 작성하는 테그

●  <tr>

 표의 행을 의미하는 테그, 자식으로 <th>또는<td>테그가 반드시 있어야 한다.

●  <th>

 표의 제목 열을 의미하는 테그 ,부모 테그인 <tr>안에 있어야한다.

●  <td>

 표의 일반 열을 의미하는 테그, 부모테그인 <tr>안에 있어야한다.

 

Table 그룹 관련 테그

 

●  <colgroup>

 행의 그룹화. 보통 셀의 width값을 줄 때 사용.

●  <col>

 <colgroup> 의 자식으로 열 단위를 나눌 수 있다. span 속성을 사용하여 열을 그룹으로 묶을지 설정한다.

●  <thead>

 표의 머리 부분 / 표의 제목열들을 묶는 테그

●  <tbody> 

 표의 본문 부분 / 표의 일반적인 데이터를 묶는 테그

●  <tfoot> 

 표의 꼬리 부분 / 표의 하단부분을 묶는 테그

---

Sementic Elements

태그설명

<article>	글을 의미합니다.
<aside>	페이지의 내용 주변에 있는 내용을 의미합니다.
<details>	사용자가 볼 수 있거나 숨겨진 추가적인 세부사항을 의미합니다.
<figcaption>	<figure>의 설명을 의미합니다.
<figure>	일러스트, 도형, 사진, 코드같은 그 자체로 의미를 갖는 내용을 의미합니다.
<footer>	문서나 섹션의 꼬릿말을 의미합니다.
<header>	문서나 섹션의 머릿말을 의미합니다.
<main>	문서의 주된 내용을 의미합니다.
<mark>	마크되거나 하이라이트된 글을 의미합니다
<nav>	네비게이션 링크를 의미합니다.
<section>	문서의 섹션을 의미합니다.
<summary>	<details>를 위한 가시적인 제목을 의미합니다.
<time>	날짜나 시간을 의미합니다.

출처 : https://geonlee.tistory.com/96  

 

---

block Element

 

block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다. 

 

• block은 height와 width 값을 지정 할 수 있다.
• block은 margin과 padding을 지정 할 수 있다.

inline Elements

 

inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.)

 

• width와 height를 명시 할 수 없다.
• margin은 위아래엔 적용 되지 않는다.
• padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.

inline-block

 

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.

 

• 줄바꿈이 이루어지지 않는다.
• block처럼 width와 height를 지정 할 수 있다.
• 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.