Skip to content

Commit 5c6e9d2

Browse files
ChoiKangMChoiKangM
committed
edit frontend.md markdown
1 parent a165f69 commit 5c6e9d2

File tree

5 files changed

+56
-39
lines changed

5 files changed

+56
-39
lines changed

‎frontEnd.md

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
> Header에는 로고와 검색창 그리고 nav가 들어갑니다.
66
77

8-
우선 `index.html`파일을 하나 만들어봅시다.
8+
우선 `index.html`파일을 하나 만들어봅시다.
9+
`index.html`
910
```html
1011
<!DOCTYPE html>
1112
<html>
@@ -27,16 +28,16 @@
2728
</body>
2829
</html>
2930
```
30-
`<header>`에 2개의 `div`와 `nav`를 만들어줍니다.<br>
31-
첫 번째 `div`에 `class="logo"`
31+
`<header>`에 2개의 `div`와 `nav`를 만들어줍니다.
32+
첫 번째 `div`에 `class="logo"`
3233
두 번째 `div`에 `class="search"`라고 이름을 지어줍니다.
3334

3435
```html
3536
<div class="logo">
3637
<img src="images/instagrams.png" alt="" class="instagram_logo">
3738
</div>
3839
```
39-
`img`를 넣어주고 `class="instagram_logo"`라는 이름을 붙여줍니다. <br>
40+
`img`를 넣어주고 `class="instagram_logo"`라는 이름을 붙여줍니다.
4041
나중에 이 `class`이름을 통해 크기를 조정할 수 있어요.
4142

4243
```html
@@ -56,13 +57,14 @@
5657
</ul>
5758
</nav>
5859
```
59-
`ul`과 `li`를 통해 nav를 만듭니다. <br>
60-
인스타를 보면 이미지로 되어있죠? 우리도 이미지를 넣어보도록 하겠습니다.<br>
61-
그리고 크기를 조절하기 위해 `class="logo_img"`라는 이름을 미리 붙여줍니다.<br>
60+
`ul`과 `li`를 통해 nav를 만듭니다.
61+
인스타를 보면 이미지로 되어있죠?
62+
우리도 이미지를 넣어보도록 하겠습니다.
63+
그리고 크기를 조절하기 위해 `class="logo_img"`라는 이름을 미리 붙여줍니다.
6264

6365

64-
`html`로 밑그림을 다 그렸으니 이제 색칠을 해봐야겠죠?<br>
65-
`css`작업을 해보도록 합시다.<br>
66+
`html`로 밑그림을 다 그렸으니 이제 색칠을 해봐야겠죠?
67+
`css`작업을 해보도록 합시다.
6668

6769
### 1-2. Header CSS 작업하기
6870

