hyeri_jung14.log

2021.08.02 NAVER-11

Mon, 02 Aug 2021 06:35:25 GMT

Day26, 저번주에 이어 Naver 뉴스 페이지를 따라 만들어봤다!

오늘 무엇을 배웠지?

Naver - TV연예 페이지 따라 만들어보기

Naver-'TV 연예' : https://entertain.naver.com/home

html

new file-save(ent.html), save(style0802.css)
기본 설정 + html, css 파일을 연동
```
 
 네이버
 
```

```

CSS-Style

(어제의 css에 이어서)

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } button { border: none; } input, textarea { outline: none; }

.ent-container { width: 980px; margin: 0 auto; } .ent-flex-start { display: flex; flex-wrap: wrap; align-items: center; } .ent-flex-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .ent-flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .ent-flex-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .ent-border { border: solid 1px #000000; }


2. #ent-header를 디자인(너비,높이,배경색 등)한다. 이에 속한 .ent-header-left의 `````` 태그를 디자인한다. ``````태그 각각의 글자 색을 설정하고, 태그간에 특수 문자를 삽입하되 첫번째 태그앞에는 생성되지 않도록 설정한다.

#ent-header { width: 100%; height: 62px; background-color: #ffffff; border-bottom: solid 2px #f1f1f1; padding: 20px 25px 0; } #ent-header .ent-header-left ul li { font-weight: 700; } #ent-header .ent-header-left ul li:last-child a { color: #9f9f9f; } #ent-header .ent-header-left ul li a:before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: #dddddd; margin: 0 8px; vertical-align: -1px; } #ent-header .ent-header-left ul li:first-child a:before { content: none; }


3. .ent-header-center의 ``````태그를 디자인(굵기, 글자크기, 간격 등)한다. ``````의 정렬과 간격을 설정하고 on이라는 class를 가진 태그에 한하여 색과 아래 테두리를 달리 설정한다.

#ent-header .ent-header-center li { font-weight: 700; font-size: 16px; padding: 0 15px; } #ent-header .ent-header-center li a { display: inline-block; border-bottom: solid 2px #ffffff; padding-bottom: 2px; } #ent-header .ent-header-center li.on a { color: #e24587; border-bottom: solid 2px #e24587; }

4. .enter-header-right의 태그들을 디자인한다. .btn-login, .btn-menu, .btn-search의 너비, 높이, 테두리 등을 디자인한다.

#ent-header .ent-header-right .btn-login { width: 45px; height: 20px; border: solid 1px #000000; font-size: 12px; line-height: 20px; text-align: center; margin: 0 9px; } #ent-header .ent-header-right .btn-menu { width: 16px; height: 16px; background-color: grey; margin: 0 9px; } #ent-header .ent-header-right .btn-search { width: 25px; height: 25px; background-color: #000000; margin-left: 9px; }

결과 ▼
![](https://images.velog.io/images/hyeri_jung14/post/7d22e123-1095-4767-a4e8-bc57ff2e75c2/image.png)


### `````` - 1
#### html
(`````` html에 이어서)
1. ![](https://images.velog.io/images/hyeri_jung14/post/350eb6fa-3a9d-41f5-9bbb-bb6bcd43c39e/image.png)


    
        
            
                
                    
                        
                            
                                
                                03:02
                                
                            
                            
                                [신곡 MV] BTS (방탄소년단).......
                            
                        
                    
                    
                        
                            
                                
                                03:02
                                
                            
                            
                                [신곡 MV] BTS (방탄소년단).......
                            
                        
                    
                    
                        
                            
                                
                                03:02
                                
                            
                            
                                [신곡 MV] BTS (방탄소년단).......
                            
                        
                    
                    
                        
                            
                                
                                03:02
                                
                            
                            
                                [신곡 MV] BTS (방탄소년단).......

2. ![](https://images.velog.io/images/hyeri_jung14/post/951a9a8c-f50a-4e73-92ae-e486f0a07c6a/image.png)

            
                
                    
                        
                            
                            
                                TITLE 1
                                동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
                                
                                    TV리포트
                                    9
                                
                            
                        
                    
                    
                        
                            
                            
                                TITLE 1
                                동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
                                
                                    TV리포트
                                    9


3. ![](https://images.velog.io/images/hyeri_jung14/post/4af79182-90c5-4603-bfde-059dfb5637c3/image.png)

            
                
                    
                        
                            
                            TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1
                            
                                TV리포트
                                9
                                    
                        
                    
                    
                        
                            
                            TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1
                            
                                TV리포트
                                9
                                    
                        
                    
                    
                        
                            
                            TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1
                            
                                TV리포트
                                9


4. ![](https://images.velog.io/images/hyeri_jung14/post/f69b07dc-955e-4383-8af8-ad3d645ee799/image.png)

            
                
                    스타 콘텐츠
                    
                        
                            1 / 2
                        

                        
                            
                            
                        
                    
                

                
                    
                        
                            
                            에이치앤드
                            [금새록] 오월의 새록 
                        
                    
                    
                        
                            
                            에이치앤드
                            [금새록] 오월의 새록 
                        
                    
                    
                        
                            
                            에이치앤드
                            [금새록] 오월의 새록 
                        
                    
                    
                        
                            
                            에이치앤드
                            [금새록] 오월의 새록


#### CSS-Style
(`````` css에 이어서)
1. #ent-main의 .ent-container라는 class를 가진 태그에 한하여 속성을 설정하고, .ent-left의 영역이 좌측으로 배치되도록 설정하고 위치, 간격을 설정한다.

#ent-main .ent-container { overflow: hidden; } #ent-main .ent-left { float: left; width: 654px; padding-right: 24px; }



2. #ent-media-headline의 간격을 설정하고 이에 속한 태그 ``````, `````` 의 너비, 높이 등을 디자인한다.

#ent-main .ent-left #ent-media-headline { padding-bottom: 20px; border-bottom: solid 1px #f1f1f1; } #ent-main .ent-left #ent-media-headline li { width: 148px; height: 204px; border-radius: 10px; } #ent-main .ent-left #ent-media-headline a { display: block; width: 100%; height: 100%; }


3. .media-top의 position을 relative로 설정하고 이에 속한 태그, ``````, .time .icon-play들을 디자인한다. ``````, .icon-play의 너비, 높이를 설정하고 위치를 absolute로 설정한다. .time의 position또한 absolute로 설정하고 right, top값으로 위치를 고정한다. 그 외, 높이, 배경색, 간격 등을 설정한다.

#ent-main .ent-left #ent-media-headline .media-top { position: relative; height: 144px; } #ent-main .ent-left #ent-media-headline .media-top img { position: absolute; width: 100%; height: 100%; } #ent-main .ent-left #ent-media-headline .media-top .time { position: absolute; display: block; height: 16px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.56); padding: 0 4px; right: 8px; top: 8px; color: #ffffff; font-size: 11px; line-height: 16px; } #ent-main .ent-left #ent-media-headline .media-top .icon-play { position: absolute; display: block; width: 28px; height: 28px; background-color: grey; border-radius: 50%; left: 8px; bottom: 7px; }

4. .media-bottom의 높이와 배경색을 설정하고 이에 속한 ```

```태그를 디자인한다. (글자크기, 글자둙기, 색 등)

#ent-main .ent-left #ent-media-headline .media-bottom { height: 60px; background-color: #444a60; } #ent-main .ent-left #ent-media-headline .media-bottom p { font-size: 14px; font-weight: 700; letter-spacing: -1px; padding: 11px 12px 0; color: #ffffff; }

결과 ▼
![](https://images.velog.io/images/hyeri_jung14/post/295e856f-e4b2-4e8c-a38b-3cace063749d/image.png)

5. #ent-section의 태그들을 디자인한다. `````` 의 경계와 간격을 설정하고 ``````의 너비, 높이, 테두리를 설정한다. .ent-news-wrap의 너비를 설저아고 이에 속한 태그 ``````, ``````의 margin-bottom으로 간격을 설정하고 글자크기 등을 설정한다.

#ent-main .ent-left #ent-section-1 li { border-bottom: solid 1px #f1f1f1; padding: 20px 0; } #ent-main .ent-left #ent-section-1 li img { width: 148px; height: 90px; border: solid 1px #000000; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap { width: 462px; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap h3 { margin-bottom: 8px; font-size: 14px; font-weight: 700; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap p { margin-bottom: 8px; font-size: 12px; color: #898989; font-weight: 400; line-height: 20px; }


6. .source의 글자를 디자인하고 .count의 너비, 높이, 테두리 등을 설정하고 디자인(글자크기, 글자 정렬 등)한다.

#ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .source, #ent-main .ent-left #ent-section-2 .ent-bottom .source { font-size: 11px; font-weight: 400; color: #a7a7a7; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .count, #ent-main .ent-left #ent-section-2 .ent-bottom .count { display: inline-block; width: 20px; height: 20px; border: solid 1px #000000; border-radius: 5px; text-align: center; line-height: 20px; font-size: 10px; }


7. #ent-section-2의 간격, 아래 테두리를 설정하고 이에 속한 ``````, ``````. ``````를 디자인한다.(너비, 높이, 간격 등)

#ent-main .ent-left #ent-section-2 { padding: 20px 0; border-bottom: solid 1px #f1f1f1; } #ent-main .ent-left #ent-section-2 li { width: 200px; } #ent-main .ent-left #ent-section-2 img { width: 200px; height: 122px; border: solid 1px #000000; margin-bottom: 15px; } #ent-main .ent-left #ent-section-2 h3 { font-size: 13px; line-height: 20px; margin-bottom: 9px; }

결과 ▼
![](https://images.velog.io/images/hyeri_jung14/post/6f5d0fd4-2095-46fe-82da-20b00d548964/image.png)

8. #ent-section-3의 간격과 아래 테두리를 설정하고 이에 속한 .title-wrap, ``````의 간격, 글자 크기 등을 설정한다.

#ent-main .ent-left #ent-section-3 { padding: 24px 0; border-bottom: solid 1px #e4e4e4; } #ent-main .ent-left #ent-section-3 .title-wrap { margin-bottom: 18px; } #ent-main .ent-left #ent-section-3 .title-wrap h3 { font-size: 16px; }


9. .right-wrap에 속한 태그들을 디자인한다. .count-wrap의``````,``````태그의 글자크기, 글자 색을 설정하고 .btn-wrap의 간격을 설정한다. 이에 속한 .btn, .btn-pre, .btn-next를 디자인한다.(배경색, 테두리 등)

#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span { font-size: 12px; color: #666; } #ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span em { font-style: normal; color: #ff0080; } #ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap { margin-left: 8px; } #ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn { width: 24px; height: 24px; border: solid 1px #000000; } #ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-pre { border-right: none; background-color: blue; } #ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-next { background-color: green; }

10. #ent-section-3의 ```
```를 디자인(너비, 높이, 테두리 등)한다. 이에 속한 ``````, ``````, ``````, ```
```의 position을 설정하고 너비, 높이 등을 설정한다. ``````태그의 글이 설정한 너비를 넘어가면 말 줄임표로 설정되도록 overflow: hidden, text-overflow: ellipsis, white-space: nowrap으로 설정한다.
#ent-main .ent-left #ent-section-3 li { width: 148px; height: 148px; border: solid 1px #000000; } #ent-main .ent-left #ent-section-3 li a { position: relative; display: block; width: 100%; height: 100%; } #ent-main .ent-left #ent-section-3 li img { position: absolute; width: 100%; height: 100%; } #ent-main .ent-left #ent-section-3 li span { position: absolute; display: block; max-width: 100%; background-color: #f40080; padding: 0 5px; left: 0; top: 0; font-size: 11px; font-weight: 700; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ent-main .ent-left #ent-section-3 li h3 { position: absolute; width: 100%; min-height: 32px; background-color: rgba(0, 0, 0, 0.3); padding: 9px 10px 8px; left: 0; bottom: 0; color: #ffffff; font-size: 12px; font-weight: 700; }

``` 결과 ▼

무엇이 어려웠지?

오늘은 어려운 것은 없었다. 오탈자나 실수로 원한 결과가 나오지 않은 경우는 없었다!!

그래서?

8월이다. 어느새 전날 몇시에 자든 아무리 늦어도 9시 반에는 알람 없이 눈이 떠지고 10시에 키보드 소리가 나도록 프로그래밍 공부를 시작하는게 익숙해졌다. 중간중간에 굉장히 지겹고 귀찮았던 시간이 꽤 있었고, 비전공자로서 이해하는데 시간이 많이 드는 개념들도 있었다. 그럴 때 마다 그만두고 싶었고 그 마음을 참고 꾸준히 공부를 했을 때도 월등하게 나아진다는 생각이 들지 않았다. 오히려 내가 하고 있는 것이 맞는 건지, 시간낭비는 아닌지 의심이 들기도 했다. 매일같이 최소 6시간씩 공부한 결과가 겨우 이거야? 하는 생각도 많이 들었다. 오늘 수업을 들으면서 첫날 쓴 개발일지부터 천천히 읽어봤다. 읽으면서 그 당시에는 굉장히 골머리를 앓던 부분들이 지금은 크게 신경쓰지 않는 개념이 되었고, 익숙하게 그 개념을 활용해서 프로그래밍을 하고 있었다는 것을 깨달았다. 나는 알게모르게 조금씩 성장하고 있었고 되돌아보지 않으면 눈치채지 못할 속도였던것이었다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0802

2021.07.30 NAVER-10

Fri, 30 Jul 2021 05:55:00 GMT

Day25, Naver 뉴스 페이지를 따라 만들어봤다!

오늘 무엇을 배웠지?

Naver 뉴스페이지 따라 만들어보기

Naver - '뉴스' : https://news.naver.com/

메인 left

html

(어제의 html 파일에 이어서)

헤드라인 뉴스 헤드라인 뉴스와 각 기사묶음 타이틀은 기사 내용을 기반으로 자동 추출됩니다. [단독] 동해물과 백두산이 마르고 닳도록 title 1title 1title 1title 1title 1title 1title 1title 1 title 2title 2title 2title 2title 2title 2title 2 title 3title 3title 3title 3title 3title 3title 3title 3 title 4title 4title 4title 4title 4title 4 title 5title 5title 5title 5title 5title 5

정치 일반 국회/정당 청와대 [단독] 동해물과 백두산이 마르고 닳도록 Title 1국민일보 Title 2한겨례 Title 3뉴시스 Title 4중앙일보 Title 5부산일보

CSS-Style

(어제의 css에 이어서)

.news-main-wrap과 이에 속한 태그를 디자인한다. .news-main-header의 간격을 margin값으로 설정하고, 의 글자 크기를 디자인한다.

#news-main .news-left .news-main-wrap { padding: 25px 0; border-bottom: solid 1px #dedede; } #news-main .news-left .news-main-wrap .news-main-header { margin-bottom: 14px; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 { margin-right: 12px; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 a { font-size: 20px; font-weight: bold; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-left a { font-size: 13px; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-left ul { margin-top: -2px; }

