Skip to content
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

[kkangmen] 프론트엔드 1주차 미션 제출합니다. #1

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

[kkangmen] 프론트엔드 1주차 미션 제출합니다. #1

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5b8cd11
HTML 3강까지 정리
kkangmen Nov 16, 2024
caf9c5c
test
kkangmen Nov 18, 2024
97e0a38
계산기
kkangmen Nov 20, 2024
fe09d7b
test
kkangmen Nov 20, 2024
030f1e5
계산기 구현
kkangmen Nov 20, 2024
43b776c
mission3
kkangmen Nov 20, 2024
b51875b
CSS 정리
kkangmen Nov 21, 2024
8d321ac
Javascript 정리
kkangmen Nov 21, 2024
8369ab2
route 설치
kkangmen Nov 21, 2024
a4ae1eb
버튼 누르면 인사말 출력
kkangmen Nov 21, 2024
f7b38ab
test
kkangmen Nov 25, 2024
9ff5195
test1
kkangmen Nov 25, 2024
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
190 changes: 190 additions & 0 deletions mission1/CSS3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
# CSS 기본 문법 정리

### universal_selector

```css
<!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>
/* CSS선택자
전체선택자 (*) */
* {
color: lightblue;
font-size: x-large;
}
</style>
</head>
<body>
<header>제목</header>
<main>내용</main>
<footer>참조</footer>
</body>
</html>
```

### class_selector

```css
<!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>
.color-red {
color: red;
}
.color-blue {
color: blue;
}
.color-main {
color: white;
background-color: green;
}
</style>
</head>
<body>
<p class="color-red">빨간색 글자입니다.</p>
<p class="color-blue">파란색 글자입니다.</p>
<span class="color-main">네이버</span>
</body>
</html>
```

### tag_selector

```css
<!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>
a {
text-decoration: none;
}

.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- 태그선택자 -->
<!-- 태그명을 선택자로 사용 -->
<!-- 해당하는 태그에 동일한 디자인 적용 -->
<a href="">링크1</a>
<a href="">링크2</a>
<a href="" class="underline">링크3</a>
</body>
</html>
```

### id_selector

```css
<!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>
/* id 선택자 */
/* 선택자 앞에 # + id 속성값 */
#container {
width: 400px;
height: 500px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="container">컨테이너 박스</div>
</body>
</html>
```

### display_flexbox

```css
<!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>
.container {
border: 3px dotted green;
display: flex;
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-direction: row-reverse; */
}
.item {
background-color: black;
border: 1px solid red;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html>
```

### box_sizing

```css
<!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-bb,
.box-cb {
width: 300px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid greenyellow;
}
.box-cb {
box-sizing: content-box;
}
.box-bb {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box-cb">CSS 박스 모델:content-box</div>
<div class="box-bb">CSS 박스 모델:border-box</div>
<div style="width: 100%; height: 200px; background-color: green">
<div
style="
width: 50%;
max-width: 900px;
min-width: 200px;
height: 50%;
background-color: red;
"
></div>
</div>
</body>
</html>
```
51 changes: 51 additions & 0 deletions mission1/HTML5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# HTML 기본 문법 정리

### Semantic 태그 ('의미'와 '관련성'을 지닌 태그)

- header: 헤더를 의미한다.
- nav: 내비게이션을 의미한다.
- aside: 사이드에 위치하는 공간을 의미한다.
- section: 본문의 여러 내용(article)을 포함하는 공간을 의미한다.
- article: 본문의 주내용이 들어가는 공간을 의미한다.
- footer: 푸터를 의미한다.

### 텍스트 관련 태그

- <code>em:</code> emphasized text 지정 (Italic체로 표현됨)<br>
ex) <em>This text is emphasized
- <code>mark:</code> highlighted text 지정(노란색 형광팬 표시)<br>
ex) HTML <mark>Marked</mark> Formatting
- <code>ins:</code> inserted text 지정(밑줄 표시)<br>
ex) My favorite color is <ins>green</ins>.
- <code>hr:</code> 수평줄을 삽입한다. (Markdownd의 #와 같음)<br>

### HTML의 핵심 개념인 Hyperlink

#### 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능

- Target 어트리뷰트 <br>
1. <code>\_self:</code>링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다.(기본값)
2. <code>\_blank:</code>링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다.
ex) <a href="www.naver.com" target="_blank">네이버</a>

### 사용자와의 커뮤니케이션을 위한 폼태그

- Form 태그

1. <code>action:</code> 입력 데이터가 전송될 URL 지정
2. <code>method:</code> 입력 데이터 전달 방식 지정(get/post)
ex) <\form action="www.naver.com" method = "get">

- Input 태그
1. <code>button:</code>
ex) '
<input type="button" value="Click me">
'
2. <code>checkbox:</code>
ex) <input type="checkbox" name="fruit" value="grape"> 포도
3. <code>datetime:</code>
ex) <input type="datetime">

### 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그

- header, nav, aside, section, article, footer
Loading