티스토리에 적었던 내용 벨로그에 옮김
inline tag
🚩 Font tag
<font>
📝 설명
- 폰트를 나타낼 때 사용
- 글자의 정확한 크기를 알 수 없어서 자주 사용되지 않음
✒️ 사용법
🔧속성
-
size
- 글자의 크기를 지정하는 속성
-
face
- 컴퓨터 내에 설치되어 있는 폰트에 한해 사용 가능하다.
- 모든 컴퓨터에 같은 폰트가 설치되어 있지 않으므로 작업에는 사용하지 않음!
-
color
- 글씨의 색상을 변경하고 싶을 때 사용
✍ 입력
<font>폰트 태그</font>
<font size="1">글자의 크기를 지정해 봅시다. 1~7까지 존재. size="1"</font><br>
<font face="궁서체">서체를 지정해 봅시다.</font><br>
<font color="lime">다양한 색상을 적용시켜 봅시다.</font><br>
글씨에 <font size="5" color="#6699ff">다양한 옵션을 동시에 사용</font>해 봅시다.💻 출력
폰트 태그
글자의 크기를 지정해 봅시다. 1~7까지 존재. size="1"
서체를 지정해 봅시다.
다양한 색상을 적용시켜 봅시다.
글씨에 다양한 옵션을 동시에 사용해 봅시다.
🚩 문단 정렬
block tag
<p>
📝 설명
- 한 묶음. 한 문단을 나타낼 때 사용하는 태그
✒️ 작성법
✍ 입력
<p>우리가 몰랐던 이유는 우주먼지가 맨눈으로 관찰하기에는 아주 작고, 월등히 많이 발생하는 지구의 다른
먼지들과 섞여 있기 때문이다. 과학자들은 지구에서 우주먼지를 찾기 위해 두 가지 방법을 주로 사용하고 있다.
지구먼지가 적은 성층권에 비행기를 띄우거나, ‘청정구역’ 남극에서 찾는 것이다.</p>💻 출력
우리가 몰랐던 이유는 우주먼지가 맨눈으로 관찰하기에는 아주 작고, 월등히 많이 발생하는 지구의 다른 먼지들과 섞여 있기 때문이다. 과학자들은 지구에서 우주먼지를 찾기 위해 두 가지 방법을 주로 사용하고 있다. 지구먼지가 적은 성층권에 비행기를 띄우거나, ‘청정구역’ 남극에서 찾는 것이다.
<div>
📝 설명
- 영역을 지정할 때 사용하는 태그
- div 태그 자체에는 여백이 없다.
✒️ 작성법
✍ 입력
<div></div><blockquote>
📝 설명
- 들여쓰기 기능으로 중첩이 가능하다. (여러번 사용 가능)
- 주로 인용 문구를 적을때 사용된다.
✒️ 작성법
✍ 입력
텍스트를 <mark>강조하거나, 하이라이트를 표시</mark>하고 싶을때 사용💻 출력
텍스트를 강조하거나, 하이라이트를 표시하고 싶을때 사용
🚩 block vs inline
block
📝 설명
- 화면 너비의 전체를 차지함
- 여백을 지정하고 싶으면 margin을 주어서 지정해야 함. ex) margin: auto; (width 가운데정렬)
inline
📝 설명
- 해당 영역만 차지함
- 여백을 지정하고 싶으면 align을 사용할 수 있음
🚩 List tag
목록을 나타내는 태그.
리스트마다 <li>를 사용해야 함. 주로 아래 태그들로 감싸서 사용 가능하고, 중첩하여 사용할때마다 들여쓰기가 된다.
list-style-type을 사용하여 리스트 기호를 변경하거나 없앨 수 있다.
<ol>
📝 설명
- 1부터 순서대로 목록을 나타낼때 쓰는 태그. (기본 적용)
- 적용 가능한 style type은 type="I(로마 대문자), i(로마 소문자), A(영어 대문자), a(영어 소문자)" 가 있다.
- start를 사용하여 시작 순서를 바꿀 수 있다.
✒️ 작성법
✍ 입력
<ol>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ol>💻 출력
- 포도
- 딸기
- 키위
<ul>
📝 설명
- 기호를 사용하여 목록을 나타낼때 쓰는 태그
- 적용 가능한 style type은 type="disc(기본), circle(빈 원), square(사각형), none"이 있지만 거의 none을 사용한다.
- 기본으로 현재 설명과 같은 기호로 적용된다.
✒️ 작성법
✍ 입력
<ul>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ul>💻 출력
- 포도
- 딸기
- 키위
<li>
📝 설명
- 리스트를 나타낼 때 사용한다.
- 주로 <ol>과 <ul>로 감싸서 사용한다.
✒️ 작성법
✍ 입력
<ol>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ol>
<ul>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ul>💻 출력
- 포도
- 딸기
- 키위
- 포도
- 딸기
- 키위
🚩 Description List
<dl>
📝 설명
- 설명목록으로, 정의할 때 사용
<dt>
📝 설명
- <dl>안에 제목을 적을 때 사용
<dd>
📝 설명
- <dl>안에 설명을 적을 때 사용
✒️ 작성법
✍ 입력
<dl>
<dt>몰티즈<sup>Maltese</sup></dt>
<dd><strong>크기</strong> 초소형</dd>
<dd><strong>출신</strong> 이탈리아</dd>
<dd><strong>체고</strong> 26cm이하</dd>
<dd><strong>체중</strong> 2~3kg</dd>
<dd><strong>색상</strong> 흰색</dd>
<dd><u>몰티즈</u>는 몰타 섬이 고향으로 알려진 소형견으로 앙증맞은 외모와 애교 넘치는 성격, 흰 털로 많은 사랑을 받는 반려견이다.</dd>
</dl>💻 출력
몰티즈Maltese 크기 초소형 출신 이탈리아 체고 26cm이하 체중 2~3kg 색상 흰색 몰티즈는 몰타 섬이 고향으로 알려진 소형견으로 앙증맞은 외모와 애교 넘치는 성격, 흰 털로 많은 사랑을 받는 반려견이다.
공부하는 벨로그