5. HTML 위치 지정방식
2024. 10. 29. 05:43ㆍ파이썬(python)의 HTML
1. 패딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패딩</title>
<style>
div {
width: 200px;
height: auto;
background-color: deeppink;
color: white;
margin: 30px;
}
/* 위, 오른쪽, 아래, 왼쪽 */
#padding1 { padding: 10px 30px 20px 40px}
/* 위, 왼쪽 오른쪽, 아래 */
#padding2 { padding: 30px 20px 40px}
/* padding : 위, 아래, 왼쪽, 오른쪽*/
#padding3 { padding: 30px 20px}
/* padding : 위, 아래, 왼쪽, 오른쪽 동일 적용*/
#padding4 { padding: 30px}
</style>
</head>
<body>
<div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium excepturi quis beatae ab molestiae. Cumque magni dolores reprehenderit quam cupiditate? Consectetur laudantium aliquid molestias. Suscipit eos ut obcaecati quas inventore.</div>
<div id="padding2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium excepturi quis beatae ab molestiae. Cumque magni dolores reprehenderit quam cupiditate? Consectetur laudantium aliquid molestias. Suscipit eos ut obcaecati quas inventore.</div>
<div id="padding3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium excepturi quis beatae ab molestiae. Cumque magni dolores reprehenderit quam cupiditate? Consectetur laudantium aliquid molestias. Suscipit eos ut obcaecati quas inventore.</div>
<div id="padding4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium excepturi quis beatae ab molestiae. Cumque magni dolores reprehenderit quam cupiditate? Consectetur laudantium aliquid molestias. Suscipit eos ut obcaecati quas inventore.</div>
</body>
</html>
-->
결과화면
2. 테두리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리</title>
<style>
div {
width: 200px;
height: 100px;
margin: 20px;
padding: 30px;
border-width: 5px;
color: black;
border-style: solid;
}
#border2{ border-style: dotted;}
#border3{ border-style: dashed;}
#border4{ border-style: double;}
#border5{
border-color: gold;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
}
#border6 {border:3px dotted red}
</style>
</head>
<body>
<!--#border$*6-->
<div id="border1"></div>
<div id="border2"></div>
<div id="border3"></div>
<div id="border4"></div>
<div id="border5"></div>
<div id="border6"></div>
</body>
</html>
-->
결과화면
3. 마진
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마진</title>
<style>
* { padding: 0; margin: 0 }
div { width: 200px; height: 100px; background-color: deeppink;}
#margin1 { margin: 30px 50px 30px 50px; display: none;}
/*visibility는 남아있다 숨겨져있지만 */
#margin2 { margin: 30px 50px; visibility: hidden;}
/* margin : 새로 겹침 현상이 일어남 , 둘 중에 큰 값을 선택 */
#margin3 { margin: 50px;}
#margin4 { margin: 30px 5px 10px; }
#margin5 { margin: 30px auto;}
/*가로:266 세로:166 */
#boxsizing1 {padding: 30px; border: 30px solid blue; margin: 30px;}
#boxsizing2 {
box-sizing: border-box; padding: 30px; border: 30px solid blue; margin: 30px;}
</style>
</head>
<body>
<div id="margin1">1</div>
<div id="margin2">2</div>
<div id="margin3">3</div>
<div id="margin4">4</div>
<div id="margin5">5</div>
<hr>
<div id="boxsizing1">conten-box</div>
<div id="boxsizing2">border-box</div>
</body>
</html>
-->
결과 화면
4. 폼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼</title>
<style>
.input { box-sizing: border-box;
width: 100%;
padding: 10px 20px;
margin: 5px 0;
}
input[type='text'] {
border-radius: 20px;
}
input[type='text']:focus {
background-color: gold;
border: 3px dotted black;
}
input[type='password'] {
border: none;
border-bottom: 3px solid black;
}
input[type='password']:focus{
border-bottom: 3px dotted aqua;
}
select {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 5px 0;
border: 2px solid deeppink;
background-color: pink;
}
textarea {
box-sizing: border-box;
width: 100%;
resize: none;
height: 150px;
font-size: 20px;
}
button {
width: 150px;
background-color: forestgreen;
color: white;
padding: 15px 20px;
cursor: pointer;
text-align: center;
}
p#center { text-align: center;}
</style>
</head>
<body>
<form action="#">
<p>아이디 <input type="text" class="input" maxlength="20" placeholder="아이디를 입력하세요"></p>
<p>비밀번호 <input type="password"class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
<p>직업
<select>
<option value="프로그래머">프로그래머</option>
<option value="공무원">공무원</option>
<option value="전문직">전문직</option>
<option value="학생">학생</option>
<option value="취준생">취준생</option>
</select>
</p>
<p><textarea></textarea></p>
<p id="center"><button>회원가입</button></p>
</form>
</body>
</html>
-->
결과 화면
5. 상대위치 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상대 위치 지정방식</title>
<style>
div { width: 200px; padding: 20px}
#relative1 { background-color: deeppink;}
#relative2 {
background-color: deepskyblue;
position: relative;
left: 300px;
top: 100px;
}
#relative3 {
background-color: gold;
position: relative;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<!--정적 위치 지정방식(static position)
HTML 요소의 위치를 결정하는 기본적인 방식
상대 위치 지정방식(relative position)
정적 위치 지정방식을 기준으로 위치를 재설정하는 방식
-->
<!-- #relative${상대위치지정방식$}*3 -->
<div id="relative1">상대위치지정방식1</div>
<div id="relative2">상대위치지정방식2</div>
<div id="relative3">상대위치지정방식3</div>
</body>
</html>
-->
결과 화면
6. 고정위치 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고정 위치 지정방식</title>
<style>
#fx {
position: fixed;
width: 100px;
height: 200px;
background-color: gold;
right: 10px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="fx"></div>
<div id="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam dolorum porro eligendi optio, excepturi nemo reiciendis enim rem molestias laboriosam adipisci ullam quidem consequuntur nesciunt debitis, odio error, culpa accusantium.</p>
</div>
</body>
</html>
-->
결과화면
더보기
스크롤시에도 고정 되어있다.
7. 스티키 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스티키 지정방식</title>
<style>
html, body {margin: 0; padding: 0;}
.header { height: 80px; background-color: gold;}
.container {display: flex; flex-flow: row nowrap;}
.content {
width: 80%;
height: 800px;
background-color: deepskyblue;
}
.sidebar {
position: sticky;
top: 50px;
width: 20%;
background-color: deeppink;
height: 600px;
}
.footer {
background-color: yellowgreen;
height: 100px;
}
</style>
</head>
<body>
<!--
시맨틱 태그 : HTML 문서의 구조와 의미를 명확하게 나타내는 역할, 검색엔진 접근성 개선
<header> : 헤더, 페이지의 머리글, 네비게이션 메뉴 등을 포함
<footer> : 페이지의 꼬리글, 저작권 정보, 연락처, 링크등을 포함
<nav> : 메뉴를 구성
<aside> : 컨텐츠와 관련성이 적은 보조 컨텐츠. 광고나 사이드바
<section> : 컨텐츠의 주제별 섹션을 정의. 여러개의 주제를 다룰 때
<article> : 독립적으로 배포 가능하거나 재사용할 수 있는 컨텐츠
<main> : 문서의 주요 컨텐츠 부분
-->
<!-- <div class="header">헤더</div>
<div class="container">
<div class="content">메인 컨텐트</div>
<div class="sidebar">sticky 적용</div>
</div>
<div class="footer">푸터</div> -->
<header class="header">헤더</header>
<main class="container">
<section class="content">메인 컨텐트</section>
<aside class="sidebar">sticky 적용</aside>
</main>
<footer class="footer">푸터</footer>
</body>
</html>
-->
결과 화면
8. 절대위치 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>절대위치 지정방식</title>
<style>
/* 절대 위치 지정방식의 부모가 static 지정방식일 경우 body를 기준으로 좌표를 설정하게 됨*/
#wrap {
/* relative는 요소들이 겹칠수가 있다*/
position: relative;
width: 500px;
height: 400px;
border: 3px solid red;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
#ab1 { top: 0; right: 0;}
#ab2 { bottom: 0; left: 0;}
#ab3 { bottom: 0; right: 0;}
#ab4 { top: 100px; left: 200px;}
div#wrapper{ position: relative; }
/* z-index :숫자가 클수록 위쪽에 위치함 */
#b1 { left: 30px; top: 30px; background-color: deeppink; z-index: 10;}
#b2 { left: 40px; top: 40px; background-color: gold; z-index: 5;}
#b3 { left: 50px; top: 50px; background-color: yellowgreen; z-index: 7;}
</style>
</head>
<body>
<!-- #wrap>.box#ab$*5 -->
<div id="wrap">
<div class="box" id="ab1"></div>
<div class="box" id="ab2"></div>
<div class="box" id="ab3"></div>
<div class="box" id="ab4"></div>
<div class="box" id="ab5"></div>
</div>
<hr>
<!-- #wrapper -->
<div id="wrapper">
<!-- #b$.box{$번째 div}*3 -->
<div id="b1" class="box">1번째 div</div>
<div id="b2" class="box">2번째 div</div>
<div id="b3" class="box">3번째 div</div>
</div>
</body>
</html>
-->
결과 화면
9. float 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
img { float: left; margin-right: 20px; margin-bottom: 20px;}
hr {clear: both;}
div { padding: 20px; }
#box1 {
background-color: gold;
float: left;
margin-right: 20px;
}
#box2 {
background-color: deeppink;
float: left;
margin-right: 20px;
}
#box3 {
background-color: greenyellow;
float: left;
margin-right: 20px;
}
#box4 {
background-color: deepskyblue;
float: left;
margin-bottom: 20px;
}
p {
padding: 10px;
text-align: center;
font-size: 20px;
}
#p1 { width: 38%;
background-color: gold;
float: left;
margin-bottom: 20px;
}
#p2 {
width: 53%;
background-color: deepskyblue;
float: right;
}
#p3 {
clear: both;
background-color: deeppink;
}
</style>
</head>
<body>
<img src="./winter1.png" alt="겨울"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ut eius, assumenda dolore adipisci beatae necessitatibus suscipit obcaecati possimus sit earum odit accusantium, ipsam aut modi in dolores ab esse?
<hr>
<!-- #box${박스$}*4 -->
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
<hr>
<!-- #p$*3>p -->
<div id="p1">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis incidunt libero atque commodi ducimus quasi fugiat odit sequi, voluptas expedita quaerat rerum architecto veritatis similique ipsum optio eaque aliquam accusantium.</p>
</div>
<div id="p2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem tempore culpa iure nostrum nulla porro alias harum cumque magni illo. Incidunt eligendi ducimus similique fugit in quisquam alias, sapiente est.</p>
</div>
<div id="p3">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore vel adipisci esse ipsum suscipit natus laborum ullam sit aliquam similique sunt voluptates est, nemo, quas non. Voluptate modi delectus saepe.</p>
</div>
</body>
</html>
-->
결과 화면
10. 2단 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단 레이아웃</title>
<link rel="stylesheet" href="./layout1.css">
<style>
</style>
</head>
<body>
<div class="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<main id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos ratione temporibus deleniti itaque ex, molestiae voluptate necessitatibus cupiditate ducimus dolore explicabo distinctio, atque deserunt iusto soluta nesciunt reprehenderit sequi!</p>
</main>
<aside id="sidebar">
<p>사이드바</p>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo impedit officia, possimus, sed odio commodi fugit enim porro ratione hic numquam aliquid modi. Ut, veniam obcaecati ratione repellat similique dicta.
</li>
</ul>
</aside>
<footer id="footer">
<h2>푸터</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam necessitatibus ipsa aut officia iste praesentium voluptatem minus, a sed nemo harum corrupti dolorem vitae deserunt molestiae? Sed possimus dicta laudantium?</p>
</footer>
</div>
</body>
</html>
10-1.layout1.css 파일
#container {
width: 1000px;
margin: 0 auto;
}
header {
border: 1px solid gray;
padding: 20px;
background-color: deeppink;
margin-bottom: 20px;
}
main#contents {
border: 1px solid gray;
width: 700px;
padding: 20px;
background-color: deepskyblue;
float: left;
}
aside#sidebar {
border: 1px solid gray;
width: 200px;
padding: 20px;
background-color: gold;
float: right;
margin-bottom: 20px;
}
footer#footer {
clear: both;
border: 1px solid gray;
padding: 20px;
background-color: greenyellow;
}
-->
결과 화면
11. 3단 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3단 레이아웃</title>
<link rel="stylesheet" href="./css/layout2.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<aside id="left-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</aside>
<main id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolorem necessitatibus adipisci laboriosam nisi eius voluptas deleniti sunt aperiam! Reiciendis, aperiam adipisci! Voluptates aperiam est atque fugit tempore at autem.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolorem necessitatibus adipisci laboriosam nisi eius voluptas deleniti sunt aperiam! Reiciendis, aperiam adipisci! Voluptates aperiam est atque fugit tempore at autem.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolorem necessitatibus adipisci laboriosam nisi eius voluptas deleniti sunt aperiam! Reiciendis, aperiam adipisci! Voluptates aperiam est atque fugit tempore at autem.</p>
</main>
<aside id="right-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</aside>
<footer id="footer">
<h2>푸터</h2>
<p>저작권 정보</p>
<p>연락처 등</p>
</footer>
</div>
</body>
</html>
11-1. layout2.css
#container {
width: 1000px;
margin: 0 auto;
}
header {
border: 1px solid gray;
padding: 20px;
background-color: deeppink;
margin-bottom: 20px;
}
main#contents {
border: 1px solid gray;
width: 535px;
padding: 20px;
background-color: deepskyblue;
margin-bottom: 20px;
float: left;
}
aside#left-sidebar {
border: 1px solid gray;
width: 150px;
padding: 20px;
background-color: gold;
float: left;
margin-right: 20px;
}
aside#right-sidebar {
border: 1px solid gray;
width: 150px;
padding: 20px;
background-color: gold;
float: right;
}
footer#footer {
clear: both;
border: 1px solid gray;
padding: 20px;
background-color: greenyellow;
}
-->
결과 화면
12. 다단 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다단 레이아웃</title>
<style>
/* div, h2, p {margin: 0; padding: 0;} */
h2 {
padding: 0 0 20px; text-align: center;}
div#col {
background-color: gold;
border: 3px solid red;
column-count: 3;
column-gap: 30px;
column-rule: 3px dashed red;
padding: 20px;
}
</style>
</head>
<body>
<!--div>h2+p-->
<div id="col">
<div id="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio vero possimus magni dignissimos facere corrupti et pariatur iure vel doloribus nesciunt, ad architecto exercitationem repellat temporibus accusantium sed. Veniam, nemo.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio vero possimus magni dignissimos facere corrupti et pariatur iure vel doloribus nesciunt, ad architecto exercitationem repellat temporibus accusantium sed. Veniam, nemo.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio vero possimus magni dignissimos facere corrupti et pariatur iure vel doloribus nesciunt, ad architecto exercitationem repellat temporibus accusantium sed. Veniam, nemo.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio vero possimus magni dignissimos facere corrupti et pariatur iure vel doloribus nesciunt, ad architecto exercitationem repellat temporibus accusantium sed. Veniam, nemo.
</p>
</div>
</div>
</body>
</html>
-->
결과 화면
728x90
LIST
'파이썬(python)의 HTML' 카테고리의 다른 글
| 6. HTML 방식 (2) | 2024.10.29 |
|---|---|
| 4. CSS 관련 모음집 (6) | 2024.10.28 |
| 3. HTML 태그 (0) | 2024.10.25 |
| 2. VS Code(Visual Studio Code) 설치 (16) | 2024.10.24 |
| 1. HTML(HyperText Mark-up Language) (3) | 2024.10.24 |