아래 element를 직접 써면서 구현해보기
https://chsususua.tistory.com/147
[기본기 만들기] HTML element 정리_미완성
HTML element를 공부하고자 찾다가 좋은 블로그가 있어서 이를 바탕으로 간단하게 정리를 해보았다. 아직 미완이기 때문에 비어있는 곳도 많고 더 찾아야 하는 것들도 많다.. 이걸 기반으로 직접 코
chsususua.tistory.com
1. 구현화면
2. HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css-test.css"/>
<meta name="viewport" content="width=device-width">
<title>practice</title>
</head>
<body>
<h1> element 구현 </h1>
<div class="all">
<div class="h">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p> 일반 text </p>
</div>
<hr/>
<article class="article">
<figure>
<figcaption>figure/figcaption/img 설명</figcaption>
<img src="./스크린샷 2023-01-18 오후 3.13.37.png" alt="이미지가 나오지 않을 때 대체텍스트" width="200px" />
</figure>
<P> 새로운 문단! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하!</P>
<p> 새로운 문단!! abcdefghijklmnopqrstuvwxyz! abcdefghijklmnopqrstuvwxyz! </p>
</article>
<hr/>
<div class="list">
<ol class="li">
<li>list 내용</li>
<li>list 내용</li>
<li>list 내용</li>
</ol>
<ul class="li">
<li>list 내용</li>
<li>list 내용</li>
<li>list 내용</li>
</ul>
<dl class="li">
<dt>주제주제</dt>
<dd>내용내용</dd>
<dd>내용내용</dd>
</dl>
</div>
<hr/>
<div>
<pre>pre/ 특정 서식이 적용: 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하!</pre>
<blockquote>blockquote/ 인용문: 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하!</blockquote>
<div class="inline">
<p>[inline]</p>
<q>q: 짧은 인용문/ ""- 자동생성</q>
<br/>
<a href="#" target="blank">a: 링크</a>
<br/>
<abbr title="HyperText Markup Language">abbr: HTML</abbr>
<br/>
<b>b: 문체가 다른 글자 범위 설정</b>
<br/>
<mark>mark: 관련성 보여주기</mark>
<br/>
<em>em: 강조</em>
<br/>
<strong>strong: 보다 강한 강조</strong>
<br/>
<i>주위와 다르게 표시, 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시</i>
<br/>
<dfn>dfn: 용어정의</dfn>
<br/>
<cite>cite: 저작물 출처/ a랑 같이 사용되는 듯</cite>
<br/>
<u>u: 밑줄</u>
<br/>
<del>del: 삭제된 내용(취소선/중간선) </del>
<br/>
<ins>ins: 추가된 내용 </ins>
<br/>
<code>code: 짧은 코드 감싸기</code>
<br/>
<kbd>kbd: 컴퓨터 키보드 키</kbd>
<br/>
<sup>sup: 위첨자</sup> text <sub>sub: 아래첨자</sub>
<br/>
<time datetime="12-25">크리스마스(time datetime="12-25")</time>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
3. CSS
html {
font-family: sans-serif;
}
.all{
column-count: 4;
border: 0px ;
}
div, article, figure {
border: 1.5px solid rgb(202, 202, 202);
break-inside: avoid;
}
div div {
padding: 3%;
}
.inline {
margin: 5px;
}'개인공부' 카테고리의 다른 글
| [기본기다지기] 클릭수에 따른 인기차트 업데이트_HTML/CSS/JS (1) | 2023.02.03 |
|---|---|
| [기본기 다지기] todo-list만들기_HTML,CSS,JS (0) | 2023.01.25 |
| [기본기 다지기] 영단어 이어말하기 게임_HTML, CSS, JS (0) | 2023.01.18 |
| [기본기 다지기] '글자수 세기' 만들기_HTML,CSS,JS_수정완료! (0) | 2023.01.17 |
| [기본기 만들기] HTML element 정리_미완성 (0) | 2023.01.17 |