.news-main-header-left의
글자 사이에 특수 문자를 삽입하되, 첫번째
태그 앞에는 특수문자가 나타나지 않도록 설정한다.

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left li a:before { content: ''; display: inline-block; width: 1px; height: 10px; background-color: #e5e5e5; margin: 0 8px; vertical-align: -1px; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-left li:first-child a:before { content: none; }

.news-main-header-right의 태그를 디자인(너비,높이 등)한다. icon-1, icon-2, icon-3의 색을 설정한다.

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i { display: block; width: 24px; height: 20px; margin-left: 8px; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-1 { background-color: yellow; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-2 { background-color: pink; } #news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-3 { background-color: grey; }

.image-wrap을 디자인(너비, 간격)한다. 이에 속한 태그의 너비, 높이, 테두리 등을 설정하고,
태그의 글이 설정한 영역을 벗어나게 되면 말줄임표로 바뀌도록 설정한다.

#news-main .news-left .news-main-wrap .news-main-body .image-wrap { width: 220px; margin-right: 25px; } #news-main .news-left .news-main-wrap .news-main-body .image-wrap img { width: 100%; height: 140px; border: solid 1px #000000; margin-bottom: 6px; } #news-main .news-left .news-main-wrap .news-main-body .image-wrap h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

.news-lists의 너비를 설정하고 그에 속한 태그들을 디자인한다.
태그의 간격과 글자크기를 설정한다. 태그의 글이 설정한 영역을 넘어가게 되면 말줄임표로 바뀌도록 설정하고, 태그 사이에 특수 문자가 입력되도록 설정하고 이 태그의 글자 색 등을 디자인한다.

#news-main .news-left .news-main-wrap .news-main-body .news-lists { width: 430px; } #news-main .news-left .news-main-wrap .news-main-body .news-lists li { margin-bottom: 11px; font-size: 20px; } #news-main .news-left .news-main-wrap .news-main-body .news-lists li a { display: inline-block; max-width: 360px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } #news-main .news-left .news-main-wrap .news-main-body .news-lists li span { font-size: 12px; color: #888888; vertical-align: middle; } #news-main .news-left .news-main-wrap .news-main-body .news-lists li span:before { content: ''; display: inline-block; position: relative; width: 14px; height: 11px; background-color: grey; margin: 0 4px; top: 1px; }

.news-main-header의 태그에 커서가 기본값(클릭기능 off)으로 적용되도록 설정하고 이 태그 앞에 특수문자가 입력되도록 설정한다.

#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li a { cursor: default; } #news-main .news-left .news-main-wrap.news-custome .news-main-header ul li:first-child a:before { content: ''; display: inline-block; width: 1px; height: 10px; background-color: #e5e5e5; margin: 0 8px 0 0 ; vertical-align: -1px; }

.image-wrap의 position을 relative로 설정해 속한 태그들의 영향을 받을수 있게 하고, 너비, 높이를 설정한다. 이에 속한 태그의 position을 aboslute로 설정하고 너비, 높이를 설정한다. 앞의 태그들에 말줄임으로 설정했던 text-overflow, white-space 설정을 없애주고,
태그의 position을 absolute로 설정해 위치를 설정한다.

#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap { position: relative; width: 300px; height: 190px; } #news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap img { position: absolute; width: 100%; height: 100%; } #news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap h4 { text-overflow: initial; white-space: initial; position: absolute; width: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 10px 15px; left: 0; bottom: 0; color: #ffffff; text-align: center; }

.news-lists의 너비를 설정한다. 이에 속한 태그 태그가 수직정렬시 중앙에 위치하도록 설정하고 너비를 설정한다. 태그의 너비 ,높이, 배경색 등을 디자인한다.

#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists { width: 390px; } #news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li a { vertical-align: middle; width: 360px; max-width: initial; } #news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li i { display: inline-block; width: 22px; height: 16px; background-color: black; vertical-align: middle; }
결과 ▼

메인 right

html

(어제의 html 파일에 이어서)

언론사별 가장 많이 본 뉴스 오후 11시 ~ 오전 12시까지 집계한 결과입니다. 더보기 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 경향신문 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 경향신문 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 경향신문 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 경향신문 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 경향신문

TODAY 7.30 (금) 공지 뉴스홈 헤드라인 비로그인 추천 변경 날씨 실시간 기상 정보 확인하기 운세 오늘의 띠별 운세 확인하기 코스피 3,162.28 10.77 코스닥 971.73 2.03

CSS-Style

(.main-left css에 이어서)

.news-right의 영역이 오른쪽에 위치하도록 float:right로 설정하고 너비, 테두리, 간격 등을 설정한다. #news-popular의 간격을 설정하고 이에 속한 태그들을 디자인(글자크기, 색 등)한다.
#news-main .news-right { float: right; width: 327px; border-left: solid 1px #dfdfdf; padding: 25px 0 40px 26px; } #news-main .news-right #news-popular { margin-bottom: 30px; } #news-main .news-right #news-popular .news-popular-header { align-items: flex-start; margin-bottom: 10px; } #news-main .news-right #news-popular .news-popular-header h3 { font-size: 14px; } #news-main .news-right #news-popular .news-popular-header p { font-size: 12px; } #news-main .news-right #news-popular .news-popular-header span { color: #7d7d7d; font-size: 14px; cursor: pointer; }

2. .news-popular-lists의 ```
```태그의 상, 하 간격을 6px로 설정한다. 이에 속한 태그 들을 디자인한다. .news-popular-info의 너비, 아래 테두리, 아래 간격 등을 설정하고 ```
```의 글자크기,아래 간격을 설정한다. `````` 의 너비 ,높이, 배경색, 등을 설정하고``````태그의 position:relative로,top:2px로 위치를 설정하고 글자크기, 색 등을 설정한다.
#news-main .news-right #news-popular .news-popular-lists li { padding: 6px 0; } #news-main .news-right #news-popular .news-popular-lists li .news-popular-info { width: 202px; border-bottom: solid 1px #e3e3e3; padding-bottom: 6px; } #news-main .news-right #news-popular .news-popular-lists li .news-popular-info h4 { font-size: 13px; margin-bottom: 5px; } #news-main .news-right #news-popular .news-popular-lists li .news-popular-info i { display: inline-block; width: 16px; height: 16px; background-color: grey; border-radius: 50%; vertical-align: middle; margin-right: 5px; } #news-main .news-right #news-popular .news-popular-lists li .news-popular-info span { position: relative; font-size: 12px; color: #888888; vertical-align: middle; top: 2px; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/9ab8dd9b-f25d-425b-9d2e-2c2561c1b7bc/image.png) 3. 광고영역인 .news-banner의 너비, 높이, 테두리 등을 설정한다.
#news-main .news-right .news-banner { width: 300px; height: 250px; background-color: #000000; border: solid 1px; color: #e3e3e3; margin-bottom: 30px; }

4. .news-today-header의 간격을 설정하고 이에 속한 태그들이 글자크기를 설정한다. ``````태그앞에 특수문자가 입력되도록 설정하고 배경색 등을 설정한다.
#news-main .news-right #news-today .news-today-header { margin-bottom: 11px; } #news-main .news-right #news-today .news-today-header h3 { font-size: 14px; } #news-main .news-right #news-today .news-today-header span { font-size: 12px; } #news-main .news-right #news-today .news-today-header span:before { content: ''; display: inline-block; width: 1px; height: 10px; background-color: #e5e5e5e5; margin: 0 7px; vertical-align: -1px; }

5. .news-today-body의 간격을 설정하고 테두리를 설정한다. 이에 속한태그들을 디자인한다. ``````태그의 간격과 경계선을 설정하고 가장 마지막 ```
```태그에는 아래 간격이 없도록 설정한다. ```
``` ```
```태그의 글자크기, 정렬 등을 디자인한다.
#news-main .news-right #news-today .news-today-body { padding: 13px 20px 20px; border: solid 1px #e8e8e8; } #news-main .news-right #news-today .news-today-body .news-notice-lists li { border-bottom: solid 1px #f2f2f2; padding-bottom: 12px; margin-bottom: 12px; } #news-main .news-right #news-today .news-today-body .news-notice-lists li:last-child { margin-bottom: 0; } #news-main .news-right #news-today .news-today-body .news-notice-lists li h4 { display: inline-block; font-size: 12px; vertical-align: middle; margin-right: 8px; } #news-main .news-right #news-today .news-today-body .news-notice-lists li p { display: inline-block; font-size: 12px; vertical-align: middle; }

6. .news-stock-lists의 간격을 설정하고 ``````태그가 이 영역의 반을 차지하도록 너비를 설정한다. 마지막 ```
```태그에 한해 왼쪽 간격과 왼쪽 테두리를 설정한다. ``````,```
```,``````태그의 글자 크기, 색, 간격등을 설정한다.
#news-main .news-right #news-today .news-today-body .news-stock-lists { padding: 10px 0 7px; } #news-main .news-right #news-today .news-today-body .news-stock-lists li { width: 50%; } #news-main .news-right #news-today .news-today-body .news-stock-lists li:last-child { padding-left: 20px; border-left: solid 1px #f2f2f2; } #news-main .news-right #news-today .news-today-body .news-stock-lists span { font-size: 12px; color: #777777; margin-bottom: 8px; } #news-main .news-right #news-today .news-today-body .news-stock-lists h3 { font-size: 24px; margin-bottom: 5px; } #news-main .news-right #news-today .news-today-body .news-stock-lists em { font-style: normal; } #news-main .news-right #news-today .news-today-body .news-stock-lists em.down { color: #066fd1; } #news-main .news-right #news-today .news-today-body .news-stock-lists em.up { color: #fe4638; }

7. .news-stock-search-wrap의 너비, 높이를 설정하고 테두리를 설정한다. 이에 속한 ``````태그를 디자인(너비,높이,배경색 등)하고, 글자를 입력할때 outline이 생기지 않도록 설정한다. ```
#news-main .news-right #news-today .news-today-body .news-stock-search-wrap { width: 100%; height: 30px; border: solid 1px #f2f2f2; } #news-main .news-right #news-today .news-today-body .news-stock-search-wrap input { width: calc(100% - 30px); height: 100%; background-color: #ffffff; border: none; padding: 3px 9px; } #news-main .news-right #news-today .news-today-body .news-stock-search-wrap input:focus { outline: none; } #news-main .news-right #news-today .news-today-body .news-stock-search-wrap button { width: 30px; height: 100%; background-color: black; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/25afee1c-732c-449a-9b45-1be6b578db2e/image.png) ### 하단 영역 #### html (```
``` blog 페이지와 동일해서 생략, ```
``` html에 이어서) 1. ![](https://images.velog.io/images/hyeri_jung14/post/cede852d-0ccb-460f-800c-b387d97d0fa9/image.png)```
``` 태그로 하단 영역을 설정하고 class를 설정한다. 하단영역을 위(뉴스리스트), 아래(회사리스트)영역으로 구분하고 (```
```) id를 설정한다. 뉴스리스트는 ```
```,```
```,``````태그로 만들어 필요한 갯수 만큼 복사해 붙여넣는다.
언론사 목록 분야별 목록 마이스크랩
#### CSS-Style (main_right css에 이어서) 1. #news-nav-bottom의 위,아래 테두리를 설정하고 이에 속한 ```
```태그의 오른쪽 간격을 설정한다.
#news-nav-bottom { border-top: solid 1px #dfdfdf; border-bottom: solid 1px #e3e7ee; padding: 15px 0; } #news-nav-bottom li { margin-right: 10px; }

``` 결과▼

무엇이 어려웠지?

어떻게 해결했지?

class명을 잘못 치거나 ;를 안 적었거나 명령어를 잘못 친적은 있어도 id= 인지 class=인지 실수 한 적은 없었다. 그래서 무엇 때문에 css언어가 적용이 안되는 이유를 한참을 못찾았는데, 이유는 id로 명명하기로 한걸 class라고 적어서였다.. 찾고 나니 허탈한데 큰 문제가 아니라 다행이었다.. 다음에 원하는 결과가 안나올때 확인해 봐야할 것이 하나 더 늘었다..

그래서?

7월 마지막 날, 월말평가도 2번이나 치뤘고, 이렇게 개발일지를 쓴지도 한달이 넘었다. AI스쿨수업의 반을 지나온건데, 엄청 성장했다는 느낌은 안든다... '무슨말하는거야' 수준에서 '들어는 봤다.' 수준정도... 여전히 직접 레이아웃을 짜고 디자인하는건 어렵고 따라만드는 것도 선생님과 똑같이 했다고 생각했는데 오탈자에 실수 덩어리다. 남은 2개월동안 열심히 배워서 어제보다 나은 오늘 오늘보다 나은 내일이 되길.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0730

2021.07.29 NAVER-9

Thu, 29 Jul 2021 05:44:31 GMT

Day24, Naver 뉴스 페이지를 따라 만들어봤다!

오늘 무엇을 배웠지?

Naver 뉴스 페이지 따라 만들어보기

Naver - '뉴스' : https://news.naver.com/

html

new file-save(news.html), save(style0729.css)

기본 설정 + html, css 파일을 연동
네이버

```

뉴스 TV연예 스포츠 뉴스스탠드 날씨 로그인 뉴스홈 속보 정치 경제

신문 헤드라인 저녁 방송 뉴스 팩트체크 언론사 구독 언론사 뉴스 라이브러리 국민일보 눈물 대신 '엄지척' 져도 쿨한 '갓기'들 "정말 재밌었고 좋은 경험 한것 같아요"

CSS-Style

(어제의 css에 이어서)

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } button { border: none; } input, textarea { outline: none; }

/news/ .news-container { width: 1080px; margin: 0 auto; } .news-flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .news-flex-start { display: flex; flex-wrap: wrap; align-items: center; } .news-flex-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

2. .news-header-left영역을 디자인한다. 그에 속한 태그 ```
```,``````,``````태그를 디자인하고 ```
```글자 사이에 특수문자를 입력하되, 가장 첫번째 태그앞에는 생성되지 않도록 한다.
#news-header { background-color: #3f63bf; } #news-header .news-header-left { padding: 17px 0; } #news-header .news-header-left ul li { font-size: 15px; } #news-header .news-header-left ul li.on { font-size: 20px; } #news-header .news-header-left ul li a { color: #ffffff; } #news-header .news-header-left ul li a:before { display: inline-block; content: ''; width: 1px; height: 15px; background-color: #000; opacity: 0.2; margin: 0 10px; vertical-align: -1px; } #news-header .news-header-left ul li:first-child a:before { content: none; }

3. .sub-nav 영역을 디자인(배경색, 테두리)한다. 이에 속한 태그 ```
```,```
```,``````태그를 디자인하고 .on이라는 class를 가진 태그는 글자색을 다르게 디자인한다.
#news-header .sub-nav { background-color: #ffffff; border-top: solid 1px #000000; border-bottom: solid 1px #e3e3e3; } #news-header .sub-nav ul li { width: auto; height: 46px; margin-right: 16px; } #news-header .sub-nav ul li a { display: block; width: 100%; height: 100%; border-bottom: solid 2px transparent; font-weight: bold; line-height: 46px; } #news-header .sub-nav ul li a.on { color: #3f63bf; border-bottom: solid 2px #3f63bf; }

4. .news-search-wrap을 디자인(너비, 높이 등)한다. 그에 속한 태그 ``````, .btn-search를 디자인한다.
#news-header .sub-nav .news-search-wrap { width: 280px; height: 30px; border: solid 1px #e1e1e1; background-color: #fafafa; } #news-header .sub-nav .news-search-wrap input { width: calc(100% - 30px); height: 100%; border: none; font-size: 12px; color: #888888; padding: 3px 9px; } #news-header .sub-nav .news-search-wrap input:focus { outline: none; } #news-header .sub-nav .news-search-wrap .btn-search { width: 30px; height: 100%; background-color: blue; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/06f126fa-4508-40ab-9c32-245cd6124a27/image.png) 5. #news-headline 영역 위의 간격을 만들고 .news-container의 간격을 만든다.
#news-headline { padding-top: 20px; } #news-headline .news-container { border-bottom: solid 1px #000000; padding-bottom: 12px; }

6. .news-headline-menu-wrap에 속한 태그들을 디자인한다. .main-lists의 ``````를 디자인하고 .sub-lists에 속한 태그들을 디자인한다. ```
```글자 사이에 특수문자를 입력하되, 가장 첫번째 태그앞에는 생성되지 않도록 한다.
#news-headline .news-headline-menu-wrap { margin-bottom: 15px; } #news-headline .news-headline-menu-wrap .main-lists li { margin-right: 20px; font-size: 15px; } #news-headline .news-headline-menu-wrap .sub-lists li { font-size: 12px; } #news-headline .news-headline-menu-wrap .sub-lists li a:before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: #e0e0e0; margin: 0 5px; vertical-align: -1px; } #news-headline .news-headline-menu-wrap .sub-lists li:first-child a:before { content: none; }

7. .news-headline-lists에 속한 태그들을 디자인한다. ```
```태그의 너비, 높이 등을 설정하고 ,``````,```
```태그의 너비, 높이 등을 설정한다.
#news-headline .news-headline-lists { margin-bottom: 12px; } #news-headline .news-headline-lists li { width: 255px; height: 178px; border: solid 1px #ccc; } #news-headline .news-headline-lists li a { display: block; width: 100%; height: 100%; } #news-headline .news-headline-lists li a article { position: relative; width: 100%; height: 100%; } #news-headline .news-headline-lists li a article h3 { width: 100%; height: 44px; line-height: 44px; text-align: center; }

8. .image-wrap 영역을 디자인한다. position을 relative로 설정하고 너비, 높이 등을 디자인한다. 이에 속한 ``````, .overlay, .headline-info의 position을 absolute로 설정하고 너비, 높이 등을 설정한다.
#news-headline .news-headline-lists li a article .image-wrap { position: relative; width: 100%; height: 132px; } #news-headline .news-headline-lists li a article .image-wrap img { position: absolute; width: 100%; height: 100%; } #news-headline .news-headline-lists li a article .image-wrap .overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } #news-headline .news-headline-lists li a article .image-wrap .overlay .headline-info { position: absolute; width: 100%; padding: 15px 20px; left: 0; bottom: 0; color: #ffffff; }

9..headline-info에 속한 태그들을 디자인한다. (너비, 높이, 배경색, 글자크기 등)
#news-headline .news-headline-lists .headline-info i { display: block; width: 26px; height: 26px; background-color: black; border-radius: 50%; margin-right: 10px; } #news-headline .news-headline-lists .headline-info div { width: calc(100% - 38px); } #news-headline .news-headline-lists .headline-info span { font-size: 13px; font-weight: bold; } #news-headline .news-headline-lists .headline-info p { display: inline; font-size: 12px; }

10. .news-headline-arrows에 속한 태그들을 디자인한다.(너비, 높이, 배경색 등)
#news-headline .news-headline-arrows .btn-wrap { margin-right: 15px; } #news-headline .news-headline-arrows .btn { display: block; width: 24px; height: 24px; border: solid 1px #dcdddc; } #news-headline .news-headline-arrows .btn.btn-pre { background-color: yellow; border-right: none; } #news-headline .news-headline-arrows .btn.btn-next { background-color: pink; } #news-headline .news-headline-arrows .btn.btn-up { background-color: black;

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/65eda1ca-e03c-42bd-b38e-5d6c48d9e5bd/image.png) ### ```
``` #### html (```
``` html에 이어서) 1. ![](https://images.velog.io/images/hyeri_jung14/post/2486d806-cb01-4dcd-bf83-1c39fcbbed2a/image.png)
#### CSS-Style (```
``` css에 이어서) .news-left영역은 좌측에, .news-right영역은 우측에 위치하도록 설정하고 경계를 만든 후 너비를 설정한다.
#news-main .news-container { overflow: hidden; } #news-main .news-left { float: left; width: 750px; } #news-main .news-right { float: right; width: 327px; border-left: solid 1px #dfdfdf; padding: 25px 0 40px 26px; }

```

무엇이 어려웠지?

오늘은 어려운 것이 없었다!

그래서?

오랜만에 조금은 여유롭게 수업을 들었다. 조금 적응이 된건지 내용이 어렵지 않았고 결과적으로도 만족스러운 결과를 얻었다!! 매일 오늘만 같았으면 좋겠다 ㅠㅜ

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0729

2021.07.28 NAVER-8

Wed, 28 Jul 2021 07:41:12 GMT

Day23, 어제에 이어 Naver 블로그 페이지 따라만들어보기를 완료했다!

오늘 무엇을 배웠지?

Naver - blog 페이지 따라 만들어보기 2

Naver-'blog' : https://section.blog.naver.com/BlogHome.naver?directoryNo=0¤tPage=1&groupId=0

- 2

html

(
- 1 html에 이어서)

네이버를 더 안전하고 편안하게 이용하세요. 로그인 아이디 비밀번호 찾기 회원가입

온라인 셀러를 위한 블로그 마켓 가입 온라인 셀러를 위한 블로그 마켓 가입 온라인 셀러를 위한 블로그 마켓 가입 공지사항 [안내] 아이템팩토리 정기 점검 안내 [8일] 네이버페이 DB 점검 안내 [안내] 블로그 글발행 해피빈 콩 지급 안내 블로그 앱 간편설치 개발 가이드 블로그 글 권리 보호 블로그 스마트봇

CSS-Style

(
- 1 css에 이어서)

블로그 페이지의 오른쪽 영역인 .blog-main-right의 너비를 설정한다. 로그인 영역인 #blog-account를 디자인한다.(너비, 배경색, 테두리 등)

.blog-main #blog-main-content .blog-main-right { width: 280px; } .blog-main #blog-main-content .blog-main-right #blog-account { width: 100%; background-color: #f5f5f6; border: solid 1px #dddddf; padding: 20px 15px; margin: 12px 0; }

#blog-account에 속한 태그들을 디자인한다.
태그의 글지크기, 색 등을 디자인하고, 태그의 전체 영역에 링크기능이 적용되도록 display:block으로 적용하고 디자인(너비, 배경색, 테두리 등)한다. .account_sub의 배열을 'flex'기능으로 설정하고, 태그를 디자인한다.

.blog-main #blog-main-content .blog-main-right #blog-account p { font-size: 11px; color: #888; margin-bottom: 7px; } .blog-main #blog-main-content .blog-main-right #blog-account a { display: block; width: 100%; background-color: #ffffff; border: solid 1px #cccccc; border-radius: 4px; padding: 10px 0; margin-bottom: 12px; text-align: center; font-size: 13px; color: #000000; font-weight: 700; } .blog-main #blog-main-content .blog-main-right #blog-account .account_sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 8px; } .blog-main #blog-main-content .blog-main-right #blog-account .account_sub span { font-size: 11px; color: #888; }

배너 광고의 너비와 높이를 설정하고 디자인한다.

.blog-main #blog-main-content .blog-main-right #blog-banner { width: 100%; height: 240px; background-color: black; border: solid 1px #dddddf; }
결과 ▼

#blog-guide를 디자인(배경색, 테두리, 간격 등)한다. #blog-guide에 속한태그 의 배열을 'flex'기능으로 설정하고
,, 태그를 디자인(너비,글자크기 등)한다.

.blog-main #blog-main-content .blog-main-right #blog-guide { background-color: #ffffff; border: solid 1px #dddddf; border-width: 0 1px 1px; padding: 19px 20px; } .blog-main #blog-main-content .blog-main-right #blog-guide a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .blog-main #blog-main-content .blog-main-right #blog-guide p { width: 145px; font-size: 17px; line-height: 25px; color: #222; } .blog-main #blog-main-content .blog-main-right #blog-guide a span { font-size: 18px; font-weight: 700; } .blog-main #blog-main-content .blog-main-right #blog-guide i { display: inline-block; width: 88px; height: 65px; background-color: green; }
#blog-notice영역을 디자인(배경색, 테두리, 간격 등)한다. .blog-notice-title-wrap의 영역의 간격을 설정하고 그에 속한 태그 의 배열을 'flex'기능으로 설정한다.
,태그를 디자인(글자크기, 너비, 높이 등)한다.

.blog-main #blog-main-content .blog-main-right #blog-notice { background-color: #ffffff; border: solid 1px #dddddf; border-width: 0 1px 1px; padding: 24px 22px 22px; } .blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap { margin-bottom: 13px; } .blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap h3 { font-size: 14px; font-weight: 600; } .blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap i { width: 8px; height: 13px; background-color: #000000; }

.blog-notice-lists, .blog-notice-list를 디자인한다.(글자크기, 간격)
태그의 영역아래 간격을 설정할때, 마지막 태그에는 적용되지 않도록 설정한다.

.blog-main #blog-main-content #blog-notice .blog-notice-lists { font-size: 12px; } .blog-main #blog-main-content #blog-notice .blog-notice-list li { margin-bottom: 4px; } .blog-main #blog-main-content #blog-notice .blog-notice-list li:last-child { margin-bottom: 0; }

#blog-helper을 디자인(테두리, 배경색, 간격 등)한다. 그에 속한 태그
태그를 디자인(글자크기, 배경색 등)한다. 태그에 background-image로 파일을 연결해 체크박스 아이콘을 입력한다.

.blog-main #blog-main-content #blog-helper { border: solid 1px #dddddf; border-width: 0 1px 1px; background-color: #ffffff; padding: 24px 16px; } .blog-main #blog-main-content #blog-helper li { font-size: 14px; margin-bottom: 10px; } .blog-main #blog-main-content #blog-helper li a { display: block; height: 35px; line-height: 35px; padding-left: 45px; background-image: url(checkbox.png); background-repeat: no-repeat; background-size: 35px 35px; }
결과 ▼

html

(
html에 이어서)

이용약관 이용약관 이용약관 이용약관 Copyright © NAVER Corp. All Rights Reserved.

CSS-Style

(Main_right css에 이어서)

#webtoon-footer를 디자인한다. (배경색, 간격, 정렬 등) 그에 속한 태그
의 배열을 'flex'기능으로 설정하고
태그 사이의 문자가 있도록 설정한다.
#blog-footer { padding: 40px 0 55px 0; background-color: #f6f6f6; text-align: center; } #blog-footer ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 20px; } #blog-footer ul li a:before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: #d7d7d7; margin: 0 6px; vertical-align: -1px; } #blog-footer ul li:first-child a:before { content: initial; }

결과 ▼

blog-detail

html , CSS

,
영역은 'blog.html'과 동일

챌린지 프로그램 화제의 토픽, 영화 리뷰, 미션위젯과 함께 목표에 다가가는 당신의 도전을 기다립니다! HOT TOPIC 도전 블로거 영화를 말하다. 목표달성! 미션 위젯

.blog-border { border: solid 1px #eaeaec; } .blog-main-detail { padding: 0 0 100px 0; } .blog-main-detail #program { background-color: #634ea4; padding: 62px 0 50px; color: #ffffff; } .blog-main-detail #program h3 { font-size: 38px; font-weight: 400; margin-bottom: 10px; } .blog-main-detail #program p { font-size: 16px; } .blog-main-detail #program-nav { border-bottom: solid 1px #ebebeb; background-color: #ffffff; padding: 10px 0; } .blog-main-detail #program-nav .blog-container { display: flex; flex-wrap: wrap; align-items: center; }
.blog-main-detail #program-nav a { font-size: 14px; color: #666; } .blog-main-detail #program-nav a:hover { text-decoration: underline; } .blog-main-detail #program-nav h4 { font-weight: 600; } .blog-main-detail #program-nav h4 a { color: #000; } .blog-main-detail #program-nav ul { display: flex; flex-wrap: wrap; align-items: center; } .blog-main-detail #program-nav ul li a:before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: #ababab; margin: 0 12px; vertical-align: -1px; }
.blog-main-detail #program-nav a { font-size: 14px; color: #666; } .blog-main-detail #program-nav a:hover { text-decoration: underline; } .blog-main-detail #program-nav h4 { font-weight: 600; } .blog-main-detail #program-nav h4 a { color: #000; } .blog-main-detail #program-nav ul { display: flex; flex-wrap: wrap; align-items: center; } .blog-main-detail #program-nav ul li a:before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: #ababab; margin: 0 12px; vertical-align: -1px; }

핫토픽 도전으로 인기 블로거가 되어보세요. 핫토픽 도전은 매주 화/목/금 블로그씨 질문에 답한 도전글에서 선정되며 선정된 글과 동영상은 블로그 홈 HOT TOPIC 영역에 일정기간 노출됩니다. HOT TOPIC 도전 가이드 From, 블로그씨 7월 28일 블로그씨는 큰맘 먹고 오븐을 샀지만 그대로 방치 중이에요.. 나의 아기자기한 홈 카페를 영상과 함께 보여주세요! 블로그씨 질문에 답하기

.blog-main-detail #program-info { background-color: #f8f8f8; padding: 44px 0 36px; } .blog-main-detail #program-info .program-info-wrap { display: flex; flex-wrap: wrap; margin-bottom: 50px; } .blog-main-detail #program-info .program-info-wrap h4 { font-size: 32px; color: #7d66c8; line-height: 44px; margin-right: 120px; } .blog-main-detail #program-info .program-info-wrap p { font-size: 18px; line-height: 28px; color: #262626; margin-bottom: 18px; } .blog-main-detail #program-info .program-info-wrap a { font-size: 13px; color: #7d55c8; } .blog-main-detail #program-info .program-info-wrap a:hover { text-decoration: underline; }
.blog-main-detail #program-info .program-msg-box { padding: 29px; background-color: #ffffff; } .blog-main-detail #program-info .program-msg-box .from { display: block; font-size: 13px; font-weight: 600; color: #7d55c8; margin-bottom: 6px; } .blog-main-detail #program-info .program-msg-box .program-msg-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .blog-main-detail #program-info .program-msg-box p { width: 810px; font-size: 18px; }
.blog-main-detail #program-info .program-msg-box .date { color: #693bbc; } .blog-main-detail #program-info .program-msg-box .txt:before { content: ''; display: inline-block; width: 1px; height: 18px; background-color: #d5d5d5; margin: 0 9px; vertical-align: -1px; } .blog-main-detail #program-info .program-msg-box a { display: block; width: 179px; height: 40px; background-color: #7d55c8; color: #ffffff; line-height: 44px; text-align: center; } .blog-main-detail #program-info .program-msg-box a:hover { background-color: rgba(125, 85, 200, 0.8); }

7월 27일 덕질 일기 블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다. 나의 최애 덕질 일기를 사진과 함께 보여주세요! 나의 덕질은 끝나지 않았다! 정헤리 나의 덕질은 끝나지 않았다! 정헤리 나의 덕질은 끝나지 않았다! 정헤리 나의 덕질은 끝나지 않았다! 정헤리 나의 덕질은 끝나지 않았다! 정헤리 나의 덕질은 끝나지 않았다! 정헤리

.blog-main-detail #program-day { background-color: #ffffff; } .blog-main-detail #program-day .program-day-list .program-day-title-wrap { padding: 36px 0 16px; } .blog-main-detail #program-day .program-day-title-wrap .date { color: #693bbc; font-size: 16px; } .blog-main-detail #program-day .program-day-title-wrap .txt { font-size: 16px; } .blog-main-detail #program-day .program-day-title-wrap .txt:before { content: ''; display: inline-block; width: 1px; height: 18px; background-color: #d5d5d5; margin: 0 9px; vertical-align: -4px; } .blog-main-detail #program-day .program-day-title-wrap .msg { font-size: 14px; color: #666666; }
.blog-main-detail #program-day .program-image-lists { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .blog-main-detail #program-day .program-image-lists li { width: 175px; height: 228px; } .blog-main-detail #program-day .program-image-lists li img { width: 100%; margin-bottom: 15px; } .blog-main-detail #program-day .program-image-lists li h4 { font-size: 14px; color: #333; margin-bottom: 15px; } .blog-main-detail #program-day .program-image-lists li span { font-size: 12px; color: #959595; }

무엇이 어려웠지?

이번주 내내 동일한 문제점...! 오탈자! 동일하게 코딩을 했다고 생각했지만, 결과 값은 너무나도 다르게 나왔다.

어떻게 해결했지?

오탈자를 몇분이고 걸리든지 샅샅이 찾아냈다. 오탈자 찾는데만 30분 걸림 ...ㅠ

그래서?

한달 가까이 웹사이트 프로그래밍 수업을 들으니깐 처음에 AI스쿨 시작할때 OT가 생각이 났다. 프로그래머가 가져야 할 소양이나 필요한 능력에 대해서 질문했을 때, 검색능력과 집요함이 필요하다고 대답했던 것이. 정말 작은 크기의 영역을 디자인하는데도 시간이 많이 걸리고 ,정성이 들어가지만, 들인 시간에 비례하게 결과가 나타난다는 보장을 할 수 없다. 또한, 실수를 고치고 수정하는 작업에도 조금 더 간편하고 효율적인 방법으로 프로그래밍할 수 있는 방법을 찾는 검색 능력이 정말 필요하다는 것을... 포기하지 않고 원하는 결과를 만들어 낼때까지 붙들고 있는 것. 그것이 나에게 필요하다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0728

2021.07.27 NAVER-7

Tue, 27 Jul 2021 07:45:45 GMT

Day22, Naver blog 페이지를 만들어 봤다.

오늘 무엇을 배웠지?

Naver - blog 페이지 따라 만들어보기 1

Naver-'blog' : https://section.blog.naver.com/BlogHome.naver?directoryNo=0¤tPage=1&groupId=0

html

new file-save(blog.html), save(style0727.css)

기본 설정 + html, css 파일을 연동
네이버

```

블로그

로그인
2. ![](https://images.velog.io/images/hyeri_jung14/post/825743f6-1998-484d-b6ef-d55aa3637a2f/image.png)
블로그 홈 주제별 보기 이달의 블로그 공식 블로그 챌린지 프로그램 블로그 마켓 가입 아이템 팩토리 블로그팀 공식 블로그
#### CSS-Style (어제의 css에 이어서) 1. Default CSS

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } button { border: none; } input, textarea { outline: none; }

/blog/ .blog-container { width: 1080px; margin: 0 auto; }

2. .blog-header-top의 높이, 배경색 등을 디자인하고 .blog-container의 배열을 'flex'기능으로 설정한다.
#blog-header .blog-header-top { height: 60px; background-color: #00c73c; border-bottom: solid 1px #51b036; } #blog-header .blog-header-top .blog-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 60px; }

3. .blog-header-left의 배열을 'flex'기능으로 설정한다. 그에 속한 태그들을 디자인한다.(색, 글자 크기 등)
#blog-header .blog-header-top .blog-header-left { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } #blog-header .blog-header-top .blog-header-left h2 { font-size: 20px; margin-right: 20px; } #blog-header .blog-header-top .blog-header-left h2 a { color: #ffffff; font-weight: 700; }

4. .blog-header-input-wrap, .blog-search-wrap을 'flex'기능으로 배열하고 디자인한다. ``````, .btn-search의 너비가 속한 영역의 너비에 꽉 차게 calc()으로 너비를 설정한다.
#blog-header .blog-header-top .blog-header-input-wrap { display: flex; flex-wrap: wrap; align-items: center; } #blog-header .blog-header-top .blog-search-wrap { display: flex; flex-wrap: wrap; align-items: center; width: 325px; height: 40px; background-color: #ffffff; margin-right: 5px; } #blog-header .blog-header-top .blog-search-wrap input { width: calc(100% - 40px); height: 40px; background-color: #ffffff; border: solid 1px #4da733; padding: 0 15px; } #blog-header .blog-header-top .blog-search-wrap input:focus { outline: none; } #blog-header .blog-header-top .blog-search-wrap .btn-search { width: 40px; height: 40px; background-color: #28a93a; border: solid 1px #239e36; } #blog-header .blog-header-top .btn-total-search { width: auto; height: 40px; background-color: #28a93a; border: solid 1px #239e36; padding: 0 5px; line-height: 40px; color: #ffffff; }

5. .blog-header-right의 배열을 'flex'기능으로 설정하고 이에 속한 태그들을 디자인한다. (색, 테두리, 너비, 높이 등)
#blog-header .blog-header-top .blog-header-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #blog-header .blog-header-top .blog-header-right .btn-login { display: inline-block; border: solid 1px #239e36; padding: 2px 5px; margin-right: 20px; color: #ffffff; } #blog-header .blog-header-top .blog-header-right .btn-menu { width: 60px; height: 60px; background-color: #00c73c; border-left: solid 1px #239e36; border-right: solid 1px #239e36; cursor: pointer; }

6. .blog-header-nav를 디자인(높이, 배경색, 테두리 등)하고 .blog-container의 배열을 'flex'기능으로 설정한다.
#blog-header .blog-header-nav { height: 40px; background-color: #ffffff; border-bottom: solid 1px #e5e5e5; } #blog-header .blog-header-nav .blog-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

7. .nav-left의 태그들을 디자인한다. ```
```태그의 배열을 'flex'기능으로 설정하고 ```
```태그의 높이, 간격 등을 설정한다. 이 중, .on 이라는 class를 가진 태그에는 밑줄이 굵게 생기도록 설정한다. ``````태그를 디자인한다. (너비, 높이, 글자 크기 등)
#blog-header .blog-header-nav .nav-left ul { display: flex; flex-wrap: wrap; align-items: center; } #blog-header .blog-header-nav .nav-left ul li { height: 40px; margin-right: 16px; border-bottom: solid 2px transparent; } #blog-header .blog-header-nav .nav-left ul li:on { border-bottom: solid 2px #00AB33; } #blog-header .blog-header-nav .nav-left li a { display: block; width: 100%; height: 100%; line-height: 40px; font-size: 13px; }

8. .nav-right의 태그들을 디자인한다. ```
```태그의 배열을 'flex'기능으로 설정한다. ```
```태그를 디자인하고 .on이라는 class를 가진 태그에 한해서 배경색과 글자색이 달라지도록 설정한다. ``````태그를 디자인한다.(너비, 높이, 배경색, 글자 크기 등)
#blog-header .blog-header-nav .nav-right ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #blog-header .blog-header-nav .nav-right li { width: auto; height: 26px; margin-left: 8px; } #blog-header .blog-header-nav .nav-right li.on a { color: #ffffff; background-color: #00c73c; border: solid 1px rgba(0, 0, 0, 0.07); } #blog-header .blog-header-nav .nav-right li a { display: block; width: 100%; height: 100%; background-color: #ffffff; border: solid 1px #cecece; line-height: 26px; padding: 0 10px; font-size: 13px; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/4dd7658b-f808-4326-80f6-dbaf3f9adc0b/image.png) ### ```
``` - 1 #### html (```
``` html에 이어서) 1. ![](https://images.velog.io/images/hyeri_jung14/post/2486d806-cb01-4dcd-bf83-1c39fcbbed2a/image.png)
핫토픽 다꾸를 해요 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 1 2 3 4 5 1 2 3 4 5
2.![](https://images.velog.io/images/hyeri_jung14/post/d38c7ca4-278d-4295-948a-fe591cdd47d6/image.png)

로그아웃 상태입니다. 로그인하여 이웃 새글을 확인해보세요. 전체 음악 사진 취미 정혜리 13시간 전 Title 1 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 공감43 댓글11 정혜리 13시간 전 Title 1 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 공감43 댓글11
#### CSS-Style (```
``` css에 이어서) 1. #hot-topic 영역의 높이와 배경색 등을 설정한다. .blog-container의 배열을 'flex'기능으로 설정한다.
.blog-main #hot-topic { height: 305px; background-color: #f5f5f6; padding: 20px 0 15px; } .blog-main #hot-topic .blog-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

2. .hot-topic-left의 position을 relative로 설정해 그에 속한 태그들의 영향을 받도록 설정하고 너비를 설정한다. .topic-heading의 배열을 'flex'기능으로 설정하고 그에 속한 태그들을 디자인한다.(글자크기, 너비, 높이, 배경색 등)
.blog-main #hot-topic .hot-topic-left { position: relative; width: 770px; } .blog-main #hot-topic .hot-topic-left .topic-heading { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 11px; } .blog-main #hot-topic .hot-topic-left .topic-heading h3 { font-size: 16px; font-weight: 600; color: #e55e5e; } .blog-main #hot-topic .hot-topic-left .topic-heading i { display: block; width: 8px; height: 13px; background-color: grey; margin: 0 8px; } .blog-main #hot-topic .hot-topic-left .topic-heading a { font-size: 16px; }

3. .topic-lists의 배열을 'flex'기능으로 설정하고 그에 속한 태그들을 디자인한다. ```
```의 position은 relative, ``````,```
```태그의 position은 absolute로 설정하고 너비와 높이를 설정한다.
.blog-main #hot-topic .hot-topic-left .topic-lists { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .blog-main #hot-topic .hot-topic-left .topic-lists li { position: relative; width: 252px; height: 240px; } .blog-main #hot-topic .hot-topic-left .topic-lists img { position: absolute; width: 100%; height: 100%; } .blog-main #hot-topic .hot-topic-left .topic-lists p { position: absolute; width: 100%; background-color: rgba(55, 66, 87, 0.9); bottom: 0; padding: 20px 0; color: #ffffff; text-align: center; }

4. .pagination-wrap의 배열을 'flex'기능으로 설정하고 top, right 값과 position : absolute;로 위치를 설정한다. 이에 속한 태그``````를 디자인한다.(너비, 높이, 테두리 등)
.blog-main #hot-topic .pagination-wrap { display: flex; flex-wrap: wrap; align-items: flex-end; position: absolute; top: 0; right: 0; } .blog-main #hot-topic .pagination-wrap a { display: block; width: 20px; height: 20px; margin-left: 4px; color: #888; border: solid 1px rgba(221, 221, 223, 0.8); font-size: 12px; background-color: #f6f6f7; text-align: center; line-height: 20px; }

5. .hot-topic-right의 position을 relative로 설정해 자식태그들의 영향을 받도록 설정하고 .topic-banner의 너비, 높이, 배경색을 설정한다.
.blog-main #hot-topic .hot-topic-right { position: relative; width: 280px; padding-top: 30px; } .blog-main #hot-topic .hot-topic-right .topic-banner { width: 280px; height: 240px; background-color: black; }

6. #blog-main-content의 배열을 'flex'기능으로 설정하고 .blog-main-left의 너비를 설정한다. .blog-main-left에 속한 #blog-main-notification, #blog-article영역을 디자인한다.
.blog-main #blog-main-content { display: flex; flex-wrap: wrap; justify-content: space-between; } .blog-main #blog-main-content .blog-main-left { width: 770px; } .blog-main #blog-main-content .blog-main-left #blog-main-notification { background-color: #ffffff; padding: 54px 0; text-align: center; } .blog-main #blog-main-content .blog-main-left #blog-main-notification p { font-size: 16px; line-height: 30px; } .blog-main #blog-main-content .blog-main-left #blog-article .blog-article-nav { background-color: #ffffff; border-top: solid 1px #999999; border-bottom: solid 1px #999999; padding: 10px 0; font-size: 14px; }

7. .blog-article-nav에 속한 태그들을 디자인한다. ```
```태그의 배열을 'flex'기능으로 설정하고 ``````태그의 간격을 설정한다. .blog-article-lists 의 ```
```,``````태그을 디자인한다. (너비, 높이 등)
.blog-main #blog-main-content .blog-main-left .blog-article-nav ul { display: flex; flex-wrap: wrap; align-items: center; } .blog-main #blog-main-content .blog-main-left .blog-article-nav li { margin-right: 22px; }

.blog-main #blog-main-content .blog-article-lists li { width: 100%; border-bottom: solid 1px #eeeeef; padding: 25px 0 23px; } .blog-main #blog-main-content .blog-article-lists li a { display: block; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; height: 100%; }

8. .blog-article-info의 너비를 설정하고 .blog-profile-wrap의 배열을 'flex'기능으로 설정한다. .blog-profile-wrap의 ``````를 디자인(너비, 높이, 경계 등)한다. .blog-profile-info의 태그들을 디자인한다.
.blog-main #blog-main-content .blog-article-lists .blog-article-info { width: 573px; } .blog-main #blog-main-content .blog-article-lists .blog-profile-wrap { display: flex; flex-wrap: wrap; align-items: center; } .blog-main #blog-main-content .blog-article-lists .blog-profile-wrap img { width: 32px; height: 32px; border-radius: 50%; margin-right: 10px; } .blog-main #blog-main-content .blog-article-lists .blog-profile-info h3 { font-size: 14px; margin-bottom: 3px; } .blog-main #blog-main-content .blog-article-lists .blog-profile-info p { font-size: 11px; color: 959595; }

9. .blog-article-lists에 속한 태그들을 디자인한다. ```
```, .paragraph, .comments, 또, .comments에 속한 태그 ``````태그의 margin값으로 경계를 설정하고 글자 크기 등을 디자인한다.
.blog-main #blog-main-content .blog-article-lists h2 { margin-top: 16px; font-size: 17px; } .blog-main #blog-main-content .blog-article-lists .paragraph { margin-top: 10px; font-size: 13px; color: #666666; } .blog-main #blog-main-content .blog-article-lists .comments { margin-top: 14px; color: #959595; font-size: 12px; } .blog-main #blog-main-content .blog-article-lists .comments span { margin-right: 9px; } .blog-main #blog-main-content .blog-article-lists .comments em { font-style: normal; }

``` 결과 ▼

무엇이 어려웠지?

어떻게 해결했지?

position을 relative->absolute로 설정했더니 원하는대로 배열되었다. 분명 내 손가락은 absolute로 설정한다고 설정을 했는데, 왜 relative로 설정되어서 오류찾는데 시간을 보내게 하는지 모르겠다ㅠ

그래서?

익숙해졌다고 생각했는데 오류는 계속 존재하고, 설계를 하는 건 여전히 어렵다. 설계에 따라 css 디자인도 달라지기 때문에 페이지를 만드는데 정답은 없지만, 내가 스스로 할 때는 답을 잘 찾고 있는 것 같지는 않다. 어렵다ㅠ

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0727

2021.07.26 NAVER-6

Mon, 26 Jul 2021 05:29:23 GMT

Day21, 저번주에 시작한 네이버 웹툰 페이지 따라만들기를 완료했다..!

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기 2

Naver-'웹툰 : https://comic.naver.com/index

- 2

html

(
- 1 html에 이어서)

새로운 베스트 도전만화 돈벌다 만난사이 twinee2018 회사에서 돈 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기

인기급상승 만화 인기순 업데이트순 1 급식아빠-18화 죽은지 얼마나 됐어요? 0 2 급식아빠-18화 죽은지 얼마나 됐어요? 1

30대 실시간 인기만화 남자 여자 1 헬퍼 2 : 킬베로스 삭 1 1 헬퍼 2 : 킬베로스 삭 1
CSS-Style

(
- 1 css에 이어서)

웹툰 페이지의 오른쪽 영역인 .webtoon-main-right가 브라우저의 오른쪽에 위치하도록 하고 너비를 설정한다. 새로운 베스트 도전 만화 영역 .webtoon-challenge-wrap를 디자인(너비, 높이, 배경색)하고 간격을 설정한다. 그에 속한 태그들을 디자인한다.

#webtoon-main .webtoon-main-right { float: right; width: 240px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap { width: 100%; height: 252px; background-color: #f9f9fc; padding: 20px 18px; margin-bottom: 20px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 { font-size: 18px; margin-bottom: 11px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 span { color: #00d564; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap img { width: 100%; height: 110px; }

'flex'기능으로 .webtoon-title-wrap의 배열을 설정하고, 'hover'기능으로 커서를 올렸을 때 밑줄이 그어지도록 설정한다. .webtoon-title-wrap의 자식태그들을 디자인(글자크기, 색)한다.

#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 5px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info a:hover { text-decoration: underline; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap h4 { font-size: 16px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap a { font-size: 12px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p { font-size: 14px; } #webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p a { color: grey; }

배너 광고의 너비와 높이를 설정하고 디자인한다.

#webtoon-main .webtoon-main-right .webtoon-banner-type-1, #webtoon-main .webtoon-main-right .webtoon-banner-type-2 { margin-bottom: 8px; } #webtoon-main .webtoon-main-right .webtoon-banner-type-1 { height: 240px; background-color: yellow; } #webtoon-main .webtoon-main-right .webtoon-banner-type-2 { height: 86px; background-color: pink; }
결과 ▼

.webtoon-popular 영역의 배경색을 설정하고 간격을 설정한다. 'flex'기능으로 .webtoon-popular-header영역의 배열을 설정한다.

#webtoon-main .webtoon-main-right .webtoon-popular { background-color: #ffffff; margin-bottom: 8px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 9px 12px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header h2 { font-size: 14px; }

.webtoon-popular-tabs의 배열을 'flex'기능으로 설정하고 경계를 border-top값으로 설정한다. 그에 속하는 .tab의 너비가 영역의 반을 차지하고 중앙정렬되도록 설정하고, 높이, 경계를 설정한다. 이때, 인기순과 업데이트순을 구분하는 경계를 만들어준다.

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: solid 1px #e1e1e1; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab { width: 50%; height: 30px; border-bottom: solid 1px #e1e1e1; text-align: center; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab:first-child { border-right: solid 1px #e1e1e1; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab .active { border-bottom: solid 1px #ffffff; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab span { display: block; width: 100%; height: 100%; line-height: 30px; font-size: 12px; }

.webtoon-popular-ranking의 너비, 배경색, 간격을 설정하고 그에 속한 태그
의 배열들을 'flex'기능으로 설정하고 글자크기, 간격등을 설정한다. .rank-content 또한 'flex'기능으로 배열을 설정하고 이때, 너비를 넘어가는 글들은 말줄임표로 표현하기 위해 너비를 설정하고 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;를 적용한다.

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking { width: 100%; background-color: #ffffff; padding: 15px 0 7px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 7px; padding: 0 13px; font-size: 12px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content { display: flex; flex-wrap: wrap; align-items: center; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a { display: inline-block; overflow: hidden; width: 140px; white-space: nowrap; text-overflow: ellipsis; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content .rank { margin-right: 5px; }

.webtoon-popular-ranking의 .rank-box들의 배열을 'flex'기능으로 설정하고 너비 ,높이, 위치를 설정한다. 각 class에 따른 배경색을 설정한다.

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 30px; height: 12px; top: -3px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status { width: 12px; height: 12px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-stay { background-color: black; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-up { background-color: red; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-down { background-color: blue; }
결과 ▼

.webtoon-popular-ranking의 .rank.rank-custom의 position을 relative로 설정해 그에 속한 태그들의 영향을 받도록 한다. 'flex'기능으로 .imgae-wrap의 배열을 설정하고 너비를 설정한다. 그에 속한 태그들을 디자인한다.

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank.rank-custom { position: relative; top: -10px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 140px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap img { width: 30px; height: 33px; margin-right: 5px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info a { width: 100px; } #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info .author { display: block; }
결과 ▼

html

(
html에 이어서)

이용약관 이용약관 이용약관 이용약관 이용약관 © NAVER CORP. 이용약관 이용약관 이용약관 이용약관 이용약관 © NAVER WEBTOON CORP. 본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.

CSS-Style

(Main_right css에 이어서)

#webtoon-footer의 영역의 간격, 글자크기를 설정하고 .webtoon-container의 테두리와 영역의 간격을 설정한다.
#webtoon-footer { padding-bottom: 78px; font-size: 12px; }

#webtoon-footer .webtoon-container { border-top: solid 1px #e6e7e8; padding-top: 40px; }

2. .webtoon-footer-wrap의 배열을 'flex'기능으로 설정하고 margin값으로 간격을 설정한다. 그에 속한 태그 left, right가 각각 영역의 반을 차지하도록 설정하고 구분선을 만든다.
#webtoon-footer .webtoon-footer-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-bottom: 32px; } #webtoon-footer .webtoon-footer-wrap .webtoon-footer-left, #webtoon-footer .webtoon-footer-wrap .webtoon-footer-right { width: 50%; padding-left: 25px; } #webtoon-footer .webtoon-footer-wrap .webtoon-footer-right { border-left: solid 1px grey; }

3. .webtoon-footer-wrap의 자식 태그들을 디자인한다. ```
```태그의 배열을 설정하고, ``````태그간에 문자를 'content: "";'를 삽입해 구분 짓도록 한다. 이때, 첫번째 ```
```태그앞에는 생기지 않도록 설정한다. +++text-transform: capitalize는 첫글자만 대문자, uppercase는 전체 대문자, lowercase는 전체 소문자로 설정
#webtoon-footer .webtoon-footer-wrap ul { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-bottom: 8px; } #webtoon-footer .webtoon-footer-wrap ul li:first-child:before { content: initial; } #webtoon-footer .webtoon-footer-wrap ul li:before { display: inline-block; content: ""; width: 1px; height: 11px; background-color: #d9d9d9; vertical-align: -1px; margin: 0 8px; } #webtoon-footer .webtoon-footer-wrap span { text-transform: uppercase; }

4. .webtoon-footer-paragraph의 왼쪽 간격을 설정한다.
#webtoon-footer .webtoon-footer-paragraph { padding-left: 25px; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/99eca5e4-3b38-4728-9a09-828b96e848c9/image.png) +++ HTML 특수문자 ```©``` : © ### webtoon-detail #### html , CSS 1. ```
``` ,```
```,```
```영역은 'webtoon.html'과 동일 ```
``` 2.![](https://images.velog.io/images/hyeri_jung14/post/11a05d9d-f66c-476f-b755-950c54442dcd/image.png)
요일별 장르별 작품별 작가별
요일전체 월요웹툰 화요웹툰 수요웹툰 목요웹툰
---
.webtoon-detail { padding-top: 0; }

.webtoon-detail .nav-1 { background-color: #fafafa; border-bottom: solid 1px #ededed; }

.webtoon-detail .nav-1 ul { display: flex; flex-wrap: wrap; align-items: center; } .webtoon-detail .nav-1 ul li { width: auto; height: 36px; margin-right: 28px; } .webtoon-detail .nav-1 ul li:last-child { margin-right: 0; } .webtoon-detail .nav-1 ul li a { display: block; width: 100%; height: 100%; line-height: 36px; text-align: center; font-size: 12px; color: #434343; }

.webtoon-detail .nav-2 { padding-top: 20px; border-bottom: solid 1px #e5e5e5; } .webtoon-detail .nav-2 ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .webtoon-detail .nav-2 ul li { margin-right: 14px; padding-bottom: 5px; border-bottom: solid 2px transparent; } .webtoon-detail .nav-2 ul li.on { border-color: #00d564; margin-bottom: -1px; font-weight: 700; } .webtoon-detail .nav-2 ul li:last-child { margin-right: 0; } .webtoon-detail .nav-2 ul li a { font-size: 13px; }

3. ![](https://images.velog.io/images/hyeri_jung14/post/a23f1731-59ea-4abf-a7fa-4bc628604e79/image.png)
이달의 신규 웹툰 new 아찔한 전남편 별규, 기뭉 / 여백 국민 여배우 하은. 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고
---
.webtoon-detail #webtoon-this-month { padding: 20px 0; } .webtoon-detail #webtoon-this-month h2 { font-size: 16px; margin-bottom: 8px; } .webtoon-detail #webtoon-this-month .webtoon-this-lists { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

.webtoon-detail #webtoon-this-month .webtoon-this-list { width: 218px; } .webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap { position: relative; width: 100%; height: 120px; margin-bottom: 5px; } .webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap img { position: absolute; width: 100%; height: 100%; } .webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap .new-mark { position: absolute; width: 30px; background-color: #00c85e; color: #ffffff; } .webtoon-detail #webtoon-this-month .webtoon-this-list h3 {
font-size: 14px; margin-bottom: 5px; } .webtoon-detail #webtoon-this-month .webtoon-this-list .author { display: block; font-size: 14px; margin-bottom: 5px; } .webtoon-detail #webtoon-this-month .webtoon-this-list p { font-size: 14px; }

4. ![](https://images.velog.io/images/hyeri_jung14/post/b5069f81-9033-4a13-96e5-9c40c4203ccf/image.png)
요일별 전체 웹툰 인기순 업데이트순 조회순 별점순 월요웹툰 참교육 참교육 참교육 참교육 참교육 참교육 참교육 화요웹툰 참교육 참교육 참교육 참교육 참교육 참교육 참교육
---
.webtoon-detail #webtoon-total-day { padding-top: 20px; } .webtoon-detail #webtoon-total-day .webtoon-total-title-wrap { display: flex; flex-wrap: wrap; justify- content: space-between; align-items: center; padding-bottom: 8px; border-bottom: solid 1px #eaeaea;} .webtoon-detail #webtoon-total-day .webtoon-total-title-wrap h2 { font-size: 16px; } .webtoon-detail #webtoon-total-day .webtoon-total-title-wrap ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .webtoon-detail #webtoon-total-day .webtoon-total-title-wrap li { margin-right: 10px; } .webtoon-detail #webtoon-total-day .webtoon-total-title-wrap li:last-child { margin-right: 0; } .webtoon-detail #webtoon-total-day .webtoon-total-title-wrap a { font-size: 12px; }

.webtoon-detail #webtoon-total-day .webtoon-day-lists { display: flex; flex-direction: row; border-bottom: solid 1px #f4f4f4; } .webtoon-detail #webtoon-total-day .webtoon-day-list { width: 14.2855%; text-align: center; border-right: solid 1px #f4f4f4; padding: 0 8px; } .webtoon-detail #webtoon-total-day .webtoon-day-list.active { background-color: #3a3a3a; border-color: #3a3a3a; color: #fbcb00; }

```

무엇이 어려웠지?

.rank-box .status .status-down로 설정한 이미지가 나타나지 않았다.

어떻게 해결했지?

모든 코딩은 선생님이 알려주신대로 똑같이 작성했으나..! .status와 .status-stay 사이의 공백을 만들고 설정했더니 이미지에 대한 디자인이 적용되지 않았다.

그래서?

저번주에 양이 많아서 엄청 고생했던 기억이 있어서 오늘도 미리 고생할거라는 마음을 먹고 임했다. 완전 새로운 것은 없었지만, 여전히 사이트를 보고 레이아웃을 바로 짜는건 쉽지 않았다. 여러번 수정을 해야했다. 새롭게 배운건, html에서 적용되는 특수문자와, text-transform 으로 소문자, 대문자 등을 설정할 수 있다는 것..!

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0724

2021.07.23 NAVER-5

Fri, 23 Jul 2021 09:35:25 GMT

Day20, 오늘은 Naver 웹툰 페이지를 따라 만들어봤다! 정말 어렵다...

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기

Naver-'웹툰 : https://comic.naver.com/index

html

new file-save(webtoon.html, webtoon-detail.html), save(style0723.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동
네이버

```

만화 웹소설 로그인

홈 웹툰 베스트 도전 도전만화 온천마을 판타지 로맨스 <모락모락 왕세자님>

CSS-Style

(어제의 css에 이어서)

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } button { border: none; } input, textarea { outline: none; }

/웹툰 페이지/ .webtoon-container { width: 960px; margin: 0 auto; } .webtoon-border { border: solid 1px #ced2d7; }

2. #webtoon-header의 배경색을 흰색으로 설정한다.
#webtoon-header { background-color: #ffffff; }

3. .webtoon-header-top 배경색을 설정하고, 아래 경계를 디자인한다. padding 값으로 상,하에 간격을 만든다. .webtoon-container, .webtoon-header-left의 배열을 'flex'기능으로 설정한다.
#webtoon-header .webtoon-header-top { background-color: #ffffff; padding: 10px 0 7px 0; border-bottom: solid 1px #f2f2f2; } #webtoon-header .webtoon-header-top .webtoon-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #webtoon-header .webtoon-header-top .webtoon-header-left { width: 550px; display: flex; flex-wrap: wrap; align-items: center; }

4. .webtoon-header-left의 ``````,``` ```(```
```태그의 기본 속성 값때문에 ``````태그로 묶어 글자색을 설정 한다.)는 태그의 글자를 디자인하고 margin 값으로 태그 간격을 설정한다.
#webtoon-header .webtoon-header-top .webtoon-header-left h2 { font-size: 20px; } #webtoon-header .webtoon-header-top .webtoon-header-left .bar { width: 1px; height: 13px; background-color: #d2d2d2; margin: 0 8px 0 10px; } #webtoon-header .webtoon-header-top .webtoon-header-left h3 { margin-right: 30px; } #webtoon-header .webtoon-header-top .webtoon-header-left h3 a { font-size: 16px; color: grey; }

5. 검색창인 .webtoon-header-input-wrap의 너비, 높이 등을 설정하고 'flex'기능으로 배열, 테두리 디자인한다. input-wrap 안의 .input, .btn-search의 너비, 높이를 설정하고 디자인한다.
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap { width: 315px; height: 37px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border: solid 1px #e5e5e5; } #webtoon-header .webtoon-header-top .webtoon-header-input-wrap input { width: calc(100% - 35px); height: 100%; border: none; } #webtoon-header .webtoon-header-top .webtoon-header-input-wrap input:focus { outline: none; } #webtoon-header .webtoon-header-top .webtoon-header-input-wrap .btn-search { width: 35px; height: 100%; background-color: #00d564; }

6. .webtoon-header-right의 배열을 'flex'기능으로 설정하고 .btn-login, .btn-menu를 디자인한다.(글자크기, 너비, 높이, 배경색 등)
#webtoon-header .webtoon-header-top .webtoon-header-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #webtoon-header .webtoon-header-top .webtoon-header-right .btn-login { font-size: 12px; border: solid 1px #000; padding: 2px 4px; margin-right: 20px; } #webtoon-header .webtoon-header-top .webtoon-header-right .btn-menu { width: 16px; height: 16px; background-color: blue; }

7. .webtton-header-nav영역 아래에 border값으로 경계를 만들고 .webtoon-container의 배열을 'flex'기능으로 설정한다. .webtoon-header-nav에 속한 태그들(```
```,``````,``````)을 디자인한다. ```
```태그 중 "on"이라는 class를 가진 태그에 한하여 배경색과 글자 색이 달라지도록 설정한다.
#webtoon-header .webtoon-header-nav { border-bottom: solid 1px #e5e5e5; } #webtoon-header .webtoon-header-nav .webtoon-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #webtoon-header .webtoon-header-nav nav ul { display: flex; flex-wrap: wrap; align-items: center; } #webtoon-header .webtoon-header-nav nav ul li { width: auto; height: 40px; } #webtoon-header .webtoon-header-nav nav ul li.on a { color: #ffffff; background-color: #00d564; } #webtoon-header .webtoon-header-nav nav ul li a { display: block; width: 100%; height: 100%; padding: 0 15px; line-height: 40px; font-size: 14px; }

8. .webtoon-heade-link-wrap의 태그들을 디자인한다. icon-ex-mark의 너비, 높이, 배경색 등을 디자인하고 속한 태그들의 배열을 일렬로 설정한다. .webtoon-header-link-wrap의 ``````태그에 커서를 움직이면 밑줄이 생기도록 :hover로 text-decoration: underline;을 설정한다.
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark { display: inline-block; width: 16px; height: 14px; background-color: #000; vertical-align: middle; } #webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a { vertical-align: middle; font-size: 12px; color: #606060; } #webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover { text-decoration: underline; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/a6bf4fce-b21a-4e60-9f19-5ff395be9c38/image.png) ### ```
``` - 1 #### html (```
``` html에 이어서) 1. ![](https://images.velog.io/images/hyeri_jung14/post/b5b9d222-9ddb-4e56-adb7-a3be50deee2d/image.png)
오늘의 웹툰 5월 19일 수요일 인기순 업데이트순 조회순 별점순
2.![](https://images.velog.io/images/hyeri_jung14/post/9a49e149-4547-4236-ae2f-4557a04c62d2/image.png)
장르별추천웹툰 에피소드 옴니버스 스토리 인기순 업데이트순 조회순 별점순 기억의 흔적 60화 브라보 장 기억의 흔적 60화 브라보 장 기억의 흔적 60화 브라보 장 기억의 흔적 60화 브라보 장 기억의 흔적 60화 브라보 장 기억의 흔적 60화 브라보 장
#### CSS-Style (main_right css에 이어서) 1. ```
```과 ```
```의 간격을 padding-top으로 설정한다. .webtoon-container에 속한 태그들과 영향을 받도록 overflow: hidden으로 설정한다.
#webtoon-main { padding-top: 100px; } #webtoon-main .webtoon-container { overflow: hidden; }

2. .webtoon-main-left영역이 main영역의 좌측으로 설정하고 너비를 설정한다. .webtoon-carousel의 너비, 높이, 배경색 등을 디자인하고 margin 값으로 간격을 생성한다.
#webtoon-main .webtoon-main-left { float: left; width: 694px; } #webtoon-main .webtoon-main-left .webtoon-carousel { width: 694px; height: 252px; overflow: hidden; background-color: #ffffff; margin-bottom: 20px; }

3. .webtoon-carousel-left가 영역의 좌측에 배열되도록 float:left;로 설정하고 너비, 간격을 설정한다. 이에 속한 태그들(```
```,``````,```
```)을 디자인한다.
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left { width: 112px; float: left; padding: 20px 5px 0 15px; } #webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 { font-size: 25px; } #webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 span { color: #00d564; } #webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left p { font-size: 12px; color: #808285; }

4. .webtoon-carousel-left에 속한 태그 들을 디자인한다. (```
```,``````) 이때, ```
```태그 간의 간을 설정하되, 가장 마지막 태그에는 적용되지 않도록 설정한다.
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul { margin-top: 48px; } #webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li { font-size: 12px; margin-bottom: 10px; } #webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li:last-child { margin-bottom: 0;} #webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left li.on a { color: #00d564; }

5. .webtoon-carousel-right의 너비를 설정한다. 이 태그가 우측에 배열 되도록 float:right;로 설정하고 배너의 너비와 높이를 설정한다.
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right { width: calc(100% - 112px); float: right; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner { width: 582px; height: 195px; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner img { width: 100%; height: 100%; }

6. .webtoon-carousel-banner에 속한 태그들(```
```,```
```,```
```)을 디자인한다. ```
```태그가 자식태그들과의 영향을 받도록 position을 relative로 설정하고 자식태그들의 배열을 'flex'기능으로 설정한다. ```
```태그 간의 간격을 설정하되, 양끝에는 간격이 없도록 설정한다.
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav { position: relative; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul { display: flex; flex-wrap: wrap; align-items: center; width: 540px; margin: 0 auto; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li { width: 135px; height: 57px; border-right: solid 1px #e5e5e5; border-left:solid 1px #e5e5e5; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:first-child { border-left: none; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child { border-right: none; }

7. .webtoon-carousel-banner-nav 태그에 속한 ``````태그의 너비와 높이를 설정하고 .btn을 디자인(위치, 색상 등)한다.
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li img { width: 100%; height: 100%; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn { position: absolute; width: 20px; height: 57px; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev { left: 0; top: 0; background-color: pink; } #webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next { right: 0; top: 0; background-color: blue; }

8. 배너 광고인 .webtoon-banner를 디자인한다.
#webtoon-main .webtoon-main-left .webtoon-banner { width: 100%; height: 80px; background-color: black; }

결과 ▼ ![](https://images.velog.io/images/hyeri_jung14/post/4ea7ddbb-2eab-4b3a-91f1-7cda596d7549/image.png) 9. .webtoon-content와 이에 속한 태그들을 디자인한다. .webtoon-content-header는 자식 태그와 영향을 받기 위해 position을 relative로 설정하고 아래에 경계를 위해 border-bottom값을 설정한다. ```
```,``````태그를 디자인한다.
#webtoon-main .webtoon-main-left .webtoon-content { background-color: #ffffff; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header { position: relative; border-bottom: solid 1px #e5e5e5; padding: 26px 0 10px; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header.webtoon-content-header-recommend{ padding-bottom: 0; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 { font-size: 20px; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 span{ color: #00d564; }

10. .webtoon-contetn-header의 태그들(```
```,```
```,```
```,``````)을 디자인한다. 'flex'기능으로 ```
```태그의 배열을 설정하고, 이에 속한 ```
```태그 간의 간격을 margin값으로 설정한다. 각 항목에 링크기능이 속한 영역 전체에 적용되도록 ``````태그를 block 속성을 띄도록 설정하고 글자를 디자인한다.
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav { margin-top: 20px; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header ul { display: flex; flex-wrap: wrap; align-items: center; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li { width: auto; height: 22px; margin-right: 15px; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li.on { border-bottom: solid 2px #00d564; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li a { display: block; padding-bottom: 6px; font-size: 13px; color: #737373; }

11. .webtoon-content-body에 속하는 태그들(```
```, ```
```, ```
```,``````)을 디자인한다. 'flex'기능으로 ```
```태그의 배열을 설정하고, 이에 속한 ```
```태그 간의 간격을 margin값으로 설정한다. ``````태그의 글자를 디자인한다.
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav { padding: 12px; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li { margin-right: 8px; font-size: 12px; } #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li a { color: grey; }

12. .webtoon-content-col-3의 배열을 'flex'기능으로 설정하고 그에 속한 .webtoon-content-col-type-1의 너비, 높이, 글자크기를 디자인한다. .webtoon-content-col-type-1에 속한 태그들에 margin값을 설정해 간격을 설정하고 글자 색을 디자인한다.
#webtoon-main .webtoon-main-left .webtoon-content-col-3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #webtoon-main .webtoon-main-left .webtoon-content-col-3 .webtoon-content-col-type-1 { width: 210px; height: 196px; font-size: 12px; } #webtoon-main .webtoon-main-left .webtoon-content-col-type-1 img { margin-bottom: 10px; } #webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info h4, #webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info p { margin-bottom: 5px; } #webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info span { color: grey; }

```

결과 ▼

무엇이 어려웠지?

input에 설정한 너비가 이상하게 꽉 차지 않고 절반 정도에 그쳤다..

어떻게 해결했지?

justify-content: space-between;으로 깔-끔하게 해결! 그리고 너비를 설정할 때 calc이라고 적어야 하는걸 cal 만 적고 왜 너비가 원하는대로 안되는거지 고민 했었다..! 결국 오탈자와의 싸움은 끝나지 않음..

그래서?

아 양이 너무 많아서 개발일지 쓰는거 너무 힘들다.. 단순 반복적인 다음 개발일지 부터는 이렇게 자세하게 다루기 보다는 레이아웃을 어떤 식으로 구상했는지에 대해 포커스를 맞춰서 쓰고, CSS 디자인도 보편적으로 반복되는 디자인은 빼고 특이하게 적용하는 디자인이 있는 것만 적어야 겠다. 너무 세세한데 시간을 뺏기는 기분이다...ㅠ

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0723

2021.07.22 NAVER-4

Thu, 22 Jul 2021 06:17:07 GMT

Day19, 어제에 이어 Naver 쇼핑페이지 따라만들어보기를 완료했다!

오늘 무엇을 배웠지?

Naver 메인 따라 만들어보기2

Naver-'쇼핑' : https://shopping.naver.com/

- 2

html

(어제의 html 파일에 이어서)

태그로 list-item영역을 설정하고 id를 입력한다. 하나의 리스트를 반으로 나누어 위,아래 영역으로 구분해 list-half-top, list-half-bottom으로 영역을 설정하고 class를 입력한다. 위, 아래 영역의 제목부분(
)과 제품영역(
)을 구분 짓고, 제목부분의 이름을
로 입력한다. 제품영역은 ,
,태그로 사진을 연결하고 필요한 정보를 입력한다.
백화점 상품 그대로 생활공작소 과탄산 소다 1.5kg x 4입 생활공작소 과탄산 소다 1.5kg x 4입 생활공작소 과탄산 소다 1.5kg x 4입 HOT DEAL 백화점 상품 그대로 50% 부드럽게 감기는 말랑말랑 파우치 이불 21,900원 50% 부드럽게 감기는 말랑말랑 파우치 이불 21,900원

태그로 list-item영역을 설정하고 id를 입력한다. 하나의 리스트를 반으로 나누어 위,아래 영역으로 구분해 list-half, list-row-3으로 영역을 설정하고 class를 입력한다. 이때, 테두리가 적용된 부분에는 class에 shop-border를 입력해 CSS에서 디자인한 shop-border값이 동일하게 적용되도록 한다. list-half의 양식은 1.의 list-half-bottom의 양식과 동일하므로 복사해서 입력하고, 아래의 list-row-3 영역은
, ,,
태그로 이미지를 연결하고 제품설명을 입력한다.

HOT DEAL 백화점 상품 그대로 50% 부드럽게 감기는 말랑말랑 파우치 이불 21,900원 50% 부드럽게 감기는 말랑말랑 파우치 이불 21,900원 멜론티켓 흥행 돌풍 마마, 돈크라이 멜론티켓 흥행 돌풍 마마, 돈크라이 멜론티켓 흥행 돌풍 마마, 돈크라이

모든 list-item 아래에 있는 브랜드 로고들에 대한 레이아웃으로
태그로 영역을 설정하고,
,
,태그로 로고를 연결하도록 한다.
CSS-Style
(어제의 css에 이어서)

.list-item 이라는 class를 가진 영역에 대해서는 모두 자식태그의 영향을 받도록 position: relative로 설정한다.
#shop-main .list-item { position: relative; }

2. .list-half 영역을 디자인한다.(너비, 높이, 배경색) .list-half-top의 position을 absolute로 설정하고 위에 배채되도록 위치를 설정한다. .list-half-bottom의 position을 absolute로 설정하고 아래에 배채되도록 위치를 설정한다.
#shop-main .list-item .list-half { width: 100%; height: 240px; background-color: #ffffff; } #shop-main .list-item .list-half.list-half-top { position: absolute; left: 0; top: 0; } #shop-main .list-item .list-half.list-half-bottom { position: absolute; left: 0; bottom: 0; }

3. .list-half-header영역을 디자인한다. (너비, 높이, 배경색, 중앙정렬) position은 relative로 설정해 자식 태그들의 영향을 받도록 설정하고 padding 값으로 위에 간격을 준다. borer-bottom으로 아래 테두리를 디자인한다. 제목영역의 배경인 .list-half-bg의 position을 absolute로 설정하고 디자인한다.(너비, 높이, 배경색) 제목영역의 제목인 .shop-title-border의 position을 relative로 설정하고 top, transform으로 중앙정렬되도록 한다. 테두리와 글자색을 설정하고 padding값으로 간격을 만든다.
#shop-main .list-item .list-half .list-half-header { width: 100%; height: 62px; background-color: #ffffff; text-align: center; position: relative; padding-top: 10px; border-bottom: solid 1px #e7e7e7; } #shop-main .list-item .list-half .list-half-header .half-overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } #shop-main .list-item .list-half .list-half-header.list-half-bg { background-color: green; padding-top: 0; border-bottom: solid 1px #ffffff;} #shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border { position: relative; display: inline-block; top: 50%; transform: translateY(-50%); border: solid 1px #ffffff; color: #ffffff; padding: 2px 4px; }

4. 제목 영역의 제목(```
```)과 제품 영역의 상품 설명에 대한 .headline 글자 크기를 디자인하고 .headline의 테두리를 디자인하고 padding, margin값으로 위치를 설정한다.
#shop-main .list-item .list-half .list-half-header h3 { font-size: 14px; } #shop-main .list-item .list-half .list-half-header .headline { border: solid 1px #000000; padding: 2px 4px; display: inline-block; font-size: 14px; margin-bottom: 5px; }

5. 제품 영역인 .contents-list가 자식태그들의 영향을 받도록 overflow: hidden으로 설정하고 높이를 설정한다. 그안의 태그들이 좌->우 정렬되도록 설정하고 너비가 3등분,높이는 영역을 채우도록 설정한다. 글자들을 중앙정렬하고 각 상품 사이에 경계를 만들되, 중복되지 않도록 설정한다.
#shop-main .list-item .list-half .contents-list { overflow: hidden; height: 177px; } #shop-main .list-item .list-half .contents-list.content-lists-3 li { float: left; width: 33.33%; height: 100%; text-align: center; border-right: solid 1px #f0f0f0; } #shop-main .list-item .list-half .contents-list.content-lists-3 li:last-child { border-right: none; }

6. 제품 영역의 사진에 대해 디자인한다. 제품 영역의 상품에 대한 설명인 ```
```, ``````태그의 글자크기를 설정하고 margin값으로 둘 사이의 간격을 만든다.
#shop-main .list-item .list-half .contents-list.content-lists-3 li img { width: 100%; height: 100px; margin-bottom: 5px; } #shop-main .list-item .list-half .contents-list.content-lists-3 li h3 { font-size: 13px; margin-bottom: 5px; } #shop-main .list-item .list-half .contents-list.content-lists-3 li span { font-size: 12px; }

7. 아래영역의 제품영역을 디자인한다. 'flex'기능으로 2개의 제품설명들이 중간에 간격을 두고 양쪽 끝으로 배치되도록 설정하고 padding-top으로 제목 영역과의 간격을 만든다. 하나의 제품을 묶는 ```
```태그를 디자인(너비, 높이) 하고 각 제품 사이의 간격을 만들되, 중복되지 않도록 한다.
#shop-main .list-item .list-half .contents-list.content-lists-2 { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 11px; } #shop-main .list-item .list-half .contents-list.content-lists-2 li { width: 130px; height: 150px; margin-right: 8px; } #shop-main .list-item .list-half .contents-list.content-lists-2 li:last-child { margin-right: 0; }

8. 제품영역의 제품 이미지인 .content-image-wrap의 position을 realtive로 설정하고 디자인(너비, 높이)한다. 이에 속한 ``````태그의 position을 absolute로 설정하고 너비와 높이가 이 영역에 꼭 맞도록 설정한다. 제품 이미지 위의 50% 할인이라고 되어 있는 부분인 ``````태그를 디자인(너비, 높이, 글자크기, 색, 배경색, 배경디자인 등)한다. top, right 값으로 위치를 설정하고 position을 absolute로 설정한다. display를 block으로 설정해 이미지 위에 ``````태그가 올라올 수 있도록 설정한다.
#shop-main .list-item .list-half .contents-list.content-lists-2 li .content-image-wrap { position: relative; width: 130px; height: 90px; } #shop-main .list-item .list-half .contents-list.content-lists-2 li .content-image-wrap img { position: absolute; width: 100%; height: 100%; }
#shop-main .list-item .list-half .contents-list.content-lists-2 li .content-image-wrap span { position: absolute; display: block; width: 42px; height: 42px; font-size: 14px; color: #ffffff; top: 6px; right: 5px; border-radius: 50%; line-height: 42px; text-align: center; background-color: orange; }

![](https://images.velog.io/images/hyeri_jung14/post/07e0d49d-7f05-4cad-a6c4-d047494c9ce0/image.png) 9. 제품영역의 제품 설명 영역을 디자인한다. (글자색, 글자크기, 폰트 스타일)
#shop-main .list-item .list-half .contents-list.content-lists-2 li h3 { font-size: 13px; } #shop-main .list-item .list-half .contents-list.content-lists-2 li .price { color: #62a7ee; font-size: 12px; } #shop-main .list-item .list-half .contents-list.content-lists-2 li .price em { font-size: 14px; font-weight: bolder; font-style: normal; }

10. 쇼핑 페이지의 가장 오른쪽에 있는 .list-item중 아래 부분인 .list-row-3을 디자인한다. 위에서 설정한 shop-border와 중복되므로 border-top은 none으로 설정하고 배경색을 설정한다. .list-row-3의 각 제품을 나타내는 ```
```태그들 사이의 경계를 위해 border값을 만들어 주되, 중복되지 않도록 설정하고, 제품 사진을 디자인(너비, 높이)한다. ![](https://images.velog.io/images/hyeri_jung14/post/ed463ae1-7f79-41fd-b77e-11881914f54a/image.png)
#shop-main .list-item .list-row-3 { border-top: none; background-color: #ffffff; } #shop-main .list-item .list-row-3 li { border-bottom: solid 1px #f0f0f0; padding: 14px 19px 11px 19px; display: flex; flex-wrap: wrap; align-items: center; } #shop-main .list-item .list-row-3 li:last-child { border-bottom: none; }

#shop-main .list-item .list-row-3 li .list-image-wrap { width: 90px; height: 60px; margin-right: 10px; } #shop-main .list-item .list-row-3 li .list-image-wrap img { width: 100%; height: 100%; }

11. 제품 영역의 제품 설명의 글자 크기를 설정한다.
#shop-main .list-item .list-row-3 li .list-row-info span { font-size: 12px; } #shop-main .list-item .list-row-3 li .list-row-info h3 { font-size: 13px;}

12. 쇼핑 페이지의 아래에 있는 주요 쇼핑몰 로고 영역인 .brand-lists에 대한 디자인을 한다. 'flex'기능으로 각 로고들이 일정한 간격을 두고 중앙정렬할 수 있도록 설정하고 배경색을 설정한다. 상하좌우 각 로고들 간의 간격을 주고 너비와 높이를 설정한다. ![](https://images.velog.io/images/hyeri_jung14/post/d6f40701-fe40-420f-8e63-27dd56c576ba/image.png)
#shop-main .brand-wrap .brand-lists { padding: 18px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #ffffff; } #shop-main .brand-wrap .brand-lists li { width: 64px; height: 64px; } #shop-main .brand-wrap .brand-lists li img { width: 100%; height: 100%; }

### footer 영역 ![](https://images.velog.io/images/hyeri_jung14/post/6b40c2e5-32d9-4d30-9f3b-f5d97510d904/image.png) (이 부분중 아주 대략적으로 설계) #### html (main_right html에 이어서) 1. 두 부분으로 나누어 설계한다. ```
```영역을 만들고 그 안에 ```
```태그로 쇼핑페이지 전체에 적용되는 설정을 주기 위해 class에 shop-contianer를 설정한다. 그 안에 두 부분으로 나눈 영역들이 속하도록 설정하고, 글자는 ``````태그와 ```
```태그로 입력한다.

네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관 네이버 이용약관

네이버는 통신판매 당사자가 아닙니다. 거래에 관한 의무와 책임은 판매자에게 있습니다.

```
CSS-Style

(main_right css에 이어서)

에 있는 태그들이 중앙정렬 되도록 설정하고 padding 값으로 페이지 아래에 간격을 만든다.
영역과 구분되도록 border-top값을 디자인하고 경계선 사이에 간격을 margin값으로 설정한다.

#shop-footer { padding-bottom: 180px; text-align: center; } #shop-footer .policy-wrap { border-top: solid 2px #5d5d5d; padding-top: 27px; margin-bottom: 11px; }

.policy-wrap에 속한 태그의 글자 크기를 설정하고 각 태그들 사이에 문자를 ':before' 기능으로 설정하되, 맨 앞에는 생성되지 않도록 한다.

#shop-footer .policy-wrap span { font-size: 12px; } #shop-footer .policy-wrap span:first-child:before { content: initial; } #shop-footer .policy-wrap span:before { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 8px; background-color: #d7d7d7; vertical-align: -1; }

마지막으로
태그에 대한 글자를 디자인하고, margin값으로 간격을 만든다.

#shop-footer p { font-size: 12px; color: #888; margin-bottom: 11px; }

+++ image 무료이용 가능 사이트

pixabay : https://pixabay.com/ko/

무엇이 어려웠지?

오늘도 똑같이 입력했는데 결과가 원하는대로 안나왔다. 특히 .contents-list 를 디자인하고 나서 원하는 결과가 나올 때까지의 시간이 오래걸렸다.

어떻게 해결했지?

이번에는 오탈자가 문제였다. 자동완성으로 빨리빨리 enter치고 넘어가다 보니 class명을 제대로 입력을 안했던 거였다. 그래서 오탈자를 고치고 나니깐 깔-끔하게 해결됐다.

그래서?

네이버 쇼핑 페이지가 정말 할것이 많았다. 강의에서 최대한 필수적인 내용만 가르쳐주고 넘어가는 데도 정말 생각할 것도 디자인할것도 많았다.ㅠㅜ 아무생각 없이 봐왔던 웹사이트들이 얼마나 큰 인고끝에 만들어지는지 조금은 알게 된 날이다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0722

2021.07.21 NAVER-3

Wed, 21 Jul 2021 07:52:02 GMT

Day18, Naver-'쇼핑'페이지를 따라 만들어 봤다!

오늘 무엇을 배웠지?

Naver '쇼핑'페이지 따라 만들어보기1

Naver-'쇼핑' : https://shopping.naver.com/

html

new file-save(shop0721.html), save(style0721.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 기본 설정 + html, css 파일을 연동
네이버

``` 2. ```
```태그로 상단 영역을 설정하고 id를 입력한다. ```
``` 태그로 위,아래 영역으로 크게 구분하고 id를 설정한다. 아래 영역에 쇼핑 카테고리 리스트 를 ```
```로 구분짓고, 각 카테고리는```
```,```
```,``````태그로 설정한다. ```

홈

백화점윈도

아울렛윈도

스타일윈도

디자인윈도

```
CSS-Style

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } input, button { border: none; } input, textarea { outline: none; }

/너비는 항상 1330px, 중앙정렬되도록 설정/ .container { width: 1330px; margin: 0 auto; } /쇼핑페이지 상단/ .shop-container { width: 1300px; margin: 0 auto; } .shop-border { border: solid 1px #ced2d7; } .w-100 { width: 100%; } .h-100 { height: 100%; } #shop-body { background-color: #e9ece8; }

2. 쇼핑페이지의 위,아래 영역을 디자인한다. (너비, 높이, 배경색, 테두리)
#shop-header #shop-header-top { width: 100%; height: 36px; background-color: #03c75a; border: solid 1px #e8e8e8; } #shop-header #shop-header-middle { width: 100%; height: 66px; background-color: #03c75a; }

3. 쇼핑 페이지의 카테고리 리스트를 디자인한다. 리스트 영역인 ```
```영역의 너비, 테두리, 배경색 등을 설정한다. 그 안의 ```
```태그에 속한 태그들의 배열을 'flex'기능으로 설정한다.
#shop-header nav { width: 100%; border-top: solid 1px #e8e8e8; border-bottom: solid 1px #e8e8e8; background-color: #ffffff; } #shop-header nav ul { padding: 13px 0 8px 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } #shop-header nav ul li { margin-right: 16px; }

### ```
```-1 #### html (header html에 이어서) 1. ```
``` 태그로 main영역을 설정하고, role, class를 설정한다. 왼쪽에 쇼핑카테고리를 .category-left로 설정하고,```
```,```
```,``````태그로 그에 속한 목록을 설정한다.

카테고리

패션의류

패션잡화

화장품

디지털/가전

``` 2. 카티고리 옆 공간의 쇼핑항목 리스트를 ```
```태그로 .category-right class를 설정한다. 그중 위,아래로 나누어 위 영역인 항목에 대한 설명을 ```
```.category-info로 설정하고 ``````,```
```,``````태그로 입력한다. 아래 영역인 간단한 설명을 ``````태그로 설정한다. ```

인기상품
견고함의 차이
세라믹 식탁 세트
308,800원

추천태그
#유아마스크 #하객원피스 #멀티밤 #서큘레이터 #유아마스크 #하객원피스 #멀티밤 #서큘레이터

``` 3. 쇼핑 항목 리스트 들 중 중간에 있는 배너광고를 ```
```태그로 설정하고 이 배너 광고의 자식태그의 class에 shop-border, w-100, h-100 설정해 배너광고 디자인을 설정한다. ```

``` #### CSS-Style (main_right css에 이어서) 1. ```
```에 overflow:hidden;을 적용해 자식태그들의 영향을 받도록 설정하고 padding값을 적용해 간격을 설정한다. ``` main { overflow: hidden; padding: 20px 0 0 0; } ```

.list-wrap, .list-item 영역에 대한 디자인을 한다. 'flex' 기능으로 쇼핑 리스트들의 배열을 설정한다. .list-item의 너비, 높이, 배경색등을 설정하고 margins값으로 간격을 설정한다.

#shop-main .list-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } #shop-main .list-item { width: 308px; height: 496px; background-color: yellow; margin-bottom: 20px; }

.category-wrap 영역을 overflow: hidden;으로 설정해 자식 태그의 영향을 받도록 설정한다. .category-left는 브라우저에 왼쪽에 위치하도록 설정하고 너비, 높이, 배경색 등을 설정한다. .category-left의
, 태그의 글자 색, 글자 크기 등을 설정한다. 태그에는 display: block;을 설정해 이 태그가 속한 영역에 모두 기능이 적용 되도록 한다.

#shop-main .list-item .category-wrap { overflow: hidden; } #shop-main .list-item .category-wrap .category-left { float: left; width: 124px; height: 100%; background-color: #333949; } #shop-main .list-item .category-wrap .category-left h3 { font-size: 13px; color: rgba(255, 255, 255, 0.46); font-weight: 700; padding: 14px 0 14px 13px; border-bottom: solid 1px #2b313f; } #shop-main .list-item .category-wrap .category-left a { font-size: 13px; color: rgba(255, 255, 255, 0.46); font-weight: 700; display: block; padding: 7px 8px; }

.category-right에 float:right;로 차례로 좌->우 배치 되도록 설정한다. 너비, 높이, 배경색 등을 설정한다. .category-right-top의 너비, 높이, 테두리등을 디자인하고 중앙정렬한다. 또, 이 태그에 속한 태그들의 글자 사이즈 ,테두리,글자 색 등을 디자인한다.

#shop-main .list-item .category-wrap .category-right { float: right; width: 182px; height: 100%; background-color: #ffffff; } #shop-main .list-item .category-wrap .category-right-top { width: 100%; height: 306px; border-bottom: solid 1px #e7e7e7; text-align: center; } #shop-main .list-item .category-wrap .category-right-top .category-info { padding: 20px 0; } #shop-main .list-item .category-wrap .category-right-top .headline, #shop-main .list-item .category-wrap .category-right-bottom .headline { font-size: 12px; border: solid 1px #00ab33; color: #00ab33; display: inline-block; margin-bottom: 7px; } #shop-main .list-item .category-wrap .category-right-top .category-info h3 { font-size: 18px; } #shop-main .list-item .category-wrap .category-right-top .category-info .price { font-size: 16px; color: skyblue; }

.category-right-bottom 영역을 디자인한다. 이 태그에 속한 태그들을 중앙정렬로 설정하고, padding값으로 간격을 설정한다. 또, .tag-wrap의 .tag를 디자인한다. 너비, 높이, 배경색, 글자색, 글자크기 등을 설정하고 padding,margin값으로 간격을 설정한다.

#shop-main .list-item .category-wrap .category-right-bottom { text-align: center; padding-top: 20px; } #shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag { display: inline-block; width: auto; height: 24px; background-color: #e8eef4; padding: 0 5px; margin: 6px 1px 0 1px; line-height: 26px; font-size: 12px; color: #666; vertical-align: top; }

.list-item.banner 의 의 너비, 높이를 설정한다.

#shop-main .list-item.banner img { width: 100%; height: 100%; }

무엇이 어려웠지?

오늘은 오탈자 실수는 없었다. 하지만, 똑같이 적었다고 생각했는데 결과가 또! 똑같이 안나왔다.

어떻게 해결했지?

열심히 이유를 찾아보니깐, 열린태그로는 열심히 html에서 레이아웃을 설계했는데, 닫힌태그를 제대로 안닫았었다. 자동적으로 열린태그를 입력하면 닫힌태그가 자동완성 되는데, 어떻게 된건지 닫힌태그가 이상하게 없었다. 열심히 수정하다가 지웠나보다...

그래서?

어제의 실수를 최대한 반복하지 않겠다고 생각하고 열심히 오탈자를 신경쓰면서 했다. 그랬더니 다른 곳에서 실수가 있었다. 정말 쉽지 않다ㅠㅜ

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0721

2021.07.20 NAVER-2

Tue, 20 Jul 2021 07:34:27 GMT

Day17, 어제에 이어 Naver 메인 따라만들어보기를 완료했다!

오늘 무엇을 배웠지?

Naver 메인 따라 만들어보기2

Naver : https://www.naver.com/

메인 right_main

html

(어제의 html 파일에 이어서)

태그로 main_right영역을 설정하고 id를 입력한다. 우측의 로그인 영역을 설정하고 id를 입력한다.
태그로 설명글을 입력하고, 태그로 로그인 창으로 넘어가도록 설정한다.
태그로 아이디, 비밀번호 찾기, 회원가입 영역을 설정한다. 아래에
태그로 배너광고 영역을 설정하고 id를 입력한다.

네이버를 더 안전하고 편안하게 이용하세요. 로그인 아이디 비밀번호 찾기 회원가입

배너광고 아래에
태그로 쇼핑 물품 리스트 영역을 설정하고 id, class를 설정한다.
,
태그로 각 항목을 목록을 구성하고 필요한 만큼 복사해 붙여넣는다.

트렌드 쇼핑 상품 쇼핑몰 MEN G마켓 퀄리티가 중요한 당신을 위한

CSS-Style

(어제의 css에 이어서)

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } input, button { border: none; } input, textarea { outline: none; }

/너비는 항상 1330px, 중앙정렬되도록 설정/ .container { width: 1330px; margin: 0 auto; }

main { overflow: hidden; padding: 20px 0 0 0; }

main #main_left { float: left; width: 750px; } main #main_right { float: right; width: 350px; height: 2000px; }

2. 메인페이지의 우측영역에 있는 로그인 영역 #account의 너비를 설정하고 테두리를 디자인한다. padding, margin값으로 간격을 설정한다.
#main_right #account { width: 100%; border: solid 1px #dae1e6; padding: 16px 16px 12px 16px; margin-bottom: 12px; }

3. 로그인 설명인 ```
```태그의 글자크기를 설정하고 padding으로 간격을 설정한다. ``````태그의 너비를 설정하고, 배경색 등을 디자인한다. 이 태그가 속한 영역 전체에 링크기능이 작동하도록 display:block;으로 설정한다.
#main_right #account p { font-size: 12px; padding:0 0 11px 3px; } #main_right #account a { display: block; width: 100%; background-color: #19ce60; border-radius: 2px; padding: 15px 0; margin-bottom: 14px ;text-align: center; font-size: 13px; font-weight: 700; color: #fff; }

4. 아이디, 비밀번호, 회원가입 글 등 속한 태그들의 배치가 양끝에서 중간에 일정한 간격을 두고 배열되도록 설정하고, padding값으로 좌,우 간격을 설정한다. 글자크기를 디자인한다.
#main_right #account .account_sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 8px; } #main_right #account .account_sub span { font-size: 12px; }

5. 로그인 영역 아래의 배너 광고 너비, 높이 등을 설정하고 margin으로 간격을 설정한다.
#main_right #banner { width: 348px; height: 198px; background-color: #000000; margin-bottom: 20px; }

6. 배너광고 아래 쇼핑목록 리스트 영역인 #shop_wrap태그에 속한 태그들을 디자인한다. .shop_title내에 속한 태그들의 배열을 'flex'로 설정하고 padding값으로 상,하 간격을 설정한다. 상품, 쇼핑몰, MEN 등 글자의 크기를 설정하고, 이 글자들의 배열을 'flex'로 설정한다.
#main_right #shop_wrap .shop_title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 12px 0; } #main_right #shop_wrap .shop_title h3, #main_right #shop_wrap .shop_title h4 { font-size: 13px; } #main_right #shop_wrap .shop_title h4 { margin-left: 15px; } #main_right #shop_wrap .shop_title .right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

7. 쇼핑몰 리스트인 #shop_content에 속한 태그들을 디자인한다. 이를 둘러싼 테두리를 디자인하고 padding값으로 간격을 설정한다. 쇼핑몰 이름을 'flex'기능으로 태그들 사이에 일정한 간격을 둔 중앙배열로 설정하고 배경색, 가장자리 등 디자인을 한다. 쇼핑몰을 나타내는 글에 대한 디자인을 하고, margin값을 설정하되, 중복되지 않도록 설정한다.
#main_right #shop_wrap .shop_content { border: solid 1px #e4e8eb; padding: 0 0 22px; } #main_right #shop_wrap .shop_content .commerce-lists { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 12px 4px; background-color: #f7f9fa; border: solid 1px #dae1e6; } #main_right #shop_wrap .shop_content .commerce-lists li { font-size: 12px; margin: 0 0 5px 10px; } #main_right #shop_wrap .shop_content .commerce-lists li:nth-child(1), #main_right #shop_wrap .shop_content .commerce-lists li:nth-child(9) { margin-left: 0; }

8. 사진을 추가한 쇼핑몰 광고 리스트들에 padding 값으로 상하좌우 간격을 설정하고, 'flex' 기능을 설정해 태그간 일정한 간격을 둔 중앙배열이 되도록 설정한다. 각 목록의 이미지와 글이 중앙정렬 되도록 설정하고 글자를 디자인한다.
#main_right #shop_wrap .shop_content .shop_goods { padding: 55px 8px; } #main_right #shop_wrap .shop_content .product-lists { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #main_right #shop_wrap .shop_content .product-lists li { margin-bottom: 12px; } #main_right #shop_wrap .shop_content .product-lists .product-info { text-align: center; } #main_right #shop_wrap .shop_content .product-lists h3, #main_right #shop_wrap .shop_content .product-lists span { font-size: 12px; }

### footer 영역 #### html (main_right html에 이어서) 1. ```
``` 태그로 하단 영역을 설정하고 class를 설정한다. 하단영역을 위(뉴스리스트), 아래(회사리스트)영역으로 구분하고 (```
```) id를 설정한다. 뉴스리스트는 ```
```,```
```,``````태그로 만들어 필요한 갯수 만큼 복사해 붙여넣는다.

부스트캠프 2021
온라인 설명회 신청하기

SW 개발자들을 위한 교육
지원꿀팁과 생생한 후기들!

``` 2. 뉴스리스트 영역 아래에 회사에 대한 리스트 영역을 ```
```태그로 설정한다. ```
```,``````태그로 회사에 대한 각각의 소개를 선택했을 때 그 페이지로 넘어 가도록 설정한다. ```

회사소개

인재채용

제휴제안

회사소개

인재채용

제휴제안

#### CSS-Style (main_right css에 이어서) 1. ```
```에 배경색을 설정하고, 테두리(상단)를 디자인한다. padding값을 적용해 간격을 설정한다.
#main_footer { background-color: #fafbfc; border-top: solid 1px #e4e8eb; padding-bottom: 92px; }

2. .news_lists 영역에 대한 디자인을 한다. 'flex' 기능으로 뉴스 리스트들의 배열을 설정한다. padding 값으로 상,하 간격을 설정한다. .news_lists의 ```
``` 태그에 대한 디자인(너비, margin값 등)을 설정한다.
#main_footer .news_lists { padding: 24px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #main_footer .news_lists li { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; } #main_footer .news_lists li img { margin-right: 15px; } #main_footer .news_lists li .news_info { width: 172px; }

3. 뉴스리스트 영역의 ``````, ```
```, ```
``` 태그의 글자를 디자인하고 색을 설정한다.
#main_footer .news_lists li .news_info span, #main_footer .news_lists li .news_info h3, #main_footer .news_lists li .news_info p { font-size: 13px; } #main_footer .news_lists li .news_info span { color: #58c464; }

4. 뉴스리스트 아래의 회사 리스트 영역인 .corp_lists를 디자인한다. padding값으로 간격을 설정하고, 위 테두리를 디자인한다. .corp_lists에 속한 ```
``` 태그의 배열을 'flex'로 설정하고 :before로 회사소개, 제휴제안 등 글자 사이에 구분 문자가 삽입되도록 설정한다. (vertical-align: 으로 삽입된 문자의 위치를 상,하로 배열한다.) 이때, 가장 처음에 생긴 문자는 생략되도록 설정한다.
#main_footer .corp_lists { padding-top: 25px; border-top: solid 1px #e4e8eb; } #main_footer .corp_lists li { display: inline-block; vertical-align: middle; } #main_footer .corp_lists li:before { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 8px; background-color: #e4e8eb; vertical-align: -1px; } #main_footer .corp_lists li:first-child:before { content: initial; } #main_footer .corp_lists li a { font-size: 12px; }

```

무엇이 어려웠지?

class .account_sub 고작 2 단어로 된 글자인데 이 class에 입력한 css는 아.무.것.도. 안 나타났다.

어떻게 해결했지?

오탈자가 눈에는 당장 안보여서 처음에 html에서 설정한 class를 그대로 복사 붙여넣기로 다시 입력했더니 결과가 아주 잘~ 나왔다.

그래서?

오랜만에 조금은 여유롭게 수업을 들었다. 진도도 평소보다 조금 적었고, 어제 고생을 하면서 프로그래밍 지식이 아주 조금 성장했던것도 있는 것 같다. 게다가 어제는 선생님과 정말 똑같이 코딩했는데 자꾸 결과값이 다르게 나오기도 했는데 오늘은 정말 1번? 오탈자 있어서 결과가 안 뜬 것 말고는 오류가 없었다..! 매일 오늘만 같았으면 좋겠다 ㅠㅜ

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0720

2021.07.19 NAVER-1

Mon, 19 Jul 2021 06:45:16 GMT

Day16, Naver 웹사이트를 따라만들어보았다.

오늘 무엇을 배웠지?

++ 웹프로그래밍 할 때 도움되는 chrome 확장 프로그램

wappalyzer : 웹사이트 만들때 사용된 기술 spec 확인 가능

css view : '개발자도구-검사' 가 아니더라도 간단하게 css 확인가능

Whatfont : css 디자인 확인 가능 (폰트, 색상, 글자크기 등)

Lorem Ipsum Generator : 임의의 글 작성해줌

colorzilla : 웹사이트에서 사용한 특정영역의 색상값 확인 가능

Naver 메인 따라 만들어보기1

Naver : https://www.naver.com/

상단

html

new file-save(index0719.html), save(style0719.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동
네이버

```

태그로 상단 영역을 설정하고 id를 입력한다.
태그로 들어갈 검색창 영역과 검색창 아래에 있는 배너 영역을 설정하고 class를 설정한다.

메일 카페 블로그 지식인 쇼핑
CSS-Style

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } ol, ul { list-style: none; } a { text-decoration: none; color: #000000; } img { vertical-align: middle; } .clearfix { clear: both; } input, button { border: none; } input, textarea { outline: none; } ``` 으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, input, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.

.container 를 가진 class는 모두 너비는 항상 1330px, 중앙정렬되도록 설정한다.

.container { width: 1330px; margin: 0 auto; }

태그 position을 relative로 설정해 자식태그들과 영향을 받도록 한다.

#main-header { position: relative; background-color: #ffffff; }

.search_area는 position: relative로 설정하고 높이를 설정한다. display를 flex로 설정하고 중앙정렬할 수 있도록 설정한다. 배경색을 설정하고 아래 테두리의 굵기, 색 등을 설정해 경계를 눈에 보이도록 설정한다.

#main-header .search_area { position: relative; height: 160px; display: flex; justify-content: center; align-items: center; background-color: #ffffff; border-bottom: 1px solid #e4e8eb; }

.search_wrap position은 relative로, display:flex를 설정해 웹브라우저의 중앙에 위치하도록 설정한다. 너비, 높이, 테두리 등을 디자인한다.

#main-header .search_wrap { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 582px; height: 52px; border: solid 2px #19ce60; }

.search_wrap 안의 태그들 ,

+++width: calc(100% - npx) 설정한 너비의 100%에서 다른 태그의 영역너비값(npx)을 뺀 값을 너비로 설정하겠다는 뜻

#navbar 아래에 box-shadow로 경계선을 설정한다.

#main-header #navbar { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%); }

#navbar의 자식 태그인
태그들의 패딩값을 설정해 위아래 간격을 만들고
태그의 disyplay를 inline-block으로 설정해 옆으로 배열하도록 설정하고 margin값으로 사이 간격을 만든다.

#main-header #navbar ul { padding: 11px 0; } #main-header #navbar ul li { display: inline-block; margin-right: 5px; } #main-header #navbar ul li a { color: #03c75a; font-size: 15px; font-weight: 700; }

메인 main_left

html

(상단영역 html에 이어서)

태그로 메인 영역을 설정하고 class를 설정한다. 메인영역을 크게 좌/우 영역으로 구분하고 (
) id를 설정한다. main_left 영역에 배너, 뉴스영역으로 구분짓고, 뉴스영역에는 뉴스헤더, 신문사 칸으로 구분 짓는다. 신문사 칸은
,
,태그로 만들어 필요한 갯수 만큼 복사해 붙여넣는다.

뉴스스탠드

뉴스영역 아래에 블로그/잡지/essay글을 보여주는 영역을 설정한다(blog_wrap). 이 영역에서도 header부분(
), 다른장르 글로 넘어가는 nav부분(
)으로 구분짓는다. header부분은 좌/우측으로 나누어 left_header, right_header로 영역을 나눈다. blog_nav영역은
,
,태그로 각 장르를 선택했을 때 그 페이지로 넘어 가도록 설정한다.

오늘 읽을 만한 글 주제별 분류된 다양한 글 모음 1,853개의 글 관심주제 설정 엔터 스포츠 자동차 웹툰 경제M 레시피 게임 영화

블로그/잡지/essay에 대한 미리보기 영역은
태그로 영역을 구분짓고
,
,,태그로 이미지를 연결하고 영역을 구분짓는다. 필요한 갯수만큼
태그를 복사하여 붙여넣는다.

경제M Title 복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어 뉴스얌 4일 Title 신사임당

CSS-Style

(상단의 css에 이어서)

에 padding값을 적용해 상단영역과의 간격을 만들고 main 영역을 넘어가는 contents에 대해서는 나타나지 않도록 설정한다. #main_left 영역은 좌측정렬 되도록 float:left로 설정하고 너비를 설정한다. #main_right 영역은 우측정렬 되도록 float:right로 설정하고 너비를 설정한다.
main { overflow: hidden; padding: 20px 0 0 0; }

main #main_left { float: left; width: 750px; } main #main_right { float: right; width: 350px; }

2. #banner_wrap의 너비, 높이, 배경색 등을 설정하고 margin값으로 간격을 설정한다.
main #banner_wrap { width: 750px; height: 135px; background-color: #000000; margin-bottom: 12px;}

3. .news_header은 속한 태그가 중간에 공백을 두고 좌측 정렬, 우측정렬 되도록 'Flex' 설정을 해주고 padding 값으로 위, 아래 간격을 설정한다. '뉴스스탠드'라는 ```
```태그의 폰트 사이즈와 폰트 무게를 설정한다.
main #news_wrap .news_header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 22px 0 16px 0; }

main #news_wrap .news_header h2 { font-size: 14px; font-weight: 700px; }

4. .news_header의 우측에 있는 .news_btn_wrap에 대해 위치를 설정하고 너비를 설정한다. 이에 속한 각 버튼의 너비, 크기, 색 등을 설정한다.
main #news_wrap .news_header .news_btn_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 60px; }

main #news_wrap .news_header .news_btn_wrap button { width: 15px; height: 15px; background-color: blue; }

5. 뉴스리스트(신문사로고)의 영역 테두리를 설정하고 디자인한다. 각 신문사 로고들이 좌->우 정렬되도록 float:left로 설정하고 너비가 6등분 되도록 16.66%로 설정해준다. 각 신문사 로고가 차지할 영역에 대한 테두리 선을 디자인하고 신문사 로고``````가 영역안에 중앙정렬 되도록 top, transform으로 설정한다.
main #news_wrap .news_lists { overflow: hidden; border: solid 1px #dae1e6; } main #news_wrap .news_lists .news_list { float: left; width: 16.66%; height: 65px; background-color: #ffffff; border-bottom: solid 1px #e4e8eb; border-right: solid 1px #e4e8eb; text-align: center; } main #news_wrap .news_lists .news_list img { position: relative; top: 50%; transform: translateY(-50%); }

6. 5.에서 설정한 신문사로고의 테두리가 중복되지 않도록 설정한다.
main #news_wrap .news_lists .news_list:nth-child(6n) { border-right: none; } main #news_wrap .news_lists .news_list:nth-child(19), main #news_wrap .news_lists .news_list:nth-child(20), main #news_wrap .news_lists .news_list:nth-child(21), main #news_wrap .news_lists .news_list:nth-child(22), main #news_wrap .news_lists .news_list:nth-child(23), main #news_wrap .news_lists .news_list:nth-child(24) { border-bottom: none; }

7. 블로그/잡지/essay를 미리보여주는 영역(블로그영역)인 #blog_wrap과 뉴스 영역과의 간격을 padding값으로 설정해 준다. 블로그영역의 .blog_header가 좌/우측 정렬이 되도록 'flex'로 디자인해준다. blog_header영역과 그 아래의 영역의 간격을 padding-bottom으로 설정해준다.
main #blog_wrap { padding-top: 35px; }

main #blog_wrap .blog_header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: 17px; }

8. .left_header영역의 태그들이 위치가 좌측에서 서로 간격을 두고 위치할 수 있도록 'flex'로 설정한다. ```
```,``````태그들의 글자 사이즈, 색상 등을 설정한다.
main #blog_wrap .blog_header .left_header { display: flex; flex-wrap: wrap; align-items: center; } main #blog_wrap .blog_header .left_header h3 { font-size: 14px; margin-right: 8px; } main #blog_wrap .blog_header .left_header span { font-size: 12px; color: grey; }

9. .right_header의 태그들이 우측에서 사이에 간격을 두고 위치할 수 있도록 'flex'로 설정한다. .right_header의 ``````,``````의 글자 색상, 크기 등을 설정한다.
main #blog_wrap .blog_header .right_header { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } main #blog_wrap .blog_header .right_header span { font-size: 12px; color: grey; } main #blog_wrap .blog_header .right_header .count strong { color: #000000; }

10. 블로그 영역의 장르를 선택하는 영역인 ```
```이 자식태그의 속성을 영향을 받기 위해 overflow:hidden; 으로 설정하고 테두리를 디자인한다. `````` 태그들이 좌->우정렬되도록 float: left로 설정하고 8개의 영역의 너비가 동일하도록 너비를 12.5%로 설정한다. ```
```태그의 테두리를 디자인할 때 테두리가 중복되지 않도록 설정한다. `````` 태그가 속한 영역에 모두 ``````태그 기능이 작동하도록 display:block으로 설정하고 너비, 높이, 글사이 간격, 중앙정렬등을 설정해 디자인한다.
main #blog_wrap .blog_nav ul { overflow: hidden; border: solid 1px #eae1e6; } main #blog_wrap .blog_nav ul li { float: left; width: 12.5%; border-right: solid 1px #eae1e6; } main #blog_wrap .blog_nav ul li:last-child { border-right: 0; } main #blog_wrap .blog_nav ul li a { display: block; width: 100%; height: 100%; line-height: 49px; text-align: center; }

11. .blog_list_wrap의 영역(미리보기 영역)에 속한 ```
```태그들이 위아래로 간격이 있도록 padding,margin 값을 설정하고, border를 디자인해 경계를 짓는다. ``````의 자식태그들이 좌/우로 사이에 간격을 두고 위치하도록 'flex'로 설정하고 ``````태그의 너비, 높이, margin값 등을 설정한다.
main #blog_wrap .blog_list_wrap { padding-top: 18px; border-bottom: solid 1px #dae1e6; } main #blog_wrap .blog_list_wrap li { margin-bottom: 18px; } main #blog_wrap .blog_list_wrap li a { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} main #blog_wrap .blog_list_wrap li img { width: 170px; height: 114px; margin-right: 21px; }

12. 미리보기의 장르, 글 제목, 본문, 출처, post되고 난 후 지난 시간 등을 알려주는 .blog_list_info 의 너비를 설정하고 padding값으로 간격을 설정한다. 장르, 제목, 본문, 출처, 시간을 나타내는 태그들의 글자를 디자인한다.
main #blog_wrap .blog_list_wrap li .blog_list_info { width: 559px; padding-right: 47px; } main #blog_wrap .blog_list_wrap li .blog_list_info span { font-size: 12px; color: #35ae5e; } main #blog_wrap .blog_list_wrap li .blog_list_info h4 { font-size: 13px; } main #blog_wrap .blog_list_wrap li .blog_list_info p { font-size: 13px; } main #blog_wrap .blog_list_wrap li .blog_list_info .date_wrap span { color: #505050; }

13. 글 미리보기 영역 아래의 동영상 영역인 .blog_media_wrap의 배치를 'flex' 속성을 통해 영역 사이에 간격을 두고 중앙 정렬할 수 있도록 설정한다. padding 값으로 상하 간격을 설정하고, border-bottom으로 영역을 구분짓는다. 이미지와 설명 글 사이의 간격을 padding 값으로 설정하고, .blog_media_wrap 자식태그들의 글자를 디자인한다.
main #blog_wrap .blog_media_wrap ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: solid 1px #dae1e6; } main #blog_wrap .blog_media_wrap ul .blog_media_info { padding-top: 12px; } main #blog_wrap .blog_media_wrap ul .blog_media_info h4 { font-size: 13px; } main #blog_wrap .blog_media_wrap ul .blog_media_info span { font-size: 12px; }

```

무엇이 어려웠지?

오늘 수업을 들으면서 분명 선생님이 하신대로 똑같이 했는데도, 검색창 사이에 간격이 없어지지 않고 있는게 너무 불편해서 border의 두께를 1px, 2px, 3px, 4px 설정해봤다. .search_wrap의 border 굵기를 달리 할 때 button과 .search_wrap 사이의 여백이 생겼다가 없어지기도 하는데 그 이유가 궁금해졌다.

어떻게 해결했지?

처음에는 여러가지로 두께를 달리했을 때 몇몇 두께에서는 간격이 안보이는 것을 확인 할 수 있었다. 그치만 웹브라우저를 100~500%로 확대해보니깐 분명 100%에서는 보이던 간격이 다른 배율에서는 안보이기도 하고 반대로 안보이던게 보이기도 했다. 그래서 멘토님께 여줘봤고, box-sizing으로 설정했기 때문에 border의 두께에 따라 간격이 달라진다고 말씀하셨다.

그래서?

margin, padding값을 모두 0으로 설정했는데도 간격이 없어지지 않아서 너무 답답했다. 나중에 선생님이 올리신 source로 html 파일을 열어보니 선생님도 동일하게 간격이 있었다..! 그래서 일단, 내가 코딩을 잘못하거나 내가 box-sizing을 잘못 이해한건 아니라는 걸 알았지만, 여전히 간격을 채우지 못해서 뭔가 찝찝하다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0719

2021.07.16 덴마크쇼핑몰

Fri, 16 Jul 2021 05:07:20 GMT

Day15, 오늘은 덴마크 쇼핑몰을 따라만들어봤다.

오늘 무엇을 배웠지?

덴마크 쇼핑몰 따라만들어보기

Helbak :https://www.helbak.com/

상단영역

html

new file-save(index0716.html), save(style0716.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 태그 입력
HELBAK

```

태그로 페이지의 상단영역을 설정하고 id를 입력한다. 상단 좌측은
태그로 들어갈 하이퍼링크로 이동할 , 이미지태그를 감쌀 영역을 설정하고 class를 설정한다. 상단 우측은
태그로 영역을 구분짓고 class를 설정한다. 그 안에
,
, 태그로 영역을 구분짓고 class를 설정한다.

CSS-Style

Default CSS ```

{ margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } li { list-style: none; } body { overflow-x: hidden; font-family: sans-serif; color: #585858; } h1, h2, h3, h4, h5, h6, p { font-weight: 400; } a { text-decoration: none; } img { vertical-align: middle; } span { display: block; } ```

*표시는 모든 html 태그에 적용하겠다는 뜻

box-sizing: border-box는 패딩값으로 인해 박스 사이즈가 달라지는 것을 방지

html, body { width:100%, height: 100% } : 웹브라우저의 사이즈에 맞게 html, body영역이 꽉차도록 설정

list-style: none; : 리스트 스타일의 기본 설정값을 없앰

img { vertical-align: middle; } : 이미지가 수직정렬->중앙정렬

상단영역 중 로고가 있는 영역
을 쉽게 확인하기 위해 배경색을 입히고 .logo는 부모자식관계의 태그들과 영향을 받도록 하기위해 position을 relative로 설정하고 block속성으로 설정한다. 또 너비와 높이를 설정한다. 는 position을 absolute로 설정하고 left와 margin으로 중앙에 위치하도록 설정한다.

#header h1 { background-color: green;} #header h1 .logo { position: relative; display: block; width: 100%; height: 65px; } #header .logo img { position: absolute; top: 0; left: 50%; margin: 23px 0 0 -93px }

상단영역의 우측에 있는 영역을 .buttons로 설정하고,
태그가 자식관계의 높이에 영향을 받기 위해 overflow: hidden으로 설정한다.
태그는 부모태그에 영향을 주기 위해 position을 relative로 설정하고 float: left로 설정해 왼쪽에서부터 차례로 좌->우정렬 되도록 설정한다. 3개 버튼의 너비를 3등분 하기위해 width를 33.33333...%로 설정ㅇ한다. 각
태그의 태그 기능이 여백에도 적용되도록 display: block;으로 설정한다.

#header .buttons ul { overflow: hidden; } #header .buttons li { position: relative; float: left; width: 33.3333%; height: 65px; border: solid 3px gold; } #header .buttons li .menu-button { display: block; width: 100%; height: 100%; text-align: center; }

각 버튼영역을 구분해서 확인하기 위해 각 버튼의 배경색을 적용한다.

#header .buttons li:nth-child(1) .menu-button { background-color: lightyellow; } #header .buttons li:nth-child(2) .menu-button { background-color: pink; } #header .buttons li:nth-child(3) .menu-button { background-color: blue; }

.menu-button에 속한 태그들의 position을 relative로 설정하고 높이를 설정하고 Y축 중앙정렬한다.

#header .buttons li .menu-button img { position: relative; height: 20px; top: 50%; transform: translateY(-50%); }

**+++top: 50%; transform: translatetY(-50%);는 Y축 중앙정렬 공식** 6. 미디어쿼리로 모바일 버전이 아닌 pc버전에 대한 디자인을 한다. pc버전에서는 스크롤을 내려도 항상 상단영역이 고정되어 있으므로 z-index:999;로 position: fixed로 설정한다. 높이와 너비를 설정하고 위치를 top, left로 설정한다. ```
```태그의 너비를 웹브라우저의 반을 차지하도록 설정하고, 이에 속한 .logo, .buttons의 너비와 높이를 재설정한다.
@media (min-width: 47em) { #header { position: fixed; width: 100%; height: 80px; top: 0; left: 0; z-index: 999; } #header h1 { width: 50%; } #header h1 .logo { width: 280px; height: 80px; } #header .logo img { margin-top: 30px; }

#header .buttons { position: absolute; width: 50%; left: 50%; top: 0; } #header .buttons li { height: 80px; }
}

+++ 1em=16px ### 메인영역 #### html (상단영역 html에 이어서) 1. ```
``` 태그로 메인 영역을 설정하고 id를 설정한다. main 태그는 익스플로러에서 인식안되기때문에 role="main"을 추가해야한다. 2. ```
``` 태그로 product 리스트 그룹을 만든다. 3. ```
```태그로 링크기능의``````와 상품설명의 ```
```태그와 상품이미지의 ``````태그들을 감싼다. 이 ```
```태그를 물품 항목만큼 반복한다.
Product 1 . . . Product 6
#### CSS-Style (상단영역의 css에 이어서) 1. ``````태그인 .product-group-link의 position을 relative로 설정해 부모태그들과 영향을 받을수 있도록 한다. 너비와 높이를 설정한다.
.main-content .product-group-link { position: relative; display: block; width: 100%; height: 56.25%; border: solid 2px red; overflow: hidden; } .main-content .product-group-link img { width: 100%; height: 100%; }

2. .link-text의 position을 absolute로 설정하고 left, bottom으로 위치를 설정하고 글자색, 글자크기를 설정한다.
.main-content .product-group .link-text { position: absolute; left: 25px; bottom: 25px; color: black; font-size: 25px; }

3. 미디어쿼리로 pc버전일때 웹브라우저 디자인을 재설정한다.
@media (min-width: 47em) { .main-content { padding-top: 80px; } } @media (min-width: 60em) { .main-content { overflow: hidden; } .main-content .product-group-link { width: 50%; height: 28.125%; float: left; } }

### 하단영역 #### html (상단영역, 메인영역의 html에 이어서) 1. ```
``` 태그로 하단 영역을 설정하고 id를 설정한다. 2. ```
```태그로 하단 좌측 영역, 하단 우측 영역을 설정하고 class를 설정한다. ```
```태그로 리스트영역을 설정하고 ```
```와 ``````로 링크기능이 있는 목록을 만든다. 3. 하단 중앙에 있는 누르면 페이지의 최상단으로 스크롤되는 버튼을 만들기 위해 ``````태그를 이용해 class설정한다.

Terms and conditions

Cookies

Payment Methods

```
CSS-Style

(상단영역, 메인영역의 css에 이어서)

태그인 #footer의 자식태그들의 영향을 받기 위해 position: relative로 설정하고, padding 값으로 위치를 설정하고 확인하기 쉽게 배경색을 설정한다.

#footer { position: relative; background-color: yellow; padding-bottom: 66px; }

하단 좌측부분인
태그 .left-nav의 위치를 설정하고 text-align:center로 중앙정렬 하도록 한다. .left-nav의 각
태그 상하 padding값을 5px로 설정해 간격을 만든다.

#footer .left-nav { padding-top: 10px; text-align: center; } #footer .left-nav li { padding: 5px 0; }

우측 하단 영역인 .right-methods의 위치를 margin값으로 설정하고 중앙정렬 되도록 설정한다. .right-methods에 속해있는
태그들의 속성을 display: inline-block으로 설정하고 상하좌우 padding 값을 설정해 상하좌우 간격을 준다.

#footer .right-methods { text-align: center; margin: 30px 0 20px 0; } #footer .right-methods li { display: inline-block; padding: 7px 4px; }

우측하단영역의 .payment-icon의 속성을 inline-block으로 설정하고 너비와 높이를 설정한다. .payment-icon.one~five 태그들의 이미지 대신 배경색을 설정해 구분한다.

#footer .right-methods .payment-icon { display: inline-block; width: 30px; height: 20px; }

#footer .right-methods .payment-icon.one { background-color: blue; } #footer .right-methods .payment-icon.two { background-color: red; } #footer .right-methods .payment-icon.three { background-color: black; } #footer .right-methods .payment-icon.four { background-color: green; } #footer .right-methods .payment-icon.five { background-color: brown; }

_+++class를 "payment-icon one"으로 설정했지만, css 디자인시 띄어쓰기는 다르게 인식 할수 있기 때문에 "payment-icon.one"으로 입력해야한다!_ 5.
#footer .to-top-button { position: absolute; display: block; width: 66px; height: 66px; background-color: pink; left: 50%; margin-left: -33px; bottom: 0; }

6. 미디어쿼리로 모바일 버전이 아닌 pc버전에 대한 디자인을 한다. 하단좌측영역은 float: left,text-align: left로 설정해 좌측에,좌측정렬로 위치하도록 설정하고 브라우저의 반사이즈가 되도록 width:50%로 설정한다. 하단 우측영역은 float: right, text-align: right로 설정해 우측에, 우측정렬로 위치하도록 설정하고 동일하게 width: 50%로 설정한다. 각 태그들의 위치를 padding값을 이용해 설정하고 글자크기를 설정한다.
@media (min-width: 60em) { #footer .left-nav { float: left; width: 50%; text-align: left; padding: 32px 0 0 40px; } #footer .left-nav a { font-size: 14px; padding: 0 5px; }

#footer .right-methods { float: right; width: 50%; margin: 0; padding: 32px 40px 0 0; text-align: right; } #footer .right-methods li { padding: 0 4px; } #footer h3 { font-size: 14px; padding-right: 10px; } #footer ul, #footer li, #footer h3 { display: inline-block; vertical-align: middle; }
}

```

실무팁

id는 이름이기때문에 같은 이름을 쓸 수 없다!
그 이유는 href로 id를 설정할 수 있는데 같은 이름이 있으면 원하는 좌표의 역할을 수행할 수 없음!

css에서 white-space: nowrap; 은 설정한 영역과는 상관없이 x축으로
태그 안에있는 글을 배열하도록 함->가로스크롤이 생김, 이렇게 영역을 넘어가는 양의 글을 말줄임표로 줄일때는 overflow: hidden; text-overflow: ellipsis; 을 적용하면 됨 ex) .ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} └> 너비에 맞게 한 줄만 텍스트가 나오고 그 이후의 글은 말줄임표로 나타내겠다는 뜻

자주 사용하는 css 디자인은 class에 설정한후 html의 태그에 class로 (css->html) 입력해주면 설정한 class를 가진 태그는 모두 그 class값을 나타낸다! ex)

통용되는 줄임말 : .m-b-10 { margin-bottom: 10px;} .p-l-50 { margin-left: 50px;}

무엇이 어려웠지?

왜 범위를 설정할때 어떤것은 47em 으로 설정하고, 어떤것은 60em으로 설정해야하는가? 그냥 47em으로 통일하면 안되는건가..?하는 의문이 들었다.

어떻게 해결했지?

그래서 일단 47em으로 통일해서 모두 설정해 봤다. 그랬더니 2개로 나열된 상태일때 60em으로 설정했을 때 보다 이미지의 크기가 줄어들어서 조금 안예쁘다는 생각이 들었다. 이미지 크기에 따라 조금씩 다르게 범위를 설정해도 괜찮다는 것을 알았다. FM 스타일이기 때문에 범위를 A로 정하면 B로 해도 괜찮은 걸 알려주기 전까지 A로만 고집하는 경향이 있는데, 내가 디자인 할 수 있는 영역이 넓어지는 느낌이었다.

그래서?

마지막에 실무적 팁이 정말 획기적인걸 발견한 것 마냥 신기했다. 수업이고, 연습을 위해 반복적으로 동일한 디자인을 해야하는게 너무 비효율적이고 귀찮다고 느끼던 차였는데 마지막에 이렇게 지금보다는 효율적인 방법이 있다는 것을 알게 되고는 저 팁들을 자주 이용할 것 같다! html, css 웹프로그램을 배우게 된지도 벌써 3주가 지나갔다. 들인 시간 만큼 실력도 많이 성장했으면 좋겠다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0716

2021.07.15 kidsgao-3

Thu, 15 Jul 2021 06:04:27 GMT

Day14, 화,수 2일에 걸쳐 웹사이트 'kidsgao'를 따라 만들어봤다. 오늘도 마지막으로 kidsgao 웹사이트 만들기를 해봤다.

오늘 무엇을 배웠지?

Kidsgao 사이트 따라 만들어보기3

Kidsgao : http://sisikiller.dothome.co.kr/

Night 2 페이지

html

new file-save(index0715.html), save(style0715.css, animation0715.css, mobile0715.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 태그 입력
키즈가오

```

태그로 night2 페이지 영역을 설정하고 id를 입력한다.
태그로 들어갈 이미지의 영역을 설정하고 class를 설정한다.

CSS-Style

Default CSS

html, body { margin: 0; padding: 0; } body { overflow-x: hidden; } /*->가로 스크롤 생성방지*/ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } button { border: none; background-color: transparent; } .clearfix { clear: both; }
으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.

night2 페이지 영역
태그인 #night2의 너비와 높이를 설정하고 이미지를 연결한다.

#night2 { position: relative; width: 100%; height: 800px; background-image: url(../../img/oneday/night2/night2_bg.png); }

태그 .moon의 이미지를 연결하고 너비 높이를 설정한다.

#night2 .moon { width: 135px; height: 135px; background-image: url(../../img/oneday/night2/moon.png); }

.night2Bubble 이미지는 position: absolute로 설정하고 너비, 높이를 설정한다. margin으로 위치를 설정한다.

#night2 .night2Bubble { position: absolute; margin: 300px 0 0 80px; }

.rightMoonTree 이미지를 연결하고 너비, 높이 등을 설정하고 position은 absolute로, right, bottom값으로 위치를 설정해 고정한다.

#night2 .rightMoonTree { position: absolute; width: 243px; height: 588px; right: 0; bottom: 0; background-image: url(../../img/oneday/night2/moontree.png); }

CSS-Animation

Night2 페이지에서 움직이는 이미지(달)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#night2 .moon { animation: moveMoon 10s linear infinite; } @keyframes moveMoon{ from {margin-left: -135px} to {margin-left: 110%} }

CSS-Mobile

미디어쿼리를 적용해 모바일 사이즈(최대 767px-> 768px부터는 pc버전 화면)의 화면에서는 다르게 적용되도록 설정한다.
@media (max-width: 767px) { #night2 { height: 620px; background-image: url(../../img/mobile/oneday/night2/mobile_night2_bg.png); } #night2 .moon { width: 40px; height: 40px; background-image: url(../../img/mobile/oneday/night2/mobile_moon.png); } #night2 .night2Bubble { width: 127px; left: 50%; margin: 300px 0 0 -67px; } #night2 .rightMoonTree { width: 70px; height: 173px; background-image: url(../../img/mobile/oneday/night2/mobile_moontree.png); top: 70px; bottom: initial; }

#night2의 높이를 재설정하고 이미지를 연결한다.

#night2에 속한
태그들의 높이와 너비를 재설정하고 이미지를 연결한다. 또, margin 값이나 top, bottom 값을 줘 위치를 설정한다.(bottom: initial; 은 bottom: 0;과 같다)

.night2Bubble 은 left:50%로 중앙에 위치하도록 한다.

Kitchen 페이지

(morning페이지는 night2와 비슷해서 생략)

html

(night2, morning html에 이어서)

태그로 kitchen 페이지 영역을 설정하고 id를 설정한다.

삽입할 이미지 각각의 영역을
태그로 설정하고 class를 설정한다.

태그로 이미지를 연결하고 alt=""로 설명을 입력한다.

CSS-Style

(forest1,2,3의 css에 이어서)

태그인 #kitchen의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.

#kitchen { position: relative; width: 100%; height: 800px; background-image: url(../../img/kitchen/kitchen_bg.png); }

태그 .leftPan, .rightPot의 position을 absolute로 설정하고 너비와 높이를 설정한다. 위치를 left:0;, right:0;으로 설정해서 (float:left, float:right와 동일한 결과를 만듦->실제로 수업에서는 float로 위치를 설정함) 순서대로 좌->우 정렬되도록 설정한다.

#kitchen .leftPan { position: absolute; left: 0; width: 253px; height: 384px; background-image: url(../../img/kitchen/pan.png); }

#kitchen .rightPot { position: absolute; right: 0; width: 243px; height: 132px; background-image: url(../../img/kitchen/pot.png); }

3. .steamWrap은 속한 태그와 높이의 영향을 받도록 position을 relative로 설정한다. left, margin-left로 중앙배열한다. .steamWrap에 속한 각 태그들은 position:absolute로 위치를 고정하고 높이와 너비를 설정해주고 이미지를 연결한다. 앞, 뒤 로 배열을 해야하는 경우 z-index로 설정한다.
#kitchen .steamWrap { position: relative; width: 483px; height: 457px; left: 50%; margin-left: -240px; top: 300px; } #kitchen .steamWrap .steam { position: absolute; width: 479px; height: 457px; z-index: 100; background-image: url(../../img/kitchen/steam.png); } #kitchen .steamWrap .bubble1 { position: absolute; width: 55px; height: 56px; margin-top: 230px; background-image: url(../../img/kitchen/bubble.png); }

4. .kitchenBubble에 대해 설정한 위치를 absolute로 고정한다.
#kitchen .kitchenBubble { position: absolute; top: 400; right: 0; }

#### CSS-Animation 1. #science 페이지에서 움직이는 이미지(스팀기에서 올라오는 bubble1)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다. ->포물선으로 움직이는 효과는 'stylie(https://jeremyckahn.github.io/stylie/)'에서 만들어서 붙여넣음.
#kitchen .steamWrap .bubble1 { animation-name: Bubble; animation-duration: 1000ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 0 0; } @keyframes Bubble { 0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} 100% {transform:translate(-107px, -185px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} }

#### CSS-Mobile (night2, morning의 css에 이어서)
#kitchen { height: 400px; background-image: url(../../img/mobile/kitchen/mobile_kitchen_bg.png); } #kitchen .leftPan { width: 52px; height: 78px; background-image: url(../../img/mobile/kitchen/mobile_pan.png); } #kitchen .rightPot { width: 73px; height: 38px; background-image: url(../../img/mobile/kitchen/mobile_pot.png); } #kitchen .steamWrap { width: 300px; height: 300px; margin-left: -150px; top: 0; } #kitchen .steamWrap .steam { width: 222px; height: 184px; background-image: url(../../img/mobile/kitchen/mobile_steam.png); left: 50%; top: 100px; margin: 0 0 0 -140px; } #kitchen .steamWrap .bubble1 { display: none; } #kitchen .kitchenBubble { width: 143px; left: 50%; margin: -320px 0 0 -70px; }

1. ```
```태그인 #kitchen의 높이를 재설정하고 이미지를 연결한다. 2. .leftPan, .rightPan의 너비와 높이를 설정하고 이미지를 연결한다. 3. .steamWrap의 너비와 높이를 재설정하고 margin, top으로 위치를 재설정한다. 4. .steam의 너비와 높이 등을 설정한다. left와 margin 으로 태그들의 위치를 설정하고 이미지를 연결한다. pc에서는 애니메이션 효과가 있었던 .bubble1은 보이지 않으므로 display로 없앤다. 5. .KitchenBubble의 너비,높이와 위치 등 을 설정한다. ### Color2 페이지 (color1은 중복되는 부분이 많고 간단해서 생략) #### html (kitchen, color1의 html에 이어서) 1. ```
``` 태그로 color2 페이지 영역을 설정하고 id를 설정한다. 2. 삽입할 이미지 각각의 영역을 ```
```태그로 설정하고 class를 설정한다. ```
```태그로 글을 입력하고 class를 설정한다.

아이가 원하는 색상을 직접 만들어 색감을 스스로 발달시킵니다.
색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다.

```
CSS-Style

(kitchen, color1의 css에 이어서)

태그인 #color2의 너비와 높이를 설정하고 이미지를 연결한다.

#color2 { position: relative; width: 100%; height: 800px; background-image: url(../../img/color/color2/color2_bg.png); }

태그 .horse의 position을 absolute로 설정하고 margin, right:0;으로 위치(float:right와 같은 결과를 나타냄)를 고정한다. 이미지를 연결하고 너비와 높이를 설정한다. .color2Wrap은 자식태그가 여러개 있는 영역으로 position을 relative로 설정하고 너비를 설정하고 top, margin-left값으로 위치를 설정한다.

#color2 .horse { position: absolute; right: 0; width: 188px; height: 241px; margin: 100px 100px 0 0; background-image: url(../../img/color/color2/horse.png); } #color2 .color2Wrap { position: relative; width: 500px; top: 430px; margin-left: 50px; }

.color2Wrap의 자식태그들인 .red, .blue, .red의 사이즈를 설정하고 이미지를 각각 연결한다.

#color2 .color2Wrap .btn-wrap .red, #color2 .color2Wrap .btn-wrap .yellow, #color2 .color2Wrap .btn-wrap .blue { width: 59px; height: 82px; } #color2 .color2Wrap .btn-wrap .red { background-image: url(../../img/color/color2/btn/btn_red.png); } #color2 .color2Wrap .btn-wrap .yellow { background-image: url(../../img/color/color2/btn/btn_yellow.png); } #color2 .color2Wrap .btn-wrap .blue { background-image: url(../../img/color/color2/btn/btn_blue.png); }

.color2Comment 의 글자색을 설정한다.

#color2 .color2Wrap .color2Comment { color: #8e7757; }

CSS-Mobile

(kitchen, color1의 css에 이어서)

#color2 { height: 400px; background-image: url(../../img/mobile/color/color2/mobile_color2_bg.png); } #color2 .horse { display: none; } #color2 .color2Wrap { width: 320px; height: 200px; top: 0; left: 50%; margin-left: -160px; text-align: center; } #color2 .color2Wrap .color2Bubble { width: 128px; } #color2 .color2Wrap .btn-wrap { width: 300px; height: 60px; margin-bottom: 0; } #color2 .color2Wrap .btn-wrap .red, #color2 .color2Wrap .btn-wrap .yellow, #color2 .color2Wrap .btn-wrap .blue { width: 40px; height: 56px; } #color2 .color2Wrap .btn-wrap .red { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_red.png); } #color2 .color2Wrap .btn-wrap .yellow { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_yellow.png); margin: 0 20px 0 20px;} #color2 .color2Wrap .btn-wrap .blue { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_blue.png);} #color2 .color2Wrap .color2Comment { color: #8e7577; line-height: 15px; font-size: 10px; }

태그인 #color2의 높이를 재설정하고 이미지를 연결한다.

.horse는 이미 #color2에 속해있는 이미지로 재설정했기 때문에 모바일버전에서는 나타나지 않도록 display:none;으로 설정한다.

.color2Wrap의 너비와 높이를 재설정하고 left:50%로 중앙에 배열한다. 또 안의 태그들이 중앙배열 되도록 text-align: center;을 적용한다. 또, .color2Wrap 안 태그들의 너비와 높이를 재설정한다.

.btn-wrap에 속한
태그들(.red, .yellow, .blue)의 높이와 너비를 재설정하고 이미지를 연결한다.

.color2Comment의 글자색, 줄간격, 글자크기 등을 재설정한다.

무엇이 어려웠지?

오른쪽에 있는 그림이 왼쪽의 그림과 동일한 일직선 상에 있는 것이 아니라 자꾸 밑으로 내려갔다. display: inline-Block; 도 해보고 .leftpan을 position: absolute; left:0;, .rightpot을 position: absolute; right:0;으로도 바꿔보고 개발자도구에 이것저것 빼보고 다시 넣어봐도 여전히 .leftpan 아래줄에 .rightpot이 위치해 있었다.

어떻게 해결했지?

▼ 이렇게 순서를 바꾸니깐 원하는 대로 되더라...
태그는 block 속성이 있기 때문에 서랍장 순서대로 된다는걸 잊고 있었다.

그래서?

3일간에 걸쳐서 어렴풋이 kidsgao사이트를 따라해봤다. 언제끝나나 하고 지루해 했던 적도 있고 똑같이 했는데 왜 안되나 골머리를 앓았던 적도 있고 이제는 루틴으로 입력하는 설정값을 선생님이 말씀하시기도 전에 적고 있었던 적도 있었다. 역시 직접해보면서 많이 느는 것 같다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0715

2021.07.14 kidsgao-2

Wed, 14 Jul 2021 06:55:25 GMT

Day13, 어제에 이어서 웹사이트 'kidsgao'를 따라 만들어봤다.

오늘 무엇을 배웠지?

Kidsgao 사이트 따라 만들어보기2

Kidsgao : http://sisikiller.dothome.co.kr/

forest 2 페이지

forest1 페이지는 forest2 페이지를 만들 때와 크게 다르지 않음 더 다양한 forest2로 복습
html

new file-save(index0714.html), save(style0714.css, animation0714.css, mobile0714.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 태그 입력
키즈가오

```

태그로 forest2 페이지 영역을 설정하고 id를 입력한다.
태그로 들어갈 이미지의 영역을 설정하고 class를 설정한다.

CSS-Style

Default CSS

html, body { margin: 0; padding: 0; } body { overflow-x: hidden; } /*->가로 스크롤 생성방지*/ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } button { border: none; background-color: transparent; } .clearfix { clear: both; }
으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.

forest2 페이지 영역
태그인 #forest2의 너비와 높이를 설정하고 이미지를 연결한다.

#forest2 { width: 100%; height: 750px; background-image: url(../../img/forest/forest2/forest2_bg.png); }

태그 .frog의 이미지를 연결하고 너비 높이를 설정한다. position을 absolute로 설정하고 margin 값으로 위치를 고정한다.

#forest2 .frog { position: absolute; width: 153px; height: 257px; background-image: url(../../img/forest/forest2/frog.png); margin: 50px 0 0 100px; }

.machineWrap2 안의 자식 태그들의 위치와 영향을 받도록 position: relative로 설정하고 너비, 높이를 설정한다. 또 left,top, margin-left등으로 위치를 설정한다.

#forest2 .machineWrap2 { position: relative; width: 400px; height: 400px; left: 50%; margin-left: -200px; top: 180px; }

.machineBottom, .machineLeft, .machineRight 각각의 이미지를 연결하고 너비, 높이 등을 설정하고 position은 absolute로 위치를 설정해 고정한다. 이때, 이미지들의 앞,뒤 위치가 있기 때문에(3차원적 성격) z-index를 설정한다. (z-index를 설정 안할 경우 기본값은 0)

#forest2 .machineWrap2 .machineBottom { position: absolute; width: 374px; height: 162px; background-image: url(../../img/forest/forest2/machinebottom.png); margin-top: 220px; z-index: 200; }

.forestBubble position을 relative, float:right;로 설정해 브라우저 크기에 따라 브라우저에서 항상 오른쪽에서 위치하지만 사이즈에 따라 일정한 간격을 띄우고 위치가 변경되도록 설정한다. .forest2Tree는 위치를 왼쪽으로 설정(float:left;) 하고도 동일하게 설치한다.

#forest2 .forestBubble { position: relative; float: right; top: -100px; margin-right: 100px; } #forest2 .forest2Tree { position: relative; float: left; width: 304px; height: 282px; top: 50px; background-image: url(../../img/forest/forest2/forest2tree.png);

CSS-Animation

forest2 페이지에서 움직이는 이미지(왼쪽 기계, 오른쪽 기계)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#forest2 .machineWrap2 .machineLeft { animation: moveLeft 1000ms linear infinite alternate; } @keyframes moveLeft { from {left: 30px} to {left: 0;} } #forest2 .machineWrap2 .machineRight { animation: moveRight 1000ms linear infinite alternate; } @keyframes moveRight { from {left: -30px} to {left: 0;} }

CSS-Mobile

미디어쿼리를 적용해 모바일 사이즈(최대 767px-> 768px부터는 pc버전 화면)의 화면에서는 다르게 적용되도록 설정한다.

@media (max-width: 767px) { #forest2 { position: relative; height: 400px; background-image: url(../../img/mobile/forest/forest2/mobile_forest2_bg.png); } #forest2 .frog { width: 34px; height: 57px; margin: 0 0 0 20px; background-image: url(../../img/mobile/forest/forest2/mobile_frog.png); } #forest2 .machineWrap2 { width: 200px; height: 110px; top: 70px; margin-left: -97px; } #forest2 .machineWrap2 .machineBottom { width: 141px; height: 60px; left: 50%; margin: 50px 0 0 -70.5px; background-image: url(../../img/mobile/forest/forest2/mobile_machinebottom.png); } #forest2 .machineWrap2 .machineLeft { width: 46px; height: 85px; background-image: url(../../img/mobile/forest/forest2/mobile_machineleft.png); margin: 0 0 0 20px; } #forest2 .machineWrap2 .machineRight { width: 46px; height: 93px; background-image: url(../../img/mobile/forest/forest2/mobile_machineright.png); margin: -10px 0 0 130px; } #forest2 .forestBubble { position: absolute; width: 161px; left: 50%; top: 290px; margin-left: -83px; } #forest2 .forest2Tree { width: 69px; height: 76px; float: right; background-image: url(../../img/mobile/forest/forest2/mobile_forest2tree.png); top: 130px; margin-right: 20px; }

#forest의 높이를 재설정하고 이미지를 연결한다. pc버전에서 position을 설정하지 않았기 때문에 position을 relative로 설정한다.

태그들의 높이와 너비를 재설정하고 이미지를 연결한다. 또, .machineBottom의 중앙정렬을 위해 left:50%, margin을 설정한다.

.forestBubble의 중앙정렬을 위해 left:50%, margin을 설정한다. 항상 위치가 고정되어 있으므로 absolute로 position을 설정하고 위치와 크기를 재설정하고 이미지를 연결한다.

.forest2Tree 이미지는 항상 우측에 있으므로 float: right;로 설정하고 너비, 크기를 설정하고 top, margin-right 등으로 위치를 설정한다.

Science 페이지

(forest3페이지는 어제 배운 farm3와 비슷해서 생략)

html

(forest1,2,3 html에 이어서)

태그로 Science 페이지 영역을 설정하고 id를 설정한다.

삽입할 이미지 각각의 영역을
태그로 설정하고 class를 설정한다.

태그로 이미지를 입력하고 글자를 입력하기 위해
태그를 이용한다. 태그는 글에 줄바꿈을 설정할 수 있다.

자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다. 빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9 지방산이 풍부한 올리브를 넣어서 보습 효과도 뛰어나답니다.

CSS-Style

(forest1,2,3의 css에 이어서)

태그인 #Science와 .scienceWrap의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.

#science { position: relative; width: 100%; height: 800px; background-image: url(../../img/science/science_bg.png); } #science .scienceWrap { position: relative; width: 1068px; height: 655px; margin: 0 auto; }

태그 .scienceRightWrap, .scienceCenterWrap의 position을 relative로 설정하고 너비와 높이를 설정한다. 이때, float: left;를 차례로 적용해 순서대로 좌->우 정렬되도록 설정한다.

#science .scienceWrap .scienceLeftWrap { float: left; width: 288px; height: 100%; } #science .scienceWrap .scienceCenterWrap { position: relative; float: left; width: 488px; height: 100%; } #science .scienceWrap .scienceRightWrap { position: relative; float: left; width: 292px; height: 100%; }

.scienceLeftWrap에 속한 각 태그의 높이와 너비를 설정해주고 이미지를 연결한다.
태그의 글에 대한 디자인을 한다.

#science .scienceWrap .scienceLeftWrap .gly { width: 230px; height: 192px; margin: 0 0 130px 55px; background-image: url(../../img/science/gly.png); } #science .scienceWrap .scienceLeftWrap p, #science .scienceWrap .scienceRightWrap p { color: #8e7577; font-size: 18px; line-height: 26px; padding-top: 10px; }

.scienceCenterWrap에 속한 태그들의 너비, 높이 등을 설정하고 이미지를 연결한다. .scienceCenterWrap이라는 부모태그에 높이값 영향을 주기 위해 position을 relative로 설정하고 .funnelBack은 위치를 고정하기 위해 absolute로 설정한다. 위치를 left, margins 등으로 설정한다. .scienceRightWrap에 속한 태그도 동일하게 너비, 높이, 위치 설정, 이미지 연결한다.

#science .scienceWrap .scienceCenterWrap .purpleSteam { position: relative; width :241px; height: 216px; background-image: url(../../img/science/grape.png); left: 50%; margin-left: -120px; } #science .scienceWrap .scienceCenterWrap .funnelBack { position: absolute; width: 488px; height: 438px; background-image: url(../../img/science/funnelback.png); } #science .scienceWrap .scienceCenterWrap .funnelFront { position: relative; width: 485px; height: 390px; background-image: url(../../img/science/funnelfront.png); margin-top: 48px; } #science .scienceWrap .scienceRightWrap .water { width: 204px; height: 191px; background-image: url(../../img/science/water.png); margin-bottom: 130px; }

#### CSS-Animation 1. #science 페이지에서 움직이는 이미지(왼쪽 플라스크, 오른쪽 비커)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#science .scienceWrap .gly { animation: spinGly 1500ms linear infinite alternate; } @keyframes spinGly { from {transform: rotate(0);} to {transform: rotate(50deg);} } #science .scienceWrap .water { animation: spinWater 1500ms linear infinite alternate; } @keyframes spinWater { from {transform: rotate(0);} to {transform: rotate(-50deg);} }

#### CSS-Mobile (forest1,2,3의 css에 이어서)
#science { height: 580px; background-image: url(../../img/mobile/science/mobile_science_bg.png); }

#science .scienceWrap { width: 360px; height: auto; overflow: hidden; top: 180px; }

#science .scienceWrap .scienceLeftWrap { width: 100px; } #science .scienceWrap .scienceLeftWrap .gly { width: 76px; height: 63px; background-image: url(../../img/mobile/science/mobile_gly.png); margin: 0 0 10px 0; } #science .scienceWrap .scienceLeftWrap img, #science .scienceWrap .scienceRightWrap img { height: 15px; } #science .scienceWrap .scienceLeftWrap p, #science .scienceWrap .scienceRightWrap p { display: none; }

#science .scienceWrap .scienceCenterWrap { width: 160px; height: 222px; } #science .scienceWrap .scienceCenterWrap .purpleSteam { width: 80px; height: 71px; margin-left: -40px; background-image: url(../../img/mobile/science/mobile_grape.png); } #science .scienceWrap .scienceCenterWrap .funnelBack { width: 173px; height: 151px; background-image: url(../../img/mobile/science/mobile_hopperback.png); } #science .scienceWrap .scienceCenterWrap .funnelFront { width: 160px; height: 122px; left: 50%; margin: 20px 0 0 -80px; background-image: url(../../img/mobile/science/mobile_hopperfront.png); }

#science .scienceWrap .scienceRightWrap { width: 100px; } #science .scienceWrap .scienceRightWrap .water { width: 67px; height: 63px; margin : 0 0 13px 32px background-image: url(../../img/mobile/science/mobile_water.png); }

1. ```
```태그인 #science의 높이를 재설정하고 이미지를 연결한다. 2. .scienceWrap의 너비와 높이를 설정하고 overflow:hidden 을 통해 자식태그의 높이값에 대한 영향을 받을 수 있도록 한다. 3. .scienceLeftWrap의 너비를 설정한다. 이에 속한 태그들의 높이와 위치 등 을 설정하고 이미지를 연결한다. 4. .sciencCenterWrap의 너비를 설정하고 자식태그들의 너비와 높이 등을 설정한다. left와 margin 으로 태그들의 위치를 설정하고 이미지를 연결한다. 5. .scienceLeftWrap의 너비를 설정한다. 이에 속한 태그의 높이와 위치 등 을 설정하고 이미지를 연결한다. ### Night1 페이지 #### html (science의 html에 이어서) 1. ```
``` 태그로 night1 페이지 영역을 설정하고 id를 설정한다. 2. 삽입할 이미지 각각의 영역을 ```
```태그로 설정하고 class를 설정한다.
#### CSS-Style (science의 css에 이어서) 1. ```
```태그인 #night1의 너비와 높이를 설정하고 이미지를 연결한다.
#night1 { width: 100%; height: 700px; background-image: url(../../img/oneday/night1/night1_bg.png); }

2. ```
``` 태그 .owl의 position을 absolute로 설정하고 위치를 margin으로 위치를 고정한다. 각 태그에 맞는 이미지를 연결하고 너비와 높이를 설정한다.
#night1 .owl { position: absolute; width: 334px; height: 571px; background-image: url(../../img/oneday/night1/owl.png); margin-top: 50px; }

3. .starWrap의 이미지를 연결하고 너비, 높이를 설정한다. 2.와 같이 위치를 동일하게 position: absolute로 고정하고, top, margin 값으로 위치를 설정한다.
#night1 .starWrap { position: relative; width: 750px; height: 400px; top: 150px; margin-left: 600px; }

4. .starWrap의 .star1, .star2, .star3의 위치를 absolute로 설정하고 너비, 높이를 정한다.이미지를 연결하고 각각의 위치를 margin 값으로 설정한다.
#night1 .starWrap .star1, #night1 .starWrap .star2, #night1 .starWrap .star3 { position: absolute; width: 53px; height: 50px; background-image: url(../../img/oneday/night1/star1.png); }

#night1 .starWrap .star1 { margin-top: 350px; } #night1 .starWrap .star2 { margin-left: 650px; } #night1 .starWrap .star3 { margin : 250px 0 0 500px }

#### CSS-Animation (science의 css에 이어서) 1. Night1 페이지에서 움직이는 이미지(star1, star2, star3)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다. (크기변화 ->scale)
#night1 .starWrap .star1, #night1 .starWrap .star2, #night1 .starWrap .star3 { animation : pulseStar 1s linear infinite alternate; } @keyframes pulseStar { from { transform: scale(1.0); } to { transform: scale(0.8); } }

#### CSS-Mobile (science의 css에 이어서)
#night1 { position : relative; height: 500px; background-image: url(../../img/mobile/oneday/night1/mobile_night1_bg.png); } #night1 .owl { width: 88px; height: 151px; margin-top: 0; background-image: url(../../img/mobile/oneday/night1/mobile_owl.png); } #night1 .starWrap { position: absolute; width: 308px; height: 157px; background-image: url(../../img/mobile/oneday/night1/mobile_star.png); top: 300px; margin-left: 50px; }

#night1 .starWrap .star1, #night1 .starWrap .star2, #night1 .starWrap .star3 { display: none; }

```

태그인 #night1의 높이를 재설정하고 이미지를 연결한다. 높이값을 영향을 주기 위해 position을 relative로 설정한다. #night1에 속한
태그들의 높이와 너비를 재설정하고 이미지를 연결한다.

이 때, margin, top 등을 이용해 각영역의 위치를 재설정한다.

.star1, .star2, .star3는 이미 .starWrap에 속해있는 이미지로 재설정했기 때문에 모바일버전에서는 나타나지 않도록 display:none;으로 설정한다.

무엇이 어려웠지?

처음에 forest1 페이지를 만들때 #forest1 .leftTree에 position:absolute를 적용하지 않으면 #forest1 .treeWrap에 float: right를 적용해도 아래 줄에 (div 태그의 block속성이 그대로 살아나 float의 기능은 무시된 것 처럼)오른쪽에 붙어서 나타난다. .leftTree에 position:absolute 대신 float: left를 적용하고, .treeWrap에 float: right를 적용하면 postion:absolute를 적용한 결과와 동일한 결과를 보여주는데, position: absolute; left:0; 대신 float: left를 사용해도 되는 건지 사용했을 때 다른 코드와 겹쳐졌을 때 레이아웃이 변경되지는 않는지 궁금해졌다.

어떻게 해결했지?

처음에는 내가 모르는 개념이 더 있어서 차이를 모르는 거라고 판단했다. 열심히 구글링했지만, 그 차이를 잘 모르겠더라, 그래서 멘토님께 문의를 했다. "float 속성은 탄생 배경은 글과 이미지가 같이 있을 때 이미지 배치를 하기 위해서 나타났지만 이 전에 이미지 배치, 요소들의 가로로 배치하기 힘들던 시절에 많이 사용하던 트릭이지만 엄청 많이 쓰는 방법입니다. 최근에는 배치를 할 수 있는 속성들이 있기 때문에 float 지양하고 position을 사용해서 배치 하는 게 더 좋습니다"라고 말씀하셨다. float는 편의를 위해서 최소한으로 쓰고 가능하면 position으로 배치하는 편이 좋다고 이해했다.

그래서?

와 어제 오늘 수업량이 좀 많았다. 숨돌릴 틈도 없이 수업을 들었고 잠깐 한눈 팔면 이해없이 코드만 받아적는 기계가 되기 때문에 왜 그렇지? 다른 방법은 안될까? 하는 응용으로 생각을 확장할 수 없다. 그렇지만..! 조금더 시간을 들여서 차근차근 공부를 했다. 오늘은 시간이 오래 걸릴거야. 그렇지만 진도에 급급해하지말고 배운걸 잘 소화해보자. 그렇지만 이렇게 오래 걸릴 줄 몰랐다. 2번 반복해서 듣는 것을 권장한다고 하는데, 한 번 듣는데도 6시간 가까이 걸렸다...! 정말 눈도 피로하고 뇌도 너덜너덜해진 기분이다...

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0714

2021.07.13 kidsgao-1

Tue, 13 Jul 2021 07:25:09 GMT

Day12, 11일 동안 배운 내용을 바탕으로 웹사이트 'kidsgao'를 따라 만들어봤다.

오늘 무엇을 배웠지?

Kidsgao 사이트 따라 만들어보기

Kidsgao : http://sisikiller.dothome.co.kr/

Intro, 구름 페이지

html

new file-save(index0713.html), save(style0713.css, animation0713.css, mobile0713.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 태그 입력
키즈가오

```

태그로 intro 영역을 설정하고 id를 입력한다.
태그로 들어갈 이미지의 영역을 설정하고 class를 설정한다.

CSS-Style

Default CSS

html, body { margin: 0; padding: 0; } body { overflow-x: hidden; } /*->가로 스크롤 생성방지*/ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } button { border: none; background-color: transparent; } .clearfix { clear: both; }
으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.

태그인 #intro의 너비와 높이를 설정하고 이미지를 연결한다.

#intro { width: 100%; height: 1600px; background-image: url(../../img/intro/intro_bg.png); }

태그 .introWrap의 position을 relative로 설정해 이 태그 안에 있는 자식관계의 태그들의 위치가 영향을 받을 수 있도록 한다. 또 중앙정렬을 위해 left:50%, margin-left:-380px로 설정한다. logo가 웹사이트 바로 위에서 시작하는 것이 아닌 조금 아래에서 시작할 수 있도록 top을 설정한다.

#intro .introWrap { position: relative; width: 760px; height: 516px; left: 50%; margin-left: -380px; top: 100px;}

+++ 로고를 아래로 내릴 때 사용할 수 있는 방법 3가지 ① margin-top: 100px; ->margin병합현상때문에 배경까지 같이 100px 내려옴 ② padding-top: 100px; ->로고를 살짝 내릴 수 있음, 그러나 컨텐츠들이 100px씩 내려옴 ③ top: 100px; ->로고를 살짝 내릴 수 있음, 레이아웃이 틀어지지 않음, 그러나 아래의 배경과 겹칠 수 있음

.introWrap 안의 자식 태그들의 위치와 크기를 설정하고 이미지를 연결한다. 이때, 이미지들의 앞,뒤 위치가 있기 때문에(3차원적 성격) position:absolute, z-index를 설정한다. (z-index를 설정 안할 경우 기본값은 0)
#intro .introWrap .logo { position: absolute; z-index: 100; width: 760px; height: 516px; background-image: url(../../img/intro/logo.png);}

+++ 이미지를 연결할때 각각의 사이즈는 이미지 본래의 사이즈에 맞게 설정하는것이 좋다! (본래의 이미지 보다 크게 이미지 영역을 크게 설정할 경우 ->반복되어서 이미지가 나옴 -> background-repeat: norepeat;으로 설정할 수 있지만 이미지 사이즈는 동일하다.) 5.
태그의 또다른
태그인 .cloudWrap의 너비와 높이를 설정한다.

#intro .cloudWrap { position: relative; width: 100%; height: 1050px; }

.cloudWrap 안의 자식 태그들의 위치와 크기를 설정하고 이미지를 연결한다. 이때, 이미지들의 앞,뒤 위치가 있기 때문에(3차원적 성격) position:absolute, z-index를 설정한다. (z-index를 설정 안할 경우 기본값은 0)
#intro .cloudWrap .leftCloud { position: absolute; z-index: 2; left: 0; width: 934px; height: 816px; background-image: url(../../img/intro/cloud1.png); }

CSS-Animation

Intro에서 움직이는 이미지(사자, 토끼, 곰, 원숭이)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#intro .introWrap .lion { animation: spinLion 1500ms linear infinite alternate; } @keyframes spinLion { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

#intro .introWrap .rabbit { animation: spinRabbit 1000ms linear infinite alternate; } @keyframes spinRabbit { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

2. 구름 아래의 왼쪽에서 오른쪽으로 움직이는 잠자리에게 애니메이션 효과를 적용한다. 시작할때 왼쪽에서 잠자리가 보이지 않기 때문에 위치를 잠자리이미지 크기 만큼 옮기고, 어느 브라우저크기에도 오른쪽 끝까지 이동하도록 left:100%로 효과를 적용한다.
#intro .cloudWrap .dragonfly { animation: flyDragonfly linear 7s infinite; }

@keyframes flyDragonfly { from { left: -366px; } to { left: 100%; } }

#### CSS-Mobile 1. 미디어쿼리를 적용해 모바일 사이즈(최대 767px-> 768px부터는 pc버전 화면)의 화면에서는 다르게 적용되도록 설정한다.
@media (max-width: 767px) { #intro { height: 1150px; background-image: url(../../img/mobile/intro/mobile_intro_bg.png); } #intro .introWrap { width: 189px; height: 129px; margin-left: -94.5px; top: 230px; } #intro .introWrap .logo { width: 189px; height: 129px; background-image: url(../../img/mobile/intro/mobile_logo.png); } #intro .introWrap .lion, #intro .introWrap .rabbit, #intro .introWrap .bear, #intro .introWrap .monkey, #intro .cloudWrap .dragonfly { display: none; } #intro .cloudWrap { height: 350px; top: 280px; } #intro .cloudWrap .leftCloud { width: 267px; height: 314px; background-image: url(../../img/mobile/intro/mobile_cloud1.png); } #intro .cloudWrap .rightCloud { width: 237px; height: 309px; background-image: url(../../img/mobile/intro/mobile_cloud2.png); } }

2. ```
```태그인 #intro의 높이를 재설정하고 이미지를 연결한다. 3. ```
``` 태그의 높이와 너비를 재설정한다. 또, .introWrap의 중앙정렬을 위해 margin-left:-94.5px로 설정한다.(이미 style에서 left:50%값이 적용되어있으므로 한번 더 설정할 필요는 없다) logo가 웹사이트 바로 위에서 시작하는 것이 아닌 조금 아래에서 시작할 수 있도록 top을 설정한다. 4. .introWrap의 위치와 크기를 재설정하고 이미지를 연결한다. 5. 모바일 버전으로 바뀌었을 때 애니메이션효과로 따로 이미지를 연결했던 .lion, .rabbit, .bear, .monkey, .dragonfly를 보이지 않도록 설정한다.(display: none;) 또,```
```태그의 또다른 ```
```태그인 .cloudWrap의 너비와 높이를 재설정한다. top으로 로고의 위치에서 더 아래의 영역에 위치하도록 설정한다. 6. .cloudWrap 안의 자식 태그들의 위치와 크기를 재설정하고 이미지를 연결한다. ### Farm1 페이지 #### html (Intro, 구름 페이지의 html에 이어서) 1. ```
``` 태그로 farm1 페이지 영역을 설정하고 id를 설정한다. 2. 삽입할 이미지 각각의 영역을 ```
```태그로 설정하고 class를 설정한다. 3. ``````태그로 이미지를 입력하고 글자를 입력하기 위해 ```
```태그를 이용한다. ``` ```태그는 글에 줄바꿈을 설정할 수 있다.

식재료만 넣은 안전한
우리쌀 점토 키즈가오는
우리 쌀을 사용하여 만들어요.
화학물질을 사용하지 않고,
식재료를 사용해서 만든
안전한 제품이랍니다.

```
CSS-Style

(Intro, 구름 페이지의 css에 이어서)

태그인 #farm1의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.

#farm1 { position: relative; width: 100%; height: 800px; background-image: url(../../img/farm/farm1/farm1_bg.png); }

태그 .leftRice1, .rightRice1의 position을 absolute로 설정하고 각각의 위치를 left:0;, right:0;으로 위치를 고정한다. 각 태그에 맞는 이미지를 연결하고 너비와 높이를 설정한다. 이때, .leftRice1 보다 .rightRice1의 높이가 100px 작기 때문에 top:100px을 적용해 두 태그의 바닥을 맞춘다.

#farm1 .leftRice1 { position: absolute; width: 390px; height: 670px; background-image: url(../../img/farm/farm1/leftrice.png); left: 0; }

#farm1 .rightRice1 { position: absolute; width: 335px; height: 570px; background-image: url(../../img/farm/farm1/rightrice.png); right: 0; top: 100px; }

3. .farmer의 이미지를 연결하고 너비, 높이를 설정한다. 2.와 같이 위치를 동일하게 position: absolute로 고정하고, 중앙정렬을 위해 left, margin-left값을 설정한다.
#farm1 .farmer { position: absolute; width: 747px; height: 1078px; background-image: url(../../img/farm/farm1/farmer.png);

left: 50%; margin-left: -310px; }
4. .farmSpeechWrap 안의 자식태그들이 위치의 영향을 받을 수 있도록 position을 relative로 설정하고 위치를 설정한다. .farmSpeech의 글자를 디자인한다.
#farm1 .farmSpeechWrap { position: relative; top: 250px; left: 150px; }

#farm1 .farmSpeechWrap .farmSpeech { color: #895c2f; font-size: 18px; line-height: 27px; }

#### CSS-Mobile (Intro, 구름 페이지의 css에 이어서)
#farm1 { height: 450px; background-image: url(../../img/mobile/farm/farm1/mobile_farm1_bg.png); } #farm1 .leftRice1 { width: 86px; height: 150px; background-image: url(../../img/mobile/farm/farm1/mobile_leftrice.png); } #farm1 .rightRice1 { width: 95px; height: 170px; top: -20px; background-image: url(../../img/mobile/farm/farm1/mobile_rightrice.png); } #farm1 .farmer { width: 160px; height: 250px; margin-left: -69px; background-image:url(../../img/mobile/farm/farm1/mobile_farmer.png); } #farm1 .farmSpeechWrap { width: 300px; text-align: center; left: 50%; margin-left: -150px; } #farm1 .farmSpeechWrap img { width: 79px; } #farm1 .farmSpeechWrap .farmSpeech { line-height: 20px; font-size: 12px; }

1. ```
```태그인 #farm1의 높이를 재설정하고 이미지를 연결한다. 2. #farm1에 속한 ```
``` 태그들의 높이와 너비를 재설정한다. 또, .rightRice1의 높이가 .leftRice1의 높이보다 20px 작으므로 .rightRice1에 top:-20px을 설정해준다.logo가 웹사이트 바로 위에서 시작하는 것이 아닌 조금 아래에서 시작할 수 있도록 top을 설정한다. 3. .farmer의 너비와 높이를 설정하고 중앙정렬을 위해 margin-left:-69px로 설정한다.(이미 style에서 left:50%값이 적용되어있으므로 한번 더 설정할 필요는 없다) 4. .farmSpeechWrap의 너비를 설정하고 자식태그들이 중앙정렬할 수 있도록 text-align: center;로 설정한다. .farmSpeechWrap의 영역이 브라우저의 중앙에 위치하도록 left:50%; margin-left:-150px;로 설정한다. 5. .farmSpeechWrap 안의 자식 태그들의 크기를 재설정하고 글자를 디자인한다. ### Farm3 페이지 (farm2는 반복적인 페이지로 생략) #### html (Intro, 구름 페이지,farm1,2 페이지의 html에 이어서) 1. ```
``` 태그로 farm3 페이지 영역을 설정하고 id를 설정한다. 2. 삽입할 이미지 각각의 영역을 ```
```태그로 설정하고 class를 설정한다. 3. ``````태그로 이미지를 입력하고 alt로 이미지 안의 글을 입력한다.
#### CSS-Style (Intro, 구름 페이지, farm1,2 페이지의 css에 이어서) 1. ```
```태그인 #farm3의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.
#farm3 { position: relative; width: 100%; height: 850px; background-image: url(../../img/farm/farm3/farm3_bg.png); }

2. ```
``` 태그 .farm3Window의 position을 absolute로 설정하고 각각의 위치를 margin으로 위치를 고정한다. 각 태그에 맞는 이미지를 연결하고 너비와 높이를 설정한다.
#farm3 .farm3Window { position: absolute; width: 247px; height: 169px; margin: 100px 0 0 100px; background-image: url(../../img/farm/farm3/window.png); }

3. .machineWrap의 이미지를 연결하고 너비, 높이를 설정한다. 2.와 같이 위치를 동일하게 position: absolute로 고정하고, 중앙정렬을 위해 left, margin-left값을 설정한다.
#farm3 .machineWrap { position: relative; width: 600px; height: 455px; left: 50%; margin-left: -285px; top: 150px; }

4. .machine1의 위치를 absolute로 설정하고 너비, 높이를 정한다. z-index로 각 영역의 앞,뒤 기준을 세운다. 또, .sawShadow, .saw1, .saw2, .timer의 위치를 absolute로 설정하고 각 class의 이미지를 연결하고 이미지 사이즈를 설정한다.
#farm3 .machineWrap .machine1 { position: absolute; width: 586px; height: 455px; z-index: 900; background-image: url(../../img/farm/farm3/machine1.png); } #farm3 .machineWrap .sawShadow { position: absolute; width: 95px; height: 95px; margin: 145px 0 0 145px; background-image:url(../../img/farm/farm3/sawshadow.png); }

5. .timer, .machineBird도 동일하게 위치를 absolute로 설정하고 이미지를 연결해 너비, 높이, 위치를 설정한다. 이때 타이머와 새는 가장 앞에 나와있으므로 z-index값을 999로 설정한다.
#farm3 .machineWrap .timer { position: absolute; width: 103px; height: 104px; margin: 125px 0 0 45px; z-index: 999; background-image: url(../../img/farm/farm3/second.png); } #farm3 .machineWrap .machineBird { position: absolute; width: 44px; height: 49px; margin: 220px 0 0 20px; z-index: 999; background-image: url(../../img/farm/farm3/machinebird.png); }

6. .farm3Bubble의 top, right로 위치를 설정하고 position 또한 absolute로 설정한다.
#farm3 .farm3Bubble { position: absolute; top: 350px; right: 80px; }

#### CSS-Animation (Intro, 구름 페이지의 css에 이어서) 1. Farm3 페이지에서 움직이는 이미지(타이머, 톱니바퀴1, 톱니바퀴2)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#farm3 .machineWrap .timer { animation: rotateTimer 10000ms linear infinite; } @keyframes rotateTimer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

2. 이 때, 톱니바퀴의 방향이 서로 반대이므로 한쪽의 방향을 반대로 설정해준다.
#farm3 .machineWrap .saw1 { animation: rotateLeftSaw 10000ms linear infinite; } @keyframes rotateLeftSaw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #farm3 .machineWrap .saw2 { animation: rotateRightSaw 10000ms linear infinite; } @keyframes rotateRightSaw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

#### CSS-Mobile (Intro, 구름 페이지, farm1,2 페이지의 css에 이어서)
#farm3 { height: 500px; background-image: url(../../img/mobile/farm/farm3/mobile_farm3_bg.png); } #farm3 .farm3Window { width: 82px; height: 56px; margin: 10px 0 0 10px; background-image: url(../../img/mobile/farm/farm3/mobile_window.png); } #farm3 .machineWrap { width: 200px; height: 150px; top: 120px; margin-left: -96px; } #farm3 .machineWrap .machine1 { width: 191px; height: 149px; background-image: url(../../img/mobile/farm/farm3/mobile_machine1.png); } #farm3 .machineWrap .saw1, #farm3 .machineWrap .saw2 { width: 31px; height: 31px; background-image: url(../../img/mobile/farm/farm3/mobile_saw.png); } #farm3 .machineWrap .saw1 { margin: 50px 0 0 50px; } #farm3 .machineWrap .saw2 { margin: 50px 0 0 115px; }

#farm3 .machineWrap .sawShadow, #farm3 .machineWrap .timer, #farm3 .machineWrap .machineBird { display: none; }

#farm3 .farm3Bubble { position: absolute; width: 152px; left: 50%; margin: 0 0 0 -70px; }

```

태그인 #farm3의 높이를 재설정하고 이미지를 연결한다. #farm3에 속한
태그들의 높이와 너비를 재설정하고 이미지를 연결한다.

이 때, margin, top 등을 이용해 각영역의 위치를 재설정한다.

.sawShadow, .timer, .machineBird는 이미 .machine1에 속해있는 이미지로 재설정했기 때문에 모바일버전에서는 나타나지 않도록 display:none;으로 설정한다.

.farm3Bubble은 모바일 버전에서 새로운 위치로 재설정해주고 position은 absolute로 설정한다.

무엇이 어려웠지?

여태껏 배운 내용의 총망라였다. 정말 쉽지 않았다. 평소에 듣는 진도속도에 3분의2 정도도 겨우겨우 따라갔다. 분명 똑같이 입력했고 오탈자도 없는걸 확인했는데 가끔 원하는대로 나오지 않아서 답답했다. 그럴 땐 그냥 방금 적은 코드는 없던 걸로 하고 처음부터 차근차근 새로 적었다. 그럼 될때가 있다! ~~(정말 어이가 없어... 진짜 똑같은 코든데...)~~

어떻게 해결했지?

이번에 주로 나를 힘들게 한 것들을 생각해보면 정확한 코드와의 싸움이었다. 그럴때 마다 나는 이런 순서로 해결해나가려고 한다. 1. 선택자를 제대로 입력했는가, 2. ;를 빠뜨리지 않았는가 3. 다른 오탈자는 없는가 4. 띄어쓰기를 잘못 하지는 않았는가... 이것도 안되면 그냥 지우고 새로 쓴다. 그래서 점점 하면 할수록 이런 자잘한 실수 때문에 코딩속도가 늦어지는게 답답하다.

그래서?

선생님이 알려주시는 속도는 잘따라간다. 머릿속으로는 그 이상을 먼저 생각하고 있을 때도 있다. 그치만! 손가락이 안따라준다. 속도도 정확도도... 이건 뭐 어쩔수 없다고 생각한다... 마음이 급해서 손가락이 실수를 하는 것이니 자주 해보면서 속도를 높일수 있는 효율적인 나만의 코딩 방법을 터득해낸다면 마음이 급해서 실수를 줄일수 있지 않을까? 하는 생각을 해본다.

sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0713

2021.07.12 CSS-9

Mon, 12 Jul 2021 09:11:57 GMT

Day11, 저번주 금요일에 배운 미디어쿼리를 실습했다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 U,V~Z로 시작하는 태그에 대해서 복습하고 넘어가자.

Inline : ,, Block :

오늘 무엇을 배웠지?

미디어쿼리 실습하기

pc버전에서는 X축, 모바일버전에서는 y축 정렬되는 메뉴버튼 만들기

new file-save(index0712.html), save(style0712.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 태그 입력

```

태그로 메뉴를 만들고 class를 설정한다.

menu 1 menu 2 menu 3

CSS언어로 디자인! 4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 4-2.
태그와 태그의 디자인 기본값을 없애고, 메뉴탭이 중앙정렬될 수 있도록 설정한다. 또, 너비와 배경색상을 디자인한다.

.media-menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; width: 700px; background-color: black; } .media-menu a { color: black; text-decoration: none; }

4-3.
태그의 너비, 배경색, 테두리 등을 디자인하고 text-align과 패딩값을 설정해 중앙정렬한다. 또 미디어쿼리를 적용해 기기의 화면크기가 320px~767px 인 경우(스마트폰) 메뉴탭들이 column으로 y축 정렬하도록 설정하고 각 탭들의 간격을 margin값을 이용해 설정한다.

.media-menu li { width: 150px; background-color: yellow; border: solid 5px red; padding: 5px 15px; text-align: center; } @media (min-width: 320px) and (max-width: 767px) { .media-menu { flex-direction: column; align-items: flex-start; width: 190px; } .media-menu li { margin-bottom: 10px; } .media-menu li:last-child { margin-bottom: 0; } }
덴마크 쇼핑몰(helbak) 화면크기에 따라 위치(고정)가 달라지는 상단메뉴탭 만들어보기

https://www.helbak.com/

new file-save(index0712.html), save(style0712.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)

기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 태그 입력

```

태그로 메뉴를 만들고 class를 설정한다.
Logo

태그로 상단탭 아래의 본문영역을 설정한다.
hello world hello world hello world hello world

CSS언어로 디자인! 5-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 5-2.
태그인 상단 메뉴탭이 x축을 기준으로 정렬될 수 있도록 설정하고 스크롤을 내리거나 올려도 항상 같은 위치에 고정될 수 있도록 position: fiexd로 설정한다. 또, 너비와 배경색상을 디자인한다.
.intro { width: 100%; height: 80px; background-color: #ffffff; display: flex; position: fixed;}

5-3. ```
``` ```
```태그의 너비, 배경색, 높이 등을 디자인한다.
.intro h1 { width: 50%; height: 80px; background-color: black; margin: 0; }

.intro nav { width: 50%; height: 80px; background-color: yellow; }

5-4. ```
```태그의 기본값을 모두 없애고, 이 태그에 속한 ```
```태그 3개가 3등분된 너비(33.3333%)로 설정한다. :nth-child() 코드를 사용해 각 태그의 배경색을 설정한다.
.intro nav ul { list-style: none; padding: 0; margin: 0;}

.intro nav ul li { width: 33.3333%; height: 80px; } .intro nav ul { display: flex;} .intro nav ul li:nth-child(1) { background-color: blue; } .intro nav ul li:nth-child(2) { background-color: gray; } .intro nav ul li:nth-child(3) { background-color: green; }

5-5. ```
``` 태그와 이 태그에 속한```
```태그의 너비, 배경색, 높이 등을 디자인한다.
main { width: 100%; height: 2000px; background-color: gold; } main h1 { margin: 0; }

5-6. 미디어쿼리를 사용해 기기의 화면이나 브라우저 사이즈가 320px~767px(모바일)인 경우 상단메뉴탭이 y축정렬로 바뀌고 항상 고정된 위치가 아닌 기본값(position: static;)으로 설정해준다. 또 그에 따른 너비도 변경해 준다.
@media (min-width: 320px) and (max-width: 767px) { .intro { flex-direction: column; position: static; height: 160px; } .intro h1 { width: 100%; } .intro nav { width: 100%; } }

### bootstrap 사이트의 포트폴리오영역 만들어보기 #### 최소 2개 이상의 분기점을 만들어 그에 따른 배열이 변경되는 설정 만들어보기 https://startbootstrap.com/ ![](https://images.velog.io/images/hyeri_jung14/post/58942a47-a2e6-4aa4-99e6-266e041204ec/image.png) 1. new file-save(index0712.html), save(style0712.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 2. 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 `````` 태그 입력
```

태그로 포트폴리오 항목을 만들고 class를 설정한다.
title

4. class가 column으로 설정된 ```
``` 태그가 하나의 포트폴리오이기 때문에 같은 태그 5개를 추가로 만들어 총 6개의 항목을 만든다. ![](https://images.velog.io/images/hyeri_jung14/post/849e12b8-1632-4877-9d52-9d623e064042/image.png) 5. CSS언어로 디자인! 5-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 5-2. ```
```태그인 .container에 속한 태그들이 x축을 기준으로 정렬될 수 있도록 설정하고 wrap으로 감싼다. 또 각 태그 사이들이 중앙정렬 될 수 있게 설정한다. 또, 너비와 배경색상을 디자인한다. 포트폴리오 하나의 항목인 .column의 너비, 배경색, 테두리 등을 설정하고 각 항목사이의 위아래 간격을 설정한다. :nth-child()로 가장 마지막 줄의 항목에는 공백이 없도록 설정한다.
.container { display: flex; flex-wrap: wrap; justify-content: space-between; width: 1140px; margin: 0 auto; background-color: pink; } .column { width: 355px; background-color: white; border: solid 2px darkred; margin-bottom: 10px; } .column:nth-child(4), .column:nth-child(5), .column:nth-child(6) { margin-bottom: 0; }

5-3. `````` 태그의 너비를 디자인하고 verticla-align: middle로 ``````태그와 ```
```사이의 공백을 없앤다.
.column img { width: 100%; vertical-align: middle; } .image-info { padding: 20px 0; text-align: center; } .image-info h2 { margin: 0; }

5-4. 미디어쿼리를 사용해 기기의 화면이나 브라우저 사이즈가 540px~720px(태블릿)인 경우 가장 큰 태그인 .container의 영역도 720px로 변경되도록 설정한다. (->3열2행에서 2열 3행으로 바뀜) 또 두번째 줄 부터 각 포트폴리오의 아래 공백이 생기도록 설정한다.
@media (min-width: 540px) and (max-width: 720px) { .container { width: 720px; } .column:nth-child(4) { margin-bottom: 10px; } }

5-5. 미디어쿼리를 사용해 기기의 화면이나 브라우저 사이즈가 320px~539px(모바일)인 경우 가장 큰 태그인 .container의 영역도 화면크기에 맞게 변경되도록 설정하고 (->2열 3행에서 1열 6행으로 바뀜) padding 값을 적용해서 이미지와 전체 화면사이의 좌우 공백을 만들어준다. 또 , 각 포트폴리오의 아래 공백이 생기도록 설정한다.
@media (min-width: 320px) and (max-width: 539px) { .container { box-sizing: border-box; width: 100%; padding: 0 20px; } .column { width: 100%; } .column:nth-child(4), .column:nth-child(5) { margin-bottom: 10px; } }

1. 미디어쿼리 방식을 각각 사이즈를 설정해 직접 입력 -> 가장 많이 쓰는 방법 @media () and () { } 2. 모바일버전, 태블릿 버전, pc버전 등 각각의 파일을 따로 만들어 html 파일에 연동함. ->코드가 길어지는 경우 3. ``` ``` 미디어 쿼리를 적용하는 방법 3가지 무엇이 어려웠지? 시간이 얼마나 지났다고 display:flex 등 레이아웃을 설정하는 코드에 대해서 잊어버렸다. 선생님이 ~기 때문에 이것만 설정하면 되겠죠? 라고 하는데 손으로는 이해와 확신없이 선생님의 코드를 따라할 뿐이고 머릿속에는 왜였더라..?하는 의문이 들었다. 어떻게 해결했지? 내가 정리한 개발일지를 보고 다시 공부했다. 역시 복습, 반복만이 길인것 같다. 덴마크 웹사이트의 상단메뉴탭을 만들때 'display :flex;'만 사용해도 다 자연스럽게 x축의 한줄로 정렬이 된다고 했는데 row를 왜 안해도되지? 라는 의문이 들었다. (바보같이) row는 display: flex의 기본값이기 때문에 좌->우로 설정되기 때문에 더이상의 설정은 필요가 없다. 정말이지 부끄러웠다. 배웠는데 왜 모르냐고ㅠ 그래서? 이렇게 진도를 따라가다보면 분명 배웠는데 잘 기억이 나지 않는 때가 종종 있다. 복습을 해도 채워지지 않는 구멍이다. 그래도 긍정적으로 생각하면 나의 부족한 부분을 채울 수 있는 기회가 많고, 그 전보다는 점점 늘어가고 있다는 것이다. 하지만, 이 구멍이 0개가 될것 같지는 않다. 배우면 배울수록 구멍들이 늘어날 것 같은데... 걱정이다.. 언제까지 다시 찾아보고 할 수는 없는데 말이다... sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0712
2021.07.09 CSS-8 Fri, 09 Jul 2021 05:47:55 GMT Day10, 모바일, 웹브라우저 등 다양한 환경에서 적용할 수 있도록 하는 CSS코드인 미디어쿼리에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 T로 시작하는 태그에 대해서 복습하고 넘어가자. Inline : ,,,,,,, Block : 오늘 무엇을 배웠지? 미디어쿼리 미디어쿼리 : 웹브라우저(PC), 모바일 등 다양한 환경에서 웹사이트로써 기능할 수 있도록 만들어 주는 CSS 코드 미디어쿼리 코드 @media (min-width: 숫자px) and (max-width: 숫자px) {.pc { }} -> 원하는 형태를 .pc{}의 중괄호 안에 입력해 디자인 하면 됨. └ 이때 .pc 는 내가 설정한 class 이름이기 때문에 각자가 설정한 class 이름으로 적용하면 됨! ex) HTML : PC HELLO WORLD CSS : @media (min-width: 100px) and (max-width: 599px) {.pc {color: greenyellow; font-size: 10px; background-color: gray;}} 320px768px 미만 : 스마트폰 768px1024px미만 : 태블릿 1024px이상 : PC미디어쿼리 사용시 주의점 ① 미디어 쿼리 변경시 더 큰 px 에서 적용한 디자인이 상속됨 -> 일일이 확인하기 번거롭다면 pc 버전, 모바일 버전 css파일을 따로 만든다! ② 미디어 쿼리 사용시 라는 코드를 적용해 주어야 한다. └ "viewport":웹사이트 접속시 사용하는 기기 화면(PC, 모바일, 태블릿) , "width=device-width": 기기화면의 너비와 동일하게 설정, "initial-scale=1.0": 화면 비율은 1.0을 유지 미디어쿼리는 '검사'에서 확인할 때 웹브라우저의 창크기를 변화시켜보면서 확인 할 수 있다! "display: none;" : pc 사이즈 버전에서는 보여야 하지만, mobile 사이즈 버전에서는 안보여야 하고, mobile 사이즈 버전에는 보여야 하지만, pc 사이즈 버전에는 안보여야 할 때 사용하는 코드.mobile { display: none;} @media(min-width: 320px) and (max-width: 767px) { .pc {display: none;} .mobile {display: block; } } └이 때 mobile에 적용하는 display 속성은 inline, block 등 none 외의 값 어떤 것이라도 가능하지만 최대한 원래 태그의 속성값에 맞는 값으로 설정한다! +++TIP! - w3school 사이트의 CSS-RWD viewport에서 추가적 설명을 확인 할 수 있음 - mediaquery standard devices -> https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 사이트에서 각각 디바이스에 따른 화면 사이즈 확인 할 수 있다! └ 모바일 portrait-세로모드 , landscape-가로모드 버전 - chrome ->검사-> elements 좌측의 디바이스 버전으로 모바일 버전에서 어떻게 표현되는지 확인할 수 있다! - 모바일->태블릿->pc 버전으로 사이즈가 작은 영역에서 디자인해서 확장해 나가는 것이 상대적으로 역순보다 쉽다! └ h1 { font-size: 20px; background-color: cyan;} @media (min-width: 768px) { h1 {font-size: 40px;background-color: plum;}} @media (min-width: 1024px) { h1 {font-size: 80px;background-color: pink;}} 첫번째 h1 코드는 모바일 버전 첫번째 @media 코드는 태블릿 버전 두번째 @media 코드는 pc 버전으로 설정한 것 ->세가지 버전을 모두 디자인 하는 경우 따로 max-width를 설정하지 않아도 가능 ># 그래서? 오늘은 눈에 띄는 변화를 한번에 확인할 수 있는 것에 비해 상대적으로 굉장히 쉬운 수업이었다. 그래서 어려운 것도 딱히 없었다. position과 animation에 너무 골머리를 앓았는지 미디어쿼리라는 개념은 이해도 쉽고 적용도 쉬운데다가 코드 적용에 따라 변화정도가 눈에 띄어서 시간 가는줄 모르고 수업을 들었다. 하지만 그런 생각이 들었다. 배우는 것은 쉽지만 적용할때는 머리가 아플 것 같다는 생각이... 결국에는 여러 버전을 만들때 사용하는 아주 기초적인 부분이기 때문에... 뭐 다음시간에 실습할 테니깐 실습해보고 더 생각하자! sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0709 2021.07.08 CSS-7 Thu, 08 Jul 2021 05:32:27 GMT Day9, 애니메이션 패키지에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 S로 시작하는 태그에 대해서 복습하고 넘어가자. Inline : ,,,, Block : , 오늘 무엇을 배웠지? 애니메이션 애니메이션 패키지 자주 사용하는 애니메이션을 패키지로 만들어 간편하게 사용할 수 있도록 되어있음. 애니메이션 라이브러리 사이트 ① https://animate.style/ CDN 코드를 복사해서 연동한 css 코드 위에 위치하도록 붙여넣는다. 그러면 애니메이션이 등장! 그리고 원하는 애니메이션을 css언어로 디자인 할 수도 있다. ② https://codepen.io/search/pens?q=animation ->로그인이 필요한 사이트 example은 수업때 적용했던 것이고 짜잔 과 NETFLIX는 animate.sytle에서 뭔가 만들어보고 싶은 애니메이션을 적용해본 것이다. 애니메이션을 직접 .gif 파일로 올리지 못한다는 내 실력이 비탄스럽다. Example 짜잔 NETFLIX 무엇이 어려웠지? 딱히 어려운 것은 없었다...! 오히려 내가 직접 만들어 보겠다고 낑낑 대는게 얼마나 바보같은 일인지 깨달았다. 그래서? http와 css 두개로만 엄청난 사이트를 만들 수 있다는 것을 알고 충격을 받았다. 생각보다 엄청난 능력의 소유자들이 너무 많았고 이를 공짜로 배포한다는 건 또 적잖은 충격이었다. 생각해보면 누구든지 노력하면 만들 수 있기 때문에 코드를 짜는 것이 저작권과 같은 권리를 주장하기는 어려운 영역이라는 생각도 어렴풋이 들었다. 워낙에 스스로 해내는 것에 대해 큰 가치를 두고 살아온 터라, 남들이 만든 코드를 사용하는 것 보다 스스로 만드는 것이 시간이 더 오래 걸리고 어쩌면 결과물 조차 더 나빠 질 수 있는 과정임을 인지하고 있음에도 불구하고 포기하지 못했다. 물론, 처음 시작해서 배울때는 스스로 해내는 것이 실력이 느는데 정말 도움이 된다고 생각한다. 하지만 이 방법을 계속해서 고수하다간 도태되겠구나...! 라는 생각이 아주 크게 들었다. 그래서 필요하다면 도움을 얻을 수 있는대로 얻어서 더 효율적인 방법으로 제작하고, 깔끔하고 사이트 성격에 맞는 디자인을 잘 짜는 것이 더 낫다는 생각이 들었다. sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0708 2021.07.07 CSS-6 Wed, 07 Jul 2021 06:33:35 GMT Day8, 오늘은 애니메이션에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 P,Q,R으로 시작하는 태그에 대해서 복습하고 넘어가자. Inline : ,,, Block : , 오늘 무엇을 배웠지? 애니메이션 :hover {}를 적용해 마우스커서를 가져다댔을때 변화를 볼 수 있다. Transforms transform : object에 위치변경, 각도 회전, 크기를 늘리거나 줄임 등의 효과를 적용 transform: rotate(45deg); -> 회전 () 음수는 좌로 회전, 양수는 우로 회전 transform: scale(3,2); ->크기를 비율에 맞춰 조정(확대/축소) (x,y) 숫자는 각 축의 배수를 의미 transform: skew(10deg, 20deg); -> 3차원으로 회전(x,y) x축으로 회전, y축으로 회전 ->정육면체 구현가능 transform: translate(100px,100px); -> object의 위치변경 (x,y) x축으로 이동, y축으로 이동 ++사용시 주의점 : 사용가능한 브라우저의 버전이 있음 그 이하라면 prefix 사용 ->각각 브라우저의 버전을 지칭 하위버전에서 적용할때 사용 ex) -webkit- : 크롬, 사파리 -moz- : 파이어폭 -ms- : 익스플로러 -o- : 오페라 -webkit-transform : rotate(10deg) -moz-transform : rotate(10deg) -ms-transform : rotate(10deg) -o-transform : rotate(10deg) transform : rotate(10deg) w3school의 css transform보면 다양한 기능을 확인할 수 있음 Transition transition : 애니메이션이 변화하는 과정을 보여줌 transition-property: width; ->변화하는 값 transition-duration: 2s; -> 변화하는 시간 transition-timing-function: linear; -> 속도 성향(점점빠르게, 점점느리게, 일정하게 등등) transition-delay: 1s; -> 변화하기전 걸리는 시간 ▶ transition: width 2s linear 1s; 으로 위의 4가지 값 정리 가능 ( 하나의 숫자만 입력한 경우 그 숫자는 duration으로 인식, 두개의 숫자는 숫자 순서대로 duration, delay로 인식) Animation 속성 웹사이트를 실행했을 때부터 움직이거나 형태의 변화가 있음 animation-name: changewidth; -> 원하는 이름으로 설정 animation-duration: 3s; -> 효과가 적용되는 시간 animation-timing-function: linear; -> 효과의 속도 animation-delay: 1s; -> 효과가 적용되기 전 시간 animation-iteration-count: 6; -> 효과 진행 횟수 infinite(무한으로 진행) animation-direction: normal; -> 효과 진행 방향 normal(기본값), alternate(왕복) 이때, alternate와 interation-count영향을 주지는 않는다. animation-play-state: running; -> 기본값, 효과적용상태를 말하고 paused 로 설정할 시 효과 멈춤 animation-fill-mode: backwards; -> 0%에 설정한 값을 최초에 표현되는 값으로 설정 할 수 있음. "@keyframes 애니메이션이름 {}" 으로 애니메이션 상세히 설정 가능 ① from {} to{} ② 0%{} 50%{} 100%{} - >0~100%의 어느 숫자의 퍼센트로도 설정가능(소숫점까지) 방법으로 설정 가능 @keyframes changewidth { 0% {width: 300px; height: 300px; background-color: yellow;} 50% {background-color: blue;} 100% {width: 600px; height: 300px; background-color: red;} } ++ TIP! ① Transition처럼 한줄로 설정가능 animation-name: spinlion; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;*/ ▼ animation: spinlion 1.5s linear infinite alternate; ② prefix를 사용할 수 있는데, animation에 prefix를 적용했다면 @keyframes에도 동일하게 prefix를 적용해야함! -webkit- animation: spinlion 1.5s linear infinite alternate; animation: spinlion 1.5s linear infinite alternate; @-webkit-keyframes spinlion { from { -webkit-transform: rotate(-10deg); } to { -webkit-transform: rotate(10deg); } } @keyframes spinlion { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } ③ 'stylie'사이트에서 애니메이션 설정에 도움을 받을 수 있다! https://jeremyckahn.github.io/stylie/ ## 실습하기 ### 마우스커서를 가져다 댔을 때 투명해지면서 이동하는 메뉴 탭 만들기 1. new file-save(index0707-2.html), save(style0707-2.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 2. 기본 설정 + html, css 파일을 연동 ``` 목록 전체를태그로 공간을 구분짓고 ->디자인을 위해 "class=mouse-animation" 설정 동일한 탭이기 때문에 '목록' 태그 사용 -> 메뉴는 동급 정보 -> -> 클릭하면 원하는 페이지로 넘어가도록 태그로 메뉴 탭 이름을 설정한다. 이제부터 CSS언어로 디자인 6-1. "html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 6-2."ul {list-style: none;}" 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다. 6-3. "a { color: #000000; text-decoration: none;}" 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다. 6-4. ".mouse-animation li {width: 250px; background-color: #000000; padding: 20px; border-top: solid 5px #dfdfdf;}"으로 메뉴탭의 너비와 배경색을 설정하고 메뉴 탭 사이의 간격을 padding으로 설정한다. 또, 위쪽 테두리 선의 굵기, 색등을 설정한다. 6-5. ".mouse-animation li a {color: #ffffff; font-size: 20px;}" 태그의 글자 색과 크기를 설정한다. 6-6. ".mouse-animation li:hover {opacity: 0.5; margin-left: 10px; transition: opacity 0.2s, margin-left 0.5s;}" 메뉴탭의 영역에 마우스커서를 가져다 대면 투명해지도록 opacity로 투명도를 설정하고 왼쪽으로 이동하도록 maring-left로 이동값응ㄹ 설정한다. 이때, 효과가 자연스럽게 적용되도록 'transition'으로 opacity와 margin-left가 적용되는 시간을 설정한다. +++tip! opacity는 글자와 배경색 모두에 투명도를 적용한다. 배경색에만 적용하고 싶다면, background-color를 적용할 때, hex값이 아닌 rbga 값으로 설정한다. .mouse-animation li {width: 250px; background-color: rgba(0,0,0,1); padding: 20px; border-top: solid 5px #dfdfdf;} .mouse-animation li:hover { background-color: rgba(0, 0, 0, 0.5); margin-left: 10px;} 색이 변하면서 움직이는 사각형 만들기 new file-save(index0707-2.html), save(style0707-2.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 기본 설정 + html, css 파일을 연동 ``` 태그로 영역을 만들고 class를 설정한다. CSS언어로 디자인! 4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 4-2. ".move-box { position: relative; width: 200px; height: 200px; background-color: darkred; animation-name: moveBox; animation-duration: 4s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate;}" 으로 영역의 너비와 색깔, 위치속성을 설정하고 어떤 효과를 적용할 것인지 설정한다. 4-3. "@keyframes moveBox { 0% {background-color: red; left: 0; top: 0;} 25% {background-color: yellow; left: 500px; top: 0px;} 50% {background-color: gray; left: 500px; top: 500px;} 75% {background-color: green; left: 0px; top: 500px;} 100% {background-color: red; left: 0px; top: 0px;} } "으로 background-color의 변화와 위치 변화를 설정한다. 슈퍼마리오 동전 효과 만들어보기 new file-save(index0707-2.html), save(style0707-2.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 기본 설정 + html, css 파일을 연동 ``` 태그로 영역을 만들고 class를 설정한다. CSS언어로 디자인! 4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 4-2. ".mario-container { position: relative; width: 500px; height: 500px; border: solid 10px black; margin: 0 auto; margin-top: 200px; }" 으로 동전과 상자를 나타낼 영역을 표현한다. 4-3. ".mario-container .mario-coin { position: relative; width: 70px; height: 70px; background-color: yellow; margin: 0 auto; margin-top: 100px; border-radius: 50%; animation: jumpCoin 0.8s linear infinite; }" 으로 마리오 코인이 4-2에 설정한 영역에 속하도록 설정하고 크기와 색,위치를 설정한다. 또 border-radius:50%로 설정해 원으로 표현하고 적용할 animation의 이름을 jumpCoin이라고 설정하고 0.8초동안 효과가 일정하게 무한으로 적용되도록 설정한다.4-4. "@keyframes jumpCoin { 0%{ transform: translate(0); opacity: 1;} 50%{ transform: translateY(-100px) rotateY(180deg); opacity: 0; } 100%{ transform: translateY(-100px) rotateY(360deg); opacity: 0;} }" 으로 동전에 대한 애니메이션 효과를 상세히 설정한다. 처음에는 설정한 위치에 있다가 시간이 지나면서 위로 올라가도록 transform: translateY()로 설정한다. 또 회전하면서 사라지는 효과를 적용하기 위해 rotateY()와 opacity를 이용해 표현한다. 4-6. ".mario-container .mario-box { width: 100px; height: 100px; background-color: blue; margin: 0 auto; animation: jumpBox 0.5s linear infinite; alternate; }"으로 마리오 코인이 들어있는 상자를 표현한다. 크기를 설정하고 색과 위치를 설정한다. 적용할 애니메이션 이름은 jumpBox로 정하고 효과가 0.5초동안 일정한 속도로 무한하게 왔다갔다하면서 적용되도록 설정한다. 4-7. "@keyframes jumpBox { 0%{ transform: translate(0px); } 50%{ transform: translateY(-10px); } 100%{ transform: translateY(10px); } }" 으로 상자가 살짝 위로 뜨는 것을 표현하기 위해 transform: trnaslateY()로 설정한다. 이미지에 마우스커서를 갖다댔을때 이미지가 확대되는 효과 만들어보기 2.는 앞의 1. 2.와 동일함 태그로 영역을 만들고 class를 설정한다. 안에 삽입할 이미지를 태그로 설정하고 그림에 대한 설명을 할 태그를 설정한다. 그 태그 안에 ,태그로 설명을 입력한다. Title paragraph CSS언어로 디자인! 4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 4-2. ".hover-image {cursor: pointer; overflow: hidden; position: relative; width: 400px; border: solid 10px #000000;}" 으로 이미지영역에 마우스 커서를 갖다댔을때 커서의 모양이 포인터로 바뀌고 이미지가 커졌을때 영역밖으로 나가지 않게 overflow: hidden;으로 설정한다. position은 relative로 설정해 속한 태그들이 설정값을 영향받을 수 있도록 하고 크기와 테두리를 디자인한다. 4-3. ".hover-image img {width: 100%; vertical-align: middle; transition: transform 1s linear;}" 으로 이미지의 크기를 부모태그의 영역에 맞춰 설정하고 태그의 기본값으로 설정된 공백을 지운다.(vertical-align->img태그의 공백을 지울때도 사용) 또, 적용한 애니메이션 효과가 자연스럽게 표현되도록 transition으로 입력한다. 4-4. ".hover-image:hover img {transform: scale(1.3);}" 이미지에 마우스커서를 갖다댔을 때 이미지가 커지도록 설정한다. 4-5. ".hover-image .image-info {box-sizing: border-box; position: absolute; width: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 20px; left: 0; bottom: 0;}" 박스의 사이즈가 border-box가 되도록 설정하고 크기또한 부모태그의 크기를 따르도록 설정한다. 배경색을 설정하고 패딩값과 위치를 설정한다. 4-6. ".hover-image .image-info h2, .hover-image .image-info p { margin: 0; padding: 0; color: #ffffff;} .hover-image .image-info h2 {font-size: 20px;} .hover-image .image-info p {font-size: 15px;}" title, paragraph 태그의 margin, padding 값을 없애고 글자색,크기를 설정한다. 무엇이 어려웠지? 점심을 먹고 슈퍼마리오 동전만들기를 해보는데 졸음과 싸우다 보니 수업을 들으면서 코딩을 했던게 다 틀렸다. 처음에 적용한걸 확인해봤을 때 움직이는 검은 영역안에 노란 동그라미와 파란 상자가 나와야하는데 그냥 노란 상자 하나만 덩그러니 있었다. 그랬을 때 당황스러움이란.. 어떻게 해결했지? 알고보니 모든 코드에 하나씩 다 오탈자가 있었던것, ;을 빠뜨린경우가 굉장히 많았다. 노란 동그라미를 만드는것도 border-radius: 50%라고만 입력을 해서 적용이 되지 않았었다. 또 파란 상자가 나오지 않았던것은 정확한 name을 적지 않았고, 검은 큰 영역이 없었던건 border의 px에서 ox라고 오탈자를 적었던것.. 이외에도 조금더 실수가 많아서 6번정도 다시 고치고 확인했다... 그래서? 오늘은 이번주 중에 가장 양으로나 개념으로나 어려운 수업이 아니었나 생각이 든다. 정말... 쉽지 않다... 점점 배우면 배울수록 배웠는데 왜 모르지 하는 자괴감이 든다. 그리고 선생님이 하라고 한대로 했는데 안될때 마다 문득문득 소리지르고 싶어진다... 물론 내 손가락 잘못, 내 눈 잘못, 내 뇌 잘못이긴 한데.. 코딩할때 오탈자를 절.대. 안내는 그런 초능력이 있었으면 좋겠다. sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0707 2021.07.06 CSS-5 Tue, 06 Jul 2021 05:19:56 GMT Day7, 어제까지 배운 레이아웃을 오늘은 실습했다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 N,O으로 시작하는 태그에 대해서 복습하고 넘어가자. Inline : ,, Block : , 오늘 무엇을 배웠지? 실습하기 네이버 메뉴 탭 만들어보기+디자인 https://www.naver.com new file-save(index0704.html), save(style0704.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 기본 설정 + html, css 파일을 연동 ``` 3. 동일한 탭이기 때문에 '목록' 태그 사용 -> 메뉴는 동급 정보 -> ``` ``` ->`````` 4. 클릭하면 원하는 페이지로 넘어가도록 `````` 태그로 메뉴 탭 이름을 설정하고, 이 목록 전체를``````태그로 공간을 구분짓는다. ->디자인을 위해 "class=menu" 설정 5. 이제부터 CSS언어로 디자인함 5-1. **"html, body { margin: 0; padding: 0;}"** 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 5-2.**"ul {list-style: none;}"** 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다. 5-3. **"a { color: #000000; text-decoration: none;}"** 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다. 5-4. **".menu li { float: left; width: 100px; height: 50px; background-color: yellow; border: solid 1px red; }"** float 기능으로 메뉴 탭들을 좌->우 정렬로 정렬하고, 또,너비, 높이, 배경색, 테두리 색 등 디자인한다. 5-5. **"display: block;"** 으로 탭안의 글자외의 여백을 선택해도 원하는 페이지로 넘어가는 기능을 설정한다. **"text-align: center;"**로 메뉴 탭 안의 글자를 중앙정렬(x축기준)한다. 또 높이가 고정값인경우 **"line-height: 높이px;"**로 탭 안의 글자를 중앙정렬(y축기준)한다.(if/ 높이 고정값이 없는 경우 "padding-top: ;", "padding-bottom: ;"으로 위아래 공백을 동일하게 만들어 중앙정렬한다.) 5-6.**".menu li a:hover { color: blue; }"**로 메뉴 탭에 마우스커서를 올릴때 변화하도록 설정한다. 5-7. 5-4.에서 설정한 border는 a태그끼리 만나는 지점에 2px이 되기 때문에 따로 설정한다.-> 5-4.에서 설정한 border는 없애고 **"border-top: solid 1px red; border-bottom: solid 1px red; border-left: solid 1px red;"**를 추가하고, **".menu li:last-child { border-right: solid 1px red; }"**로 설정해 가장 마지막에 있는 a 태그의 오른쪽에만 테두리를 살려 모든 a태그의 테두리를 1px로 설정할 수 있다! ![](https://images.velog.io/images/hyeri_jung14/post/ec446282-606c-4f3e-9f57-f7620f2c5318/image.png) 카카오 친구 리스트 만들어보기+디자인 https://developers.kakao.com/docs/latest/ko/kakaotalk-social/common new file-save(kakao0706.html), save(kakao0706.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 기본 설정 + html, css 파일을 연동 ``` 3. 친구 리스트는 '목록' 태그 사용 -> 친구는 동급 정보 -> ``` ``` ->`````` 4. 친구 한명에 대한 설명은 `````` 태그 이용해서 클릭하면 원하는 페이지로 넘어 가도록 전체를 감싸고, 프로필 사진은 `````` 태그로 설정한다. ``` ```태그로 프로필 사진과 글영역을 구분짓고, 이름은 ``` ```태그, 상태메세지는 `````` 태그로 표현 5. 디자인을 위해 "class" 설정 ``` 김민호 Minho Kim 6. `````` 태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정! 7. css언어로 디자인 7-1. **"html, body { margin: 0; padding: 0;}"** 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 7-2. **"ul {list-style: none;}"** 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다. 7-3. **"a { color: #000000; text-decoration: none;}"** 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다. 7-4. **".kakao-lists li img { border-radius: 20px; margin-right: 10px; }** 프로필 사진의 경계를 둥글게 하고 프로필 사진과 글 사이의 공백이 있기 때문에 "marign-right: ;" 으로 설정한다. 7-5. **".kakao-lists li img, .kakao-lists li .kakao-info { vertical-align: middle; }"** "vertical-align: middle;"로 프로필 사진옆에 글이 배열되도록(x축에 중앙으로 정렬) 설정한다. 7-6. **"kakao-lists li .kakao-info { display: inline-block; }"** 으로``````태그가 동일하게 Inline-Block 속성을 가지도록 설정하고 **"kakao-lists .kakao-info h3 { margin: 0; fontsize: 18px; }"** 이름 글자 크기를 설정한다. **".kakao-lists .kakao-info span { font-size: 14px; color: #c8c8c8; }"** 로 상태메세지의 글자크기와 색상을 설정한다. 7-7. **".kakao-lists li a { display: block; }"** 으로 프로필의 여백에도 ``````태그가 적용되도록 설정한다. 7-8. **".kakao-lists li {margin-bottom: 10px;}** 으로 프로필끼리의 간격을 설정한다.(margin이나 padding 값 적용) ### 네이버 '과학'부분 만들어보기+디자인 https://www.naver.com ![](https://images.velog.io/images/hyeri_jung14/post/eb535165-cdb5-4f45-aad8-f76d3d4c622f/image.png) 1. new file-save(naver0706.html), save(style0706.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장) 2. 기본 설정 + html, css 파일을 연동`````` ``` 3. 동일한 목록이기 때문에 '목록' 태그 사용 -> 기사는 동급 정보 -> ``` ``` ->`````` 4. `````` 태그로 ``````태그를 감싸서 삽입한 이미지를 클릭했을 때 원하는 페이지로 넘어가도록 설정한다. 5. 다시 ``````태그를 만들어 글을 클릭했을 때 원하는 페이지로 넘어가도록 설정하고, ``````태그로 공간을 구분짓는다. 6. `````` 태그로 '과학' 부분이라는 글을 적을 수 있는 공간을 만들고, ``` ``` 태그로 기사 제목을, ``` ``` 태그로 본문을, ``` ``` 태그로 아래의 기사출처, 기사작성시간을 적을 수 있는 공간을 만든다. ``````태그로 기사 출처와 기사작성시간을 입력한다. 7. 디자인을 위해 "class" 설정 ``` 과학 인체의 신비전에 전시된 뼈는 어디에서 왔을까? 시체나 인체 표본을 이용해 대중에게 해부학 지식을 알려주는 전시회가 종종 열린다. ‘인체의 신비전(BODIES: The Exhibition)’은 이런 전시회의 시조 격이다. 전시된 시체들은 어디에... 현대지성 3주일 전 ``` 8. `````` 태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정! 9. css 언어로 디자인! 9-1.**"html, body { margin: 0; padding: 0;}"** 으로 웹브라우저의 경계에 주어진 기본값을 없앤다. 9-2. **"ul {list-style: none;}"** 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다. 9-3. **"a { color: #000000; text-decoration: none;}"** 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다. 9-4. **".science-lists {width: 750px;}"** 전체 영역의 너비를 설정해 준다. 9-5. **".science-lists .image-link, .science-lists .info-link {display: inline-block; vertical-align: middle;}"** 사진과 글이 옆으로 나란하게 배열되도록 하도록 한다. 이때 margin 값을 적용해 사진과 글 사이의 여백을 만든다. ![](https://images.velog.io/images/hyeri_jung14/post/04c4c490-5570-483c-aded-76dc34130635/image.png) +++ TIP! CSS 레이아웃을 배웁시다 https://ko.learnlayout.com/ 에서 공부! 무엇이 어려웠지? 수업에서는 디자인하는 것보다는 레이아웃을 만들 때 원하는 위치에 영역을 설정할 수 있도록 실습해보는 것이 오늘 실습으로는 더 중요해서 디자인은 넘어갔다. 하지만 나는 내가 직접 배워본걸 확인 해 보고 싶어서 디자인을 직접 해봤다. 그치만 쉽지 않았다. naver 과학부분을 디자인할 때 그림과 글에 마우스를 가져가면 자동으로 제목이 강조되는 기능을 설정하는것이 어려웠다. 어떻게 해결했지? 솔직히 말하면 어려울 것이 없었는데 어려웠다. a:hover 기능만 적용하면 되는 것이었는데, 이때동안은 모든 영역을 하나의 태그로 묶어서 사진과 글 어디를 선택해도 동일한 태그에 묶여 있었다. 그래서 늘 이 태그에 대해서 hover 기능을 적용하면 되었었는데 이번에는 태그가 두개니깐 따로 적용해야 하는것이 아닌가 하는 생각이 들었다. 그래서 처음에는 .science-lists image-link a:hover .science-info .science-title {text-decoration: underline;}과 .science-lists info-link a:hover .science-info .science-title { text-decoration: underline;} 이렇게 적용을 했고, 결과는 아무런 변화도 없었다. 그래서 오탈자의 문제인지 class가 저장되지 않은 상태에서 확인을 한건지 여러가지 놓친부분이 있나 확인을 해봤다. 그치만 여전히 변화는 없었고 고민을 하다보니 css 언어 설정 자체를 잘못했다는 판단에 이르렀다. 굳이 2가지로 설정할 필요가 없었고, 2가지로 설정하려다보니 css언어에서 맞지 않는 문법으로 입력했던 것이었다. 그래서 .science-lists a:hover .science-info .science-title { text-decoration: underline;}로 수정해서 다시 입력했고 아주 만족스러운 결과를 얻었다! 그래서? 이번에 배운 내용과 실습은 디자인의 작은 요소들 보다는 배치와 정렬에 중점을 둔 내용이었다. 그래서 일반적인 디자인(폰트, 색상, 크기 등)을 하는 것에 비해서 이해를 필요로 하는 개념들이 많았고 이를 잘 소화하지 못하면 큰일 나겠다는 생각이 들었다...! 위기감은 느껴졌으나 위기감 대비 실력은 부족하다는 것을 실습을 하면서 깨닫고 조금은 의욕을 잃었다. 점점 더 많고 어려운 내용을 배울 것 같은 느낌이 들기 때문에 벌써부터 낙오하면 안된다. 복습해서 내걸로 만들자! sublime3를 이용해 오늘 만들어본 파일 https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0706

hyeri_jung14.log

2021.08.02 NAVER-11

오늘 무엇을 배웠지?

Naver - TV연예 페이지 따라 만들어보기

html

CSS-Style

TITLE 1

TITLE 1

TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1

TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1

TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1 TITLE 1

스타 콘텐츠

[금새록] 오월의 새록

[금새록] 오월의 새록

[금새록] 오월의 새록

[금새록] 오월의 새록

```, ``````의 margin-bottom으로 간격을 설정하고 글자크기 등을 설정한다.

```를 디자인한다.(너비, 높이, 간격 등)

```의 간격, 글자 크기 등을 설정한다.

```의 position을 설정하고 너비, 높이 등을 설정한다. ``````태그의 글이 설정한 너비를 넘어가면 말 줄임표로 설정되도록 overflow: hidden, text-overflow: ellipsis, white-space: nowrap으로 설정한다.

무엇이 어려웠지?

그래서?

2021.07.30 NAVER-10

오늘 무엇을 배웠지?

Naver 뉴스페이지 따라 만들어보기

메인 left

html

[단독] 동해물과 백두산이 마르고 닳도록

[단독] 동해물과 백두산이 마르고 닳도록

CSS-Style

메인 right

html

언론사별 가장 많이 본 뉴스

무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.

TODAY

공지

날씨

운세

3,162.28

971.73

CSS-Style

```의 글자크기,아래 간격을 설정한다. `````` 의 너비 ,높이, 배경색, 등을 설정하고``````태그의 position:relative로,top:2px로 위치를 설정하고 글자크기, 색 등을 설정한다.

``` ``````태그의 글자크기, 정렬 등을 디자인한다.

```,``````태그의 글자 크기, 색, 간격등을 설정한다.

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.29 NAVER-9

오늘 무엇을 배웠지?

Naver 뉴스 페이지 따라 만들어보기

html

국민일보

CSS-Style

무엇이 어려웠지?

그래서?

2021.07.28 NAVER-8

오늘 무엇을 배웠지?

Naver - blog 페이지 따라 만들어보기 2

- 2

html

공지사항

CSS-Style

html

CSS-Style

blog-detail

html , CSS

챌린지 프로그램

핫토픽 도전으로 인기 블로거가 되어보세요.

나의 덕질은 끝나지 않았다!

나의 덕질은 끝나지 않았다!

나의 덕질은 끝나지 않았다!

나의 덕질은 끝나지 않았다!

나의 덕질은 끝나지 않았다!

나의 덕질은 끝나지 않았다!

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.27 NAVER-7

오늘 무엇을 배웠지?

Naver - blog 페이지 따라 만들어보기 1

```, ```
```의 margin-bottom으로 간격을 설정하고 글자크기 등을 설정한다.

``` ```
```태그의 글자크기, 정렬 등을 디자인한다.

핫토픽 도전으로
인기 블로거가
되어보세요.

오늘의
웹툰