rona-kim.log

7월 22일 (네이버 쇼핑 카피캣)

Thu, 22 Jul 2021 05:51:48 GMT

학습내용

오늘은 list_item 작업을 했다. 🔵첫번째 .list_item에는 상 하로 나누어서 작업을 했다.

 상

    
        
            백화점 상품 그대로
            
        
            
                
                생활공작소 과탄산소다
                1.5kg x 4입 
            
            
                
                생활공작소 과탄산소다
                1.5kg x 4입 
            
            
                
                생활공작소 과탄산소다
                1.5kg x 4입 
            
            
                
                생활공작소 과탄산소다
                1.5kg x 4입 
            
        
    

 하
 
    
        hot deal
        백화점 상품 그대로
                

        
            
                div class="content_image_wrap shop_border">
                    
                    50%
                
                    부드럽게 감기는 말랑말랑 파우치 이불
                    
                    21,900원
                    
            
            
                div class="content_image_wrap shop_border">
                    
                    50%
                
                    부드럽게 감기는 말랑말랑 파우치 이불
                    
                    21,900원

#shop_main .list_item .list_half .content_lists {
    ✔overflow: hidden;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li {
    ✔float: left;
    width: 33.33%;
    height: 177px;
    border-right: solid 1px #f0f0f0;

    text-align: center;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 {

    ✔display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;

    padding-top: 11px;

}

top부분은 float으로 정렬을 해주었고 bottom부분은 flex로 정렬을 해주었다.

#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 .shop_title_border {
    ✔position: relative;

    display: inline-block;

    border: solid 1px #ffffff;
    color: #ffffff;
    /*font-size: 14px;*/

    padding:2px 4px;
    top: 50%;
    transform: translateY(-50%);
}

.half_overlay가 3차원이고 .shop_title_border도 3차원이기 때문에 레이어가 겹치게 되는데 이 때는 뒤에 나온 3차원이 z축이 더 크기 때문에 위로 배치가 된다.

#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap .discount {
    position: absolute;
    display: block;

    width: 42px;
    height: 42px;
    background-color: orange;
    border-radius: 50%;

    font-size: 13px;
    color: #ffffff;

    line-height: 42px;
    text-align: center;

    top: 6px;
    right: 5px;
}

이미지 보다 더 위로 올려주기 위해서 position을 3차원으로 설정

#shop_main .list_item .list_half .content_lists.content_lists_2 li .price em {
    font-size: 14px;
    font-weight: 700;
    ✔font-style: normal;
}
#shop_main .list_item .list_row_3 {
    background-color: #ffffff;

    border-top: none;
}

font-weight에 bold사용 가능, 100~900까지 사용 가능 em은 태생적으로 폰트의 스타일이 이탤릭체(기울임) 이탤릭체가 싫으면 font-style:normal;

레이아웃을 잘 만들어놓으니 배치하기가 수월했다. 동일한 레이아웃은 copy&paste만 하면 끝!

🔵 brand_wrap

🔵footer


    
        
            네이버 이용약관
            네이버페이 이용약관
            개인정보처리방침
            법적고지 및 주의사항
            입점안내
            쇼핑윈도 노출안내
            쇼핑파트너센터
            스마트스토어센터
        
        네이버는 통신판매 당사자가 아닙니다. 거래에 관한 의무와 책임은 판매자에게 있습니다.

#shop_footer .policy_wrap span:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background-color: #d7d7d7;
    vertical-align: -1;
}

#shop_footer .policy_wrap span:first-child:before {
    content: initial;
}

어제와 마찬가지로 가상선택자:가상선택자 방법을 사용했다.

네이버 쇼핑 코딩

어려웠던 점

요새들어서 계속 오타가 나서 큰일이다ㅠㅠ 실행이 안되서 살펴보면 알파벳이 하나 빠져있거나 코딩 복사 붙여넣기 하느라 삭제 못한 것(?)들이 자꾸 나와서 시간이 많이 지체됐다

해결방법

해결방법은 따로 없지 않을까 그냥 빠르고 정확하게 타이핑할 수 밖에

학습소감

어제부터 집중력이 많이 흐트러졌다. 그러다보니 자연스럽게 진도가 느려졌다. 2시간짜리를 몇 시간째 보는지 ㅠㅠ 그래도 막히면 풀리기 전까지 못 나가는 성격덕분에 확실한 공부를 하고 있기는 하다.

7월 21일 (네이버 쇼핑 카피캣)

Wed, 21 Jul 2021 05:16:06 GMT

학습내용

네이버 메인과 css를 같이 공유해서 진행했다. 🔵shop_header

#shop_body {
    background-color: #e9ecef;
}
.shop_container {
    width: 1300px;
    margin: 0 auto;
}

.shop_border {
    border: solid 1px #ced2d7;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

css에 먼저 클래스를 지정해주고 html을 작업해주었다. .shop_container에 width값을 주고 margin: 0 auto;로 중앙정렬 되게 설정해줌

#shop_header nav ul {
    padding: 13px 0 8px 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

}

ul에 flex로 y축정렬되게 해준다.

🔵main main에서는 list_wrap을 만들고 그 안에 똑같은 list_item들을 8개 만들어 준후 왼쪽 상단 첫번재, 두번째까지만 실습했다.

list_item에 padding-top을 지정한적은 없지만 css파일을 공유하고 있기 때문에 네이버 메인에서 적용했던 padding-top값이 네이버 쇼핑에도 적용이 됐다.

첫번째 list_item을 category_wrap 으로 div를 하나 만들어서 그 안에 작업을 했다. css에서 미리 만들어준 클래스를 적용했다.

왼쪽과 오른쪽 ,오른쪽 상단, 오른쪽 하단 이렇게 세부적으로 작업을 했다.

#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_right {
    float: right;

    width: 182px;
    height: 100%;

    background-color: #ffffff;
}

오늘은 float를 사용해 배치작업을 해주었다. 부모 태그에는 overflow:hidden;을 적용해줬다.

안에 있는 값들이 감싸고 있는 틀의 width보다 크다면 자동으로 줄바꿈 현상이 나타난다.(y축정렬의효과)

두번째 list_item은 이미지만 삽입해 주었다. class에 w-100, h-100을 넣어서 이미지가 list_item에 꽉 차게 만들었다.

어려웠던 점

오늘은 지금까지 잘 이해하고 있었던 flex를 어디에 적용해야하는가에 약간 또 헷갈렸다. ul, li 중 어디에 flex를 적용해야 하나 싶었다.

해결방법

ul안에 li가 있으니 li를 y축 정렬시키고 싶으면 부모 태그인 ul에 flex를 적용시켜주면 되는 것이였다. 이런 기본적인 것도 헷갈리다니 ㅠㅠ갈 길이 멀었다.

학습소감

이제 a를 inline-block으로 변경했을 때 나타나는 변화와 적용시킬 수 있는 속성들에 대해 확실하게 알게되었다. 크기를 지정해주고 싶을 때, 모든 공간을 다 클릭할 수 있게 할 때 ! 이젠 flexbox.help를 즐겨찾기로 지정해놓아야 할 것같다. https://via.placeholder.com/은 아예 외워버려서 그냥 바로 삽입을 해버린다. 아무것도 모르는 바보인줄 알았는데 그래도 무의식적으로 기억하고 있어서 신기하다 👍

7월 20일 (네이버 메인 카피캣)

Tue, 20 Jul 2021 03:44:31 GMT

학습내용

오늘은 오른쪽 부분과 하단 작업을 했다.

#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;
    color: #ffffff;
    font-weight: 700;

}

크기를 만들어주기 위해 inline요소인 a태그를 block으로 변경해주었다. (모든 영역이 클릭이 가능해짐)

#main_right #account .account_sub {
    padding: 0 8px;

    ✔display: flex;
    justify-content: space-between;
    align-items: center;

}

아이디 비밀번호찾기 | 회원가입 부분을 flex로 정렬해줌 (default값은 없애도 됨)

#main_right #shop_wrap ✔.shop_title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 0;

}
#main_right #shop_wrap .shop_title ✔.right {
    display: flex;
    flex-wrap: wrap;
    ✔justify-content: flex-end;
    align-items: center;

}

.shop_title도 flex를 이용해 정렬해줌 .right은 _justify-content: flex-end;_로 정렬해준다.

#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-bottom: solid 1px #dae1e6;
}

list의 갯수가 안 맞으면 맞물려서 어색할 수가 있음 그럴 때는 _float:left;_를 이용해서 정렬해준다.

#main_footer .news_lists li {
    display: flex;
    flex-wrap: wrap;
    ✔justify-content: flex-start;
    align-items: center;
}

footer의 .news_lists li 안에서 flex정렬을 해준다.

#main_footer .corp_lists li {
    display: inline-block;
    vertical-align: middle;
}
#main_footer .corp_lists li:first-child:before {
    content: initial;

#main_footer .corp_lists li:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background-color: #e4e8eb;

    vertical-align: -1px;
}

.corp_lists li를 inline-block으로 변경 후 vertical-align:middle; 설정해줘서 중앙정렬 시킨다. li사이의 |를 넣기 위해 :before 가상선택자를 이용한다. content:"";는 빈 내용물을 설정해주고 inline-block으로 display설정 후 width, height값과 margin설정 후 vertical-align: -1px를 설정해준다.(vertical-align에는 middle, top등만 쓸 수 있는게 아니라 숫자도 입력이 가능하다. -값을 넣어주면 밑으로 내려간다) 회사소개 앞에는 |표시가 없기 때문에 가상선택자:가상선택자를 이용해 first-child:before 에는 content:initial;(처음 값으로) 설정해준다.

<완성된 네이버 메인 페이지>

네이버 메인 카피캣 코딩

어려웠던 점

오늘은 동영상 시간이 비교적 짧아서 그런지 어려운게 없었다. 어제 했던 내용과 비슷했기 때문에 수월했다. 굳이 꼽자면 아직 inline요소들을 block or inline-block요소로 변경하는게 조금 갸우뚱하다. 공간을 설정하기 위해서 변경해준다는 것을 뭔가 오늘에서야 알게 된 느낌이랄까

그리고 가상선택자에 가상선택자를 지정할 수 있다는 것도 알게 되어 낯설었다. flex에서 justify-content: space-between; 이 속성값만 쓰다가 justify-content: flex-end; 이 속성을 한번 사용했더니 띠용 이였다. 한번 더 flex속성에 대해 알아봐야겠다.

해결방법

flexbox help 도와줘!

학습소감

매 수업마다 다시 알게되거나 새롭게 알게되는게 많은 것 같다. 알고 있었던 내용들도 또 한번 상기시켜주고 잊혀질만할 때 배웠던 것들이 또 나오고 반복이 정말 중요한 것 같다.

7월 19일 (네이버 메인 카피캣)

Mon, 19 Jul 2021 06:47:34 GMT

학습내용

🔵웹 개발에 필요한 크롬 확장 프로그램 (카피캣 시 도움이 됨)

web developer chrome extension (https://wpastra.com/chrome-developer-extensions/)

Wappalyzer - 특정 웹사이트에 접속을 하고 그 웹사이트가 어떤 기술로 만들어졌는지 확인하고 싶을 때
CSS Viewer - 특정 웹사이트의 css요소를 검사할 때 일일이 검사를 안 하고도 알 수 있게 해주는 프로그램
WhatFont - 특정 웹사이트에서 사용된 폰트 확인
Lorem Ipsum Gentrator - 임의의 문장을 만들어줌, 커스텀도 가능
ColorZilla - 특정 웹사이트에서 어떤 컬러를 사용했는지 확인 가능

🔵네이버 메인 카피캣

시작 전 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;
 }

✔.container { css로 미리 만들어준 후 html에 적용
    width: 1130px;
    margin: 0 auto;
}

button { 버튼에는 태생적으로 border값이 있기에 없애줌
    border: none;
}

input, textarea { input,textarea에는 클릭 시 outline이 생기기에 없애줌
    outline: none;
}

#header header에 검색창과 메인 메뉴를 만들어주었다.

.search_area를 flexbox.help로 copy&paste를 해서 중앙으로 배치

#main_header .search_wrap {
    ✔display: flex;
    flex-wrap: wrap;
    justify-content: space-between; (.search_wrap안에는 input과 button을 space-between사용해서 배치해줌)
    align-items: center;

    position: relative;
    width: 582px;
    height: 52px;
    border: 2px solid #19ce60;

#main_header .search_wrap input {
    ✔width: calc(100% - 52px); 
    height: 100%;

    padding: 13px 15px;

    font-size: 22px;

    border: none;

calc - input의 100%에서 button의 width를 뺀 값, inline특성 상 미세한 공백이 있어서 동일선상에 없기 때문에 flexbox.help이용해 배치해줌

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

box-shadow : 어떠한 공간의 그림자 효과, 각 숫자는 그림자의 위치나 속성 등을 나타냄 (box shadow CSS generator 참고)

#main main에는 왼쪽, 오른쪽으로 나눈 후 왼쪽 먼저 작업을 하였다.

main #news_wrap .news_header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;


    padding: 22px 0 16px 0;
}

.news_header 안에 h2와 .news_btn_wrap을 flex로 배치해줌

main #news_wrap .news_lists .news_list {
    position: relative;

    float: left;

    width: 16.66%;
    height: 65px;

    background-color: #ffffff;

    border-bottom: solid 1px #e4e8eb;
    border-right: solid 1px #e4e8eb;

    text-align: center;
}

.news_list들은 float:left;를 해서 왼쪽부터 정렬되게 함, inline요소 이기 때문에 text-align적용 가능

팁 nth-child()적용할 때 (2n)이라고 하면 2의 배수는 다 해당이 된다.
```
main #news_wrap .news_lists .news_list img {
  position: relative;

  ✔top: 50%;
  ✔transform: translateY(-50%);
}
```
.news_list 에 img는 y축 중앙정렬 해준다.

#blog_wrap < strong>태그는 해당 부분 강조해주는 태그, 글자가 두꺼워짐

main #blog_wrap .blog_nav ul li {
    float: left;
    width: 12.5%;
    height: 49px;

    border-right: solid 1px #dae1e6;

}
main #blog_wrap .blog_nav ul li a {
    display: block;
    width: 100%;
    height: 100%;

    line-height: 49px;
    text-align: center;

}

