Skip to content

1주차 미션1 완료 #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yewon20804 merged 7 commits into from
Apr 1, 2026
Merged

1주차 미션1 완료 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3e584e7
1주차 미션1 완료
yoona24 Mar 21, 2026
bf5ce14
1주차 미션1 완료
yoona24 Mar 22, 2026
7444bad
refactor: 페이지 이름 수정
yoona24 Mar 25, 2026
ec5c91d
refactor: 언어설정 'ko'로 변경
yoona24 Mar 25, 2026
464ee84
refactor: 주석 삭제
yoona24 Mar 25, 2026
413de89
refactor: 중복 정의 수정
yoona24 Mar 25, 2026
1b4e8ec
chore: yona 폴더 제거
yoona24 Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added week0/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added week0/ch.0/.DS_Store
View file
Open in desktop
Binary file not shown.
23 changes: 23 additions & 0 deletions week0/ch.0/BoxSizing1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div class="box box1">border-box</div>
<div class="box box2">content-box</div>
</body>

</html>
25 changes: 25 additions & 0 deletions week0/ch.0/BoxSizing2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
margin-bottom: 10px;
padding: 10px;
border: 10px solid red;
}
</style>
</head>

<body>
<div class="box box1">border-box</div>
<div class="box box2">content-box</div>
</body>

</html>
28 changes: 28 additions & 0 deletions week0/ch.0/Flex.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
margin: 0;
}

.box {
width: 300px;
background-color: green;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

<div class="box">
<p>가운데 정렬</p>
</div>

</body>
</html>
27 changes: 27 additions & 0 deletions week0/ch.0/Grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: grid;
place-items: center;
height: 600px;
margin: 0;
}

.box {
width: 300px;
background-color: green;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

<div class="box">
<p>가운데 정렬</p>
</div>

</body>
</html>
21 changes: 21 additions & 0 deletions week0/ch.0/Margin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
margin: 0 auto;
text-align: center;
background-color: green;
padding: 20px;
}
</style>
</head>
<body>

<div class="box">
<p>가운데 정렬</p>
</div>

</body>
</html>
18 changes: 18 additions & 0 deletions week0/ch.0/TextAlign.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style>
.box {
text-align: center;
background-color: green;
}
</style>
</head>
<body>

<div class="box">
<p>가운데 정렬</p>
</div>

</body>
</html>
31 changes: 31 additions & 0 deletions week0/ch.0/Translate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 600px;
margin: 0;
position: relative;
}

.box {
width: 300px;
background-color: green;
padding: 20px;
text-align: center;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="box">
<p>가운데 정렬</p>
</div>

</body>
</html>
39 changes: 39 additions & 0 deletions week0/ch.0/absolute.html
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@yewon20804 yewon20804 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 0주차 미션과 1주차 미션이 동일한 PR에 묶여서 제출되었는데 다음번부터는 아래 중 한 방법으로 분리해주시면 좋을 것 같습니다 😄

브랜치 분리: week0/yona-m1, week1/yona-m1 처럼 주차별 브랜치를 따로 만들어 PR 분리
커밋 메시지 구분: 하나의 브랜치에서 작업하더라도 [0주차] 미션1 완료, [1주차] 미션1 완료 처럼 커밋 메시지로 구분

Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/** 전체 선택자 기본적으로 설정된 마진을 없앰. */
* {
margin: 0;
box-sizing: border-box;
}

.box1 {
width: 500px;
height: 500px;
background-color: purple;
color: white;
position: relative;
}

.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>

<body>
<div class="box1">BOX1</div>
<h1 class="box2">BOX2</h1>
</body>

</html>
57 changes: 57 additions & 0 deletions week0/ch.0/fixed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position: Sticky</title>
<style>
* {
box-sizing: border-box;
margin: 0;
}

.container {
width: 100%;
height: 100%;
padding: 10px;
background-color: greenyellow;
}

.box {
width: 80px;
height: 80px;
margin-bottom: 20px;
background-color: lightgoldenrodyellow;
}

.box2 {
background-color: purple;
position: fixed;
top: 40px;
}
</style>
</head>

<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div class="box box13"></div>
<div class="box box14"></div>
<div class="box box15"></div>
<div class="box box16"></div>
</div>
</body>

</html>
50 changes: 50 additions & 0 deletions week0/ch.0/html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<!--이 문서는 HTML5로 작성되었다는 선언문-->
<html lang="en">
<!--웹 문서의 시작을 알리는 태그, 문서의 기본 언어가 영어-->
<head>
<!--문서의 설정,정보를 담는 부분-->
<meta charset="UTF-8">
<!--글자 인코딩 방식, UTF-8은 한글,영어,이모지까지 폭넓은 지원-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--인터넷 익스플로러에서도 최신 엔진을 사용하도록 지정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--모바일.태블릿 화면 크기에 맞게 콘텐츠 조정-->
<title>내 첫 번째 웹페이지</title>
<!--웹 브라우저 탭에 표시되는 제목-->
</head>
<body>
<!--실제 화면에 보이는 내용/텍스트,이미지,버튼,링크 등 모든 콘텐츠 여기에-->
<div>나는 요나. HTML 공부 시작한다.</div>
</body>
</html>

<!--멀티미디어 태그 예시-->
<img src="profile.jpg" alt="프로필사진">
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="music.mp3" type="audio/mp3">
</audio>

<!-- p (paragraph 단락,절) 시작/종료 태그로 이루어짐-->
<p>내용</p>

<!-- <태그 속성1='값1' 속성2='값2'>콘텐츠 보이는 요소</태그> -->
<p class="highlight" id="intro">안녕하세요!</p>
<img src="matthew.jpg" alt="매튜 사진" width="200">
<a href="http://www.youtube.com" target="_blank"></a>

<!--태그 안에 태그 중첩 요소-->
<p>안녕하세요 <strong>고구마!</strong></p>
<div>
<h2>제목</h2>
<p>내용이 들어갑니다.</p>
</div>

<!--콘텐츠가 없는 태그도 사용가능-->
<img src="sweet-potato.png" alt="고구마" />
<br />
<hr />
<!--콘텐츠가 없는 태그들은 스스로 닫힘-->
13 changes: 13 additions & 0 deletions week0/ch.0/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>고구마 아이스크림 맛있다.</h1>
<!--h1은 브라우저에서 자동으로 글자 크기를 크고 굻게 표시해줌 or 사용자가 브라우저 설정에서 바꿔둔 스타일대로 적용-->
<div>고구마 아이스크림 맛있다.</div>
</body>
</html>
29 changes: 29 additions & 0 deletions week0/ch.0/relative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
color: white;
box-sizing: border-box;
position: relative;

bottom: -150px;
right: 0px;

}
</style>
</head>

<body>
<div class="box">BOX</div>
<h1>고구마 상자</h1>
</body>

</html>
Loading