<!DOCTYPE html> <!-- html5 버전-->
<!--
컨텐츠 주석문
<> : 태크
<여는태그> 내용(텍스트 | 태그) </닫는태그> : 엘리먼트
-->
<html> <!-- 모든 태그들의 부모(root 태그) -->
<head> <!-- 문서의 정보를 나타낸다. -->
<meta charset="utf-8"> <!-- 닫는 태그가 없는 태그는 컨텐츠(내용)이 필요없다 -->
</head>
<body> <!-- 페이지에 보여질 내용을 적는다. -->
<h1>H1~~~</h1>
</body>
</html>
<!-- ! 작성 후 엔터키 누르면 기본 구조 자동 완성 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 태그 연습1</title>
<!-- style : 문서내에서 이제 css가 시작된다는걸 브라우저에게 알려준다. -->
<style>
div, span {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- auto close tag, auto rename tag >> 태그명 변경시 닫는 태그를 같이 변경-->
<!-- h[1-6] : 문서의 중요 제목으로 사용
strong, em : 강조의 개념
b. i : 화면에서만 진하게 처리
-->
<div>안녕하세요 <em>장정현</em></div>
<div>안녕하세요 <i>장정현</i></div>
<div>안녕하세요 <strong>장정현</strong></div>
<div>안녕하세요 <b>장정현</b></div>
<h2>안녕하세요 <strong>장정현</strong></h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
<!-- br : 줄넘김 태그 -->
안녕하세요<br><br>
오늘은<br>
프론트<br>
수업하는<br>
날이에요<br>
<!-- p : 단락형 태그 -->
<p>오늘의 날씨는 흐림</p>
<!--
div : 영역 설정시 사용, 어떠한 스타일도 적용되지 않음
block 성질의 태그
한줄을 전체 사용
-->
<div>안녕하세요 - div1</div>
<div>안녕하세요 - div2</div>
<div>안녕하세요 - div3</div>
<!--
span : inline 성질의 태그
내용의 크기만큼만 사용
-->
<span>안녕 - span1</span>
<span>안녕 - span2</span>
<span>안녕 - span3</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#round > img {
border: 5px solid tomato;
opacity: .5;
}
#round > img:hover {
opacity: 1;
}
</style>
</head>
<body>
<!-- img : 인라인 형식 -->
<div>
<img src="../assets/images/song.jpg">
</div>
<div id="round">
<img src="../assets/images/song.jpg" width="200px" title="배우 송강">
</div>
<div id="bottom">
<img src="../assets/images/song1.jpg" width="200px"
alt="송강이 바라보고 있는 사진"
>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!--
ul : 정렬되지 않은 목록 - 메뉴 구성시 대부분 사용
ol : 정렬된 목록
li : 목록에 들어갈 데이터, block 형태
-->
<ul>
<li>Startcamp</li>
<ul>
<li>1일차 - 자바</li>
<li>2일차 - 프론트</li>
<li>3일차 - 자기소개, 특화프로젝트 경험</li>
</ul>
<li>Java 수업</li>
<li>Algo 수업</li>
</ul>
<ol>
<li>Startcamp</li>
<li>Java 수업</li>
<li>Algo 수업</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="top">TOP</div>
<!--
a(anchor) : 링크
- 링크를 걸어주는 엘리먼트
- 주로 사용되는 요소 : 텍스트 또는 이미지
href : 이동할 페이지 주소 또는 위치(#아이디)
-->
<div>
<a href="https://www.naver.com">네이버로 이동</a>
</div>
<div>
<a href="https://www.naver.com" target="_self">
네이버로 이동(_self)
</a>
</div>
<div>
<a href="https://www.naver.com" target="_black">
네이버로 이동(_black)
</a>
</div>
<div>
<a href="https://www.naver.com" target="black">
네이버로 이동(_black) : 사용자이름 정한 경우 지정된 이름 창에 띄운다.
</a>
</div>
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. In praesentium necessitatibus provident suscipit blanditiis, perspiciatis, eaque numquam doloribus dolorum dolore recusandae nulla, quasi similique asperiores? Molestias aut amet dolore ipsa.
Error repudiandae distinctio harum dignissimos pariatur ducimus ratione omnis odit reprehenderit atque maxime iste, quos corrupti quisquam natus expedita deserunt rerum! Modi porro eveniet officia optio. Repudiandae quo repellat natus!
Vel consequuntur magni consectetur quasi non perspiciatis modi, tempora id saepe optio neque fugit nostrum quis eius sed itaque tenetur, deleniti iste dolore doloribus sint dolorum! Sunt deserunt ducimus commodi.
Dolorem temporibus nam corrupti aspernatur impedit incidunt iure quaerat officia, animi, provident debitis ullam quibusdam. Tempore ullam eveniet aspernatur earum praesentium numquam illum labore tempora nisi, enim laborum facilis vel.
Neque sunt quas consequatur minus quisquam maxime ratione assumenda explicabo ipsam aliquam, in delectus impedit modi aliquid exercitationem eum. Quasi, accusamus quas. Eveniet laudantium aspernatur vero excepturi eius dolor recusandae?
Atque ab molestiae saepe. Maiores ut inventore quas? Aliquid, soluta nesciunt neque blanditiis aspernatur facilis quisquam saepe, veniam possimus recusandae sequi? Quisquam est doloremque beatae eligendi quae aliquid dolorem et!
Voluptate unde, incidunt rerum sed adipisci harum commodi quaerat, accusamus, quam ab provident perferendis soluta illo exercitationem odit. Fuga, atque. Placeat dolores doloribus veritatis doloremque temporibus nulla quae iusto laborum?
Cum sit aperiam eveniet, sunt, ipsam, doloribus totam nulla in natus nostrum et ad cumque ullam sint suscipit iusto consectetur perferendis omnis sequi impedit numquam voluptas mollitia voluptate maxime! Facere.
Sed, unde est soluta dolores illo voluptate vel amet aliquam dicta quibusdam? Quibusdam architecto sunt temporibus alias, voluptatibus laboriosam blanditiis reprehenderit porro? Consectetur eum consequatur quibusdam quidem eaque inventore aperiam.
Debitis nam sed consequatur ipsam unde nobis provident vel quam commodi et eveniet blanditiis quos, aliquam minima veritatis praesentium fugit fuga. Est similique dolorem sapiente amet aliquid laboriosam cumque nostrum?
Voluptatem beatae incidunt, itaque qui nulla eaque recusandae, vel harum iusto, consequuntur id impedit magni quisquam inventore voluptates. Corrupti deserunt recusandae sunt animi minus eveniet culpa maxime vel aliquid perspiciatis?
Illo quas adipisci praesentium exercitationem? Velit necessitatibus ipsa dolorum cumque deserunt molestiae dolorem cupiditate eveniet expedita. Blanditiis exercitationem eius architecto itaque molestiae quasi odit, possimus ipsam, molestias error quo placeat!
Officiis repudiandae culpa nam ut eaque natus laudantium dolorum ad aliquid, earum quam, molestias illo reprehenderit alias id sed. Recusandae ratione laudantium magni aut exercitationem doloribus mollitia similique esse labore?
Incidunt accusamus recusandae vero facere qui consequuntur error rerum repellendus suscipit dolore tenetur reprehenderit adipisci quis enim tempora placeat ducimus repudiandae, in voluptas facilis minima odit? Tenetur voluptates adipisci atque!
Quasi corrupti aperiam non minima unde esse perferendis id delectus sit sed earum, porro assumenda saepe blanditiis excepturi soluta quae quia nam aut, veniam suscipit aliquam dignissimos in illo. Maxime?
Suscipit quibusdam dolore debitis veniam, laudantium porro quidem? Ipsa, doloribus dolor in sequi ducimus aspernatur. Ipsum enim a minus suscipit quidem, dolor quo est dolorum, assumenda dicta tempora. Magnam, culpa?
Neque debitis repellat similique unde voluptatibus! Cumque, eum quaerat? Dicta voluptate ad sit. Voluptates asperiores soluta earum eligendi, dolores quae possimus eos obcaecati perferendis necessitatibus eaque voluptatibus harum praesentium natus.
Pariatur laborum reiciendis optio facere, delectus ipsa dignissimos unde illum iure cupiditate repellat, dolores enim quibusdam deserunt natus! Dolor fugit, laborum assumenda sint vero consectetur optio corporis sunt illum ex?
Illo quod aliquam provident ipsum, quaerat doloremque fugit modi, quae, beatae expedita veniam ab consequatur nesciunt eaque itaque! Doloribus itaque, quos magnam sint reprehenderit quibusdam fugit maiores voluptatibus accusantium. Repellendus.
Odit ipsum nemo aliquid nesciunt velit dolore, dignissimos odio tempora, corporis voluptatum eos eius, harum dolores ipsa. Numquam, doloribus! Facilis consectetur quam expedita vitae ad, enim mollitia neque officiis similique!
</h1>
<a href="#top">맨 위로</a>
<a href="#1" onclick="alert(1)">페이지 이동 없음 - 움직이지 않는다.</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
}
table, td, th {
border: 1px solid #3455;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
/* tbody를 자동으로 설정 */
table > tbody > tr > td {
background-color: beige;
}
</style>
</head>
<body>
<!--
table : 그리드 형태의 데이터 출력
tr : row (행)
th : header (컬럼의 정의)
td : data (컬럼)
tbody. thead. tfoot
-->
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table>
<tr>
<th>번호</th>
<th>이름</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>기안</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>지역</th>
<th>반</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>홍길동</td>
<td rowspan="2">대전</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>기안</td>
<td>7</td>
</tr>
<tr>
<td>3</td>
<td>덱스</td>
<td>구미</td>
<td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총 인원수</td>
<td colspan="3">2</td> <!-- 컬럼 확장 -->
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
선택자 {
속성 : 값;
속성 : 값;
속성 : 값;
}
-->
<style>
/* 선택자
전체 : *
아이디 : #
클래스 : .
태그 : 태그명
부모 자식 관계 활용 : >(바로 밑에있는 자식), " "(모든 자식)
형제 : +(바로 뒤쪽의 형제가 존재할 경우). ~(뒤에 있는 모든 형제)
그룹 : ,
*/
/* * {border: 1px solid #3455;} */
/* li {border: 1px solid #3455;} */
/* #a {border: 1px solid #3455;} */
/* .border {border: 1px solid #3455;} */
/* div > ul > li {border: 1px solid #3455;} */
/* h1 ~ h2 {border: 1px solid #3455;} */
/* h1, h2 {
border: 1px solid #3455;
padding: 10px;
} */
h1 {
font-size: 40px;
}
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<div>
<h1>CSS 선택자 연습</h1>
<h2 id="a">선택자의 종류</h2>
<div>
<h2>선택자 연습</h2>
<ul class="border">
<li>전체 선택자</li>
<ul>
<li>test1</li>
<li>test2</li>
</ul>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>태그 선택자</li>
</ul>
</div>
<h2>형제 css 선택자 연습중...</h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
border: 1px solid #345;
}
p {
text-align: left;
text-align: center;
text-align: right;
text-align: justify; /* 양쪽 정렬 */
padding: 50px; /* 상하좌우 */
padding: 5px 10px 5px 10px; /* 상 우 하 좌 */
padding: 50px 100px; /* 좌우, 상하 */
padding-left: 50px;
margin: 10px;
}
a {
text-decoration: none;
color: #345;
}
/* 커서를 올려놓을 경우 */
a:hover {
text-decoration: underline;
font-size: 1.2rem;
font-weight: bold;
}
.circle {
width: 100px;
height: 100px;
border: 3px solid #123456;
border-radius: 100%;
overflow: hidden;
}
.done {
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="circle">나의 프로필</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam dolore error perspiciatis pariatur inventore quam animi, nostrum natus? Assumenda veniam saepe esse, nisi neque sequi tempora quasi culpa provident ab iure obcaecati. Voluptatum, inventore non, dolore nihil enim optio maiores molestiae placeat, asperiores molestias adipisci numquam fugiat minima hic voluptatibus. Iste saepe modi veritatis quas error pariatur debitis commodi iure itaque voluptatibus tempora odit cumque dolores, quae nulla quidem consequatur aspernatur eius ipsum? Sint soluta voluptatem ipsum dolor at nobis cupiditate quae dolores voluptate magnam odit inventore voluptas iusto ut quas doloribus, sapiente cumque sed! Maiores a dolore repudiandae ducimus!</p>
<h2>나의 목표</h2>
<div>아침 운동하기</div>
<div class="done">인사하기</div>
<div class="done">저녁 수업 정리하기</div>
<div>산책하기</div>
<a href=""#123">안녕하세요</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 5px solid #345;
margin: 10px;
font-size: 40px;
}
.fr {
float: right;
}
.fc {
clear: both;
}
</style>
</head>
<body>
<!--
layout : table(X), float, inline-block, flexbox(현재 가장 많이 사용), gridflexbox(현재 가장 많이 사용)
-->
<p>
<div class="fr">1</div>
<div class="fr">2</div>
<div class="fc">3</div>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Bungee Spice', sans-serif;
}
.container {
width: 1000px;
margin: 10px, auto;
}
.header {
padding: 20px;
}
.content {
width: 800px;
float: left;
border: 1px solid black;
min-height: 500px;
}
.aside {
width: 200px;
float: left;
border: 1px solid black;
}
.footer {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic atque quasi inventore minus, quaerat culpa. Recusandae ipsam blanditiis adipisci tempora obcaecati maxime, voluptas est nam reiciendis a sit debitis, iure nostrum officiis ducimus doloremque. Unde, corporis explicabo accusamus, harum molestias blanditiis ex nam qui illum facilis provident delectus vel aliquam!</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</div>
</body>
</html>