공간의 높이값이 있는 경우 line-height와 동일한 값을 넣으면 y축 중앙정렬

main #blog_wrap .blog_nav ul li {
    float: left;
    width: 12.5%;
    height: 49px;

    border-right: solid 1px #dae1e6;

}

동일선상에 float:left로 배치해준 후 같은 비율로 width를 지정해준다.

#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;
}

위와 동일하게 .blog_media_wrap에는 동영상이 있는 부분인데 flex로 배치를 해준다 space-between

완성본

어려웠던 점

역시나 나는 설계도면 만드는 작업이 가장 헷갈린다. div를 어디서 어떻게 설정해야하는지도 너무 헷갈리고 div안에 어떤 태그를 넣어햐 하는지도 헷갈린다. 그리고 실습 화면과 내가 보는 오늘의 네이버 화면이 조금 달라서 그런지 헷갈렸다.

해결방법

이 때까지 해왔던 실습화면들의 html을 살펴본다. 설계도면 파악하는 연습을 더 해야한다.

학습소감

오늘은 flex를 많이 활용한 하루였다. 그래서 그런지 flex에 대해 더 많이 알게됐다. 확실히 이론을 했을 때와 실습을 했을 때와는 와닿는게 다르다. 물론 이론을 했기 때문에 이 정도이겠지만! 배치작업 대해 느끼는 두려움이 조금 없어진듯 하다. 여전히 설계도면 만드는 일은 어렵지만 😂 그리고 웹 개발에 필요한 확장 프로그램 너무나 🍯이다! 카피캣을 하고 싶어도 일일이 다 클릭해서 봐야하는 불편함이 커서 엄두도 못냈는데 저 프로그램들 덕분에 (아직 엄두는 안나지만) 한 발짝 더 가까워진 기분이다.

7월 16일 (helbak.com)

Fri, 16 Jul 2021 07:33:58 GMT

학습내용

오늘은 덴마크 쇼핑몰 helbak.com을 카피캣 연습을 하였다. 지금까지는 일부만 (header, footer 등) 실습해보았지만 오늘은 첫 페이지를 다 만드는 실습을 했다. 여느 때와 마찬가지로 초기작업을 해주었다.

철저히 주관적인 오늘의 keypoint 📌

css에 ```
{ margin: 0; padding: 0; box-sizing: border-box; } ``` 을 작성해주면 모든 html의 태그의 padding, margin값들을 초기화 시켜준다. (0으로) padding으로 인해 공간에 대한 크기가 달라지는 것을 방지하기 위해
box-sizing: border-box;*도 적용해준다.
font-weight 는 폰트의 굵기, 100~900까지 있다. (100단위)
a태그는 inline요소
a태그를 공간에 꽉 채우고 싶을 때는 display를 block으로 변경
img는 inline-block요소, text-align은 inline, inline-block에만 사용 가능
y축 중앙정렬 -top: 50%; , transform: translateY(-50%);
1em = 16px
article을 사용하려면 타이틀이 필요함, 여기에서는 제품명이 타이틀이 됨

초기 작업 중

img {
    vertical-align: middle;
}
span {
    display: block;
}

img는 태생적으로 하단에 공백이 있기 때문에 vertical-align: middle;을 적용시켜주고 span은 원래 inline요소 이지만 이 사이트에서는 block으로 활용하겠다고 지정을 해줬다.

이 사이트는 미디어쿼리 밖을 모바일 버전으로 만들고 미디어쿼리 안을 pc버전으로 만들었다.

🔵 header

#header .buttons ul {
    ✔overflow: hidden;
}
#header .buttons ul li {
    position: relative;

    ✔float: left;

    width: 33.3333%;
    ✔height: 65px;

}

--> 자식이 float를 사용해서 3차원의 성격을 가지고 있기 때문에 자식의 높이값이 부모에게 영향을 미치지 않지만, 부모에게 _overflow: hidden;_값을 주면 높이값을 받을 수 있다. h1에는 65px를 주었었고, ul이 li의 높이값을 받아서 65px가 되었기 때문에 header의 높이값은 130px이 된다.

#header .buttons li:nth-child(1) .menu_button {
    background-color: blue;
}

#header .buttons li:nth-child(2) .menu_button {
    background-color: pink;
}

#header .buttons li:nth-child(3) .menu_button {
    background-color: coral;
}

--> li의 1번째 항목에 있는 .menu_button / li의 2번째 항목에 있는 .menu_button / li의 3번째 항목에 있는 .menu_button

#header .buttons li .menu_button img {
    position: relative;
    height: 20px;

    ✔top: 50%;
    ✔transform: translateY(-50%);
    margin-top: -10px;

}

--> 실무 팁 : y축 중앙 정렬을 하기 위해서는 top: 50%; , transform: translateY(-50%); 값을 준다.

🔵 main

.main_content .product_group_link {
        position: relative;

        display: block;

        ✔width: 100%;
        ✔height: 56.25%;
        border: solid 10px red;

        overflow: hidden;
    }

--> 원래 이미지의 크기와 근사치로 설정해준다. (1000x563)

.main_content .product_group .link_text {
        ✔position: absolute;

        left: 25px;
        bottom: 25px;

        color: black;
        font-size: 25px;
    }

--> 앞에 있는 형제 (.link_text)가 3차원이기 때문에 뒤에 있는 형제 (img) 뒤쪽으로 레이어가 겹친다. img 안으로 .link_text를 넣고 위치를 지정해줌

🟡 미디어 쿼리

@media (min-width: 47em) {
    .main_content {
        padding-top: 80px;
    }
}

--> header는 3차원이기 때문에(fixed) header와 main_content가 겹친다. 겹쳐진 영역만큼 공백을 만들어준다.

@media (min-width: 60em) {
    .main_content {
        overflow: hidden;

    }
    .main_content .product_group_link {
        float: left;    

        width: 50%;
        height: 28.125%;
    }
}

--> 부모값에 hidden을 주면 자식의 높이값을 받을 수 있다.

🔵 footer

#footer .right_methods ✔.payment_icon.one✔ {
        background-color: black;
    }
#footer .right_methods .payment_icon.two {
        background-color: red;

--> class를 연달아 기입하면 (띄어쓰기 없이) 여러개의 .payment_icon중에서 .one을 가지고 있는 .payment_icon을 선택한다는 뜻

#footer {
        position: relative;
        background-color: yellowgreen;
        ✔padding-bottom: 66px;
    }
#footer .to_top_button {
        position: absolute;
        display: block;

        width: 66px;
        ✔height: 66px;
        background-color: yellow;

        bottom: 0;
        left: 50%;
        margin-left: -33px;

    }

-->footer에 padding-bottom: 66px;을 준 이유는 .to_top_button을 주기 위함이다 🟡 미디어쿼리

@media (min-width: 60em) {
    #footer ul, #footer li, #footer h3 {
        display: inline-block;
        vertical-align: middle;
    }

--> ul, li, h3를 inline-block로 변경 후 , vertical-align: middle; 적용

🔵 실무 팁

a태그의 href에

url주소
다른 html파일
👉🏻id 를 넣을 수 있다. class는 불가능하다. id값을 넣으면 해당 id가 있는 곳의 최상단으로 바로 이동한다. id은 한 파일 내에서 단 하나만 존재해야한다.

어떤 역할을 하는 class를 css에 만들어 놓고 그 class를 html 태그에 추가하는 방법으로 코드의 분량을 줄일 수 있다.
```
2️⃣html

1️⃣css
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```
white-space: nowrap; 👉🏻 텍스트가 텍스트를 감싸고 있는 영역보다 크다면 자동으로 줄바꿈이 되는데 그것을 해제시켜주는 속성, 가로 스크롤이 생길 수 있음 text-overflow: ellipsis; 👉 말 줄임표

2️⃣html

1️⃣css
.m-b-10 {
    margin-bottom: 10px;
}
.p-b-100 {
    padding-top: 100px;
}

.m-b-10 { margin-bottom: 10px; } .p-b-100 { padding-top: 100px; } 이런식으로 margin-bottom, padding-top등을 미리 지정해주고 html에 적용할 수도 있다.

helbak코딩

어려웠던 점

오늘은 초반부터 막혀서 시간이 엄청 오래 걸렸다.

이 부분의 list들의 공백이 있으면 안되는데 (img의 공백을 없애기 위해 vertical-align: middle;값을 주고, 모든 html태그의 margin, padding값을 0으로 초기설정해놨음) 자꾸 여백이 떴다.
#header .buttons li .menu_button img (메뉴버튼 안의 이미지)가 실습 화면에서는 중앙정렬이 잘 되어 있는데 내 화면에서는 삐뚤게 되어있어서 해결하는데 오래 걸렸다.
article의 h2가 화면에 나타나지 않음

해결방법

멘토님께 요청드렸더니 ul이나 li의 font-size를 0으로 해보라고 하셔서 했더니 다행히 첫번째는 해결이 됐다.

이것도 도움을 요청했지만 스스로 해결해보는게 좋을 것 같다고 하셔서 머리를 써봤더니

#header .buttons li .menu_button img {
 position: relative;
 height: 20px;

 top: 50%;
 transform: translateY(-50%);
 👉🏻margin-top: -10px;

}

img안에 margin-top값을 주었더니 중앙정렬이 됐다. 화면에서도 정상적으로 작동이 되어 해결했다.
3. 이것도 요청을 드렸더니 font-size를 아까 0으로 한 것 때문에 안 나타날 수도 있다고 하셔서 font-size를 제거했더니 나타났다. 그렇지만 첫번째 문제가 또 뒤틀려버렸고. 그 때 생각해낸게 바로 두번 째, 👉🏻margin-top: -10px; 이였다. 너무나 험난한 해결의 길이였다....
## 학습소감
초반부터 막혀버려서 그런지 오늘은 마무리하는데 오래걸렸다. 
그래도 혼자 막히는 부분을 해결한 점에서 매우 뿌듯하다. 그렇지만 변함없이 강의를 한번 더 들어야겠다. 오늘 계획은 어제 키즈가오를 혼자 header까지 해내고 이제 본문 할 차례였는데.. ㅎ그건 주말에 하고 오늘은 helbak 어려웠던 부분 한번씩 더 봐야겠다.

7월 15일 (키즈가오)

Thu, 15 Jul 2021 05:20:57 GMT

학습내용

night2, morning, kitchen, color1, color2, color3

_내가 생각하기에 중요한 부분_📌

레이아웃 배치를 어떻게 해야할지 감이 안 잡힐 때는 안전장치로 부모위치에 position: relative;를 적용해준다.
img태그를 사용하면 width를 조정하면 height는 자동으로 조정이 되기 때문에 따로 조정할 필요 없다.
initial - 초기상태, 미디어쿼리 밖에서 작성한 코드를 모바일에서는 적용을 안 시킬 때
margin-top : -320px 👉🏻 위로 320px 끌어올리겠다라는 뜻
배치 작업을 다 끝냈는데 위치를 변경하고 싶을 때는 top,right, bottom, left사용하면됨
button은 inline-block성질을 가지고 있으므로 x축 정렬이 됨
id와 class를 지정해줄 때는 일정한 규칙성을 가지게 해야한다.

🔵night2

#night2 .moon {
    animation: moveMoon linear 10s infinite;
}
@keyframes moveMoon {
    from{
        ✔margin-left: -135px;
    }
    to {
        ✔margin-left: 110%;
    }
}

--> dragonfly할 때는 position이 relative여서 left가능 했지만, moon은 position이 static이므로 margin으로 효과를 주었다.

moon의 원래 위치에서 -135px당겨서 시작하고 화면 밖으로 10% 더 나가서 종료, 다시 돌아오는 효과는 넣으면 안됨

🔵 morning

#morning .sun {
    animation: moveSun linear ✔10s ✔1500ms infinite;
}
@keyframes moveSun {
    from{
        margin-left: -131px;
    }
    to {
        margin-left: 110%;
    }
}

--> 달과 해가 동시에 애니메이션이 시작되면 안되기 때문에 해에는 delay효과를 추가해주었다. (animation에서는 첫번째 숫자는 duration, 두번째 숫자는 delay, 만약 숫자가 하나만 있다면 duration)

🔵 kitchen

--> 먼저 나오는 leftPan, rightPot (형제)가 float를 사용했기 때문에 3차원의 성질을 일부 가지고 있는데, 먼저 나온 형제가 3차원이기 때문에 뒤에 나오는 img태그가 같은 선상에 배치가 된다. 레이어가 겹친다는 뜻(z-index부분배웠을 때) --> float를 사용했기 때문에 레이어가 겹치게 되는데 이를 방지하기 위해서는 float를 사용한 마지막 코드와 다음 코드 사이에 _clear: both;_를 넣어준다.
-- >https://jeremyckahn.github.io/stylie/ 포물선을 그리는 애니메이션은 코딩하기 어려우므로 사이트를 참조한다. easeOutSine효과를 사용했음. export해서 copy & paste 🔵 color1 mobile

#color1 .color1Bubble {
    position: relative;
    float: initial;

    width: 166px;
    height: 56px;

    left: 50%;
    margin: 100px 0 0 -83px;
}

--> float를 모바일에서는 적용 안할 때 initial작성해준다. 🔵 color2

--> button의 type은 서버로 전송을 하기 위한 button이라면 submit으로 지정을 해주지만 여기서는 button으로 지정을 해주었다. 🔵 color3

#color3 .logo {
    position: absolute;

    left: 50%;
    margin-left: -378.5px;
}

--> logo이미지를 중앙으로 정렬 하고 싶을 때 , left:50%; 를 지정해준 후, logo이미지 width의 절반 값만큼 왼쪽으로 당겨준다.

kidsgao_coding

어려웠던 점

어제 역대급 분량을 해치우고 난 이후라 그런지 오늘은 어려웠던 내용이 별로 없었다. 그래도 살짝 position에 대한 부분이 헷갈리긴 했다.

해결방법

초반에 강사님이 레이아웃에 대해 감이 안잡힐 때는 일단 부모의 position을 relative로 주고 진행을 하라고 하셔서 그 이후로는 편안한 마음으로 받아들이게 되었다. 그렇게 생각을 하니 생각보다 잘 풀려서 나쁘지 않은 하루가 된듯하다.