@@ -76,7 +78,7 @@
7678
</head>
7779
</html>
7880
```
79-
`html`파일의 `head`부분에 `<link rel="stylesheet" href="./style.css">`로 파일을 불러옵니다.<br><br>
81+
`html`파일의 `head`부분에 `<link rel="stylesheet" href="./style.css">`로 파일을 불러옵니다.
8082

8183
`style.css`파일에서
8284
```css
@@ -118,10 +120,11 @@ li{
118120
margin-right: 25px;
119121
}
120122
```
121-
`header`에 `display:flex;`를 적용시켜 준 후, `justify-content`와 `align-items`를 통해 가로 세로 정렬을 해줍니다.<br>
123+
`header`에 `display:flex;`를 적용시켜 준 후,
124+
`justify-content`와 `align-items`를 통해 가로 세로 정렬을 해줍니다.
122125
그리고 아까 지정해놓은 `class`를 통해 각 이미지의 크기 및 여백을 지정해 줍니다.
123126

124-
![./img/Header.PNG](./img/Header.PNG)
127+
![img/Header.PNG](img/Header.PNG)
125128

126129
이러게 나오면 header는 완성!!!
127130

@@ -130,6 +133,7 @@ li{
130133
## 2. content 만들어보기
131134
> `display:flex`를 이용하자
132135
136+
`index.html`
133137
```html
134138
<body>
135139
<header>
@@ -151,7 +155,7 @@ li{
151155
`div class="con_wrap"`으로 감싸줍니다.
152156

153157
### 2-1. con_wrap CSS 작업하기
154-
158+
`style.css`
155159
```css
156160
.con_wrap{
157161
display: flex;
@@ -168,13 +172,14 @@ li{
168172
flex: 1;
169173
}
170174
```
171-
`div class="con_wrap"`에 `display:flex;`를 적용하여 내부 `div`들이 옆으로 쌓이게 해줍니다.<br>
175+
`div class="con_wrap"`에 `display:flex;`를 적용하여
176+
내부 `div`들이 옆으로 쌓이게 해줍니다.
172177
`flex`를 통해 `conA`:`conB`=2:1로 비율을 지정해줍니다.
173178

174179

175180

176181
## 3. conA 내용채우기
177-
182+
`index.html`
178183
```html
179184
<div class="conA">
180185
<!-- 하나의 게시물을 만들어줍니다. -->
@@ -199,7 +204,9 @@ li{
199204
```
200205
`conA`안에 들어갈 내용들을 생각하여 `div`로 틀을 만들어 줍니다.
201206

202-
>title에는 프로필사진과 User이름이 들어갑니다.
207+
> title에는 프로필사진과 User이름이 들어갑니다.
208+
209+
203210
```html
204211
<div class="title">
205212
<img src="images/hong.png" alt="" class="img">
@@ -208,13 +215,15 @@ li{
208215
```
209216
프로필사진의 크기를 조절하기 위해 `class="img"`를 추가합니다.
210217

211-
>메인 이미지를 넣어줍니다.
218+
> 메인 이미지를 넣어줍니다.
219+
212220
```html
213221
<img src="images/picture.png" alt="" class="con_img">
214222
```
215223
메인 이미지의 크기를 조절하기 위해 `class=con_img"`를 추가합니다.
216224

217-
>각 logo들을 넣어줍니다.
225+
> 각 logo들을 넣어줍니다.
226+
218227
```html
219228
<div class="logos">
220229
<div class="logos_left">
@@ -227,12 +236,13 @@ li{
227236
</div>
228237
</div>
229238
```
230-
`div`로 오른쪽에 들어갈 logo와 왼쪽에 들어갈 logo를 지정해줍니다.<br>
231-
각 `div`마다 이름을 정해주고,
239+
`div`로 오른쪽에 들어갈 logo와 왼쪽에 들어갈 logo를 지정해줍니다.
240+
각 `div`마다 이름을 정해주고,
232241
로고 이미지의 크기를 조절하기 위해 `class=logo_img"`를 추가합니다.
233242

234243

235-
>이미지 밑에 좋아요 수, 해시태그, 댓글창이 들어갑니다.
244+
> 이미지 밑에 좋아요 수, 해시태그, 댓글창이 들어갑니다.
245+
236246
```html
237247
<div class="content">
238248
<p><b>좋아요 80개</b></p>
@@ -243,6 +253,7 @@ li{
243253
`<a href=""></a>`는 링크를 걸어줍니다.
244254

245255
### 3-1. conA css 작업하기
256+
`style.css`
246257
```css
247258
.conA .con{
248259
width: 600px;
@@ -288,13 +299,15 @@ li{
288299
outline: none;
289300
}
290301
```
291-
`input:focus`는 입력창에 클릭했을 때 파란테두리가 나타나는데 `outline: none;`을 해주면 파란테두리가 없어집니다.
302+
`input:focus`는 입력창에 클릭했을 때 파란 테두리가 나타나는데
303+
`outline: none;`을 해주면 파란테두리가 없어집니다.
292304

293-
![./img/ConA.PNG](./img/ConA.PNG)
305+
![img/ConA.PNG](img/ConA.PNG)
294306

295307
이러게 나오면 ConA도 완성!!!
296308

297309
## 4. conB 내용채우기
310+
`index.html`
298311
```html
299312
<div class="conB">
300313
<!-- 프로필사진과 user이름이 들어갑니다. -->
@@ -318,6 +331,7 @@ li{
318331
```
319332

320333
### 4-1. conB css 작업하기
334+
`style.css`
321335
```css
322336
.conB{
323337
flex: 1;
@@ -365,11 +379,13 @@ li{
365379
font-size: 16px;
366380
}
367381
```
368-
![./img/ConB1.PNG](./img/ConB1.PNG)
382+
![img/ConB1.PNG](img/ConB1.PNG)
369383

370-
축하합니다. 인스타그램 PC Version의 큰 틀은 만들었어요오!!!<br>
371-
`conA`의 `con`게시물과 `story`의 `story_content`를 여러분이 원하시는 만큼 Ctrl+C Ctrl+V 해주세요.
384+
축하합니다. 인스타그램 PC Version의 큰 틀은 만들었어요오!!!
385+
`conA`의 `con`게시물과 `story`의 `story_content`를
386+
여러분이 원하시는 만큼 Ctrl+C Ctrl+V 해주세요.
372387

388+
`index.html`
373389
```html
374390
<div class="story">
375391
<div class="story_title">
@@ -397,15 +413,15 @@ li{
397413
```
398414

399415

400-
Story 밑에 추천 친구의 목록도 만들어 볼게요.<br>
401-
위에 보이는 코드처럼 본인의`class="story"`를 모두 Ctrl+C 해줍니다.<br>
402-
바로 밑에 Ctrl+V 해주세요:)<br>
403-
`story_title`의 `p`를 `회원님을 위한 추천`으로 수정해주세요!<br>
404-
![./img/ConB2.PNG](./img/ConB2.PNG)
416+
Story 밑에 추천 친구의 목록도 만들어 볼게요.
417+
위에 보이는 코드처럼 본인의`class="story"`를 모두 Ctrl+C 해줍니다.
418+
바로 밑에 Ctrl+V 해주세요:)
419+
`story_title`의 `p`를 `회원님을 위한 추천`으로 수정해주세요!
420+
![img/ConB2.PNG](img/ConB2.PNG)
405421

406422

407423
## 5. 추가 기능 넣어보기.
408-
> conB를 적당한 위치에 고정시켜볼 거에요.
424+
> conB를 적당한 위치에 고정시켜볼 거에요.
409425
> 그리고 화면의 크기가 줄어들었을 때 conB의 내용을 숨겨보도록 합시다.
410426
411427
```css
@@ -415,8 +431,8 @@ Story 밑에 추천 친구의 목록도 만들어 볼게요.<br>
415431
top: 50px;
416432
}
417433
```
418-
`conB`에 `position: sticky;`와 `top: 50px;`를 추가해줍니다.<br>
419-
즉, 스크롤을 내리면 `conA`는 계속 내려가지만 `conB`는 위에서 50px위치에 고정되어 있습니다.<br>
434+
`conB`에 `position: sticky;`와 `top: 50px;`를 추가해줍니다.
435+
즉, 스크롤을 내리면 `conA`는 계속 내려가지만 `conB`는 위에서 50px위치에 고정되어 있습니다.
420436

421437
```css
422438
@media screen and (max-width: 1000px) {
@@ -425,10 +441,11 @@ Story 밑에 추천 친구의 목록도 만들어 볼게요.<br>
425441
}
426442
}
427443
```
428-
`style.css`의 마지막 부분에 위의 코드를 추가해줍니다.<br>
429-
화면의 가로 비율이 1000px보다 작거나 같을 때 `conB`의 내용을 숨겨줍니다.<br><br>
444+
`style.css`의 마지막 부분에 위의 코드를 추가해줍니다.
445+
화면의 가로 비율이 1000px보다 작거나 같을 때 `conB`의 내용을 숨겨줍니다.
446+
430447

431-
이제 마지막!!!!
448+
이제 마지막!!!!
432449
`html`파일의 `head>title`부분에 이미지를 추가해봅시다.
433450
```html
434451
<head>
@@ -437,7 +454,7 @@ Story 밑에 추천 친구의 목록도 만들어 볼게요.<br>
437454
<link rel="stylesheet" href="./style.css">
438455
</head>
439456
```
440-
`<link rel="shortcut icon" href="images/instacolor.png">`를 추가하면 됩니다!<br>
457+
`<link rel="shortcut icon" href="images/instacolor.png">`를 추가하면 됩니다!
441458

442-
모두 수고하셨어요!<br>
459+
모두 수고하셨어요!
443460
`html` `css`에 대해 더 공부하고 싶다면 [w3school](https://www.w3schools.com/)를 추천드려요:)

‎img/ConA.PNG

496 KB
Loading

‎img/ConB1.PNG

21.6 KB
Loading

‎img/ConB2.PNG

57.7 KB
Loading

‎img/Header.PNG

22.1 KB
Loading

0 commit comments

Comments
 (0)