학습소감

중간중간에 강사님이 복습시간을 가져주셔서 너무 좋았다. 마냥 수업만 하면 수업하랴 헷갈리는 부분 찾아보랴 코딩작성하랴 왔다갔다 하느라 정신이 산만해져서 오히려 머릿속에 입력되는 부분은 없을텐데 강사님이 position에 대해서, 레이어 겹침 현상에 대해서 등 헷갈릴만한 파트에서 복습을 해주셔서 그런지 수업이 빨리 진행이 됐다.

7월 14일(키즈가오)

Wed, 14 Jul 2021 07:15:47 GMT

학습내용

forest1, forest2, forest3, science, night1

forest 1

position : relative; - 자기 자신이 주체적으로 움직임, 3차원이기 때문에 레이어가 겹칠 수 있음

#forest1 .treeWrap .rightTree {
  position: absolute;

  width: 304px;
  height: 572px;
  background-image: url(../img/forest/forest1/righttree.png);

  z-index: 10;
}

토끼가 오른쪽 나무 뒤로 가야하기 때문에 오른쪽 나무에 z-index: 10;을 주었다.

forest 2

#forest2 .machineWrap2 .machineLeft {
  position: absolute;

  width: 123px;
  height: 228px;
  background-image: url(../img/forest/forest2/machineleft.png);

  margin-top: 30px;

  z-index: 200;

}

#forest2 .machineWrap2 .machineRight { position: absolute;

width: 123px;
height: 248px;
background-image: url(../img/forest/forest2/machineright.png);

margin: 10px 0 0 260px;

z-index: 200;

}

![](https://images.velog.io/images/rona-kim/post/e52eb523-54fe-4e9a-84fe-68acb9e5f015/7.14_2.gif)
* 같은 3차원이고 z-index값이 같다면 나중에 작성된 영역의 z축이 위로 배치가 됨
* html에 작성된 순서대로 배치작업을 하는게 수월하다.

@keyframes moveLeft { from{left: 30px;} to{left: 0;} }

from left 35 to _**left 0**_ (최초위치로 돌아가는효과)

### forest 3
* margin은 포지션의 영향을 받지 않는다.

mobile

#forest3 .forest3Wrap .smallBird, #forest3 .forest3Wrap .bigBird { display: none; }

모바일 화면에서는 움직이는 새들이 보이면 안되기 때문에 display: none; 처리를 해준다. 
(모바일에서는 나무이미지에 새가 그려져있음)
![](https://images.velog.io/images/rona-kim/post/6a0effa4-abb4-4fc5-be49-9640bab3babd/7.14_4.gif)![](https://images.velog.io/images/rona-kim/post/3c039e5d-23ad-466a-ab8a-5230ad22e03f/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-14%20153522.png)

### science

#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;

}

* 둘 다 3차원이지만 funnelFront가 나중에 작성됐기 때문에 더 앞에 배치가 된다. 

* float 사용 시에는 감싸고 있는 영역의 크기가 같거나 커야 레이어 틀어짐 현상이 없다. 

* 자식이 float를 사용하면 일부가 3차원이기 때문에 부모에게 높이값이 없어도 높이값을 줄 수 없음 _**but, overflow: hidden;을 사용하면 부모에게 높이값을 줄 수 있음.**_
(자식 중 가장 큰 값을 부모가 가져감, 여기에서는 scienceCenterWrap이 자식 중 가장 크기 때문에 scienceCenterWrap과 부모의 높이(scienceWrap)가 동일하다)

![](https://images.velog.io/images/rona-kim/post/909aaa3b-d99f-4dcd-bed4-34a68ac0c8e9/7.14_3.gif)

### night 1
* 앞에 나오는 형제가 3차원이면 뒤에 나오는 형제가 2차원이든 3차원이든 레이어가 겹치게 되어있다. 앞이 absolute이고 뒤가 relative이면 뒤는 앞의 형제가 좌표기준점이 된다.

#night1 .starWrap .star1, #night1 .starWrap .star2, #night1 .starWrap .star3 { animation: pulseStar 1s linear infinite alternate ; }

@keyframes pulseStar { from { transform: scale(1); } to { transform: scale(0.8); } }

``` 지금까지는 계속 transform : rotate(deg)로 애니메이션 효과를 주었지만 night1에서는 scale이란 효과를 주었다. transform: scale(1) -> transform: scale(0.8) 원래크기 (1)에서 원래크기의 (0.8)로 변화

부모가 3차원이면 자식이 absolute일 때 부모가 좌표기준점이된다.

kidsgao.html animation.css kidsgao.css mobile.css

어려웠던 점

어제는 이해됐던게 오늘은 또 헷갈리고 총체적난국이다. 역시나 position이 문제다. absolute와 relative가 또 너무 헷갈린다.

해결방법

레이아웃 관련 강의를 다시 한번 들어야겠다.

학습소감

어제와 별반 다를게 없지만 2시간이 넘는 분량이다 보니 집중력도 떨어지고 복습하려고 하니 막막하다.

7월 13일 (키즈가오)

Tue, 13 Jul 2021 07:00:32 GMT

학습내용

강사님이 첫 외주를 받은 키즈가오 웹사이트를 만드는 실습을 했다. 오늘 실습 코딩은 너무 길어서 github에 올리도록 하겠다.

가장 먼저 했던 작업은

html에 css파일을 연동시켜주고 css파일에

html, body {
    margin: 0;
    padding: 0;
}
/*현재 브라우저의 x축을 벗어나는 영역의 오브젝트는 전부 hidden, 하지 않으면 가로스크롤이 생김 , dragonfly 애니메이션 적용 시 */
body {
    overflow-x: hidden ;
}

h1,h2,h3,h4,h5,h6,p {
    margin: ;
    padding: 0;
}
/*태생적으로 버튼태그에는 테두리와 배경색(회색)이 있으므로 투명으로 변경해줌*/
button {
    border: none;
    background-color: transparent;
}

.clearfix {
    clear: both;
}

default값으로 지정을 해주었다. 그 다음으로는 header(logo), farm1, farm2, farm3 순으로 작업을 했다.

header작업을 다 끝냈는데 logo를 100px 내리고 싶을 때 3가지 방법이 있는데

.introWrap > margin-top >부모까지 딸려내려가서 안됨(마진병합)
#intro > padding-top > 모든 컨텐츠들이 틀어짐
.introWrap > *top *> 자기 자신이 주체가 되어 움직이고 아래에 어떤 요소가 배치되어 있더라도 그 요소의 최초 위치는 변함이 없음. 겹치게 되고 틀어짐현상 없음. 둘 다 3차원인 경우 나중에 작성된 요소의 z-index가 더 높다 (position이 relative로 되어있음)

position : relative; -> top, right, bottom, left 사용 가능, 부모가 3차원(relative)이면 자식이 absolute일 때 부모가 좌표기준점

position이 3차원이여야 z-index 사용 가능, 레이어가 있다

background-image의 크기를 공간에 딱 맞춰서 배치 (repeat를 하려는 속성이 있어서 no-repeat를 해주어야하는데 그런 번거로움 덜기 위해) _ float를 적용할 때 부모보다 자식값이 더 크면 레이어가 틀어짐, 그럴 때는 position을 3차원으로 주고 top, right, bottom, left값을 주면됨_

position을 3차원으로 했으면 애니메이션 적용 시 @keyframes에서 top, right, bottom, left값 적용 가능

@keyframes flyDraronfly {
    from {left: -366px;}
    to {left:100%;} (화면밖으로 사라지는 효과 주기 위해) 
}

❗실무팁❗ 이미미 작업할 때 이미지의 크기는 5로 끝나거나 짝수로 떨어지는 크기로 제작을 해야 사이트 제작 시 레이아웃 배치에 수월하다.

부모가 3차원이면 레이어가 겹치지만 relative를 줬지만 나중에 작성된 3차원이라 가장 위에 배치가 됨

@keyframes rotateLeftSaw {
    from {transform: rotate(0deg);    }
    to { transform: rotate(360deg); }
} -> 시계 방향
@keyframes rotateRightSaw {
    from {transform: rotate(360deg);    }
    to { transform: rotate(0deg); }
} -> 시계 반대방향

mobile버전으로도 만들었다. @media (max-width: 767px) -> 766이하 사이즈에서는 밑의 코드로 실행시켜라 라는 뜻

코딩 html animation.css css mobile

어려웠던 점

내용이 많아서 그렇지 어려웠던 점은 없었다. 평소에는 개발일지에 코드까지 다 기록해놓지만 오늘은 양이 너무 방대해서 어떻게 해야할지 모르겠다. 복습하는데도 상당한 시간이 걸릴듯.. 나는 오히려 설계도면을 그리는게 가장 어려운듯하다. 생각해보면 엄청 단순한것 같은데 또 어떻게 보면 헷갈린다.

해결방법

복습밖에 없지 뭐.. 설계도면 연습을 더 해야겠다. 설계도면이 제대로 되야 css를 적용을 하고 레이아웃을 적용을 하지ㅠㅠ

학습소감

position을 많이 사용했지만 내가 알고있는 선에서 진행이 되었기에 무리없이 실습을 마쳤다. 약간 뿌듯해서 신나게 수업 들었는데 너무 길어서 또 늘어져버렸다. 복습하려면 하루를 통째로 날려야할듯하다.

7월 12일 (미디어쿼리실습)

Mon, 12 Jul 2021 04:11:45 GMT

학습내용

.media-menu {
    list-style: none;
    margin: 0;
    padding: 0; (초기 설정)

    /*x축으로 정렬하기 위해 flexbox help참조, 동일한 간격space between,y축 center */
    display: flex ;
    justify-content: space-between;
    align-items: center;

    width: 700px;
    background-color: black;
}

@media (min-width: 320px) and (max-width: 767px) {
    .media-menu {
        flex-direction: column; (y축 정렬로 하겠다)
        align-items: flex-start;
        width: 190px;
    }

    .media-menu li {
        margin-bottom: 10px;
    }

    .media-menu li:last-child {
        margin-bottom: 0; (마지막 li에는 여백 0으로)
    }

}

.media-menu a {
    color: black;
    text-decoration: none; (초기설정)
}

.media-menu li {
    width: 150px;
    background-color: yellow;
    border: solid 5px red;
    padding: 5px 15px;
}

320px~766px에서는 미디어쿼리에서 지정한 값으로 설정됨

2. helbak.com

 
        
        
            
                
                
                
            
        
    

        Hello World Hello World Hello World Hello World Hello World
         Hello World Hello World Hello World Hello World Hello World
         Hello World Hello World Hello World Hello World Hello World
         Hello World Hello World Hello World Hello World Hello World

main은 익스플로러에서 지원하지 않는 태그이기 때문에 role지정해줘야함
```
pc* .intro { display: flex; (x축 정렬) position: fixed;(pc에서 header는 고정되어있음)

width: 100%; height: 80px; background-color: #ffffff;

}

.intro h1 { width: 50%; height: 80px; background-color: black; (로고와 nav가 50%씩)

}

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

}

.intro nav ul { list-style: none; padding: 0; margin: 0;

display: flex;

}

.intro nav ul li { width: 33.3333%; (최대한 오차를 줄이기 위해) height: 80px;

}

.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; } main { width: 100%; height: 2000px; background-color: gold;

padding-top: 80px; (겹침 현상 때문)

}

* header값에 fixed (3차원) 을 주었기 때문에 밑의 형제 코드는 레이어 겹침현상이 생기기 때문에 paddin-top을 주어서 눈에 보이게 함

모바일 @media (min-width: 320px) and (max-width: 767px) { .intro { position: static; (모바일에서는 header가 fixed가 아니므로 기본값인 static) flex-direction: column; height: 160px; } .intro h1 { width: 100%; } .intro nav { width: 100%; } main { padding-top: 0; (사이즈가 줄어들면 padding-top을 줬던 값 때문에 여백이 생기는데 다시 없애줌) } }

![](https://images.velog.io/images/rona-kim/post/0cc92451-d7af-4dbe-8677-dca4973cba60/7.12_2.gif)

#### 3. bootstrap


        
            
            
                Title    
            
        
        
            
            
                Title    
            
        
        
            
            
                Title    
            
        
        
            
            
                Title    
            
        
        
            
            
                Title    
            
        
        
            
            
                Title

.container { display: flex; (x축 정렬) flex-wrap: wrap; (안에 있는 박스가 박스를 감싸고 있는 영역보다 큰 경우 자동으로 줄바꿈현상이 일어나게하는 속성) justify-content: space-between; (일정한 여백)

width: 1140px;
margin: 0 auto;
background-color: pink;

} .column { width: 355px; (355px가 4개가 되면 1140이 넘기 때문에 3개일 때 줄바꿈현상) background-color: #ffffff; border: solid 2px red; margin-bottom: 10px; } .column:nth-child(4), .column:nth-child(5), .column:nth-child(6) { margin-bottom: 0; } .column img { width: 100%; vertical-align: middle; (img는 태생적으로 여백을 가지고 있는데 여백을 없애기 위함) } .image-info { padding: 20px 0; (상하 20px, 좌우 0) text-align: center; }

.image-info h2 { margin: 0; }

모바일 2*3 @media (min-width: 540px) and (max-width: 720px) { .container { width: 720px; } .column:nth-child(4){ margin-bottom: 10px; (앞에서 magin-bottom값을 0을 주어서 똑같이 하기 위해 4에만 margin-bottom값을 준다) }

} 1*6 @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;
}

}


![](https://images.velog.io/images/rona-kim/post/08d61a4a-1849-4d17-868e-e07b410ae572/7.12_3.gif)


> #### 4. 미디어 쿼리를 적용하는 3가지 방법
* @media (min-width: 320px) and (max-width: 539px) 
* mobile전용 파일을 하나 더 만든다. 안에 미디어쿼리 코드를 적용 시키고 html파일에 link로 연결을 해줌
* ```

--> 첫번째, 두번째만 기억해도 됨

어려웠던 내용

어려운 내용은 딱히 없었으나 미디어쿼리를 적용할 때 어디를 어떻게 변경을 해야하는지 조금 헷갈렸다. box-sizing: border-box;에 대한 내용이 순간 기억이 안났다. flex에 대해서 주말에 공부했었는데 또 기억이 안났다.

해결방법

혼자서 복습해보기 (helbak.com , bootstrap) box-sizing: border-box; 한번 더 검색해보기 (https://velog.io/@rona-kim/7%EC%9B%94-2%EC%9D%BC) flex에 대해 검색해보기 (https://velog.io/@rona-kim/7%EC%9B%94-5%EC%9D%BC)

학습소감

주말에 w3school에서 많이 복습을 한게 도움이 되었는지 저번 시간에 했던 내용들을 한번씩 응용을 할 때 딱 떠올랐다. 다는 아니지만 저번 주보다는 나아졌다. 조금씩 조금씩 나아져가는 듯.
헷갈렸던 것들은 여전히 헷갈린다. 미디어쿼리 말만 들었을 때는 엄청 어려울 거라고 생각했는데 (여전히 어렵지만) pc와 모바일이라고 생각하니 쉽게 와닿았다.

7월 9일(미디어 쿼리)

Fri, 09 Jul 2021 02:56:37 GMT

학습내용

미디어쿼리 : 반응형,적응형 웹사이트를 만들 때 사용되는 css 코드

적응형 웹사이트(adaptive layout) : 뚝뚝 끊기며 공간에 대한 크기가 바뀜

반응형 웹사이트(respoinsive layout) : 끊김 없이 자연스럽게 리사이징이 됨
적응형, 반응형 웹사이트는 하나의 html파일에서 css로 pc버전과 모바일 버전을 나누어서 제작
m.naver.com같은 m이 붙은 웹사이트는 모바일용으로 html파일이 별도로 있는 것, pc버전과 모바일버전이 완전히 다른 경우

<미디어쿼리 적용할 때 항상 넣어줘야 하는 태그>

--> viewport : 웹사이트 접속할 때 사용되는 기기의 화면 --> width=device-width : 웹사이트의 width값은 기기의 width값으로 적용 시키겠다. --> inital-scale=1.0 : 비율은 항상 1.0을 유지하겠다. ✔ 항상 기본값으로 작성해준다. ✔ 미디어 쿼리 밖의 css는 미디어 쿼리 안의 css로 상속이 된다. 그러므로 미디어 쿼리를 적용시킬 때는 확인을 확실하게 해주어야 한다.

width값을 기준

320px ~ 768px 미만 : 스마트폰 768px ~ 1024px 미만 : 태블릿 1024px 이상 : PC

PC Hello World

Mobile Hello World

.pc {


    color: red;
    font-size: 50px;
    background-color: lightpink;
}

.mobile {
    display: none;  ✔ PC사용자에게 모바일버전을 안 보이고 싶을 때 

}

@media (min-width: 320px) and (max-width:  767px) {
    .pc {
        display: none; 
    }

    .mobile {
        display: block; ✔ 미디어쿼리를 이용하여 width값이 320~766일 때 (모바일) 
        display:block (inline도 가능, none만 아니면 됨)을 이용하여 보여지게 할 수 있다. 
    }
}

미디어쿼리 css 코드 : @media (min-width:) and (max-width:) {}

(min-width: 320px) (max-width: 767px) --> 320px이상~767px미만부터는 아래쪽 코드로 적용 시켜라는 뜻

사용자에게 내가 원하는 정보를 원하는 기기에 맞춰 보여주고 싶을 때는 display 를 활용한다.

미디어쿼리 응용

미디어쿼리 응용

h1 {
    font-size: 20px;
    background: yellow;
}     
@media (min-width: 768px) {
    h1 {
        font-size: 40px;
        background-color: pink;
    }
}


@media (min-width: 1024px) {
    h1 {
        font-size: 80px;
        background-color: gray;
    }
}

미디어쿼리를 더 만들어서 응용할 수도 있다.

768px부터는 사이즈 40, 배경 핑크 -> max-width: 1024px미만이 된다. 1024px부터는 사이즈 80, 배경 그레이

이렇게 지정할 수도 있다. 이렇게 되면 width값을 늘렸다 줄였다 할 때면 지정한 미디어쿼리에 따라 적용된다.

어려웠던 부분

정말 기본적인 문제인데 min, max가 헷갈린다. 이상, 미만의 뜻을 모르는 것도 아닌데 🤦🏻‍♀️

해결방법

예를 들어, min-width: 320px max-width: 767px 이라면 320px~766px는 미디어쿼리로 적용한 코드로 실행시켜라 라는 뜻으로 이해를 하기로 했다.

학습소감

오늘은 비교적 덜 복잡한 css코드였다. 어제부터 신기한 코드를 배워서 그런지 시간도 잘 가고 (?) 왜인지 모를 여유가 생긴다. 근본없는 여유 🤦🏻‍♀️ 이번 주말엔 w3school에서 css 공부를 하기로 마음 먹었다. 꼭 해라 너!!

7월 8일 (애니메이션)

Thu, 08 Jul 2021 02:03:11 GMT

학습내용

오늘은 애니메이션 패키지 파일에 대해 학습했다.

https://animate.style

이 사이트에서 css애니메이션 라이브러리를 둘러보았다. 활용하기 위해서는 head태그 안에 link태그를 복사 붙여넣기 해서 연동을 시켜줘야한다. 그런 다음 하고자 하는 애니메이션 코드를 복사 붙여넣기 하여 실행시켜주면 된다.

혹은 지금까지 해왔던 방식과는 반대로 css에 먼저 클래스를 만들어 놓고 html에 만들어 놓은 css를 삽입하는 방식으로 애니메이션 css를 사용할 수 있다. (라이브러리에서 복사 붙여넣기)

Example

animate____animated : class animate __ bounce, animate __ faedIn : 애니메이션 라이브러리

https://codepen.io/

이 사이트에서도 animation을 검색하여 복사 붙여넣기를 할 수 있다.

어려웠던 부분

오늘은 수업이 20분짜리라 딱히 어려웠던 부분이 없었다. 굳이 말하자면 어제 코드들을 깃허브에 올리면서 파일명을 다 바꿔서 올렸는데 오늘 다시 그 파일을 실행을 하니 아무리 해도 css 적용이 안되어서 10분넘게 해결하다가 파일명이 바뀌어서 html과 css 연동도 깨져있단 사실을 알게되어서 수정해주었더니 해결됐다 ㅎ참나.. 그런것도 모르고 질문 남겼으면 얼마나 똥멍충이같았을까 ^^

해결방법

html과 css 파일은 이름이 바뀌어도 꼭!!!! 연동시키는 걸로 해결봤다

학습소감

어제 2시간 반정도 분량의 수업이여서 그런지 멘탈이 탈탈 털렸는데 오늘은 20분밖에 안되어서 좋으면서도 하..복습할게 산더미구나 싶어서 또 동공에 힘이 풀린다. 항상 걱정을 앞서가서 하는 스타일인데 이제 좀 안그래야겠다. 열심히 하다보면 언젠가 길이 보이겠지..!

7월 7일 (애니메이션)

Wed, 07 Jul 2021 07:42:13 GMT

학습내용

애니메이션 : 웹사이트에서 인터랙션한 효과를 구현하고자 할 때 사용되는 css

transform : 오브젝트의 크기를 확대, 축소, 회전, 위치 변경 할 때 사용
transition : 오브젝트의 움직임이 변화하는 과정을 보여줄 때
animation : 자동으로 움직이는 효과

코드

https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/ex_6.html https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/ex_6_style.css https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/project_animation.html https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/project_animateion_style.css

file : ex_6, project_animation

1. ex_6

transform
rotate(0deg)	scale(x,y)	skew(x,y)	translate(px,px)
2차원적인 회전, 양수 or -음수	비율로 키울 때, x y축	3차원적인 회전, x y축	선택한 오브젝트 위치 변경할 때

transition
property	duration	timing-function	delay
transition값을 줄 항목	지속시간	일정한 속도로 진행	시작 전 지연시간

animation
name	property	duration	timing-function	delay	iteration-count	direction
지정한 이름	animation값을 줄 항목	지속시간	일정한 속도로 진행	시작 전 지연시간	몇 번 반복	반복방향
		s	linear	s	infinite	normal, alternate(정방향에서 역방향 반복)

프리픽스 : 하위 브라우저까지 사용할 수 있게 하고싶을 때 -webkit-transform: rotate(10deg); transform: rotate(10deg); --> 프리픽스 입력 후 기본 값은 디폴트로 입력해야함. -webkit- : 크롬, 사파리 -moz- : 파이어폭스 -ms- : 익스플로어 -o- : 오페라

transition, animation : 한 줄에 효과를 다 넣을 수 있다. 앞에 나오는 초(s)는 duration, 다음 s는 delay, 하나만 있을 경우 duration ex ) transition : width 2s linear, height 2s linear;

animation-direction : normal; 이 기본값이다. alternate은 정방향에서 역방향으로 반복, from-to (1번) to-from (1번)

animation을 사용했을 때는 @keyframes 와 무조건 함께 해야한다. 지정한 animation-name과 연동시켜 준 후 0%-100% 입력해준다.

참고사이트 https://www.w3schools.com/ https://jeremyckahn.github.io/stylie/

2. project_animation

y축으로 정렬한 메뉴 4개를 만든 후 애니메이션을 주었다. 초기값으로 html,body 의 margin, padding 0으로 변경 ul 라인 없애기, a 의 글자효과 없애고 색상 변경

.mouse-animation li { width: 250px; background-color: rgba(0, 0, 0, 1); padding: 20px; border-top: solid 5px #dfdfdf; transition: opacity 0.5s, margin-left 0.5s; }

.mouse-animation li:hover{ background-color: rgba(0, 0, 0, 0.5); margin-left: 10px;

.mouse-animation li a { color: blueviolet; font-size: 20px; }

--> opacity를 적용하면 글자를 포함해 모든 영역에서 투명도 조절이 된다. 글자까지 적용되는게 싫으면 background-color : rgba(색상)으로 변경한다. rgba(0,0,0,1) 0,0,0 부분은 색상, 1 부분은 투명도 (0~1)

참고사이트 http://hex2rgba.devoth.com/

< div class="move-box">< /div>

move-box {
 position: relative;
 width: 200px;
 height: 200px;
 background-color: red;

 animation-name: movebox;
 animation-duration: 4s;
 animation-timing-function: linear;
 animation-delay: 1s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running; (running : 브라우저 접속할 때 동작 시키겠다, paused 동작 없음)
 animation-fill-mode: backwards; (0%에 입력된 값으로 사용자에게 최초로 보여주겠다.red로 설정했지만 0%에는 green으로 해놓아서 최초로 green으로 보여짐 )
}

@keyframes movebox { 0%{
background-color: green; (자연스러움을 위해 0%지점을 박스 만들었을 때 색상을 동일하게 함 ) left: 0; top: 0; } 25%{ background-color: yellow; left: 500px; top: 0; } 50%{ background-color: gray; left: 500px; top: 500px; border-radius: 50%; } 75%{ background-color: blue; left: 0; top: 500px; } 100%{ background-color: red; left: 0; top: 0; }

}


* animation-fill-mode: backwards; (0%에 입력된 값으로 사용자에게 최초로 보여주겠다.red로 설정했지만 0%에는 green으로 해놓아서 최초로 green으로 출력됨)


3. < div class="outer-border">
        < div class="inner-border">< /div>
    < /div>

.outer-border { display: flex; justify-content: center; align-items: center;

width: 200px;
height: 200px;
border: solid 15px red;
border-radius: 50%;

margin: 0 auto;
margin-top: 200px;

animation: outerborder 2s infinite;

}

@keyframes outerborder { 0% {border-color: red; transform: scale(1);} 25% {border-color: yellow; transform: scale(1.2);} 50% {border-color: blue; transform: scale(1.3);} 75% {border-color: green; transform: scale(1.2);} 100% {border-color: pink; transform: scale(1);}

}

(scale은 자식에게 영향을 준다. outer에 적용한 scale값이 inner에도 적용) .inner-border { box-sizing: border-box; (박스 안쪽으로 보더가 형성, 튀어나가는거 싫어!) width: 75px; height: 75px; border: 5px solid purple;

animation: innerborder 2s infinite alternate;

}

@keyframes innerborder { 0% {transform: rotate(0deg);} 25%{ border-color: blue; border-width: 10px; } 50%{ border-color: yellow; border-width: 20px;} 75%{ border-color: green; border-width: 40px;} 100%{ border-color: gray; border-width: 5px; transform: rotate(360deg);} }

* border-width : border 굵기

> 참고사이트 (justify-content: center;
    align-items: center;)
flexbox.help

4. 슈퍼마리오 동전
< div class="mario-container">
        < div class="mario-coin">< /div>
        < div class="mario-box">< /div>
    < /div>

.mario-container { position: relative; width: 500px; height: 500px; border: solid 10px black;

margin: 0 auto;
margin-top: 200px;

}

.mario-container .mario-coin { position: relative; width: 70px; height: 70px; background-color: gold; border-radius: 50%;

margin: 0 auto;
margin-top: 100px;

animation: jumpcoin 0.8s linear infinite ;

}

@keyframes jumpcoin { 0%{ transform: translateY(0px) ; opacity: 1; } 50%{ transform: translateY(-100px) rotateY(180deg); opacity: 0; } 100%{ transform: translateY(-100px) rotateY(360deg); opacity: 0; } }

.mario-container .mario-box { width: 100px; height: 100px; background-color: saddlebrown;

margin: 0 auto;

animation: jumpbox 0.5s linear infinite alternate;

}

@keyframes jumpbox { 0%{transform: translateY(0px);} 50%{transform: translateY(-10px);} 100%{transform: translateY(0px);} }

![](https://images.velog.io/images/rona-kim/post/713e59c9-3cba-438d-92f0-b70a59e8a1fe/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-07%20155714.png)

* trnaslateY : Y축만 위치 변경할 수 있음, 위로 올라가는 효과라 -로 입력

5. 이미지 
![](https://images.velog.io/images/rona-kim/post/a10a6772-b2d6-42de-a393-2847ed5d375a/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-07%20160957.png)

.hover-image { cursor: pointer;

overflow: hidden; (image를 벗어나는 것들은 감추겠다)

position: relative;
width: 400px;
border: solid 10px #000000;

} (width 100% 값을 주면 부모 사이즈에 맞게 됨, img는 태생적으로 하단에 공백이 있는데 없애주려면 vertical-align: middle; ) .hover-image img {

width: 100%;
vertical-align: middle;

}

.hover-image:hover img { transform: scale(1.3); transition: transform 0.3s linear; }

.hover-image .image-info{ box-sizing: border-box; position: absolute; (부모가 3차원적이면 자식을 3차원으로 적용했을 때 width값을 부모 기준으로 설정 가능 left,bottom 사용하게되면 부모를 기준으로 형성!!!.hover-image를 기준으로 형성 width: 100%;

background-color: rgba(0,0,0,0.5);
padding: 20px;

left: 0; (부모 기준으로 )
bottom: -85px; (최초 위치를 -85x로 안보이게 한 후 hover, 0을 주면 다시 나타난다)

transition: bottom 0.3s linear ; (자연스러운 효과를 위해)

}

.hover-image:hover .image-info { bottom: 0; }

.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; }

```

box-sizing: border-box -> 컨텐츠 크기가 border값까지 포함된 값
부모가 3차원적이면 자식을 3차원으로 적용했을 때 width값을 부모 기준으로 설정 가능 left,bottom 사용하게되면 부모를 기준으로 형성
cursor: pointer; -> 커서를 올렸을 때 손가락 모양으로 변경

어려웠던 내용

transform은 이해를 했지만 transition부터 속성값들이 조금 헷갈렸다. 중간중간 position에 대한 복습도 해주셨는데 호다닥 찾아보느라 오늘은 좀 오래걸렸다.

해결방법

table을 활용해 표를 만들어서 알아보기 쉽게 만들었다. position부분도 다시 복습해야겠다.

학습소감

같은 css이긴 하지만 움직이는 애니메이션을 실습을 하니 재미있었다. 시각적으로 즐거웠다. 그치만 머릿속에 넣어야할게 또 늘어났다고 생각하니 흐린 눈을 하게 된다. 내 흔들리는 동공..언제쯤이면 또렷해질까

7월 6일(레이아웃)

Tue, 06 Jul 2021 05:00:54 GMT

학습내용

웹사이트 레이아웃 작업에 영향을 미치는 다양한 css

메뉴

html

css

html, body {
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    color: #000000;
    text-decoration: none;
}

--> 초기작업

.menu ul {
    overflow: hidden; (li가 3차원이기 때문에 ul에 높이 영향을 주지 않으므로 overflow사용)
    background: gray;
}

.menu li{
    (display: inline-block;  x축 정렬하면서 크기 유지, but 공백이 생겨서 안됨)
    float: left;

    width: 100px;
    height: 50px;
    background: yellowgreen;
    border-top: solid 1px red ;
    border-bottom: solid 1px red;
    border-left: solid 1px red;
                -->border 전체적으로 주면 겹치는 border가 있기 때문, 오른쪽은 별도로 값을 준다

    /*border: solid 1px red;*/

    /*text-align: center;*/
    /*line-height: 50px; (height값이 있으면 line-height와 동일한 값을 준다,y축 중앙정렬)*/

    /*padding-top: 15px;*/
    /*padding-bottom: 15px; (height값이 없을 때 padding top, bottom 속성값을 주어서 y축 중앙정렬)*/
}

.menu li:last-child {
    border-right: solid 1px red;
}
            -->border의 오른쪽값, 가상선택자 이용
.menu li a {
    display: block;
    text-align: center;

    padding-top: 15px;
    padding-bottom: 15px;
}
        --> a태그 안에서 중앙 정렬하는 방법
.menu li a:hover {
    color: blue;
}

오늘 알게된 새로운 정보 : a태그 안에 링크를 문서로 걸어도 됨 : 여백을 눌러도 클릭할 수 있는 커서로 변경할 수 있게 하는 block으로 변경 후 , 이 태그 안에 padding, align 속성을 a태그 안에 작성 후 정렬 ( a태그의 영역을 넓혀준다) : height값이 있을 때 > line-height - y축 중앙정렬 : height값이 없을 때 > padding top, bottom 속성값을 주어서 y축 중앙정렬

카카오톡 친구 리스트

html


        
            
                

                
                    김민호
                    Minho Kim
                
            
        
        
            
                

                
                    박지연
                    다정한 사람
                
            
        
        
            
                

                
                    한성은
                    헤헷
                
            
        
        
            
                

                
                    소연이
                    24/7
                
            
        
        
            
                

                
                    지혜
                    Do the Next things

css

.kakao-lists li {
    margin-bottom: 20px;
}


.kakao-lists li a {
    display: block;
    padding-left: 25px;
}

.kakao-lists li img,
.kakao-lists li .kakao-info {
    vertical-align: middle;
}
            --> img는 inline-block성질

.kakao-lists li img {
    border-radius: 20px;
    margin-right: 10px;
}

.kakao-lists li .kakao-info {
    display: inline-block;
}
            -->  kakao-info는 inline-block으로 변경

.kakao-lists li .kakao-info h3 {
    font-size: 18px;
    margin: 0;

}
            --> 이름 부분과 인삿말 공백을 줄이기 위해

.kakao-lists li .kakao-info h3 span {
    font-size: 14px;
    color: #c8c8c8;
}

inline-block 일 때만 vertical-align 사용 가능

네이버

html


        
            
                
            
            
                
                    리빙
                    아이와 사는 집, 현무암 돌담을 두른 제주 전원주택
                    nice to meet you nice to meet you nice to meet you nice to meet you nice to meet you nice to meet you nice to meet you nice to meet you nice to meet you 
                    
                        나무신문
                        어제

css

.living-lists {
    width: 750px;
    background: orange;
}
        --> 구역을 정하기 위해 width값을 지정

.living-lists .image-link,
.living-lists .info-link {
    display: inline-block;
    vertical-align: middle;
}

.living-lists .image-link {
    margin-right: 21px;
}

.living-lists .info-link {
    width: 512px;
}

        --> a의 구역을 512px로 지정해줌

네이버 뉴스

html


        임대차법 9개월, 서울 전세 줄고 월세 늘었다

css

.title-wrap {
    border-top: solid 2px #000000;
    border-bottom: solid 1px #000000;

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 20px;
}

.title-wrap h3 {
    margin-bottom: 20px;
}

.title-wrap .btn-wrap {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}


            --> https://flexbox.help/ 참고해서 css copy & paste

참고 하면 좋은 사이트 https://ko.learnlayout.com/ (css 레이아웃)

어려운 부분

실습을 하니 정말 내가 공부를 한게 맞는가 싶었다.

display: inline-block; vertical-align: middle; 이 부분이 특히나 이해가 안갔다. 그냥 무작정 외우기만 하면 되는걸까 그래도 저 속성을 수업에서 2번 정도 반복을 했는데 의구심 없이 그냥 받아들이게 됐다. 아직까지 block, inline-block이 헷갈린다. 오늘 그 부분말고는 다 끄덕이며 수업에 임했다.

해결방법

선생님이 추천해주신 css 레이아웃 사이트를 참고해서 연습해봐야겠다. block, inline-block 부분 개발일지를 다시 봐야겠다.

학습소감

레이아웃 공부 정말 쉽지가 않다. 설계도면 만드는 것도 쉽지가 않은데 css까지 적용하려고 하니 골치아프다. 비대면이라 언제든 반복해서 동영상을 볼 수 있다는 장점은 있지만 궁금한 내용들을 물어볼 때 글과 사진만으로 물어볼 수 밖에 없어서 이걸 어떻게 질문을 해야하나 싶은 것들도 있다. 그러다 결국엔 까먹어 버리고 ㅠㅠ

7월 5일(z-index, float, flex)

Mon, 05 Jul 2021 05:23:27 GMT

학습내용

z-index

.z-one {
  position: absolute;
  width: 200px;
  height: 400px;
  background-color: yellow;
  /*z-index: 10;*/
}

.z-two { position: absolute; width: 200px; height: 300px; background-color: blue; /z-index: 20;/ }

![](https://images.velog.io/images/rona-kim/post/66b5d6a6-0e6b-404b-84f5-bdcb7324ae26/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20100804.png)
z-one, z-two div를 만들고 width, height값을 주면 위와 같이 출력이 된다.

![](https://images.velog.io/images/rona-kim/post/f46a6dbc-6da4-4170-a97e-153cb37b5738/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20100825.png)
z-index 속성을 주면 위와 같이 파란색(z-two)가 없어진 것 처럼 보이지만 실제로는 노란색(z-one)뒤에 배치가 되어 있다. 크기가 같기 때문에 레이어가 겹쳐지면서 안보이게 된다. 
_**z-index : z축에 영향을 미치는 속성**_
z축을 자유롭게 위치를 조정할 수 있다.
z-index가 적용되지 않은 영역은 값이 0인 상태이다. 
속성값으로는 숫자만 작성하고 단위는 생략한다. 
10과 20을 비교하면 20이 더 크기 때문에 blue가 위로 올라온다.
그렇기 때문에 3차원적 특징을 가진 position에서만 사용이 가능하다(fixed, absolute, relative).

**첫번째 형제에게 순수 3차원 position (fixed, absoulte)를 사용하게 되면 
레이어가 겹치고 (2차원이면 안 겹침)
두번째 형제에게 position을 사용하게 되면 겹치지 않는다.
큰 섹션을 만들 때는 2차원을 사용한다. 겹치는 일이 없음.
--> 첫번째 형제의 position이 2차원인지 3차원인지에 따라 레이어가 안 겹치거나 겹치게 된다.**

* _**float**_

``` ``` header { width: 100%; height: 100px; background-color: gray; }

.left { float: left;

width: 300px;
height: 200px;
background-color: coral;

}

.center { float: left; width: 300px; height: 200px; background-color: green; }

.right { position: fixed; float: right; width: 300px; height: 200px; background-color: yellowgreen; }

footer { clear: both;

width: 100%;
height: 100px;
background-color: orange;

} section {
width: 1400px; height: 200px; background-color: black; }

![](https://images.velog.io/images/rona-kim/post/64abf662-0122-416b-ad0c-aff853df1c81/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20103159.png)
공간을 만드는 태그들 (div, footer, section 등)은 Block의 성격(y축정렬)
_**float : 공중으로 띄운다. 띄어서 겹치게 하고 정렬, 같은 선상으로 배치,일종의 3차원적인 특성을 가지게 함**_
z-index와 비슷하게 앞에 형제가 3차원이면 뒤에 형제가 뒤로 가서 겹쳐진다.

![](https://images.velog.io/images/rona-kim/post/8f265647-f8d4-4f41-b3ba-907d53bff3b7/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20103234.png)
float와 clear은 한 세트라고 보면 되는데
같은 선상에 배치하려는 기능을 on - float
기능을 off - clear (float를 마지막으로 사용한 태그의 다음 태그에 clear)
#### float를 사용할 때는 float 속성을 사용한 태그의 부모의 크기가 고정이 되어 있어야한다. 가변성이 있으면 안됨 (레이어의 틀어짐 방지를 위해), float를 지정한 구역이 %이면 굳이 부모의 크기가 고정되어 있을 필요가 없다. 고정된 width안에서 float정렬이 되었기 때문에 레이어 틀어짐 현상이 없다. float를 지정한 값들의 부모는 float들의 width값보다 크거나 같아야한다. 순수 3차원 position에서는 float 사용 불가

``` ``` .left-2 { float: left; width: 100px; height: 150px; background-color: seagreen; }

.right-2 { float: right; width: 100px; height: 150px; background-color: gray; }

footer {

width: 100%;
height: 100px;
background-color: black;

} .clearfix { clear: both; } section { overflow: hidden; width: 800px; background-color: orange; }

![](https://images.velog.io/images/rona-kim/post/7e48b9a6-85c4-4129-8268-f5c3f2954949/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20113357.png)

html코드만 봤을 때는 어느 지점에서 float와 clear이 되었는지 확인하기 힘들다.
관례적으로 float가 있는 마지막 태그 다음에 class="clearfix"를 지정해준 후
.clearfix {both;}값을 넣어주면 clearfix만 보고도 유추가 가능하다. 

div가 3차원이기 때문에 자식의 높이를 부모가 받지 못하는데 overflow: hidden; 를 사용하면 자식의 높이값을 받을 수 있다.

Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you

``` ``` .over-box { overflow: hidden; overflow-y: scroll; overflow-x: scroll; width: 200px; height: 200px; background-color: yellowgreen; } ``` ![](https://images.velog.io/images/rona-kim/post/01604a98-ece4-4d2f-baaa-5f5ed4485182/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20112700.png)![](https://images.velog.io/images/rona-kim/post/2684ef2a-cbfe-475a-a670-fd221e4b849f/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20112731.png)![](https://images.velog.io/images/rona-kim/post/24f246e7-85c0-4dd1-9f31-4db7981a629c/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20112820.png) overflow: hidden; - 선택한 구역보다 텍스트 수가 많을 때 선택한 구역에서만 텍스트를 보고 싶을 때 overflow-y: scroll; - y축으로 스크롤 생성해서 텍스트 안 잘리게 할 때 overflow-x: scroll; - x축으로 스크롤 생성해서 텍스트 안 잘리게 할 때

overflow + float = 자식의 높이값을 부모가 인식할 수 있도록 만들 수 있다.(3차원이여도 인식할 수 있게 해준다라는 뜻)

flex - 효과적으로 웹사이트 레이아웃 작업을 하도록 도와주는, float의 발전된 형태 ~~~ 부모영역에 flex를 적용~~하게 되면 왼쪽을 기준으로 x축 정렬

class를 두개 사용해서 하나는 크기, 하나는 서로 다른 css를 적용하고자 할 때 이런 식으로 활용 가능↓

.container {
  display: flex;
  /*flex-direction: row; row가 기본,x축정렬, column-y축정렬, row-reverse 역순으로 오른쪽정렬, column-reverse 역순으로 y축 정렬*/
  /*flex-wrap: wrap; */
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: baseline ;

  width: 1000px;
  height: 500px;
  border: solid 10px lightcoral;

}

.item { width: 200px;

}

.one { height:100px ; background-color: yellowgreen; }

.two { height: 200px; background-color: lightblue; }

.three { /width: 900px;/ height: 300px; background-color: orange; }

![](https://images.velog.io/images/rona-kim/post/41f2025f-29e8-43de-8777-dee4040d0bea/%ED%99%94%EB%A9%B4%20%EC%BA%A1%EC%B2%98%202021-07-05%20141330.png)
flex-wrap: nowrap; - 부모의영역을 벗어나지 않고 안에 있는 영역이 자동으로 부모영역에 맞춰서 리사이징 시켜줌 
flex-wrap: wrap; - 부모보다 자식들의 합이 크면 자동으로  줄바꿈
flex-flow: row wrap; - flex와 wrap을 동시 지정할 때

justify-content: flex-start; - x축 정렬을 작업할 때, flex-end; 오른쪽정렬
center; 가운데 정렬, space-between; 간격만들고싶을때 ,space-around 박스 바깥에 동일한 공백

align-items: flex-start ; - y축 정렬 가장 위쪽 배치, flex-end 가장 밑, center 중앙,
baseline ; 박스들끼리의 밑 라인을 맞춰 정렬

* 중앙으로 정렬하고자 할 때

.center-1 { width:300px; height: 300px ; background-color: coral;

margin: 0 auto;

}

.center-2 { position: relative; width:300px; height: 300px ; background-color: gray;

left: 50%; /*왼쪽면을 기준으로 50%*/
margin-left: -150px; /*회색박스의 50%만큼 당기*/

}

```

margin: 0 auto; - 상하 0, 좌우 auto, block 요소에서 사용

.center-2는 position: relative;를 지정하고 (top, right,bottom,left사용가능)left: 50%;, margin-left: -150px; 주어서 정렬, -단점 : width의 값이 바뀌면 margin-left값도 바꿔야하는 두번 수정해야하는 번거로움이 있음

어려웠던점

오늘은 position의 뒤를 이어 헷갈림의 양대산맥을 배운 기분이다 float가 여전히 헷갈린다.

해결방법

개발일지 작성 후 한번 더 들어야겠다. 이번에는 영상만 보는 것에 집중 해야겠다.

참조 사이트 https://flexbox.help/ https://css-tricks.com/centering-in-css/
학습소감
깃허브 사용법을 주말동안 익혔다. 여전히 로컬에서 바로 업로드(?)하는건 모르겠지만 add files를 해서 추가하면 되는 것이였다. 이제 실습파일들을 깃허브로 옮겨서 보관해야겠다. float 너무 어렵다. float 수업 하면서 position얘기도 나오니 머리가 빙빙 돈다. 다시 들으러 가야겠다.

7월 2일(margin, padding,block,inline,display, position)

Fri, 02 Jul 2021 05:26:32 GMT

학습내용

layout


    Hello World

.box-model {

box-sizing: border-box;

width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;


margin: 100px 0 0 100px;
padding: 100px 0 0 100px; }

margin : border를 기준으로 바깥부분, (border값이 없으면 border값이 0인 상태), 선택한 영역이 스스로 움직이는 것이 아니라 공백을 넣어줌으로써 공백으로 인해 밀리는 것이라고 이해
padding : border를 기준으로 안쪽부분, 선택한 영역이 스스로 움직이는 것이 아니라 공백을 넣어줌으로써 공백으로 인해 밀리는 것이라고 이해

선택한 영역이 200px인데 padding을 100px를 줘버리면 300px가 된다. 근데 여기에서 margin, padding 값을 주더라도 선택한 영역의 크기는 안 늘어나기를 원할 때는 box-sizing : ; 이라는 속성을 사용하면 된다. 동시에 지정가능, 12시를 기준으로 top, right, bottom, left ** margin: 100px 0 0 100px;**

html과 body태그에는 태생적으로 margin, padding 값이 있기 때문에 디폴트값으로 0을 지정해준다.

*html, body { margin: 0; padding: 0;} *

.margin-one {
    width: 100%;
    height: 100px;
    background-color: pink;

    margin-bottom: 100px;
}

.margin-two {
    width: 100%;
    height: 100px;
    background-color: purple;

    margin-top: 150px;
}

margin-one에는 margin-bottom 100px를 주었고 margin-two에는 margin-top 150px를 주었다. 이 경우 둘 사이의 margin값이 총 250이 아니라 150이 된다.

margin 형제병합 : bottom과 top를 공유하고 있으면, 큰 값이 작은 값을 병합해버림

.margin-parent {
width: 300px;
height: 300px;
background-color: violet;

}

.margin-child {

width: 150px;
height: 150px;
background-color: pink;

_**margin-top: 100px;**_
}

margin 부모자식병합 : 자식에게 margin값을 지정하면 부모에게도 영향을 미친다.

display

    Block
    Block
    Block

    Inline
    Inline
    Inline

 h1 {
     display : inline-block
    width: 100px;
    height: 100px;
    background-color: yellow;

    margin-top: 100px;
}

span {
    display: block;

    font-weight: 100px;
    height: 100px;
    background-color: pink;

    margin-top: 100px;
}

** block : y축 정렬,공간을 만들 수 있음, 상하배치가능 inline : x축 정렬, 공간을 만들 수 없음, 상하배치불가** display: inline-block; 메뉴버튼만들때 사용

(h1에도 태생적으로 margin, padding값이 있다.)

display를 이용하여 inline -> block, block -> inline으로 변환 가능
양쪽 모두의 속성을 쓰고싶을 때는 inline-block

    Inline
    Inline-Block

.inline-block {
    display: inline-block;

    width: 100px;
    height: 100px;
    background-color: yellow;
    }

.inline, .inline-block, img {
    vertical-align: middle;
}

vertical-align: 같은 형제, 같은 라인의 있는 요소들이 그 중 가장 큰 크기에 맞추어서 배치 top, middle, bottom inline에만 적용 가능 img는 inline-block성질을 갖고 있음

position

1. margin-top 사용 시 부모 자식간에 발생하는 마진 병합 현상이 일어나는지 2. top, right, bottom, left 속성을 사용할 수 있는지 3. 자식의 높이 값이 부모에게 영향을 주는지

.static-parent {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

.static-child {
    width: 150px;
    height: 150px;
    background-color: blue;

    margin-top: 100px;
}

positoin : static;

-부모자식간 마진병합 -top, right, bottom, light 사용 불가 -부모가 높이 값이 없다면 자식의 값을 가져올 수 있다. -2차원 -모든 html은 static 디폴트 -브라우저 기준

.box1 {
    width: 300px;
    height: 200px;
    background-color: gray;
}

.fixed-parent {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

.fixed-child {
    position: fixed; 

    width: 100px;
    height: 100px;
    background-color: blue;

position : fixed ;

-고정되어있음 -부모자식간 마진병합 없음 -top right bottom left 사용 가능(브라우저 왼쪽 상단을 기준으로 움직임) -3차원

.box1 {
    width: 300px;
    height: 200px;
    background-color: gray;
}

.relative-parent {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

.relative-child {
    position: relative;

    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 100px;
    top: 100px;
}

position : relative ;

-부모자식 마진병합 가능 -top right bottom left 사용 가능 (최초 있었던 위치를 기준으로, 주체가 되어움직임) -자식의 높이값이 부모에게 영향을 준다 -2차원과 3차원의 성질

.absolute-parent {
    position: static;
    width: 300px;
    height: 300px;
    background-color: yellow;
}

.absolute-child {
    position: absolute;

    width: 100px;
    height: 100px;
    background-color: blue;

    margin-top: 100px;
    top: 100px;
}

position : absolute ;

-부모자식 마진병합 없음 -top right bottom left 사용 가능 (브라우저를 기준으로 이동) -자식의 높이값이 부모에게 영향을 주지 않는다 -3차원 -top값은 부모를 기준으로 좌표 기준점이 달라지는데, 부모의 포지션이 어떤 상태인지에 따라 바뀐다.

position
static	fixed	relative	absolute
2차원	3차원	2,3차원	3차원
마진 병합	x	마진 병합	x
x	top right bottom left(값 없으면 원래 있던 위치)	top right bottom left	top right bottom left
default	부모 기준	부모 기준	부모가 static이 아닐 경우에만 부모 기준
높이 영향	x	높이 영향	x

어려웠던 점

margin 병합이 오늘 주된 수업 주제였는데 처음에는 이해가 됐는데 중간에 한번 놓쳤더니 멍했다. posion부터 약간 헷갈린다. static, fixed, relative, absolute 이렇게 4개를 자유롭게 활용하면 레이아웃을 가지고 놀 수 있다고 하시는데 헷갈린다. static은 다 이해했다고 생각했는데 absolute부분에서 부모의 position을 기준으로 또 좌표 기준점이 달라진다고 할 때 부모의 position을 stati로 설정했는데 static이 브라우저 기준으로 이동을 한다라고 하셔서 또 멘붕이 왔다. 그런 얘기가 있었나 ..?

해결방법

강의를 몇 번이나 돌려보았다. 그래도 잘 모르겠어서 구글링을 해봐야겠다.ㅠㅠ

학습소감

오늘 이 때까지 한 수업 중 가장 헷갈리는 날이였다. 어찌보면 아직까지 기초파트 인데 이렇게나 헷갈려 하다니 자괴감 든다ㅠ.ㅠ

7월 1일(가상선택자)

Thu, 01 Jul 2021 04:43:50 GMT

1. 학습 내용

오늘은 css에서 가상선택자에 대해 배웠다.

가상 선택자란 ?

선택한 요소에 어떠한 행동과 규칙에 의해 디자인을 적용하는 방식으로, 가상의 이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정하는 것이다. html
```
네이버
```
css
```
a:link{color: red;
a:hover{color: pink;}
a:active {color: blue;}
input:focus{border: solid 10px red;}
```
네이버 ![](https://images.velog.io/images/rona-kim/post/3e8d1ef7-5206-4478-9ed1-432b32fd7423/%EC%A0%9C%EB%AA%A9%20%EC%97%86%EC%9D%8C2.png)

디자인을 적용할 태그에 : 을 붙인다. :link - 방문한 적 없는 링크에 대해 디자인 적용할 때 :active - 클릭할 때 디자인 적용 :hover - 커서를 갖다댔을 때 디자인 적용 :focus - input을 클릭했을 때 디자인 적용, 포커스를 지우면 없어짐

html


    menu 1
    menu 2
    menu 3
    menu 4
    menu 5
    menu 6





    로그인
    회원가입
    회사소개
    고객센터

css

li:first-child{color: red;}

li:last-child{color: blue;}

li:nth-child(2n + 1){color: gray;}

li:before {content: "*-*";}
li:after {content: "#-#";}

:first-child - 리스트의 첫번째 항목 디자인 변경 :last-child - 리스트의 마지막 항목 디자인 변경 :nth-child(n) - 직접 지정한 리스트의 항목 디자인 변경 (2n : 짝수, 2n+1 : 홀수)

:before {content : ;} - 글자와 태그 사이 공간, content라는 속성은 css를 가지고 화면에 표기를 시킬 수 있다. css에만 존재함 :after {content : ;} - 닫힌태그와 글자 사이 *--> 정보가 없는 디자인, 글자를 중심으로 앞 뒤에 내용물을 강제적으로 삽입 가능 *

카카오톡 친구목록 만들기

css

.friends-lists{
    list-style: none;}

.friends-lists .friends-list a {
    color: #000000; 
    text-decoration: none;}

.friends-lists .friends-list a .friend-thumbnail {
    border: solid 2px gray;
    border-radius: 20px;}

.friends-lists .friends-list a .friend-info .friend-name {
    font-size: 20px;
    color: #000000;}
.friends-lists .friends-list a .friend-info .friend-intro {
    font-size: 15px;
    color: #c8c8c8;}

.friends-lists .friends-list a .friend-info .friend-name {
    font-size: 50px;
    color: red;}

그 전 시간에 했던 카카오톡 친구 목록 만들기를 하고 이번에는 어제 배운 선택자를 이용해 css를 활용해 보았다. ul, li, div, h3, span 등에 클래스 선택자를 만들어 넣고 css로 디자인을 적용해보았다. 조금 더 디테일하게 고쳐가며 실습을 진행했다. 조금 더 디테일하게 하기 위해 클래스를 생략 하지 않고 순서대로 다 작성해주었다. 캐스케이딩으로 인해 덮어씌우기도 가능했다. (같은 클래스 이고 나중에 작성 된대로 적용이 됨) border-ridius : 50%로 설정하면 테두리가 원형으로 변한다.

네이버 리빙 html


        
            
                
                
                    리빙
                    30평대 아파트, 따뜻한 느낌의 침실
                    Nice To Meet You Nice To Meet YouNice To Meet You Nice To Meet You Nice To Meet You Nice To Meet You

                    
                        유닛
                        3개월 전
                    
                
            
        
        
            
                
                
                    리빙
                    아이있는 집 주방 1년 간의 소소한 변화
                    Nice To Meet You Nice To Meet You Nice To Meet You Nice To Meet You Nice To Meet You Nice To Meet You

                    
                        miju
                        1개월 전

css

.living-lists{
    list-style: none;}

.living-lists .living-item a {
    color: #000000;
    text-decoration: none;}


.living-lists .living-item .living-info .type {
    color: #c08d31;
    font-weight: 700;
    font-size: 12px;}

.living-lists .living-item .living-info .title {
    font-size: 13px;
    color: #000000;}
.living-lists .living-item .living-info .paragraph {
    font-size: 13px;
    color: #404040;
    line-height: 13px;}

.living-lists .living-item .living-info .date-wrap .source, 
.living-lists .living-item .living-info .date-wrap .date{
    font-size: 12px;
    color: #505050;    }

.living-lists .living-item .living-info .date-wrap .date {
    color: gray;}


.living-lists .living-item .living-info .date-wrap .date:before {
    content: '-';}

.living-lists .living-item:hover {
    background-color: pink;}


.living-lists .living-item a:hover .living-info .title {
    text-decoration: underline;}

이전 시간에 만든 네이버 경제M과 비슷하게 실습해보았다. 각 태그에 클래스를 지정해주고 css에서 디자인을 적용해주었다. 위와 마찬가지로 디테일하게 작성해주었다. 클래스에 가상 선택자를 지정해주는 것도 가능하다. 그리고 hover을 가상 선택자로 지정해서 a에 갖다댔을 때 .living-info와 .title에 밑줄이 생기는 것 등 같이 지정하는 것도 가능하다.(가상 선택자 뒤에 다른 선택자를 연달아 기입 가능)

line-height : 위아래 글자와의 간격

오늘의 팁

폴더를 하나 만들고 html을 작성 후 css, img, js 폴더를 만든다.

Html과 css를 연동할 때는 전과 다르게 css폴더 안에 style.css가 있기 때문에 href : css/style.css로 지정 (html기준)
css에서 이미지를 불러 올 때는 이미지 폴더와 css폴더가 다르기 때문에 ../ 한번 나와서 img/icon.png로 불러온다.

구글로 아무 홈페이지나 들어가서 검사를 눌러 html과 css를 살펴가며 공부하는 것도 도움이 많이 되는 것 같다.

연습내용

근데 왜 디테일하게 태그가 안됐을까. 어쨌든 하긴 했는데..

어려웠던 점

가상선택자 라는 말의 뜻이 처음에 조금 헷갈렸다. 어제 배운 선택자는 또 뭐더라? 하면서 찾아봤다.

해결방법

그냥 무조건 반복..반복..네이버나 다음으로 들어가서 html과 css를 살펴보며 실습해보기

학습 소감

이제 어느 정도 적응이 되었는지 눈뜨고 감을 때 까지 html..css.. 생각만 한다. 이젠 또 hover가 계속 맴돈다. 누가보면 사랑에 빠진 줄 알듯.. 그건 아닌데 .. ㅎ 눈이 너무 아프다. 안구건조증이 또 심해져서 최대한 멀리 떨어져서 실습을 하는데 모니터는 한정적이고 띄울 창은 많다보니 줄여서 하는데 그럼 또 잘 안보인다. 총체적 난국..ㅎ 깃허브도 빨리 사용법을 알아야하는데, 아무리 찾아봐도 나같은 왕초보에게 딱 맞는 설명이 없다 ㅠㅠ 이번 주말에 꼭 해결해놔야지

6월 30일

Wed, 30 Jun 2021 07:12:18 GMT

1) 학습내용

오늘은 CSS에 대한 수업을 들었다. html은 많이 들어봐서 익숙했지만 CSS는 아예 처음 접해보는 분야라서 들뜬 마음으로 집중을 했다. 가장 처음에는 이제까지 해왔던 방식인 html에 직접 스타일을 적용을 해보았다.


          
    


    HELLO WORLD

h1이라는 태그를 만들고 그 안에 HELLO WORLD를 입력했다.< head>태그 안에는 < style> 태그를 넣어 h1의 색상을 레드로 주었다.

디자인을 적용하기 위해서는 총 3가지의 방법이 있는데 첫 번째가 방금 작성한 head태그 안에 style태그를 사용한 것이다.

두 번째로는 h1에 style이라는 속성을 추가해서 다이렉트로 지정을 하는 방법이다.

*스타일을 적용할 태그를 작성 후 {}을 사용해주어야 한다.

이 두 가지 방법의 치명적인 단점은 코드가 길어지면 html언어와 css언어가 혼재되어 있어 가독성이 떨어지고, 유지보수가 불편하다. 그래서 실무에서는 html은 html문서 안에 css는 css문서 안에서 작업과 관리를 따로 하고 이 두가지 문서를 연동하는 방식으로 작업을 진행한다.

가장 효율적인 세 번째 방식은 , 같은 폴더 안에 새로운 파일을 열어 css.style 이름으로 저장을 하고

h1{font-size: 80px;}

css문서 안에 h1의 스타일을 작성 하면 된다. 연동을 하기 위해서는 html문서의 < head> 태그 안에

이 코드를 작성해주면 된다. 여기에서 rel은 연동되는 파일의 타입 디자인을 담당하는 stylesheet type : 연동되는 파일의 글자는 css언어로 구성되어 있다 라고 정의 href : 연동된 파일의 경로 입력, html과 같은 폴더 안에 있으므로 파일 이름을 적어줌

_html, css 둘다 저장을 해주어야 적용이 되고, view - layout - columns :2 를 하면 화면 분할이 되어 작업하기 편리하다. css에서의 주석은 /*/, html과 마찬가지로 주석 안에 주석은 불가능 _ html


     header h1                         
     header p
     naver



     footer h1
     footer p

css

header{color:red;} 

header h1,
footer h1 {color: blue;}

header p,
footer p{color: green;}

css에서 디자인을 적용을 할 때 하나씩 적용해도 되지만 같은 디자인을 지정할 때는 순차적으로 작성해주면 된다. css는 부모 자식 관계와 유사한데, 부모가 컬러라는 유전자를 갖고 있다면 자식에게도 컬러를 상속을 한다. 그러나 자식에게 독자적으로 다른 컬러 유전자를 주입시키면 상속받은 것 보다 주입된 다른 컬러 유전자가 더 친숙하기 때문에 그 컬러로 변경이 된다. (모든 속성이 상속을 받지는 않음, a태그는 태생적으로 파란색을 가지고 있어 상속받지 않는다.) 부모를 명시함으로써 디테일하게 디자인을 적용할 수 있다. 동시에 적용할 때는 , 사용

html

    hello world
    nice to meet you
    welcome

css

h1 {color: red;}

#test1 {color: blue;}

.test2 {color: green;}


input[type="text"] {border: solid 10px red;}

input[type="password"]{border: solid 10px blue;}

선택자 : css에서 html문서의 특정 영역에 접근하는 방식

타입 : html태그를 기준으로 접근할 때 h1 {color: red;}
아이디 (id) : 태그에 고유의 이름을 만들 수 있다. #test1 {color: blue;}, 같은 태그이지만 다른 스타일 적용가능, 한 문서안에서는 한 개의 아이디만 존재함.
클래스 (class) : 태그에 별명을 붙인다 .test2 {color: green;}, 같은 태그이지만 다른 스타일 적용 가능, 아이디와는 다르게 여러개의 클래스 가능
어트리뷰트 (속성) : 타입의 속성값을 가지고 디자인을 적용. input[type="text"] {border: solid 10px red;}

html

    ID 선택자
    Class 선택자


    welcome

css

.bg-1 {
    background-color: red;
}

.font-size-1{
    font-size: 50px;
}

#color-1 {
    color: red;
}
#font-style-1 {
    font-style: italic;
}

캐스케이딩 : 원본 코드를 유지한 상태에서 새로운 css코드를 추가하는 방식으로 디자인을 추가하고 싶을 때, css에서 우선순위에 영향을 미친다. 나중에 작성되는 속성값이 적용이 되고 우선순위가 높다. 우선순위 : 타입 < 클래스 < 아이디 < 속성 위의 경우 아이디는 한 문서에 하나만 존재해야 하는데 아이디가 2개가 있어서 아예 적용이 안된상태이다.

html


    
        header h2
        header p
    


Out p

css

#intro h2 {
    color: red;
}

#intro .container p {
    color: blue;
}

디테일하게 작성할 수록 우선 순위가 높다. 예를 들면#intro div h1 {color: green;} / #intro h1 {color: blue;} 중에서는 전자가 더 디테일 하기 때문에 나중에 작성된 후자보다 전자가 적용이 된다.
또 다른 예로 #intro .container h1 {: pink;}/ #intro div h1 {color: green;} 는 둘 다 디테일하지만 클래스와 태그 중 클래스가 더 우선순위이기 때문에 전자가 우선 적용이 된다.

Hello World

이 경우에는 아이디, 클래스가 있지만 style 속성값이 가장 우선순위라 gray로 출력이 됨

html


    Nice
    
        메뉴 1
        메뉴 2

css

div{
    width: 100%;
    height: 300px;

    min-width: 600px ;
    max-width: 800px;

    border: solid 10px red;
    border-radius: 50px;

    background-color: yellow;

    opacity: 1;

}

h1    { 
    color: hotpink; 
    font-size: 80px;
    font-style: initial;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 100;
    text-decoration: line-through;
    text-align: right;

    background-color: pink;
}

ul {
    list-style: none;
}

div background-color: yellow; - div 공간의 크기를 만들 때 width, height를 지정해도 기본적으로 투명하게 나타나기 때문에 백그라운드 컬러를 지정해주면 덜 헷갈린다. px를 사용하면 브라우저의 사이즈 상관없이 고정값이 되고 %를 사용하면 가변성이 있고 리사이징이 된다 (%를 사용할 때는 부모태그를 기준으로 상대값으로 책정이 된다. 여기에선 div의 부모태그는 < body>임) *min-width: ; / max-width: ;** 는 %를 적용한 width속성 안에서 사용, 리사이징을 가능하게 하지만 최소값과 최대값을 지정해주는 속성 border: solid 10px red; - 한번에 3가지의 css속성값을 기입 가능, 순서는 상관 없다. 선의 종류, 굵기, 색상 순 border-radius: 50px; - 모서리의 라운드 적용 하는 속성 opacity: 1; - 투명도 (0과 1사이의 값)

h1 color: hotpink; - 폰트 색상 font-size: 80px; - 폰트 크기 font-style: initial; - 최초상태 font-family - 'Noto Sans KR', sans-serif; -폰트 서체, 사용가능한 폰트로 적용이 된다. sans-sefif는 거의 모든 브라우저에 지원이 가능 font-weight- 100; - 폰트 굵기 text-decoration- line-through; - underline, line-through text-align - right; - left, center, right 정렬(속해있는 태그 안을 기준으로)

background-color: pink; - 영역 확인을 위한 배경 설정

ul {list-style: none;} - ul은 태생적으로 앞에 ∙ 있는데 삭제를 하고 싶을 때 사용

html

css


#bg {
    width: 900px;
    height: 900px;
    background-color: yellow;
    background-image: url(icon.png);
    background-repeat:no-repeat;
    background-position: top left;
}

< img src="icon.png" width="100px" height="50px" alt="네이버 로고"> : html에서 이미지를 불러올 때 alt값을 주어야한다(웹접근성과 관련됨), width, heigth값을 바꾸면 비율은 변하지만 이미지가 잘리는 현상은 없다. 정보를 가지고 있는 이미지를 사용할 때 사용하는 태그

background-image: url(icon.png); - css에서 배경을 이미지로 설정할 때, width, height를 액자에 비유를 하면 액자틀 안에 백그라운드 이미지를 끼워 넣는 것, 액자틀보다 사진 크기가 크면 사진이 잘리게 된다. 액자틀과 이미지 사이즈를 갖게 하면 딱 맞게 나온다. 데코레이션 용도로 이미지를 사용할 때 사용한다.

background-repeat:no-repeat; - 이미지를 반복할 것인지 여부, repeat-x, repeat-y, repeat, no-repeat background-position: top left; - 이미지의 위치 조정, left, right, center, right bottom, right top

어제 수업한 설계도면을 만들어 css를 적용시켜보았다.

2) 어려웠던 점

캐스케이딩 (우선순위) 부분을 배울 때 헷갈림이 있었다. 일단 아이디는 #, 클래스는 . 이 둘이 자꾸 헷갈린다.

3) 해결방법

개발일지를 작성하면서 머리에 주입시켰다.

4) 학습소감

css에 관심이 있었는데 이제 배우게 되어서 너무 기쁘다. 그리고 오늘이 되어서야 개발일지를 왜 쓰는지 이해가 됐다. 개발일지를 쓰면서 하루 동안 배운 것들을 복습하고 모르는 부분은 다시 돌려가며 보고, 내가 글을 썼기 때문에 나만 이해할 수 있는 부분이 있지만 (ㅋㅋㅋ) 일단 이해는 되니까 글머리가 없어도 괜찮다. 한번 더 돌려봐야겠다.

6월 29일

Tue, 29 Jun 2021 05:43:37 GMT

1) 학습한 내용

** 설계도면 만들기**

1. 카카오톡 친구 목록 만들기

친구 목록에는 순서가 중요하지 않기 때문에 ul, li를 사용함(항상 같이 사용)
클릭하면 채팅방으로 넘어가기 위한 a 사용
프로필 사진을 img로 삽입(https://via.placeholder.com/150 -> 실무팁, 사용할 이미지가 아직 제공되지 않았을 경우 사용, 숫자를 변경하면 사이즈가 변경됨)
이름과 상태명은 한 개의 그룹으로 묶기 위해 div사용 (div는 임의로 구역을 정할 수 있음 -> 비슷한 성격끼리 묶기)

카카오톡 하단의 메뉴는 footer로 지정, 가장 밑 단작업
메뉴를 구성할 때 nav사용(네비게이터)
메뉴 또한 ul, li 사용
클릭하면 다른 창으로 넘어가기 때문에 a 사용

2. 네이버 경제 M, 레시피


    
        
            
            
                경제M
                부회장님의 취미생활
                Hell WorldHell WorldHell WorldHell World
                Hell WorldHell WorldHell WorldHell World
                Hell WorldHell WorldHell WorldHell WorldHell World
                머니그라운드
                -
                4일 전

ul, li 사용
클릭하면 다른 곳으로 이동하기 때문에 a 사용
이미지 삽입을 위한 img, 사이즈는 150*80
div로 임의의 구역을 생성
경제M - span(문장 내에서 특정 단어에 디자인을 적용하고자 할 때)
h3 제목 지정
p : 본문 내용삽입
머니그라운드 - 4일 전 : span


    
        
            
            
                [푸드클래스] 송현경 요리 연구가
                바삭하고 고소한 브런치
                잘 구운 페이스트리 속에 부드럽고 진한 소스와 치즈가 듬뿍!
            
                #오븐요리
                #베사멜소스

이미지를 누르면 다른 창으로 이동하기 때문에 a와 img
푸드클래스 ~~ 소스 까지 하나의 div로 지정
#오븐요리 #베사멜소스 도 하나의 div로 지정 --> div안에 div 지정 가능!!

3. news


    인천 서구 아파트시장에 무슨 일이
        
            
            
                해럴드 경제
                입력 2021.05.03
                수정 2021.05.03
            

            
            
                가
                나
                다

div로 한 구역을 지정
제목 : h3
div안에 div 지정 ( 구간을 나누어 왼쪽, 오른쪽으로 생성 )
span을 이용해 텍스트 작성

4. helbak.com(https://helbak.com/)


    
    
        
            메뉴1
            메뉴2
        
    

    
    
        
    

    
    
        Accepted payment methods

div로 구역을 나누어 줌( 왼쪽, 중앙, 오른쪽 )
가장 밑 단의 부분 footer

5. agency (https://startbootstrap.com/previews/agency)


    
        
            
                
            
        

        
            
                
                    Service
                    Portpolio
                    About
                    Team
                    Contact
                
            
        
    

    
        Welcome To Our Studio
        IT'S NICT TO MEET YOU
        TELL ME MORE

header로 지정
가장 윗부분 div로 지정, 로고는 h1으로 지정, 이미지를 위한 img와 a
메뉴 : nav, ul, li 각 5개의 메뉴 생성
또다른 div지정, 로고는 아니지만 강조하는 글씨이기 때문에 h2, h3사용

6. kidsgao(http://sisikiller.dothome.co.kr/)

header 지정, 2개의 div로 나누어 줌 (실행하면 아무것도 안 나옴)


    
        
        
            
            
                
                자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다. 
            
        

        
        
            
            
        

        
        
            
            
                
                빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9 지방산이 풍부한 올리브유를 넣어서 보습효과도 뛰어나답니다.

이 구역을 나타내는 타이틀 정보가 없으므로 div 설정
그 div안에서 컨텐츠 영역을 감싸고 있는 div 설정
왼쪽, 중앙, 오른쪽 3개의 div로 구역을 나누어 줌
왼쪽 : 이미지를 위한 img, 글자를 감싸고 있는 div 하나 더 설정
본문 글자 : p 사용
ctrl + / = 주석처리 단축키

2) 학습내용 중 어려웠던 점

처음에 설계도면 작성하는거에 대해 잘 따라가지 못해서 어버버 거렸는데 정지를 하고 차근차근 생각해보니 이해가 됐다. 마지막에 kidsGao 할 때 div구역을 지정하는게 헷갈렸다.

3) 해결방법

복습만이 해결방법이라 생각하여 영상을 한번 더 돌려보았다. 개발일지를 쓰고 한번 더 시청할 계획이다. kidsGao를 복습하여 알게 된게 구역을 나타나는 타이틀 정보가 없으면 임의로 div를 설정해주고, 그 div안의 컨텐츠만을 위한 div를 또 설정해주고, 그 안에서 구역을 또 나누어 진행을 하면 된다. 작성하다보니 또 헷갈리는 것 같은데 한번 더 시청해야겠다.

4) 학습소감

이제 < !DOCTYPE html> ~~ < /html> 까지 안 헷갈리고 작성 할 수 있다. 일부러 복사 붙여넣기 안하고 차근차근 작성해보았다. 별 거 아닐지 몰라도 이렇게 기초부터 해나가면 발판이 되겠지..! 설계도면도 이제 어느 정도 감이 왔다. 순서대로 구역을 지정해주고 그 안에서 또 지정을 해주고 또 지정을 해주고..!

6월 28일

Mon, 28 Jun 2021 07:52:21 GMT

1) 학습한 내용

1. 웹프로그래밍 언어의 종류

- HTML : 정보영역을 담당하는 언어
- CSS : 디자인적인 영역을 담당하는 언어, 폰트나 색상 등
- Java Script : 기능적인 영역을 담당하는 언어, 클릭했을 때 컨텐츠가 바뀌는 등
---> 건물에 비유하자면 HTML은 설계 도면, CSS는 내부 인테리어 작업, 
Java Script는 지문인식으로 문을 열거나 박수를 치면 불이 켜지는 등의 기능적인 작업

2. 웹사이트의 4가지 종류
- 정적인 웹사이트 : 원래의 틀을 유지
- 동적인 웹사이트 : 브라우저 크기에 맞춰서 사이즈가 조절, 
접근하는 기기의 다양성으로 인해 공간의 크기가 유동적으로 변경됨
- 적응형 웹사이트 : 뚝뚝 끊기며 공간의 크기가 달라짐,
접근하는 기기의 다양성으로 인해 레이아웃 구조 변경

- 반응형 웹사이트 : 끊기지 않고 자연스럽게 리사이징, 레이아웃 구조 변경
---> 최근에는 적응형과 반응형을 섞어 웹사이트 제작

* 국내외 다양한 웹사이를 볼 수 있는 곳
:디비컷, 지디웹, awwwards(winner탭 참고),mediaqueri.es, bm.straightline.jp

3. 개발용어

- 프론트엔드 : 웹사이트 or 웹서비스를 만들고 서버와의 연결통신을 하는 작업, 다양한 인터랙션을 구현하는 개발자,
사용자(고객)이 보는 페이지를 만드는 개발자
- 백엔드 : 뒷단의 영역, 로그인을 할 때 아이디가 등록된 아이디인지 확인하는 등
- 크로스 브라우징 : 다양한 모든 브라우저에 동일하게 출력이 되도록 앞단의 작업을 하는
- 웹표준 : HTML 언어를 사용해 정보의 성격에 맞는 일종의 태그를 사용해야 하는데 그 태그에 맞춰서 작성하는 과정
- 웹접근성 : 장애인들도 불편함 없이 사용가능하게 하는 
- FTP : 서버와 PC를 연결해주는 역할
- 라이브러리 : 웹사이트를 제작할 때 다른 사용자들이 등록해놓은 효과 등이 등록되어져있는 곳

4. 개발도구

- vs code : HTML, CSS, Java Script를 입력하는 무료 에디터
- Sublime text : HTML, CSS, Java Script를 입력하는 무료 에디터
- Web Storm : 유료 에디터

* 독학 추천 콘텐츠
: 생활코딩 (Web1,2), 얄팍한 코딩사전, Thenewboston(HTML,CSS), Web Bos(Java Script 30), Freecodecamp, W3school,
모던 자바 스크립트 튜토리얼, 에드위드, Statcounter(전세계 웹사이트 점유율), Can i use(브라우저 버전에 영향을 받는 단어 체크),
NULI(웹접근성), HTML Validation Service(웹표준, 웹접근성 체크), CodePen(다른 사람들이 만든 결과물을 공유, 복사 가능)

5. 실습

 : HTML5 최신 문법

 : 목차

     : 글자 깨짐 방지, 디폴트값으로 지정
    
    
    

    HTML, CSS Tutorial

    


    




    네이버

 : 정보를 담는 태그
 : anchor , 다른 페이지로 이동시켜주는 이동버튼을 만들 때 
네이버 : blank 를 누르면 현재 탭이 아니라 새 탭으로 이동,self는 현재 탭에서 이동, 타겟 값 설정을 안 하면 기본적으로 self로 설정됨
 : src 파일명 or 이미지 주소 alt 웹접근성과 관련된 이미지에 관련된 설명, 디폴트로 지정, width, height 조정 가능

    Title
    Title
    Title
    Title
    Title
    Title

    기업명 또는 서비스명
    
        
        
        
    

    Service
    Service 부제
    Commerce
    Design
    Security

    Portpolio

Title
 : headline의 약자, 문서 안에서 타이틀, 은 한 html에서 하나만 사용, 가장 중요한 내용, 안에 a태그, img태그, 회사로고 등, 동급의 내용들은 같은 태그, 순차적으로 작성해야함(h3->h5 이런식으로는 불가

Nice to meet you

     동해물과 백두산이 마르고 닳도록
     사과는 사과 나무에서 나는 열매이다.

본문 내용, 공백은 한칸으로만 인식을 함 : 단어만 표기할 때, 문장 내에서 특정 단어에 디자인을 적용하고자 할때 : 특정 단어를 강조할 때, 백과사전 같은 의미의 강조, 특정 단어에 대한 정의를 할 때 특정 단어를 강조할 때

 : ordered list 순서가 있는 리스트 정보, 목차, 이 태그 안에는 태그가 항상 먼저 나와야함, 안에 list태그만 존재
 : unorded list, 순서가 없는 리스트, 이 태그 안에는 태그가 항상 먼저 나와야함, 안에 list태그만 존재
 : 아직 넘어갈 링크가 없을 때 디폴트 값으로 #

"submit" : 입력한 내용을 서버에게 전달할 때

 : 반드시 같은 폴더 안에 있는 동영상, 재생을 하려면 controls 속성 
controls autoplay muted : 자동 재생을 시키고 싶을 때는 muted를 넣어줌
loop : 반복 재생
width=""
height="”
유투브 영상 가져올 때 공유 – 퍼가기 – 복사 붙여넣기
 : 비디오와 다르게 자동 재생은 안됨

    

    이름
    

    이메일
    

    비밀번호
    

    숫자
    

    파일업로드

 : 입력칸을 만들게 됐을 때 입력칸을 대표하는 제목이나 이름, for을 넣어줘야함
 : type에 따라 칸이 달라짐
이름
 : 이름을 클릭하면 name이라는 id를 갖고있는 영역에 포커싱이 됨, for = id 같은 속성값으로 설정해야함
minlength="2" maxlength="8" : 최소길이, 최대길이 설정
placeholder를 없애버리면 사용자가 어떤 것을 입력해야하는지 모르기 때문에 사용, 안내문구를 넣는 역할, 글자를 입력하는 순간 사라짐, 일종의 노티스
비밀번호

숫자
 : accept 업로드할 파일의 확장자를 지정, 여러 확장자를 추가할 때는 , image/jpg, image/gif
*required="" : 사용자한테 필수로 입력을 받을 때 (form 속성과 같이 사용해야함)

 : name은 country라고 하는 체크박스 항목에서 한국이라고 하는 데이터를 서버에게 전달, 중복체크, checked 라고 하면 초기에 체크되어 있음
 : 단일체크, checked 라고 하면 초기에 체크되어 있음
문의내용
 : input보다 장문의 내용을 입력받을 때 , cols – 너비 한 줄에 최대 몇 글자까지 넣을 것인지에 따라 textarea의 크기가 결정됨, rows – 글자를 기준으로 해서 textarea 안에 최대 몇 줄까지 넣을 수 있는지 
 : 드롭다운 형식, select 태그 안에는 option속성만 넣어야함


        상품 정보
        
            
                상품
                색상
                가격
            
        
        
            
                맥북 프로 16인치
                그레이
                3,000원
            
            
                아이패드 프로 12인치
                레드
                1,000원
            
            
                블루
                1,000원
            
        

        
            
                총 가격
                5,000원

상품 정보
상품	색상	가격
맥북 프로 16인치	그레이	3,000원
아이패드 프로 12인치	레드	1,000원
블루	1,000원
총 가격	5,000원

 : 테이블에 대한 정보
 : 테이블의 머리
 : 줄바꿈
 : head를 지정해줬으니 body도 지정해야함
 : 2번째 줄까지 병합하겠다.
 colspan="" : 가로로 병합


상품
 
맥북프로 맥북프로12



웹의 구성


 
 : 본문, 하나의 문서 안에서 한번만 사용 가능, 익스플로러에서는 적용이 안되기 때문에 roll=”main”속성을 넣어야함
 : 실제 정보가 들어가는 공간
: 본문의 내용과 관계성이 떨어지는 내용들을 넣는다.
:가장 밑단의 부분
 : 구역이 정해져 있지 않은, 임의의 작은 구역들
 : 사용자에게 입력을 담아내는 폼

상품
맥북프로	맥북프로12

2) 학습내용 중 어려웠던 점

오늘은 기초에 대한 강의라서 그런지 전반적으로 이해가 금방되어서 어려운 부분 없었다.

3) 해결방법

기초라 이해가 금방 되었지만 헷갈리는 것은 동영상을 정지하고 한번 더 생각해보면서 해결하였다.

4) 학습소감

이제 매일 개발일지를 써야한다고 생각하니 당황스럽고
오늘 강의 들은 것 만큼이나 개발일지 쓰는데 힘을 다 뺐다. 
내일부터는 좀 더 체계적으로 강의를 듣고 개발일지를 써야겠다.
본격적으로 웹프로그래밍에 대해 배우게 되어서 매우 기대가 된다.

rona-kim.log

7월 22일 (네이버 쇼핑 카피캣)

학습내용

백화점 상품 그대로

생활공작소 과탄산소다

생활공작소 과탄산소다

생활공작소 과탄산소다

생활공작소 과탄산소다

백화점 상품 그대로

부드럽게 감기는 말랑말랑 파우치 이불

부드럽게 감기는 말랑말랑 파우치 이불

어려웠던 점

해결방법

학습소감

7월 21일 (네이버 쇼핑 카피캣)

학습내용

category

견고함의 차이 세라믹 식탁 세트

어려웠던 점

해결방법

학습소감

7월 20일 (네이버 메인 카피캣)

학습내용

어려웠던 점

해결방법

학습소감

7월 19일 (네이버 메인 카피캣)

학습내용

🔵웹 개발에 필요한 크롬 확장 프로그램 (카피캣 시 도움이 됨)

🔵네이버 메인 카피캣

뉴스스탠드

어려웠던 점

해결방법

학습소감

7월 16일 (helbak.com)

학습내용

어려웠던 점

해결방법

7월 15일 (키즈가오)

학습내용

어려웠던 점

해결방법

학습소감

7월 14일(키즈가오)

학습내용

forest 1

forest 2

어려웠던 점

해결방법

학습소감

7월 13일 (키즈가오)

학습내용

어려웠던 점

해결방법

학습소감

7월 12일 (미디어쿼리실습)

학습내용

1. menu

2. helbak.com

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

Title

Title

Title

Title

Title

Title

어려웠던 내용

해결방법

학습소감

7월 9일(미디어 쿼리)

학습내용

미디어쿼리 : 반응형,적응형 웹사이트를 만들 때 사용되는 css 코드

width값을 기준

PC Hello World

Mobile Hello World

미디어쿼리 응용

어려웠던 부분

해결방법

학습소감

7월 8일 (애니메이션)

견고함의 차이
세라믹 식탁 세트

positoin : static;