526yeo_eunhye.log

2021_09_03 개발일지

Fri, 03 Sep 2021 06:54:15 GMT

1) 학습한 내용

오늘은 자바스크립트의 제어문 전역/지역변수 스코프 호이스팅 에 대해 알아보았다.

1. IF 조건문 , else 문

/* var a = 50; var b = 40; var c = 60;

if (a < b) { console.log("a는b보다 작다.") }

-거짓이라 아무것도 나타나지 않음. if (a > b) { console.log("a는b보다 작다.") }

a는b보다 작다.

// 거짓일경우는 표시되지 않는다. 참일 경우만 나타남.

// if else문은 거짓일 경우 사용자에게 알려주는 글 ex) 비밀번호가 틀렸을경우 틀렸다고 안내문을 띄워주는것 if (a > b) { console.log("a는 b보다 크다.")} else { console.log("a는 b보다 작다.")} */

// else if 문 - 가장 먼저 나오는 참만 실행시키고 정지 된다. /* if(a > b) { console.log("a는 b보다 크다.")} else if (b > c) { console.log("b는 c보다 크다.")} else if (a < c) { console.log("a는 c보다 작다.")} else if (b < c) { console.log("b는 c보다 작다.")} else { console.log("모든 조건을 만족하지 않는다.")}

// 중첩 if 문 - 중첩되어 나타나는 버그를 없애기 위해 조금더 꼼꼼하게 작성하는 문

if (a !== b) {

if(a > b){
    console.log("a는 b보다 크다.")
} else {
    console.log("a는 b보다 작다.")
}

} else { console.log("a와 b는 같다.") } */

// 거짓이 되는 상황 // false , ""(빈문자) , 0 , null , undefined /* if () { console.log("참!!!") } else { console.log("거짓!!!") } */

2. 삼항 연산자 (한줄 짜리는 삼항 연산자가 가독성이 좋아 많이 사용.)

/* var age = 15;

if (age >= 18) { console.log("성인") } else { console.log("어린이") }

var result = (age >= 18) ? "성인" : "어린이"

console.log(result)

3. 팝업 띄우기

/* var userId = prompt("아이디를 입력해 주세요.") var userPw = prompt("비밀번호를 입력해 주세요.")

console.log(userId) console.log(userPw)

if (userId === "eunhye" && userPw === "12345") { alert ("로그인 되었습니다.") } else { alert("아이디 또는 비밀번호가 틀렸습니다.") }

// 문자에서 숫자 데이터 타입으로 바꾸주기 console.log(userId) console.log(typeof userPw)

if (userId === "eunhye" && parseInt(userPw) === 12345) { alert ("로그인 되었습니다.") } else { alert("아이디 또는 비밀번호가 틀렸습니다.") }*/

4. 전역변수(Global Variable) & 지역변수(Local Variable)

// 과거 전역변수와 지역변수의 구분하는 기준점은 함수 // 전역변수(모든 범위에 영향력을 행사 할 수 있는 법 - 함수 밖에서 생성 & 안과 밖 모두 발휘), // 지역변수(특정 지역에만 정용되는 법 - 함수안에서 생성 및 발휘) /* var globalV = "전역변수"

function func() { var localV = "지역변수"

console.log(globalV)
console.log(localV)

}

// func ()

console.log(globalV) console.log(localV) */

// 현재 최신 JS 는 let, const를 사용해 구분 기준점이 다르다.

/* var gv = "전역변수"

function func() { gv = "지역변수" console.log(gv) }

func()

console.log(gv) / / 위와 같이 var 키워드를 사용하지 안을겨우 변수의 값이 변해 지역변수로 출력된다. 이처럼 var 키워드를 사용하지 않을 겨우 나타나는 것에 대해 주의가 필요하다. */

/* var gv = "전역변수"

if(true) { var lv = "지역변수??" console.log(gv) console.log(lv) }

console.log(gv) console.log(lv)

모두 출력된다. 지역변수가아닌 전역 변수라는의미!
중괄호의 차이가 아니라 함수의 차이라는 의미!
/

// var gv = "전역변수" /* 클라이언트 자바스크립트 console에서도 입력가능, window(브라우저를 제어할때 사용되는객체)를 입력하면 property(key+value)를 볼 수 있는데 모든 전역변수는 이 window에 기본 property로 할당된다. */

5. 스코프 scope

// 스코프 - 변수가 영향력을 발휘할 수 있는 범위 자체 // 전역 스코프 - 모든 범위에 영향력을 발휘 /* var gv = "전역변수"

function func() { console.log(gv) }

func() -전역변수

console.log(gv) -전역변수*/

//지역스코프 - 함수안에서만 발휘 /* function func() { var lv = "지역변수" console.log(lv) } */ // func() -지역변수

// console.log(lv) -not defined

// 함수는 서로의 스코프에 접근할 수 없다!!!!! /* function a(){ var apple ="사과" // console.log (apple) }

function b(){ a() console.log(apple) }

b()

//스코프 체인 (scope chain) /* var a = 10

function func1() {

var b = 20

function func2() {
    var c = 30

    console.log(a + b + c)
}

func2()

}

func1()

//렉시컬 스코프(Lexical Scope) =정적 스코프(Static scope) /* var name = "eunhye" function func1() { console.log(name) }

function func2() { name = "yeo" func1() }

func2() - yeo 서로의 영역에 들어갈 수 없다. */

6. 호이스팅 - 변수 & 함수

// 호이스팅 (끌어 올린다.) //변수 호이스팅 - 순서에 상관 없이 변수가 존재하므로 끌어올린다 생각! /* console.log(a)

var a a = "나는 A다."

var a = "나는 A다." //변수초기화는 끌어 올려지지 않는다.

console.log(a) */

//함수 호이스팅 /* func1()

function func1() { console.log("Func1 함수다.") }

func1() */

/* func2() - not a function -> defined로 지정되어있기때문 var func2 = function () { console.log("Func2 함수다") }

func2() */

7. 메서드

자바 math 공부 참고 페이지 "https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math"

/* var num1 = Math.abs(-3) console.log(num1) // 절대값 반환 하는 math

var num2 = Math.ceil(0.3) console.log(num2) // 올림처리하는 math

var num3 = Math.floor(10.9) console.log(num3) // 내림처리하는 math

var num4 = Math.random() console.log(num4) //0~1 까지 랜덤 math */

// parseInt() , parseFloat() /* var str1 = "20.6" var str2 = "3.14"

var num1 = parseInt(str1) //소수점 이하 버림 var num2 = parseFloat(str2) //실수형태로 변경

console.log(num1) console.log(num2)

2) 학습내용 중 어려웠던 점 및 해결방법

아직 함수에 대한 개념이 확실하게 잡히지 않은것 같아 많이 헷깔리고 어려운것같다. 하나하나 개념에대한 설명을 들었을때는 이해가 가지만 다시 앞으로가 이전에 배웠던 것들과 함께 쓰려면 다시 공부를 해야할 것 같다.

3) 학습소감

나는 공부하는걸 별로 좋아하지 않았지만 그래도 수학은 좋아했다. 문과 였음에도 시험기간에 다른공부는 안하고 수학공부만했었는데... 지금은 하나도 기억이 나지 않는다는것이 문제다 왜그렇게 하나도 배운적이 없는 것처럼 기억이 하나도 나지 않는지.. 정말 기초인데도 단어들이 기억이안난다... 다시 공부를 해야할 것같다.

2021_09_02 개발일지

Thu, 02 Sep 2021 00:55:01 GMT

1) 학습한 내용

오늘은 네이버 모바일버전을 이어서 마무리 해보았다.

1. talk

- html

- css

#talk {

}

#talk ul {
    overflow: hidden;
    /*float을 사용해 자식의 높이값을 부모가 인식을 못하는 상태
    이므로 hidden을 사용해 높이값 생성*/

}

#talk ul li {
    position: relative;
    width: 277px;
    background-color: #ffffff;
    padding: 15px 0 ;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);

    margin-bottom: 12px;
}

#talk ul li:last-child {
    margin-bottom: 0;
}

#talk ul li .icon-arrow img {
    display: inline-block;
    width: 20px;
    height: 16px;
    /*background-color: purple;*/
}

#talk ul li img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

#talk ul a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    padding: 0 20px;

    color: #000000;

}


#talk ul .content-wrap .txt-wrap h3 {
    font-size: 12px;
    font-weight: 600;
}

#talk ul .content-wrap .txt-wrap p {
    font-size: 11px;
    line-height: 16px;
    margin-top: 3px;
}





#talk ul .left-list {
    float: left;

    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
/*한쪽만 동글*/


#talk ul .left-list .icon-arrow-left {

}

#talk ul .left-list .content-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

}

#talk ul .left-list .content-wrap img {
    margin-left: 8px;
}
#talk ul .left-list .content-wrap .txt-wrap h3 {
    color: purple;
}



#talk ul .right-list {
    float: right;

    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
/*한쪽만 동글*/


#talk ul .right-list .icon-arrow-right {

}

#talk ul .right-list .content-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

}

#talk ul .right-list .content-wrap img {
    margin-right: 8px;
}
#talk ul .right-list .content-wrap .txt-wrap h3 {
    color: #0ac666;
}

2. today

- html


            

                
                    오늘의 네이버
                    더보기
                


                
                    

                    
                        

                        
                            클로바 램프 최대 42% 혜택
                            
                                동해물과 백두산이

                                마르고 닳도록하느님이 보우하사

- css

#today{
    padding: 50px 0;
}

#today .container {
    padding: 0 20px;
}

#today .content-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;

    border-top: solid 1px #e0e4ea;

    padding-top: 24px;
    margin-bottom: 10px;

}

#today .content-header h2 {
    font-size: 16px;
    font-weight: bold;
}

#today .content-header a {
    color: #767678;
    font-size: 12px;
    font-weight: 400;
}




#today .content-body {
    overflow: hidden;

    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;

    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);


}
#today .content-body .banner {
    width: 100%;
}

#today .content-body .bottom-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;

    padding: 14px 13px 12px 15px;
}

#today .content-body .bottom-wrap .icon {
    display: block;
    width: 42px;
    height: 42px;
    background-color: purple;
    border-radius: 50%;

    margin-right: 8px;
}

#today .content-body .bottom-wrap .txt-wrap {

}

#today .content-body .bottom-wrap h3 {
    font-size: 13px;
    font-weight:600;
}
#today .content-body .bottom-wrap p {
    font-size: 11px;
    font-weight:400;
    color: #929294;
}

- html

- css

#footer {
    padding: 25px 0 80px;
}

#footer .txt-wrap {
    text-align: center;
}

#footer .txt-wrap a {
    position: relative;

    display: inline-block;
    padding: 3px 9px;
    color: #929294;
    font-size: 11px;
    font-weight: 400;

    letter-spacing: -0.5px;
}

#footer .txt-wrap a:before {
    content: "";
    display: block;
    position: absolute;

    top: 7px;
    left: 0;

    width: 1px;
    height: 10px;
    background-color: #d7dfe7;
}

#footer .txt-wrap .link a:first-child:before{
    content: none;
}
#footer h1 {
    text-align: center;
}

#footer h1 a {

}

#footer h1 a img {
    width: 74px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

어려웠던 내용은 크게 없었으나 마지막 footer 부분에서 before에 content 를 적용해 세로 바를 만드는데, 첫번째와 네번째 앞에는 적용 되지 않도록 다시 줬는데, 다른 것들로 인해 적용이 안되어 계속 나타났다. 그래서 그럴때 사용하는 것이 따로 문단을 나누고 각각의 다른 박스안에 넣어 first-child에게만 주지 않는 방법으로 하니 간단하게 해결이 되었다. 지금까지 했던 방법이 통하지 않을때 사용한 새로운 방법이라 조금더 기억에 남았던 것 같다.

3) 학습소감

하다보면 다양한 문제들이 나타나는데, 이 문제들을 해결할때 틀이 없는것 같다. 당연히 반복적으로 사용되는 해결방법들이 있지만, 그 외에도 다양한 방법들로 해결할 수 있어 창의력과 순발력을 발휘할 수 있는 노력이 필요한것같다. 많이 알수록 다양한 해결방법도 찾아가는 것 같아 더 재밌는 것 같다.

2021_09_01 개발일지

Wed, 01 Sep 2021 01:27:36 GMT

1) 학습한 내용

오늘은 어제 네이버 모바일버전 작업을 이어서 해보았다.

1. now

- html


            NOW.
            
                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                

                
                    
                        
                        Hello Nice to meet you
                    
                
                
                    
                        
                        Hello Nice to meet you
                    
                
            

            
                나우 편성표
                쇼핑 편성표

- css

/* NOW */

#now {
    background-color: white;
    padding: 20px 0 16px;
    margin-top: 10px;
}

#now h2 {
    font-size: 16px;
    font-weight: 900;
    color: red;

    margin-bottom: 14px;
    margin-left: 20px;
}

#now ul {
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

    padding-left: 20px;
}

#now ul li {
    margin-right: 10px;
}

#now ul li:last-child {
    margin-right: 0;
}

#now ul li a {
    color: #000000;
}

#now ul li a img {
    width: 100px;
    height: 138px;

    border-radius: 5px;
}

#now ul li a p {
    font-size: 12px;
    padding-top: 10px;
}

#now .btn-wrap {
    overflow: hidden;
    width: 320px;
    border-radius: 22px;
    background-color: #f5f8fb;

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

    margin: 20px auto 0;
}


#now .btn-wrap a {
    display: block;
    width: 50%;
    height: 44px;
    text-align: center;
    line-height: 44px;

    color: #767678;

}
#now .btn-wrap .btn-now {

}
#now .btn-wrap .btn-shopping {

}

#now .btn-wrap .btn-shopping:before {
    content: "";
    display: block;
    width: 1px;
    height: 14px;


    margin-top: 15px;
    background-color: rgba(125, 127, 133, 0.2);

    vertical-align: top;

    float: left;
}

2.banner-2 & 3

- html

- css

#banner-2{
    background-color: #ffffff;
    margin-top: 10px;
}

#banner-2 .banner-wrap {
    width: 320px;
    margin: 0 auto;
}

#banner-2 .banner-wrap img {
    width: 100%;
}


#banner-3{
    background-color: #ffffff;
    margin-top: 10px;
}

#banner-3 .banner-wrap {
    width: 320px;
    margin: 0 auto;
}

#banner-3 .banner-wrap img {
    width: 100%;
}

- html

AD

- css

#banner-4{
    overflow: hidden;
    background-color: #ffffff;
    margin-top: 10px;
}

#banner-4 .banner-wrap {
    position: relative;
    width: 100%;
    height: 155px;
}

#banner-4 .banner-wrap img {
    position: absolute;
    height: 100%;

    left: 50%;
    transform: translate(-50%);
}
#banner-4 .banner-wrap span {
    position: absolute;
    display: block;
    width: 26px;
    height: 18px;
    background-color: rgba(157, 157, 157, 0.5);
    border-radius: 8%;
    font-size: 13px;
    color: #ffffff;

    text-align: center;
    bottom: 8px;
    right: 18px;
}

4.corona

- html


            
                
                    
                        
                        
                            코로나19
                            국내외 확진 현황
                        
                    
                    
                        
                        
                            선별진료소
                            내 주변 진료소 찾기

- css

#corona {
    background-color: white;
    margin-top: 10px;
}

#corona .container {

}

#corona .corona-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

#corona .corona-wrap a {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

    padding: 20px 0;
}
#corona .corona-wrap .right-corona {
    padding-left: 11px;
}

#corona .corona-wrap .right-corona:before {
    content: "";
    display: block;

    position: absolute;
    width: 1px;
    height: 42px;
    background-color: #efeff0;

    top: 20px;
    left: 0;
}

#corona .corona-wrap img {
    width: 35px;
    margin-right: 8px;

    border-radius: 50%;
}
#corona .corona-wrap .txt-wrap {

}
#corona .corona-wrap .txt-wrap h3 {
    font-size: 14px;
    font-weight: 700;

    color: #000000;
}
#corona .corona-wrap .txt-wrap p {
    font-size: 12px;
    font-weight: 400;
}

5.

- html


            
                
                    
                        
                        
                            
                                더 편리해진 AI 검색 기능

                                네이버앱에서 만나보세요.
                            
                        
                    

                    
                        앱 사용하기

- css

#ai {
    background-color: #ffffff;
    margin-top: 10px;
}

#ai .container {
    padding: 0 20px;

}

#ai .ai-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    padding: 20px 0;
}

#ai .ai-wrap .ai-left {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

#ai .ai-wrap .ai-left img {
    width: 40px;
    height: 40px;
    border-radius: 8px;

    margin-right: 8px;
}

#ai .ai-wrap .ai-left .txt-wrap {

}

#ai .ai-wrap .ai-left .txt-wrap p {
    font-size: 13px;
    color: #424242;
    font-weight: 400;
}





#ai .ai-wrap .ai-right  {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}

#ai .ai-wrap .ai-right span {
    font-size: 12px;
    font-weight: 400;
    color: #03c95b;
}

2) 학습내용 중 어려웠던 점 및 해결방법

오늘은 배너4 부분에서 이미지를 넣는데 위치를 선정하는 것이 어려웠다. 부모의 상속을 받아 브라우저기준이아닌 부모기준으로 위치를 옮기도록 설정을 하는데, left: 50%; transform: translate(-50%); 를 사용하였고, 또 배너안에 광고라는 표시의 span태그도 위치를 선정하는데 img와 같이 position absolute를 사용하여야 했다. 부모인 배너는 relative를 가지게 하여 부모안에서의 위치를 잡아줄 수 있었다.또 display block을 주어 top bottom 과 같은 태그를 사용해 위치를 잡았다. 강사님과 이전에 네이버에서 이런작업을 여러번해주었음에도 혼자서 하려니 헷깔리고 어려웠다. 계속 더 해봐야 할 것같다.

3) 학습소감

조금더 디테일하게 잡아주려니 시간이 더많이 걸리는 것 같다. 좀 느리지만 그래도 조금더 깊이 알게되는 것 같기도해서 좋다 :) 9월1일이다. 오늘도 뽜이팅 !!

2021_08_31 개발일지

Tue, 31 Aug 2021 07:08:55 GMT

1) 학습한 내용

오늘은 네이버 모바일 버전에 대해 카피캣 해보았다.

1. main-nav

- html

- css

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}
ol, ul {
    list-style: none;
}
img {
    vertical-align: middle;
}

a {
    text-decoration: none;
}

button, input  {
    border: none;
    background-color: transparent;
}

/*input {
    border: none;
    background-color: transparent;
}*/
input:focus {
    outline: none;
}

.wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    /*세로스크롤*/
    width: 375px;
    height: 100vh;
    /*높이값이 언제나100% viewport heigt*/
    background-color: #eaeef3;

    margin: 0 auto;
}


/* main */
#main-nav{
    overflow: hidden;
    background-color: rgb(7, 189, 120);
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;

}

#main-nav ul {
    overflow-x: auto;
    display: flex;
    align-items: center;

    white-space: nowrap;
}

#main-nav ul {
    /*-ms-overvlow-style: none;*/
    /*explorer , edge 에 영향 */
    /*scrollbar-width:  none;*/
    /*fire fox*/
}

#main-nav ul::-webkit-scrollbar{
    /* 크롬 사파리 오페라 */
    /*세가지 코드 모드 스크롤에 미치는 속성*/
    /*display: none;*/
}


#main-nav ul li {
    height: 54px;
    text-align: center;
}

#main-nav ul li a {
    height: 100%;
    line-height: 54px;

    color: rgb(141, 223 ,184);
    padding: 0 10px;

}

2. header

- html

- css

/*header*/
#header {
    background-color: #f4f6f8;
    padding: 120px 0 80px;
}

#header .search-wrap {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;


    position: relative;

    width: 333px;
    border: solid 1px rgb(7, 189, 120);
    border-radius: 23px;

    margin: 0 auto 24px;

    background-color: white;

}
#header .search-wrap .link-logo{
    display: block;
    width: 40px;
    height: 40px;
     background-image: url(../img/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

}
#header .search-wrap input{
    width: calc(100% - 78px);
    height: 22px;

    font-size: 16px;
    padding: -1px 17px;

}
#header .search-wrap .link-voice{
    display: block;
    width: 30px;
    height: 30px;
    /* background-color: green; */
    background-image: url(../img/voice.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


#header .header-nav {
    width: 316px;
    margin: 0 auto;
}

#header .header-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;

    width: 100%;

}

#header .header-nav  li {
    width: 25%;
    padding-top: 12px ;
}

#header .header-nav a {
    display: block;
    width: 100%;

    text-align: center;
}

#header .header-nav .icon img {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    /*border: solid 1px grey;*/
    background-color: #ffffff;

}

#header .header-nav span {
    display: block;

    font-size: 9px;
    color: #1e1e23;

    /*margin-top: 5px;*/

}

- html

- css

#banner-1{
    background-color: #f4f6f8;
}

#banner-1 .banner-wrap {
    width: 100%;
    margin: 0 auto;
}

#banner-1 .banner-wrap img {
    width: 100%;
}

4. weather

- html



            

                
                    
                        
                        
                            22° 대전
                            미세 보통 · 초미세 보통
                        
                    


                    
                        내 위치찾기
                        
                            
                        
                    
                

                
                    
                        위치 찾기를 눌러 현 위치의 시간대별·주간날씨와

                        미세먼지 예보를 여기에서 바로 보세요

- css

#weather {
    background-color: #ffffff;
}

#weather .container {
    padding: 0 20px;
}


#weather .weather-top{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    padding: 22px 0 16px;

}
#weather .weather-top .weather-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

}

#weather .weather-top .weather-left img {
    width: 30px;
    height: 30px;
    border-radius: 50%;

    margin-right: 15px;
}

#weather .weather-top .weather-left .txt-wrap{

}
#weather .weather-top .weather-left .txt-wrap h3 {
    font-size: 14px;
}

#weather .weather-top .weather-left .txt-wrap p {
    font-size: 12px;
}
#weather .weather-top .weather-left .txt-wrap p span {
    color: #00d01d;
}




#weather .weather-top .weather-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}

#weather .weather-top .weather-right span{
    font-size: 12px;
    margin-right: 2px;
}

#weather .weather-top .weather-right .icon img{
    display: inline-block;
    width: 20px;
    height: 20px;
    /*background-color: blue;*/
    border-radius: 50%;

    color: #767678;
}


#weather .weather-bottom {
    padding: 6px 0 30px;
}

#weather .weather-bottom p {
    color: #767678;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.5px;

    text-align: center;

}

2) 학습내용 중 어려웠던 점 및 해결방법

어려웠던 점이라고 하면 상단 네비부분에 원래는 자바스크립트로 가로스크롤이 생기지 않고도 옆으로 넘기는 기능을 사용하는 것인데, 대신에 우리는 스크롤이 생기되 없앨 수 있는 작업을 하였다. 그러나 키보드로 옆으로 페이지 이동이 가능해야 하므로 잠깐 작업해보고 다시 없앴다. 이런부분의 자바스크립트를 배워 얼른 완성에 가까운 페이지를 만들어야겠다.

3) 학습소감

오늘은 모바일 작업을 해보았다. 오랜만에 모바일 작업을 해서 좀더 집중해서 할 수 있었다. 특히나 네이버에 있는 그대로의 아이콘들을 사용하고싶었으나 몇몇은 가지고 왔지만 몇개는 다른 것을 사용해 아쉬웠다. 그래도 많은부분이 얼추 비슷하게 된 것 같아. 기분이 좋았다!!! 또 오늘은 월말평가가 있던날, 조금의 문제가 있어 다시 몇번을 치고 제출을 하느라 시간이 조금더 소비가 되었다. 그래도 무사히 마쳐서 다행이다 :) 남은 9월도 뽜이팅 해보자!!!

2021_08_30 개발일지

Mon, 30 Aug 2021 06:45:17 GMT

1) 학습한 내용

오늘은 유튜브 탐색페이지를 카피캣해보았다. 유튜브 메인페이지와 기본적인 top,left nav 영역은 같으므로 메인영역만 디자인해보았다.

1. explore-nav

- html

- css

/* 탐색 페이지 */
.explore-container {
    width: 1280px;
    margin: 0 auto;
}

#explore-nav {
    padding: 12px 0 8px;
}

#explore-nav ul {

}

#explore-nav li {
    overflow: hidden;

    width: 210px;
    height: 116px;
}

#explore-nav li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: grey;
    border-radius: 5px;

    padding: 20px;
}

#explore-nav li a:hover {
    background-color: darkgrey;
}

#explore-nav li .icon img{
    display: block;
    width: 32px;
    height: 32px;
    /*background-color: red;*/

    margin-bottom: 25px;
}

#explore-nav li span {
    color: #ffffff;
    font-size: 16px;
}

2. popular-section

- html



                        인기 급상승 동영상

                        
                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록
                                    

                                
                            

                            
                                

                                    
                                        
                                        10:00
                                    

                                    
                                        기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간
                                        
                                            기발자 코딩채널
                                            조회수 435만회
                                            1일전
                                        
                                        동해물과 백두산이 마르고 닳도록

- css

#popular-section {
    margin-top: 24px;
}

#popular-section h2 {
    font-size: 20px;
    color: #ffffff;
}

#popular-section ul {
    margin-top: 24px;
}

#popular-section li {
    margin-bottom: 16px;
}

#popular-section a {
    align-items: flex-start;
}

#popular-section li .image-wrap {
    position: relative;
    width: 246px;
    height: 148px;
    margin-right: 16px;
}

#popular-section li .image-wrap img {
    width: 100%;
    height: 100%;
}

#popular-section li .image-wrap .time {
    position: absolute;

    padding: 4px 8px 2px;
    background-color: #212121;
    color: #ffffff;
    font-size: 12px;
    border-radius: 5px;

    bottom: 4px;
    right: 4px;
}

#popular-section li .txt-wrap {
    width: 600px;
}

#popular-section li .txt-wrap h3 {
    font-size: 20px;    
    color: #ffffff;
}

#popular-section li .txt-wrap .video-info {
    color: #aaaaaa;
    font-size: 14px;
}

#popular-section li .txt-wrap .video-info span:after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #aaaaaa;
    border-radius: 50%;

    margin: 6px 4px 0 8px;
    vertical-align: top;
}

#popular-section li .txt-wrap .video-info span:last-child:after {
    content: none;
}

#popular-section li .txt-wrap .video-info .channel {

}

#popular-section li .txt-wrap .video-info .count {

}

#popular-section li .txt-wrap .video-info .date {

}

#popular-section li .txt-wrap .description {
    padding-top: 8px;

    font-size: 14px;
    color: #aaaaaa;
}

2. 학습내용 중 어려웠던 점 및 해결방법

voice 아이콘을 삽입하는데 아이콘 자체의 디자인이 투명배경에 검정색으로 되어있었는데, 흰색인걸 찾고 싶었지만 잘 나오지않아 css 코드를 사용하여 투명바탕에 흰색으로 바꾸는 코드를 주어 바꿀 수 있었다. filter 코드로 처음 사용해보는 코드였는데, 다행히 잘 적용하여 원하는대로 나타낼 수 있었다.

3) 학습소감

매일 그냥 투명배경의 이미지만 찾아 사용을 하다가 이번엔 무료아이콘페이지를 찾아 거기서 받아서 사용해보았는데 확실히 더 깔끔하게 디자인을 적용할 수 있고 다양한 아이콘들이 있어 원하는대로 사용할 수 있는 장점이 있었다. 내일은 다시 돌아온 월말 평가 날이다 어떤 내용들이 나올지.. 긴장된다. 꼭 통과할 수 있기를 :)

2021_08_ 27개발일지

Fri, 27 Aug 2021 01:17:01 GMT

1) 학습한 내용

오늘은 유튜브 서브페이지를 만들어보았다.

top 과 left 부분은 메인페이지와 동일

- html

- css

.channel-container {
    width: 1284px;
    margin: 0 auto;
}

#youtube-channel-content #channel-banner {
    width: 100%;
    height: 170px;
    background-color: darkblue;
}

#youtube-channel-content #channel-header {
    padding: 16px 0 4px;
    background-color: rgba(24, 24, 24, 1);
}

#youtube-channel-content #channel-header .channel-profile-wrap {

}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile {

}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile img {
    width: 70px;
    height: 70px;
    border-radius: 50%;

    margin-right: 24px;
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap {

}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
    color: #aaaaaa;
    font-size: 12px;
    margin-top: 5px;
}

#youtube-channel-content #channel-header .channel-profile-wrap .btn-subscribe {
    padding: 10px 20px;
    background-color: red;
    border-radius: 5px;

    color: #ffffff;
    font-size: 11px;
}


#channel-nav {
    background-color: rgba(24, 24, 24, 1);
}

#channel-nav ul {

}

#channel-nav li {

}

#channel-nav li a {
    display: block;
    height: 47px;

    padding: 0 32px;

    line-height: 47px;

    border-bottom: solid 2px transparent;
    color: #aaaaaa;
}

#channel-nav li a:hover {
    color: #ffffff;
}

#channel-nav li a.active {
    border-bottom: solid 2px #ffffff;
    color: #ffffff;
}

2. channel-content

- html


                    


                        

                            
                                
                                실시간
                            

                            
                                기발자 실시간 라이브 코딩 방송프로그램 24시간
                                기발자 코딩채널 41명 시청중
                                
                                    동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                
                            

                        



                        

                            
                                코딩하는 사람들
                                
                                    
                                    모두 재생
                                
                            

                            
                                
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                
                            

                        

                        

                            
                                코딩하는 사람들
                                
                                    
                                    모두 재생
                                
                            

                            
                                
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                
                            

                        

                        

                            
                                코딩하는 사람들
                                
                                    
                                    모두 재생
                                
                            

                            
                                
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                
                            

                        

                        

                            
                                코딩하는 사람들
                                
                                    
                                    모두 재생
                                
                            

                            
                                
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                
                            

                        

                        

                            
                                코딩하는 사람들
                                
                                    
                                    모두 재생
                                
                            

                            
                                
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                00:20
                                            
                                        

                                        
                                            
                                                
                                                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                                
                                            

                                            MBC 엔터테이먼트

                                            
                                                조회수 71만회
                                                6개월 전

- css


#channel-recent {
    align-items: flex-start;
    padding: 24px 0;

    border-bottom: solid 1px grey;
}

#channel-recent .thumbnail-wrap{
    position: relative;
    width: 246px;
    height: 148px;
    margin-right: 16px;
}

#channel-recent .thumbnail-wrap img {
    width: 100%;
    height: 100%;
}

#channel-recent .thumbnail-wrap .mark {
    position: absolute;
    background-color: red;
    font-size: 8px;
    color: #ffffff;
    padding: 4px 8px 2px;
    border-radius: 5px;

    right: 4px;
    bottom: 4px;
}

#channel-recent .txt-wrap {
    width: 600px;
}

#channel-recent .txt-wrap h2 {
    font-size: 18px;    
    color: #ffffff;
    font-weight: 400;
}

#channel-recent .txt-wrap .channel {
    font-size: 10px;
    color: #aaaaaa;
}

#channel-recent .txt-wrap .description{
    padding-top: 8px;
    font-size: 10px;
    color: #aaaaaa;
    line-height: 1.45;
}



.channel-playlists-section {
    padding: 24px 0;
    border-bottom: solid 1px grey;
}

.channel-playlists-section .playlists-header {

}

.channel-playlists-section .playlists-header h3 {
    font-size: 16px;
    color: #ffffff;
    margin-right: 20px;
}

.channel-playlists-section .playlists-header .play-wrap {
    width: 85px;
}

.channel-playlists-section .playlists-header .play-wrap .icon-play {
    width: 24px;
    height: 24px;
    background-color: #ffffff;
}

.channel-playlists-section .playlists-header .play-wrap .play-link {
    font-size: 12px;
    color: #aaaaaa;
    margin-left: 8px;
}

.channel-playlists-section .playlists-body {
    margin-top: 24px;
}

.channel-playlists-section .playlists-body ul {

}

.channel-playlists-section .playlists-body li {
    width: 210px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail {
    width: 100%;
    height: 118px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail img {
    width: 100%;
    height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail .time {
    position: absolute;

    font-size: 10px;
    color: #ffffff;
    background-color: #000000;
    padding: 4px 8px 2px;
    border-radius: 5px;

    bottom: 4px;
    right: 4px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap {
    margin-top: 8px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
    font-size: 13px;
    margin-bottom: 6px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
    color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p {
    font-size: 10px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a {
    color: #aaaaaa;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom {

}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .count,
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .date {
    font-size: 10px;
    color: #aaaaaa;    
}

2) 학습내용 중 어려웠던 점 및 해결방법

오늘은 유튜브 서브 페이지를 만들어 보았는데, 확실히 화면사이즈가 달라 x축 스크롤이 생기지 않고는 똑같이 하기가 어려웠다. 나의 컴퓨터로 유튜브 페이지를 들어가도 다르게 구성이 되었다. 왼쪽 메뉴버튼이 아예 접혀있는 형태로 나오고 오른쪽 페이지가 틀에 맞게 들어가있었다. 그래서 이번에는 일단 강사님의 레이아웃과 비슷하게 만들어보았는데, 다음번에는 내컴퓨터에서 보여지는 유튜브 페이지를 만들어보아야겠다.

3) 학습소감

요즘은 자습범위 까지 듣기위해 조금더 당겨서 듣고 있는데, 아직도 많은 부분이 남아있다. 특히 자바는 이번달 말까지는 아니더라도 꼭 다들어야겠다. 오늘은 불금이다!! 하지만 비도 오고 날씨도 우중충~ 하면 할 수록 어려워지는 코딩과 같은마음이랄까............ 그래도 뽜이팅!!

2021_08_ 26개발일지

Thu, 26 Aug 2021 02:26:05 GMT

1) 학습한 내용

오늘은 유튜브 왼쪽 영역과 메인 영역을 이어서 작업해보았다.

1. youtube-left-nav

- html


            
                
                    
                        
                            
                                
                                    
                                    홈
                                
                            
                            
                                
                                    
                                    탐색
                                
                            
                            
                                
                                    
                                    구독
                                
                            
                        
                    
                
                

                    
                        
                            
                                
                                    
                                    보관함
                                
                            
                            
                                
                                    
                                    시청 기록
                                
                            
                        
                    

                

                

                    
                        
                            로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수 있습니다.
                            로그인
                        
                    

                
                

                    
                        인기 YOUTUBE
                    

                    
                        
                            
                                
                                    
                                    음악
                                
                            
                            
                                
                                    
                                    스포츠
                                
                            
                            
                                
                                    
                                    게임
                                
                            
                            
                                
                                    
                                    영화
                                
                            
                            
                                
                                    
                                    뉴스
                                
                            
                            
                                
                                    
                                    실시간
                                
                            
                            
                                
                                    
                                    학습
                                
                            
                            
                                
                                    
                                    360° 동영상
                                
                            
                        
                    

                

                

                    
                        
                            
                                
                                    
                                    채널 탐색
                                
                            
                        
                    

                

                

                    
                        YOUTBUE 더보기
                    

                    
                        
                            
                                
                                    
                                    YouTube Premium
                                
                            
                            
                                
                                    
                                    실시간
                                
                            
                        
                    

                

                

                    
                        
                            
                                
                                    
                                    설정
                                
                            
                            
                                
                                    
                                    신고 기록
                                
                            
                            
                                
                                    
                                    고객센터
                                
                            
                            
                                
                                    
                                    의견 보내기
                                
                            
                        
                    

                

                
                    
                        정보
                        보도자료
                        저작권
                        문의하기
                        크리에이터
                        광고
                        개발자
                    
                    
                        약관
                        개인정보처리방침
                        정책 및 안전
                        Youtube 자동의 원리
                        새로운 기능 테스트하기
                    
                    
                        Nice 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

- css

/* 왼쪽 사이드 메뉴  */
#youtube-left-content {
    position: absolute;
    /*글자가 넘어가면 스크롤 뒤로 간다.*/
    width: 225px;
    height: 100%;
    /*background-color: grey;*/

}

#youtube-left-content .nav-section {
    padding: 8px 0;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

#youtube-left-content .nav-section .nav-title-wrap {
    padding: 8px 24px;
}

#youtube-left-content .nav-section .nav-title-wrap h2 {
    color: #aaaaaa;
    font-size: 13px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body {

}

#youtube-left-content .nav-section .nav-body ul {

}

#youtube-left-content .nav-section .nav-body li {

}

#youtube-left-content .nav-section .nav-body li a {
    height: 40px;
    padding: 0 24px;
}

#youtube-left-content .nav-section .nav-body li .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    margin-right: 24px;
}
#youtube-left-content .nav-section .nav-body li span {
    font-size: 12px;
    color: #ffffff;
}

#youtube-left-content .nav-section .nav-body .txt-wrap {
    padding: 0 24px;
}

#youtube-left-content .nav-section .nav-body .txt-wrap p {
    color: #ffffff;
    font-weight: 400;
    font-size: 12px;
}

#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
    display: inline-block;

    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;
    font-size: 13px;
    color: #3ea6ff;

    margin-top: 12px;
}

#youtube-left-content #youtube-footer {
    padding-bottom: 150px;
}

#youtube-left-content #youtube-footer .txt-wrap {
    padding: 12px 24px 0;
}

#youtube-left-content #youtube-footer .txt-wrap a {
    margin-right: 8px;

    color: #aaaaaa;
    font-size: 11px;
    font-weight: 500;

    word-break: keep-all;
    /*단어를 기준으로 줄바꿈하기*/
}

#youtube-left-content #youtube-footer .txt-wrap p {
    font-size: 11px;
    color: #717171;
    font-weight: 400;
}

2. youtube-main

- html


            
                
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            
                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전
                                
                            

                        
                    
                    
                        
                            
                                
                                00:20
                            
                        

                        
                            

                                
                            

                            
                                
                                    
                                        [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                                    
                                

                                MBC 엔터테이먼트

                                
                                    조회수 71만회
                                    6개월 전

- css

/* 유튜브 메인  */
#youtube-main {
    position: absolute;
    left: 240px;
    top: 56px;
    right: 0;
    bottom: 0;
    background-color: #303030;
}
#youtube-main-content {
    width: 100%;
    height: 100%;
    padding: 24px;
}

#youtube-main-content ul {
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: 100%;
}

#youtube-main-content ul li {
    width: 24%;
    background-color: #212121;
    margin-bottom: 40px;
}

#youtube-main-content ul li .video-thumbnail {
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail img {
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail .time {
    position: absolute;

    background-color: rgba(0, 0, 0, 0.8);
    font-size: 10px;
    color: #ffffff;

    padding: 3px 4px;

    bottom: 4px;
    right: 4px;
}

#youtube-main-content ul li .video-txt-wrap {
    align-items: flex-start;
    margin-top: 12px;
}

#youtube-main-content ul li .video-txt-wrap .image-link {
    display: block;
    width: 36px;
    height: 36px;

    margin-right: 12px;
}

#youtube-main-content ul li .video-txt-wrap .image-link img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#youtube-main-content ul li .video-txt-wrap .txt {
    width: calc(100% - 48px);
}

#youtube-main-content ul li .video-txt-wrap .txt h3 {
    font-size: 13px;
    margin-bottom: 6px;
}

#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
    color: #ffffff;
}

#youtube-main-content ul li .video-txt-wrap .txt p {
    font-size: 10px;
}

#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
    color: #aaaaaa;
}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom {

}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
    font-size: 10px;
    color: #aaaaaa;
}

2) 학습내용 중 어려웠던 점 및 해결방법

메인부분을 하던중 강의가 갑자기 끊겨 뒷부분은 강사님의 css 코드를 보고 해결했다. 또 강사님의 컴퓨터는 크기가 맞아서 left영역에 z-index를 사용할 일이없었지만 나는 가로 스크롤이 생겨 메인부분을 가장밑으로 배치하여주었다. 이 스크롤이 생기지 않도록 크기를 다시맞추어 주는데 시간이 조금걸렸다.

3) 학습소감

점점 8월이 끝나가니 마음도 점점 촉박해지는것 같다. 지금내가 잘하고 있는건지 이정도만 알아도 취업이 가능할지 어떤걸 더공부를 해야할지 감이 안잡힌다 할 수록 더 어려운것같다. 다시 계획을 잡아봐야겠다!!

2021_08_25 개발일지

Wed, 25 Aug 2021 03:08:08 GMT

1) 학습한 내용

오늘은 유튜브를 카피캣해보았다.

1. 구도 잡기

- html




    
    유튜브 튜토리얼

- css

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #212121;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

button {
    background-color: transparent;
    border: none;
}

input {
    outline: none;
    border: none;
}

input:focus {
    outline: none;
}

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1320px;
}


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

.flex-align-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
}

.flex-align-end {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
}
/* 상단 메뉴 */
#youtube-top-nav {
    position: fixed;

    width: 100%;
    height: 56px;
    background-color: #303030;

    padding: 0 16px;

    /*z-index: 99999;*/
}
#youtube-left-nav {
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;

    width: 240px;
    background-color: #303030;

    top: 56px;
    left: 0;
    bottom: 0;
}

/* 왼쪽 사이드 메뉴  */
#youtube-left-content {
    position: absolute;
    /*글자가 넘어가면 스크롤 뒤로 간다.*/
    width: 225px;
    height: 100%;
    background-color: grey;
}

/* 유튜브 메인  */
#youtube-main {
    position: absolute;
    left: 240px;
    top: 56px;
    right: 0;
    bottom: 0;
    background-color: grey;
}

2. youtube-top-nav

- html

- css

/* 상단 메뉴 */
#youtube-top-nav {
    position: fixed;

    width: 100%;
    height: 56px;
    background-color: #303030;

    padding: 0 16px;

    /*z-index: 99999;*/
}
#youtube-top-nav .nav-left {
    height: 56px;
}

#youtube-top-nav .nav-left .btn-menu {
    width: 24px;
    height: 24px;
    background-color: white;
}

#youtube-top-nav .nav-left h1 {
    margin-left: 16px;
}

#youtube-top-nav .nav-left h1 a {

}

#youtube-top-nav .nav-left h1 img {
    width: 90px;
    height: 30px;
}

#youtube-top-nav .nav-right {
    height: 56px;
}

#youtube-top-nav .nav-right .btn-menu {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
    background-color: grey;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
    background-color: yellow;
}

#youtube-top-nav .nav-right .btn-login {
    display: inline-block;
    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;
    font-size: 12px;

    color: #3ea6ff;
}

#youtube-top-nav .nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#youtube-top-nav .nav-center .search-wrap {
    width: 600px;
    height: 30px;
}

#youtube-top-nav .nav-center .search-wrap input {
    width: calc(100% - 65px);
    height: 30px;
    border: solid 1px grey;
    background-color: #212121;

    color: #ffffff;
    padding: 2px 6px;

    font-size: 12px;
}

#youtube-top-nav .nav-center .search-wrap .btn-search {
    width: 65px;
    height: 30px;
    border: solid 1px grey;
    background-color: grey;
}

#youtube-top-nav .nav-center .btn-voice {
    width: 24px;
    height: 24px;
    /*background-color: blue;*/

    margin-left: 16px;
}
#youtube-top-nav .nav-center .btn-voice img {
    width: 24px;
    height: 24px;

    border-radius: 50%;
    background-color: black;
    color: wite;

}
#youtube-top-nav .nav-center .search-wrap .btn-search img {
    width: 20px;
    height: 20px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

학습을 하면서 아이콘같은것들을 똑같이 넣고 싶었지만, 흰색에 배경이 투명한 것을 찾아 넣는게 조금 어려우었던것같다. 그래서 배경색을 .. 가져온 아이콘 배경색으로 바꿔 버렸다..... 투명한 배경에 흰색글씨를 가지고오고싶었는데! 개발일지를 끝내고 조금 더 찾아 볼 수 있도록 해야겠다.

3) 학습소감

같이 배우는 사람들과 함께 소통하는 공간이 있는데, 그곳의 질의응답부분을 보면 많은사람들이 참 열심히 하고 있다고 생각된다, 또 내가 모르는 부분들도 질문을 하고 벌써 다른 페이지를 만들어가며 열심히 하시는 분들이 있었다. 뭔가 너무 뒤쳐지고 있다는 생각이 들었다. 그래도 주눅들지말고 천천히.. 내 페이스에 맞게 끝까지만 하자고 생각했다.

2021_08_24개발일지

Tue, 24 Aug 2021 01:37:00 GMT

1) 학습한 내용

오늘은 reset css , normalize css , 변수에 대해서 알아보았다.

- html




    
     CSS 추가설명

    
    
    
    



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


    
        Header P
    

    
        Footer P

1. reset css

- css


/*완전히 디자인을 초기화 시킬때 사용*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

reset css 는 디폴트값으로 적용된 디자인 모두를 초기화 시키는 것을 말한다. 참고 페이지 "https://meyerweb.com/eric/tools/css/reset"

2. normalize css

- css

/*https://necolas.github.io/normalize.css/*/
/*브라우저간 디자인의 오차를 줄일때 사용 */



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

Normalize css 는 브라우저간 디자인의 오차를 줄일때 사용하며 모든 디자인이 초기화 되는 것은 아니지만 기본적인 것들은 초기화가 된다. 또 취향에 따라 다르긴하지만 reset css 보다 자주 사용된다고 한다. 참고 페이지 "https://necolas.github.io/normalize.css/"

3. 변수와 변수의 값

- css

:root {
    --black: #18181a;
    --brand-color: #9147ff;
    --font-size-40: 40px;
}
/*:root 안에 작성된 변수들은 
어디서든(모든영역) 다 가져다 사용가능하다.*/
h1 {
    background-color: var(--black);
    font-size: var(--font-size-40);
    color: var(--brand-color);
}

/* {변수 : 값} 
변수를 사용하는이유
1. 일괄적인 수정이 필요할때 변수의 값만 조정해주면 된다.
2. 변수의 명을 직관적으로 지정해 쉽게 찾을 수 있다
 */



#intro {
    --font-color:  blue;
    --font-size: 50px;
}

#intro p {
    font-size: var(--font-size);
    color: var(--font-color);
}

#footer p {
    font-size: var(--font-size);
    color: var(--font-color);
}

/*영향력을 발휘 하는 부분을 css 선택자로 지정을해서 
사용할 수 도 있다 - 제한을 두는것*/

변수라는 박스 안에 변수의 값을 집어 넣어 사용하는 것을 말한다. 변수의 명은 언제든지 바꿀수 있으며, 보기좋게 지정할 수 있는 장점이 있다. 또 변수의 값은 일괄적인 수정이 필요할 경우 변수의 값만 수정을 하면 사용한 모든 변수들이 한번에 변경되는 장점이 있다.

변수는 모든 영역에서 사용가능한 변수 (:root) 와 제한된 영역에서만 사용가능한 변수 ( ex) #intro ) 등이 있다.

2) 학습내용 중 어려웠던 점 및 해결방법

오늘은 크게 실습보다는 학습 위주의 강의라서 크게 어려웠던 점은 없었다.

3) 학습소감

오늘 변수라는 것을 배우니 뭔가 아직도 배워야할 어마무시한것들이 많을것 같은 느낌이다. 크게 어렵지는 않은 내용이었으나 뭔가 이와같이 내가모르는 내용들이 아주 많이 남아있을 것만 같다. 무서우어어어.. 그래도 조급해하지말고 끝까지 뽜이팅 : )

2021_08_ 23개발일지

Mon, 23 Aug 2021 04:43:09 GMT

1) 학습한 내용

오늘은 트위치 메인 오른쪽 영역을 마무리 해보았다.

1. video section

- html


                    
                        취향 저격 생방송 채널
                    

                    
                        
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                        
                    

                    
                


                
                    
                        추천 Just Chatting 채널
                    

                    
                        
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                        
                    

                    
                

                
                    
                        모두의 후원 열차에 탑승해 주세요!
                    

                    
                        
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                        
                    

                    
                

                
                    
                        추천 League of legeneds 채널
                    

                    
                        
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                        
                    

                    
                


                
                    
                        추천 StarCraft 채널
                    

                    
                        
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차

- css

/* 비디오 섹션 */
.video-section {
    position: relative;
    padding-top: 60px;
    padding-bottom: 40px;

    border-bottom: solid 1px grey;
}

.video-section .title-wrap {
    padding-bottom: 10px;
}

.video-section .title-wrap h2 {
    font-size: 18px;
}

.video-section .video-wrap {

}

.video-section .video-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.video-section .video-wrap li {
    width: 333px;
}

.video-section .video-wrap a {

}

.video-section .video-wrap .image-wrap{
    position: relative;
    width: 333px;
    height: 186px;
    background-color: #9147ff;
}

.video-section .video-wrap .image-wrap img {
    width: 100%;
    height: 100%;

    transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover img {
    transform: translate(10px, -10px);
}

.video-section .video-wrap .image-wrap .mark{
    position: absolute;

    top: 15px;
    left: 15px;

    border-radius: 5px;
    background-color: red;

    padding: 2px 4px 0;

    font-size: 13px;
}
.video-section .video-wrap .video-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

    margin-top: 10px;
}

.video-section .video-wrap .video-bottom .thumbnail {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.video-section .video-wrap .video-bottom .txt-wrap {
    width: calc(100% - 50px);
}

.video-section .video-wrap .video-bottom .txt-wrap .source,
.video-section .video-wrap .video-bottom .txt-wrap .game {
    font-size: 14px;    
    color: grey;
}

.video-section .btn-more {
    position: absolute;

    width: 100px;
    height: 30px;
    background-color: #0e0e10;

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

    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
}
.video-section .btn-more:hover {
    cursor: pointer;
}

2. cateogry-section

- html


                    
                        취향 저격 카테고리
                    

                    
                        
                            
                                
                                    

                                    
                                        Apex Legends
                                        시청자 4.1만명

                                        
                                            e스포츠
                                            한국어
                                        
                                    
                                
                            
                            
                                
                                    

                                    
                                        Apex Legends
                                        시청자 4.1만명

                                        
                                            e스포츠
                                            한국어
                                        
                                    
                                
                            
                            
                                
                                    

                                    
                                        Apex Legends
                                        시청자 4.1만명

                                        
                                            e스포츠
                                            한국어
                                        
                                    
                                
                            
                            
                                
                                    

                                    
                                        Apex Legends
                                        시청자 4.1만명

                                        
                                            e스포츠
                                            한국어
                                        
                                    
                                
                            
                            
                                
                                    

                                    
                                        Apex Legends
                                        시청자 4.1만명

                                        
                                            e스포츠
                                            한국어
                                        
                                    
                                
                            
                            
                                
                                    

                                    
                                        Apex Legends
                                        시청자 4.1만명

                                        
                                            e스포츠
                                            한국어

- css

.cateogry-section {
    padding-top: 60px;
    padding-bottom: 40px;
}

.cateogry-section .title-wrap {
    padding-bottom: 10px;
}

.cateogry-section .title-wrap h2 {
    font-size: 18px;
}

.cateogry-section .category-wrap {

}

.cateogry-section .category-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.cateogry-section .category-wrap li {
    width: 152px;
}

.cateogry-section .category-wrap img {
    width: 152px;
    height: 203px;
    margin-bottom: 10px;
}

.cateogry-section .category-wrap .txt-wrap {

}

.cateogry-section .category-wrap .txt-wrap .count {
    font-size: 14px;
    color: grey;
}

- html


                    
                        상호명: 동해물과 백두산이 마르고 닳도록 하느님이 보우하사
                        상호명: 동해물과 백두산이 마르고 닳도록
                        상호명: 동해물과 백두산이 마르고 닳도록 하느님이보우하사 우리나라만세
                        상호명: 동해물과 백두산이 마르고 닳도록
                    
                    
                        
                            지원팀에 문의
                            판매약관
                            사업자 정보

- css

footer {
    width: 100%;
    padding: 80px 0 150px;
}

footer .txt-wrap {
    text-align: center;
}

footer .txt-wrap p {
    font-size: 13px;
}

footer .footer-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: stretch;

    margin-top: 20px;

    /*footer 안에서 중앙정렬*/
}

footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;

    /*x축 정렬*/
}

footer ul li {

}

footer ul li a {
    color: grey;
    font-size: 14px;
}

footer ul li a:after {
    content: '';
    display: inline-block;

    width: 1px;
    height: 12px;
    background-color: grey;

    margin: 0 8px;

    position: relative;
    top: 1px;
}

footer ul li:last-child a:after {
    content: none;
}

2) 학습내용 중 어려웠던 점 및 해결방법

크기가 맞지 않아 내컴퓨터 브라우저 크기에 맞는 트위치 페이지의 레이아웃으로 작업을 하였다. 그러고 보니 왼쪽영역의 fixed 되어 있는 부분의 위로 오른쪽 영역이 x축스크롤이 되어 왼쪽 영역에 z-index를 주어 뒤로 들어 갈 수 있도록 하였다. 또 원래 페이지에 오른쪽 부분에 양옆으로 마진 값이 들어가있어서 똑같이 해주었더니 레이아웃이 틀어져 이미지 크기를 줄이고 페이지에 맞게 갯수를 정리하였더니 틀어지지 않고 잘 보여질 수 있었다.

3) 학습소감

벌써 8월의 마지막주이다. 이렇게 점점 혼자하는 실습이 끝나가고 팀으로 하는 프로젝트가 진행된다고 하니 무섭다... 어떤게 주어질까 내역할을 잘해낼 수 있을지 걱정이 된다. 어떻게든 폐가 되지 않도록 열심히 해봐야겠다!! 이번주도 뽜이팅 :)

2021_08_20 개발일지

Fri, 20 Aug 2021 01:56:40 GMT

1) 학습한 내용

오늘은 트위치 왼쪽 부분을 마무리 하고 오른쪽 영역을 조금 작업해보았다.

1. 왼쪽 부분 full height & 스크롤

- css

.left-area {
    position: fixed;
    width: 240px;
    background-color: #202024;

    top: 50px;
    bottom: 0;
    /*항상 full height 를 유지하고싶을때 순수 3차원 포지션이 적용되어있을때
    사용가능하다.*/
    left: 0;
    overflow-y: auto;
    /*스크롤 생성*/

항상 full height로 만들고 싶을 때, height를 조정하는 것이 아닌 top과 bottom의 값을 사용하여 강제적으로 늘려주는 것으로 화면의 높이를 고정시킬 수 도 있다. 하지만 순수 3차원 포지션이 적용되었을 때만 사용가능하다.




jquery scrollbar
/https://gromo.github.io/jquery.scrollbar/demo/basic.html/
적용

2. content-banner

- html

            
                
                    
                        Hello
                        Nice to meet you

- css

/*right*/


.content {
    overflow-y: auto;
    /*전체적인 스크롤이아닌 컨텐츠 내부에서만 스크롤 발생*/
    position: absolute;

    /*background-color: ivory;*/

    top: 50px;
    left: 240px;

      bottom: 0;
      right: 0;
      /*겹치는 부분이 없도록 공간만들어주기*/
}

.content h1 {
    font-size: 40px;
    /*color: black;*/
}

.content #content-banner {
    position: relative;
    width: 100%;
    height: 350px;
    background: url('../img/notebook.jpg') no-repeat center;
    /*한줄로 적용*/
    background-size: cover;
    /*배경으로 사용되는 이미지를 자동으로 화면에 맞게 사이즈가 조정되는것
    but 가로 세로의 원본 비율은 유지.*/
}

.content #content-banner .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    top: 0;
    left: 0;
}

.content #content-banner .layer .txt-wrap {
    position: absolute;
    top: 170px;
    right: 200px;
}

.content .content-container {
    width: 1240px;
    margin: 0 auto;
}

3. content-container

- html

            


                
                    
                        취향 저격 생방송 채널
                    

                    
                        
                            
                                
                                    
                                        
                                        생방송
                                    

                                    
                                        
                                        
                                            2021 LCK Summer Split
                                            LCK_Korea
                                            League of Legends

                                            
                                                e스포츠
                                                한국어
                                                독일어
                                                후원 열차
                                            
                                        
                                    
                                
                            
                            
                        
                    

                    
                


                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal
                alskdjflsjf;laskjdfl;kasjdf;lsakjdfl;askjdflsdkfjal

- css

/* 태그 디폴트 */
.content-container .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}

.content-container .tag-wrap .tag {
    font-size: 11px;
    color: #ffffff;
    background-color: grey;
    border-radius: 8px;

    padding: 2px 4px 0;

    margin-right: 5px;
}

.content-container .tag-wrap .tag:last-child {
    margin-right: 0;
}

.content-container .txt-wrap {

}

.content-container .txt-wrap h3 {
    font-size: 15px;
}

이 사이트는 포지션개념이 아주 중요하게 적용된다.

2) 학습내용 중 어려웠던 점 및 해결방법

상단부분 네비의 공간을 100%로 설정을 했음에도 불구하고 계속해서 브라우저 크기가 100% 일때 오른쪽 부분이 잘려보이는 현상이 발생했다. 그래서 공간의 크기들이 섞여서 사용되지는 않았는지 찾아보았지만 잘 모르겠지만 아닌것같았다. 그래서 한참을 고민한결과 왼쪽부분의 공간이 너무 크게 차지 하고 있는것 같아 글자의 크기들을 조금씩 줄여보았다. 그러자 오른쪽 영역까지 모두 100%의 화면 안에 들어오는 것을 확인 할 수있었다.

3) 학습소감

학습을 하다보면 정말 모르겠는 부분들이 있는데, 아무리 검색을 해도 내가 원하는 답이 안나올때가 있다. 그러면 내가 틀렸다고 생각하는 부분이 내가 검색을 하는 것처럼 잘 못된 것이 아닌 다른 이유로 인해 잘못된 것이었다. 내가 완전히 알지 못해서 이런일들이 생기는것 같다. 조금 더 자신있게 잘 못된 부분을 캐치하려면 더 디테일한 공부가 필요한것같다.

2021_08_19 개발일지

Thu, 19 Aug 2021 02:50:55 GMT

1) 학습한 내용

오늘은 트위처 라는 해외 페이지의 상단영역과 왼쪽영역 일부분을 해보았다.

1. top-nav

- html

- css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0e0e10;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: top;
}

input {
    outline: none;
    border: none;
}

button {
    outline: none;
    border: none;
    background: transparent;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
    color: #ffffff;
}

.btn-purple {
    background-color: #9147ff;
    color: #ffffff;
}

.font-purple {
    color: #9147ff;
}





/* 상단 내비 영역 */
#top-nav {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #0e0e10;
    padding: 0 15px;
    min-width: 1340px;
}

#top-nav .nav-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#top-nav .nav-wrap .nav-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

#top-nav .nav-wrap .nav-left .logo {

}

#top-nav .nav-wrap .nav-left .logo a {

}

#top-nav .nav-wrap .nav-left .logo a img {
    width: 24px;
    height: 28px;
}

#top-nav .nav-wrap .nav-left ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

#top-nav .nav-wrap .nav-left ul li {
    height: 50px;
    font-size: 18px;
    padding: 0 20px;
}

#top-nav .nav-wrap .nav-left ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
}

#top-nav .nav-wrap .nav-left ul li:first-child {
    padding-right: 0;
}

#top-nav .nav-wrap .nav-left ul li:first-child a:after {
    position: relative;
    display: inline-block;
    content: '';
    width: 1px;
    height: 30px;
    background-color: grey;

    margin-left: 20px;

    top: 8px;
    /*margin-top을 사용하면 글과 함께 옮겨지므로  relative를 주고 top사용*/
}

#top-nav .nav-wrap .nav-left .more a {
    display: block;
    height: 50px;
    font-size: 18px;

    line-height: 50px;
    padding-left: 20px;
}





#top-nav .nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top-nav .nav-center .search-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    width: 380px;
    height: 36px;
    background-color: yellow;
    overflow: hidden;
    border-radius: 5px;
}

#top-nav .nav-center .search-wrap input {
    padding: 7px;
    width: calc(100% - 34px);
    height: 100%;
    background-color: grey;
}
#top-nav .nav-center .search-wrap input::placeholder {
    color: white;
}

#top-nav .nav-center .search-wrap .btn-search {
    width: 34px;
    height: 100%;
    background-color: #4c4a4a;
}
#top-nav .nav-center .search-wrap .btn-search img {
    vertical-align: top;
    background-color: rgba( 243, 241, 246, 0 );
    width: 30px;
    height: 30px;
}






#top-nav .nav-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding: 0 57px 0 0;
}

#top-nav .nav-right .mark-wrap {
    position: relative;
}

#top-nav .nav-right .mark-wrap .icon-mark {
    display: block;
    width: 20px;
    height: 20px;
    background-color: yellow;

    cursor: pointer;
}

#top-nav .nav-right .mark-wrap .alarm{
    position: absolute;
    border-radius: 15px;
    background-color: red;
    color: #ffffff;
    font-size: 14px;

    padding: 4px 8px 2px;

    top: -12px;
    right: -20px;
}

#top-nav .nav-right .btn-login {
    width: 53px;
    height: 30px;
    background-color: grey;
    border-radius: 5px;
    margin-left: 20px;

    text-align: center;
    line-height: 30px;
    font-size: 11px;
}

#top-nav .nav-right .btn-purple {
    width: 53px;
    height: 30px;
    border-radius: 5px;
    margin-left: 10px;

    text-align: center;
    line-height: 30px;
    font-size: 11px;
}

#top-nav .nav-right .btn-profile {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    margin-left: 10px;
}

2. left - channel-wrap

- html

    
        
            
                
                    추천채널
                    
                
                
                    
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000
                            
                        
                        
                            
                                
                                
                                    기발자(gi_balja)
                                    Just Chatting
                                
                                10,000

- css

/* 메인 영역 */
.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1340px;
}

/* 왼쪽 */
.left-area {
    position: fixed;
    width: 240px;
    background-color: #202024;
    top: 50px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
}
.left-area .channel-wrap {

}

.left-area .channel-wrap .channel-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    padding: 10px;
}

.left-area .channel-wrap .channel-header h3 {
    font-size: 15px;
}

.left-area .channel-wrap .channel-header .icon-arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
}

.left-area .channel-wrap .channel-body {

}

.left-area .channel-wrap .channel-body ul {

}

.left-area .channel-wrap .channel-body li {

}

.left-area .channel-wrap .channel-body a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    padding: 5px 10px;
}

.left-area .channel-wrap .channel-body img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.left-area .channel-wrap .channel-body .txt-wrap {
    width: 110px;
    margin-left: 10px;
}

.left-area .channel-wrap .channel-body .txt-wrap h4 {
    font-size: 12px;
}

.left-area .channel-wrap .channel-body .txt-wrap .source {
    font-size: 11px;
    color: grey;
}

.left-area .channel-wrap .channel-body .count {
    display: block;
    width: 53px;
    font-size: 11px;
}

.left-area .channel-wrap .channel-body .count:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;

    margin-right: 5px;
    top: 1px;
}

3. left - join-wrap

- html

            

                
                    Twitch 커뮤니티와 함께하세요!
                    어디서나 최고의 생방송을 즐겨보세요.

- css

.left-area .join-wrap {
    margin: 10px;
}

.left-area .join-wrap .txt-wrap {
    background-color: #18181a;
    padding: 20px;
}

.left-area .join-wrap .txt-wrap h2 {
    font-size: 24px;
}

.left-area .join-wrap .txt-wrap h2 span{

}

.left-area .join-wrap .txt-wrap p {
    margin-top: 10px;
    font-size: 13px;
}

.left-area .join-wrap .txt-wrap .btn-purple {
    width: 53px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;

    margin-top: 10px;
}

4. left - info-wrap

- html

            

                상호명: 동해물과 백두산이
                대표자명: 동해물
                동해물과 백두산이 마르고 닳도록 하난님이 보우하사 우리 나라만세

                
                    지원팀에 문의
                    판매약관
                    사업자 정

- css

.left-area .info-wrap {
    font-size: 12px;
    margin: 0 10px 10px 10px;
}

.left-area .info-wrap p {
    color: grey;
}

.left-area .info-wrap ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    margin-top: 10px;
}

.left-area .info-wrap li {

}

.left-area .info-wrap li a {
    color: grey;
}

.left-area .info-wrap li a:after {
    content: '';
    position: relative;
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: grey;

    margin: 0 5px;
}



.left-area .info-wrap li:last-child a:after {
    content: none;
}

2) 학습내용 중 어려웠던 점 및 해결방법

해외 사이트를 카피캣을 하다보니 조금 보기가 어려웠던것 같다. 이렇게 나라들 마다 각자의 스타일이 있는가 하는 생각이 들었다. 강사님께서하시는 말씀은 카피캣을 못하게 약간더 자신들만의 언어를 쓰는 것 같다. 그래서 나도 조금 더 디테일하게 하고 싶은 부분들을 조금은 따라하기가 어려웠던것 같다. 그래도 계속 보다보면 조금씩 알 수 있을 것 같다. 보는눈을 조금더 길러야겠다.

3) 학습소감

해외 사이트는 처음으로 해보는 거라 조금더 흥미로웠다. 특히나 트위처라는 페이지를 이전에는 알지 못했던 곳이라 이런 페이지가 있다는 것도 알게 되어 좋았던것 같다 :) 점점 9월이 다가 오는데, 9월부터는 팀 프로젝트가 있다고 하는데 이런것이 처음이라 떨리기도 하고 무섭기도 한것같다. 이걸 위해 무엇을 준비하면 될지..!! 열심히 공부해야겠다!!!

2021_08_18개발일지

Wed, 18 Aug 2021 01:33:45 GMT

1) 학습한 내용

오늘은 오디오 페이지의 오른쪽 영역과 하단, 그리고 오디오 카테고리 페이지를 새로 만들어보았다.

1. audio-intro

- html


                    
                        인기 채널을 소개합니다.
                    

                    
                        
                            
                                
                                    
                                    공유의 베드타임 스토리
                                    네이버
                                
                            

                            
                                
                                    
                                    밀레니얼의 시사친구, 듣똑라
                                    중앙그룹

- css

/*right*/

#audio-intro {

}


#audio-intro .audio-body ul {

}

#audio-intro .audio-body li {

}

#audio-intro .audio-body li a {

}

#audio-intro .audio-body li img {
    width: 152px;
    height: 152px;
    border-radius: 4px;
}

#audio-intro .audio-body li h3 {
    margin-top: 12px;
    font-size: 11px;

}

#audio-intro .audio-body li .soruce {
    margin-top: 4px;
    font-size: 10px;
    color: #959595;
}

2. audio-discovery

- html


                    
                        
                            오늘의 발견

                            요즘 많이 듣는 채널👍
                        
                        6월 9일 0시부터 24시까지 많이 들은 채널입니다.
                        관심 설정
                    

                    
                        
                            
                                
                                    
                                    클래식 매니저
                                
                            
                            
                                
                                    
                                    클래식 매니저
                                
                            
                            
                                
                                    
                                    클래식 매니저
                                
                            
                            
                                
                                    
                                    클래식 매니저

- css

#audio-discovery {

}

#audio-discovery .audio-header {
    position: relative;
}

#audio-discovery .audio-header h2 {
    font-size: 17px;
    line-height: 24px;
}

#audio-discovery .audio-header p {
    margin-top: 7px;
    font-size: 13px;
    color: #888;
}

#audio-discovery .audio-header .link-setting{
    display: block;
    position: absolute;
    padding: 10px 18px 8px;
    background-color: #ffffff;
    font-size: 13px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
    color: #157efb;
    right: 0;
    top: 6px;
}


#audio-discovery .audio-body ul {

}

#audio-discovery .audio-body li {
    margin-bottom: 40px;
}


#audio-discovery .audio-body li a {

}

#audio-discovery .audio-body li img {
    width: 152px;
    height: 152px;
    border-radius: 4px;
}

#audio-discovery .audio-body li h3 {
    margin-top: 12px;
    font-size: 13px;

}

#audio-discovery .audio-body .btn-more {
    display: block;
    margin: 0 auto;


    font-size: 14px;
    color: #222;

    padding: 12px 21px 12px 21px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

    font-weight: 500;
}

#audio-discovery .audio-body .btn-more .color-blue {
    color: #157efb;
}

#audio-discovery .audio-body .btn-more .pages{
    color: #959595;
}

3. audio-create

- html


                    
                        
                            
                                
                                    
                                        오디오클립 채널을 만들어 보세요!
                                        콘텐츠 제안하기
                                    
                                    
                                
                            

                            
                                
                                    
                                        오디오클립 채널을 만들어 보세요!
                                        콘텐츠 제안하기

- css

#audio-create {

}

#audio-create .audio-body {

}

#audio-create .audio-body li {
    padding: 22px 4px;
    border-top: solid 1px #efefef;
}

#audio-create .audio-body li:last-child {
    border-bottom: solid 1px #efefef;
}

#audio-create .audio-body li a {

}

#audio-create .audio-body li .txt-wrap {
    width: 225px;
}

#audio-create .audio-body li .txt-wrap h2 {
    font-size: 14px;
    font-weight: 700;
}

#audio-create .audio-body li .txt-wrap p {
    font-size: 12px;
    margin-top: 6px;
    letter-spacing: -.8px;
}

#audio-create .audio-body li .txt-wrap p.color-blue {
    color: #2db8e8;
}

#audio-create .audio-body li .txt-wrap p.color-purple {
    color: #8560f7;
}

#audio-create .audio-body li .list-bg {
    width: 80px;
    height: 64px;
}

#audio-create .audio-body li .list-bg.list-bg-1 {
    background-color: yellow;
}

#audio-create .audio-body li .list-bg.list-bg-2 {
    background-color: purple;
}

- html


        
            
                audio clip
            

            
                
                    동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세

                    동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세

                    동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세
                
            

            
                
                    로그인
                    오디오클립 소개
                    공식포스트
                    이용약관
                    결제관련문의
                    콘텐츠제안
                    고객센터
                
                
            
            
                ©
                네이버

- css


#audio-footer {
    background-color: #eaecef;
    padding: 48px 0 164px;
}

#audio-footer h1 {
    font-size: 25px;    
}

#audio-footer h1 a {
    color: #959595;
}

#audio-footer .copyright-wrap {
    margin-top: 37px;
}

#audio-footer .copyright-wrap p {
    letter-spacing: -.5px;
    font-size: 13px;
    line-height: 19px;

    color: #959595;
}

#audio-footer .footer-nav {
    margin-top: 47px;
}

#audio-footer .footer-nav ul {
    overflow: hidden;
}

#audio-footer .footer-nav li {
    float: left;
}

#audio-footer .footer-nav li a {
    font-size: 13px;
    color: #959595;
}

#audio-footer .footer-nav li a:after {
    display: inline-block;
    content: "";
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #959595;


    vertical-align: top;
    margin: 12px 7px 0;
}

#audio-footer .footer-nav li:last-child a:after {
    content: none;
}

#audio-footer .footer-copyright-link {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #959595;
}

#audio-footer .footer-copyright-link .symbol{

}

- html

- css

오디오 메인 페이지와 동일

6. audio - category - main channel

- html



        
            

                
                    채널
                    4,752개의 채널
                

                
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담
                            
                        
                    
                    
                        
                            예능
                            유머, 코미디, 고민상담

- css

/* 오디오의 카테고리  */
#audio-main.audio-sub-main {
    background-color: #ffffff;    
}


.audio-category {
    padding-top: 71px;
}

.audio-category .title-wrap {
    padding-bottom: 20px;
    border-bottom: solid 1px #ececec;
}

.audio-category .title-wrap h2 {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -1px;
}

.audio-category .title-wrap p {
    font-size: 14px;
    color: #959595;
    margin-top: 20px;
}

.audio-category .audio-category-lists {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: stretch;
    margin-top: 22px;
}

.audio-category .audio-category-lists .category-list {
    width: 162px;
    height: 164px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.audio-category .audio-category-lists .category-list:nth-child(6n) {
    margin-right: 0;
}

.audio-category .audio-category-lists .category-list:nth-child(odd) a {
    /*background-color: yellow;*/
}

.audio-category .audio-category-lists .category-list:nth-child(even) a {
    /*background-color: pink;*/
}

.audio-category .audio-category-lists a {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(230, 125, 127);
    border-radius: 6px;
    padding: 14px;
}

.audio-category .audio-category-lists a h3 {
    font-size: 19px;
    line-height: 1.3;
    color: #ffffff;
}

.audio-category .audio-category-lists a p {
    position: absolute;
    width: 80px;
    font-size: 13px;
    color: #fefefe;

    bottom: 14px;
}

.audio-category .audio-category-lists a .thumbnail{
    position: absolute;
    width: 78px;
    height: 78px;

    right: -13px;
    bottom: 0;
    /*컨테이너안 오른쪽 밑으로 맞추기위한 위치조정*/

    transform: rotate(25deg);
}

2) 학습내용 중 어려웠던 점 및 해결방법

html에서 사용할 수 있는 특수문자들이 있다. 아직 아는게 하나도 없어 하나씩 찾아서 작성을 해야한다는 번거로움이 있는 것같다. 또 네이버작업을 하면서 rotate를 사용한건 처음인것같다. 이렇게 실전에서 사용해볼 수 있어서 좋았다.

3) 학습소감

오늘은 개발일지를 작성하기위해 들어왔다가 눈에 띄는 글이 있어 읽어보고 왔는데, 아주 유익했다. UI에관한 용어 32 가지를 정리해 놓은 글이었는데, 예전이었으면 익숙한 단어가 아니면 알수 없는 글이라 생각했는데, 이제는 아 이거 하면서 떠오르는 것들이 생긴 것 같다. 또 계속 사용은했지만 용어에 대한 생각은 딱히 안하고 있었는데, 이렇게 용어를 정리하는 시간을 가질 수있어 너무 좋았다 ! 앞으로도 종종 글들을 읽어보는 시간을 가져야겠다 :)

2021_08_17 개발일지

Tue, 17 Aug 2021 03:25:08 GMT

1) 학습한 내용

오늘은 오디오페이지 왼쪽 영역을 완성시켜보았다.

1. audio-today

- html



                    
                        오늘의 오디오클립
                    


                    

                        

                            

                                
                                
                                    [재혼 황후]오디오 드라마
                                    오디오 드라마로 만나는 레전드 웹소설!

- css

/* Auadio main*/
#audio-main {
    width: 100%;
    background-color: #f6f8fa;

    padding-top: 61px;
}

#audio-main .audio-container {
    /*overflow: hidden;*/
    align-items: flex-start;
}

#audio-main .audio-main-left {
    /*float: left;*/
    width: 660px;
    height: 100%;
}


#audio-main .audio-main-right {
    /*float: right;*/
    width: 330px;
    height: 100%;
}


/* 각 섹션별 공통 디자인  */
.audio-section {
    padding: 32px 0;
}

.audio-section .audio-header {

}

.audio-section .audio-header h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.8px;
    /*글자 간격 공간*/
}

.audio-section .audio-body {
    position: relative;
    padding-top: 19px;
}

.audio-section .audio-body .btn-right {
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: palegoldenrod;
    border-radius: 50%;
    right: -17px;
    top: 56px;
}


/*  오늘의 오디오 클립  */
#audio-today .audio-slide {
    align-items: flex-start;
}

#audio-today .audio-slide img {
    width: 380px;
    height: 198px;
}

#audio-today .audio-slide .txt-wrap h3 {
    font-size: 18px;
    padding-top: 2px;
}

#audio-today .audio-slide .txt-wrap p {
    margin-top: 12px;
}


#audio-today .audio-slide-wrap {
    position: relative;
}

#audio-today .audio-slide-wrap .btn {
    position: absolute;

    width: 35px;
    height: 35px;
    background-color: palegoldenrod;
    border-radius: 50%;

    top: 80px;
}
#audio-today .audio-slide-wrap .btn-left {
    left: -17px;
}

#audio-today .audio-slide-wrap .btn-right {
    right: -17px;
}

2. audio-original

- html



                    
                        오디오클립 추천 오리지널
                    
                    

                        
                            
                                
                                    


                                    Title 1
                                    기발자
                                
                            
                            
                                
                                    


                                    Title 1
                                    기발자
                                
                            
                            
                                
                                    


                                    Title 1
                                    기발자
                                
                            
                            
                                
                                    


                                    Title 1
                                    기발자
                                
                            
                            
                                
                                    


                                    Title 1
                                    기발자

- css

#audio-original {

}

#audio-original .audio-body {

}

#audio-original .audio-body ul {
    align-items: flex-start;
}

#audio-original .audio-body ul li {
    width: 120px;
}

#audio-original .audio-body li a {

}

#audio-original .audio-body li img {
    border-radius: 10px;
}

#audio-original .audio-body h3 {
    font-size: 13px;
    margin-top: 10px;
}

#audio-original .audio-body .author {
    font-size: 12px;
    margin-top: 6px;

    color: #959595;
}


#audio-original .audio-body .btn-right {
    top: 60px;
}

3. audio-playlist

- html



                    
                        나를 위한 플레이리스트
                        당신을 위해 매일 새롭게 업데이트 됩니다.

                        전체보기
                    

                    

                        
                            
                                
                                    
                                        

                                        
                                    

                                    이번주 베스트 추천
                                
                            
                            
                                
                                    
                                        

                                        
                                    

                                    이번주 베스트 추천
                                
                            
                            
                                
                                    
                                        

                                        
                                    

                                    이번주 베스트 추천
                                
                            
                            
                                
                                    
                                        

                                        
                                    

                                    이번주 베스트 추천

- css

#audio-playlist {

}

#audio-playlist .audio-header {
    position: relative;
}

#audio-playlist .audio-header h2 {

}

#audio-playlist .audio-header p {
    font-size: 13px;
    margin-top: 8px;
    color: #888888;
    font-weight: 400;
}

#audio-playlist .audio-header .link-total {
    display: block;
    position: absolute;

    padding: 10px 18px 8px;
    background-color: #ffffff;
    font-size: 13px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

    color: #157efb;

    right: 0;
    top: 6px;
}

#audio-playlist .audio-body {

}

#audio-playlist .audio-body ul {
    align-items: flex-start;
}

#audio-playlist .audio-body li  {
    width: 152px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

#audio-playlist .audio-body li .image-wrap {
    position: relative;
    width: 150px;
    height: 150px;
}

#audio-playlist .audio-body li .image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#audio-playlist .audio-body li .image-wrap .icon-play {
    overflow: hidden;
    position: absolute;
    width: 32px;
    height: 32px;
    /*background-color: yellow;*/
    border-radius: 50%;

    bottom: -16px;
    right: 10px;
}

#audio-playlist .audio-body li h3 {
    background-color: #ffffff;
    padding: 17px 11px;
    font-size: 13px;
}

#audio-playlist .audio-body .btn-right {
    top: 90px;
}

4. audio-live

- html


                

                    
                        라이브 ON
                    
                    

                        
                            
                                
                                    
                                        
                                        
                                            LIVE
                                        
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                
                            
                            
                                
                                    
                                        
                                        
                                            LIVE
                                        
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                
                            
                            
                                
                                    
                                        
                                        
                                            LIVE
                                        
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                
                            
                            
                                
                                    
                                        
                                        
                                            LIVE
                                        
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                
                            
                            
                                
                                    
                                        
                                        
                                            LIVE
                                        
                                    

                                    Title 1 Title 1 Title 1
                                    기발자

- css

#audio-live {

}

#audio-live .audio-body {

}

#audio-live .audio-body ul {
    align-items: flex-start;
}

#audio-live .audio-body li {
    width: 120px;
}

#audio-live .audio-body li .image-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    border: solid 2px grey;
    border-radius: 50%;
}

#audio-live .audio-body li .image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 2px #ffffff;
    border-radius: 50%;    
}

#audio-live .audio-body li .image-wrap .live-state {
    position: absolute;

    padding: 2px;
    border: solid 2px #ffffff;
    border-radius: 3px;
    background-color: #ffffff;

    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

#audio-live .audio-body li .image-wrap .live-state .live {
    display: block;
    padding: 4px 8px;
    color: red;
    border: solid 2px red;
    border-radius: 3px;
    background-color: #ffffff;

    font-size: 10px;
}

#audio-live .audio-body li.active .image-wrap .live-state .live {
    border: solid 2px red;
    background-color: red;

    color: #ffffff;
}

#audio-live .audio-body li h3 {
    margin-top: 16px;
    font-size: 11px;
}

#audio-live .audio-body li .author {
    margin-top: 6px;
    font-size: 10px;
    color: #959595;
}

5. audio-book

- html



                    
                        주간 베스트 오디오북 TOP 100
                    
                    

                        
                            
                                
                                    
                                        
                                        2시간
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                    기발자
                                    대여 3,500원
                                
                            
                            
                                
                                    
                                        
                                        2시간
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                    기발자
                                    대여 3,500원
                                
                            
                            
                                
                                    
                                        
                                        2시간
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                    기발자
                                    대여 3,500원
                                
                            
                            
                                
                                    
                                        
                                        2시간
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                    기발자
                                    대여 3,500원
                                
                            
                            
                                
                                    
                                        
                                        2시간
                                    

                                    Title 1 Title 1 Title 1
                                    기발자
                                    기발자
                                    대여 3,500원

- css

#audio-book {

}

#audio-book .audio-body {

}

#audio-book .audio-body ul {
    align-items: flex-start;
}

#audio-book .audio-body li {
    width: 120px;
}

#audio-book .audio-body .image-wrap {
    position: relative;
    width: 100%;
}

#audio-book .audio-body .image-wrap img {
    /*position: absolute;*/
    width: 100%;
}

#audio-book .audio-body .image-wrap .time{
    position: absolute;

    padding: 2px 5px 0;
    background-color: rgba(17, 17, 17, .75);

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

    right: 5px;
    bottom: 5px;
}

#audio-book .audio-body li h3 {
    font-size: 11px;
    margin-top: 11px;
}

#audio-book .audio-body li .author-1 {
    display: block;
    font-size: 10px;
    margin-top: 4px;

    color: #959595;
}

#audio-book .audio-body li .author-2 {
    display: block;
    font-size: 10px;    
    color: #959595;
}

#audio-book .audio-body li .price {
    display: block;
    font-size: 10px;
    margin-top: 4px;
    font-weight: 500;
}

6. audio-channel

- html



                    
                        새로 나온 채널
                    
                    

                        
                            
                                
                                    

                                    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
                                    기발자

- css

#audio-channel {

}


#audio-channel .audio-body {

}

#audio-channel .audio-body ul {
    align-items: flex-start;
}

#audio-channel .audio-body li {
    width: 120px;
}

#audio-channel .audio-body li img {
    width: 120px;
    height: 120px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

#audio-channel .audio-body li h3 {
    font-size: 11px;
    margin-top: 10px;
}

#audio-channel .audio-body li .author {
    font-size: 10px;
    margin-top: 6px;
    color: #959595;
}

2) 학습내용 중 어려웠던 점 및 해결방법

페이지 왼쪽 부분을 마무리하고 보니 많은 부분들의 레이아웃이 틀어져있었다. 막상 만들때는 생각하지 않았던 부분들이 끝나고 나니 보였다. 그래서 다시 하나하나 글씨크기를 바꾸고 옆에있는 화살표를 넣는 부분의 위치도 조정해주었다. 이렇게 글씨체가 다르다보니 생기는 문제가 조금씩 있는 것 같다.

3) 학습소감

오랜만에 오랜시간 쉬다 와서 그런지 속도가 조금 느려진 느낌을 받았다. 겨우하루 더 쉬었는데도 이렇게나 휴가를 다녀온사람 처럼 제대로 집중을 못한것 같다. 다시 마음을 다잡고 내일부터는 집중할 수 있도록 해야겠다.

2021_08_13개발일지(2)

Fri, 13 Aug 2021 03:15:35 GMT

1) 학습한 내용

오늘은 오디오의 상단영역에 대해 작업해보았다.

- html

- css

오늘은 홈 글자밑 굵은줄 표시를 할때 3차원적인 포지션을 적용해 right와 left를 사용해 공간을 만드는 방법을 이용해 작업을 진행하였다.

#audio-header {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    border-bottom: solid 1px #efeff4;

    left: 0;
    top: 0;

    z-index: 99999;
}

#audio-header .audio-nav-left {
    width: 660px;
}
#audio-header .audio-nav-left .audio-logo {
    font-size: 25px;
}

#audio-header .audio-nav-left .audio-logo a {

}

#audio-header .audio-nav-left ul {
    padding-top: 10px;
}

#audio-header .audio-nav-left li {

}

#audio-header .audio-nav-left li a {
    display: block;
    font-size: 17px;
    padding: 12px 13px 17px 12px;
}

#audio-header .audio-nav-left li a.active {
    font-weight: 700;
}

#audio-header .audio-nav-left li a span {
    position: relative;
    display: inline-block;
    height: 21px;
}

#audio-header .audio-nav-left li a.active span:after {
    display: block;
    position: absolute;
    /*를 사용하기 위해 span 태그에 relative 적용*/
    content: "";
    border-bottom: solid 3px #222222;
    border-radius: 1.5px;

    z-index: 1;

    left: -4.5px;
    right: -5.5px;
    /*3차원 포지션을 사용할때 이렇게 공간을 만들어줄 수 있다.*/
    bottom: -17px;
}

- html

- css

#audio-header .audio-nav-right {
    width: 330px;
}
#audio-header .audio-nav-right .search-wrap {
    width: 180px;
    height: 39px;
    background-color: #ffffff;
    border: solid 2px rgba(0, 86, 201, .2);
    border-radius: 4px;
}

#audio-header .audio-nav-right .search-wrap .icon-search {
    background-image: url(../img/serch.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    width: 35px;
    height: 35px;
    /*background-color: yellow;*/
}

#audio-header .audio-nav-right .search-wrap input {
    width: calc(100% - 40px);
    height: 100%;

    padding: 8px 3px;
    font-size: 13px

    outline: none;
    border: none;
}

#audio-header .audio-nav-right .search-wrap input:focus {
    outline: none;
}



#audio-header .audio-nav-right .profile-wrap {

}

#audio-header .audio-nav-right .profile-wrap .profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

#audio-header .audio-nav-right .profile-wrap .btn-login {
    font-size: 15px;
    padding-left: 8px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

오늘도 input 영역안에 이미지를 주었는데, 오늘은 css 에서 백그라운드 이미지를 주었다. 여기서 잘기억이 안나 중앙정렬을하는데 검색해서 center를 넣어주고 백그라운드 이미지 사이즈도 다시 잡고 바깥 노란영역부분의 영역도 다시 잡아주었다.

또 input에 placehorder 도 넣어주고 싶었는데 이름이 생각이 나지 않아 검색을 통해 찾아주었다.

3) 학습소감

계속 동일 하게 사용 하는 부분은 어느정도 기억이 나는데 한번씩 사용하는 코드들은 바로바로 생각이 잘 나지 않는 것 같다. 그래도 이제는 어느정도 언어를 알아 검색하는데 어려움이 없지만, 그래도 바로 생각이 날 수 있도록 계속 사용하려 노력 해야겠다.

또 이번에도 content를 사용하여 밑에 굵은 줄 표시를 넣어주었는데, 이때 원래는 display block을 사용하고 width 와 height 를 주어 공간을 잡아주었는데, 오늘은 position absolute와 relative를 사용해 3차원적인 요소에 left와 right를 주어 공간을 만들어주는 방법을 사용했다.

정말 css 코드에는 다양한 방법들이 넘쳐나고 얼마든지 내가 원하는 방식이 있다면 생각해서 구현해 낼수있는 재미가 있는 것 같다~ 머리가 조금 복잡할뿐...!

오늘도 끝까지 으쌰으쌰 해서 금요일 마무리 잘 하자 :)

2021_08_ 개발일지(1)

Fri, 13 Aug 2021 02:15:25 GMT

1) 학습한 내용

오늘은 어제에 이어 e-sport부분을 마무리 해보았다.

또 웹 폰트 적용하는 방법에 대해 알아보았다.

1. esport-news-view

- html



                        많이 본 뉴스

                        
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
                                
                            
                            
                                
                                    
                                        
                                        1
                                    

                                    타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀

- css

#esport-main .right {
    float: right;
    width: 357px;
    height: 2000px;
    /*background-color: grey;*/
}

#esport-news-view {
    padding: 20px;
    border: solid 1px grey;
    border-radius: 10px;

    margin-bottom: 30px;
}

#esport-news-view h2 {
    font-size: 18px;
}

#esport-news-view ol {
    margin-top: 20px;
}

#esport-news-view li {
    margin-bottom: 8px;
}

#esport-news-view li:last-child {
    margin-bottom: 0;
}

#esport-news-view li a {
    /*display: block;*/
}

#esport-news-view li .image-wrap {
    overflow: hidden;
    position: relative;
    width: 84px;
    height: 48px;
    border: solid 1px rgba(0, 0, 0, .04);
    border-radius: 4px;
}

#esport-news-view li .image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#esport-news-view li .image-wrap .rank {
    position: absolute;
    background-color: #4e41db;
    border-bottom-right-radius: 4px;

    padding: 4px 10px;

    top: 0;
    left: 0;

    font-size: 13px;
    color: #fff;
    font-weight: 800;
}

#esport-news-view li h3 {
    display: -webkit-box;
    overflow: hidden;

    width: 218px;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;


    font-size: 14px;
    line-height: 19px;
}

2. esport-schedule

- html


                        e스포츠 경기 일정/결과

                        

                            

                                
                                06.05 토
                                

                            

                            

                                
                                    
                                        2021 LCK AS 챔피언십 풀리그 3일차
                                        
                                            진행중
                                            10:00
                                        
                                    

                                    
                                        2021 LCK AS 챔피언십 풀리그 3일차
                                        
                                            진행중
                                            10:00

- css

#esport-schedule {

}

#esport-schedule h2 {
    font-size: 18px;
}

#esport-schedule .schedule-wrap {
    margin-top: 15px;
    border: solid 1px grey;
    border-radius: 4px;
}    

#esport-schedule .schedule-wrap .schedule-header {
    padding: 14px 15px;
    border-bottom: solid 1px grey;
}

#esport-schedule .schedule-wrap .schedule-header .arrow {
    width: 15px;    
    height: 15px;
    border: solid 1px black;
}

#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-left {
    /*background-color: yellow;*/
}

#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-right {
    /*background-color: greenyellow;*/
}

#esport-schedule .schedule-wrap .schedule-header span {
    position: relative;

    font-size: 18px;
    font-weight: 800;

    top: 3px;
}


#esport-schedule .schedule-body {
    padding: 17px 0;
}

#esport-schedule .schedule-body li {
    /*padding: 17px 0;*/
}

#esport-schedule .schedule-body li:first-child:after {
    content: "";
    display: block;
    width: calc(100% - 40px);
    height: 1px;
    background-color: rgba(0, 0, 0, .05);

    margin: 17px auto;
}


#esport-schedule .schedule-body li h3 {
    font-size: 14px;
    margin-bottom: 12px;
    text-align: center;
}

#esport-schedule .schedule-body li .status-wrap {

}

#esport-schedule .schedule-body li .status-wrap:hover {
    /*cursor: pointer;*/
    background-color: yellow;
}


#esport-schedule .schedule-body li .status-wrap .status{
    background-color: rgba(255, 0, 0, .1);
    color: red;
    font-weight: 500;
    font-size: 11px;
    border-radius: 3px;

    margin-right: 4.5px;

    padding: 2px 4px;
}

#esport-schedule .schedule-body li .status-wrap .time{
    position: relative;

    top: 1px;

    font-size: 15px;
    font-weight: 700;
}

3. 웹폰트 적용하기

- html

구글 폰트 페이지 https://fonts.google.com/

페이지에 들어가 원하는 글자를 선택하면 옆에 link 와 css 코드가 나오기 때문에 쉽게 사용할 수 있다.

- css

초기값 작성시 적용하고 싶은 폰트를 넣는다. 폰트 패밀리를 사용할 경우 처음 순으로 적용이 되며 안될경우 다음 순으로 넘어간다. 여기서 주의 할점은 모든 웹에서 사용가능한 sens-serif 를 마지막에 꼭 넣어준다.

* {
    /*font-family: 'Nanum Gothic', sans-serif;*/
    /*font-family: Arial, Times, sens-serif;*/
     /* 초기값에 미리 서체 넣어놓기 sans-serif는 꼭 마지막에 넣기*/
}

2) 학습내용 중 어려웠던 점 및 해결방법

아직은 content 사용이 어려운것같다. 그래서 조금 더 알아보았다. "content" 는 삽입된 이미지나 텍스트들을 css코드에서 스타일처럼 꾸며주는 역할을 하는데, 그래서 웹 검색에서도 검색이 되지 않는 디자인 역할을 담당 한다고 한다. 우리는 주로 메뉴 구분선과 같은 역할로 많이 사용 하고 있는데, 여기에서 content: "" 로 넣어주었을때 ""안에 아무것도 넣어주지 않아 비어있음을 의미하는데, 여기에 display: block 을 사용하여 공간을 나타내어주고 높이,넓이 값을주어 원하는 구분선을 만들어준다. 아니면 원하는 텍스트나 이미지등을 넣을 수 있는데, 여기서 넣는 이미지는 크기 조절이안되어 만약 크기조절을 하고싶다면 background-image 를 사용하도록 한다. 또 위치를 넣어주지 않으면 어디에 들어가야하는지 몰라 적용이 안되므로 꼭 위치를 선정해주도록 한다. 주로 가상선택자(:after 와 :before) 들과 함께 사용된다.

3) 학습소감

오늘은 계속 헷깔렸던 부분에 대해 조금더 정리 하고 넘어가는 시간을 가졌다. 이렇게 디테일하게 알아보니 조금은 이해가 되는것같다. 이와같은 시간을 많이 가져야하는데.. 오늘은 불금이니 조금더 뽜이팅 하자 : )

2021_08_12개발일지

Thu, 12 Aug 2021 01:12:26 GMT

1) 학습한 내용

오늘은 왼쪽 영역을 마무리 해보았다.

1. esport-main-article

- html


                        
                            
                            
                                Title
                                동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
                                포모스
                            
                        

                        
                            
                            
                                Title
                                포모스
                            
                        

                        
                            
                            
                                Title
                                포모스

- css

#esport-main .content-wrap {
    overflow: hidden;
    padding-top: 30px;


}
/* e-sport left */

#esport-main .left {
    float: left;
    width: 900px;
    /*height: 2000px;*/
    /*background-color: yellow;*/
}


#esport-main-article {
    overflow: hidden;
    width: 100%;
    height: 468px;
    background-color: grey;
    border-radius: 10px;

    margin-bottom: 30px;
}


#esport-main-article .article {
    position: relative;
    float: left;
    width: 50%;
    height: 50%;
}

#esport-main-article .article.full {
    height: 100%;
    /*한쪽만 꽉 채워주기위해*/
    /*background-color: pink;*/
}


#esport-main-article .article img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#esport-main-article .article .txt-wrap {
    position: absolute;
    width: 100%;
    padding: 0 24px 20px;

    left: 0;
    bottom: 0;

    color: #ffffff;
}


#esport-main-article .article .txt-wrap h3 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

#esport-main-article .article .txt-wrap p {
    margin-top: 5px;

    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
}

#esport-main-article .article .txt-wrap .source {
    display: block;
    margin-top: 10px;

    font-size: 13px;
    color: hsla(0, 0, 100%, .7);
}

2. esport-replay

- html



                        
                            경기 다시보기
                        

                        
                            
                                
                                    
                                        
                                        MSI
                                    
                                
                                
                                    
                                        
                                        MSI
                                    
                                
                                
                                    
                                        
                                        MSI
                                    
                                
                            
                        


                        
                            
                                
                                     
                                        

                                        
                                            
                                            56:01
                                        
                                    
                                    롤드컵 Day2 5세트 경기
                                
                            
                            
                                
                                     
                                        

                                        
                                            
                                            56:01
                                        
                                    
                                    롤드컵 Day2 5세트 경기
                                
                            
                            
                                
                                     
                                        

                                        
                                            
                                            56:01
                                        
                                    
                                    롤드컵 Day2 5세트 경기
                                
                            
                            
                                
                                     
                                        

                                        
                                            
                                            56:01
                                        
                                    
                                    롤드컵 Day2 5세트 경기
                                
                            
                            
                                
                                     
                                        

                                        
                                            
                                            56:01
                                        
                                    
                                    롤드컵 Day2 5세트 경기
                                
                            
                            
                                
                                     
                                        

                                        
                                            
                                            56:01
                                        
                                    
                                    롤드컵 Day2 5세트 경기

- css

.esport-section {
    border-top: solid 1px grey;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.esport-section .title-wrap {
    padding: 15px 0;
}

.esport-section .title-wrap h2 {
    font-size: 18px;
}
#esport-replay .game-menu {
    margin-bottom: 24px;
}


#esport-replay .game-menu ul {

}

#esport-replay .game-menu ul li {
    margin-right: 20px;
}

#esport-replay .game-menu ul li:last-child {
    margin-right: 0;
}

#esport-replay .game-menu ul li a {
    display: block;
    width: 60px;
    /*height: 82px;*/

    text-align: center;
}

#esport-replay .game-menu ul li a.active i {
    background-color: purple;
}

#esport-replay .game-menu ul li a.active span{
    color: purple;
}

#esport-replay .game-menu ul li i {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: grey;
    border-radius: 50%;

    margin-bottom: 6px;
}

#esport-replay .game-menu ul li span{
    font-size: 13px;
}


#esport-replay .play-lists {

}

#esport-replay .play-lists li {
    width: 285px;
    margin-bottom: 24px;
}

#esport-replay .play-lists li:nth-child(4),
#esport-replay .play-lists li:nth-child(5),
#esport-replay .play-lists li:nth-child(6) {
    margin-bottom: 0;
}

#esport-replay .play-lists li a {
    display: block;
}

#esport-replay .play-lists li .image-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    margin-bottom: 11px;
}

#esport-replay .play-lists li .image-wrap img {
    position: absolute;

    width: 100%;
    height: 100%;
}

#esport-replay .play-lists li .image-wrap .status-wrap {
    position: absolute;
    width: 100%;

    left: 0;
    bottom: 0;

    padding: 10px;
}

#esport-replay .play-lists li .image-wrap .status-wrap i {
    display: block;
    width: 20px;
    height: 20px;
    background-color: grey;
}

#esport-replay .play-lists li .image-wrap .status-wrap i img {
    position: absolute;
     /*width: 100%; */
    /*height: 100%;*/
     width: 20px; 
     height: 20px;
 }
#esport-replay .play-lists li .image-wrap .status-wrap .time {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 3px 5px;
    border-radius: 3px;

    font-size: 11px;
    color: #ffffff;
}

#esport-replay .play-lists li .image-wrap .status-wrap i {

}

#esport-replay .play-lists li h3 {
    font-size: 15px;
}

3. esport-news

- html



                        
                            추천 뉴스
                        

                        

                            
                                
                                    
                                        

                                        타이틀1
                                        동해물과 백두산이 마르고 닳도록 동해물과. 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
                                    
                                
                                
                                    
                                        

                                        타이틀1
                                        동해물과 백두산이 마르고 닳도록 동해물과. 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
                                    
                                
                            

                            
                                동해물과 백두산이
                                동해물과 백두산이
                                동해물과 백두산이
                                동해물과 백두산이
                                동해물과 백두산이

- css

#esport-news {

}

#esport-news .article-wrap {
    align-items: flex-start;
}


#esport-news .article-wrap .left-lists {
    width: 472px;
}

#esport-news .article-wrap .left-lists li {
    width: 226px;
}

#esport-news .article-wrap .left-lists li a {
    display: block;
}

#esport-news .article-wrap .left-lists img {
    width: 100%;
    height: 132px;
    margin-bottom: 9px;
}

#esport-news .article-wrap .left-lists h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
}

#esport-news .article-wrap .left-lists p {
    font-size: 14px;
    color: #777;
}

#esport-news .article-wrap .right-lists {
    width: 400px;
}

#esport-news .article-wrap .right-lists li {
    position: relative;
    margin-bottom: 5px;
}

#esport-news .article-wrap .right-lists li:before {
    position: absolute;
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    background-color: grey;
    border-radius: 50%;

    top: 6px;
}

#esport-news .article-wrap .right-lists li a {
    display: block;
    font-size: 16px;
    padding-left: 15px;
}

4. esport-expert

- html


                        
                            전문가 칼럼
                        

                        
                            
                                
                                    
                                    
                                        Title
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고  백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고
                                        핫매치 리뷰
                                    
                                
                            
                            
                                
                                    
                                    
                                        Title
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고
                                        핫매치 리뷰
                                    
                                
                            
                            
                                
                                    
                                    
                                        Title
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고
                                        핫매치 리뷰
                                    
                                
                            
                            
                                
                                    
                                    
                                        Title
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고
                                        핫매치 리뷰

- css

#esport-expert .news-lists {

}

#esport-expert .news-lists li {
    width: 450px;
    margin-bottom: 15px;
} 

#esport-expert .news-lists li a{

}

#esport-expert .news-lists li img {
    width: 153px;
    height: 86px;
    margin-right: 15px;
}

#esport-expert .news-lists .txt-wrap {
    width: 268px;
}

#esport-expert .news-lists .txt-wrap h3 {
    font-size: 15px;
    font-weight: 500;
}

#esport-expert .news-lists .txt-wrap p {
    font-size: 14px;
    color: #777777;
    line-height: 19px;
    margin-top: 4px;

    display: -webkit-box;
    overflow: hidden;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /*두줄이상시 말줄임표시 설정 방법*/
}

#esport-expert .news-lists .txt-wrap .source{
    font-size: 13px;
    color: #777777;
}

2) 학습내용 중 어려웠던 점 및 해결방법

어제에 이어 왼쪽 부분을 마무리 해보았는데, 계속 해오던 것이라 크게 어려웠던 점은 없었다. 다만 아직 position 을 혼자서 사용할때는 많이 헤매는것 같다. 조금더 공부해야 할 것같다.

3) 학습소감

계속 이어서 작업을 하다 보니 반복되는 레이아웃들이 많고 큰틀들이 반복되어 있어 조금은 쉽고 빠르게 가능한것같다. 다만, 여기서 조금더 디테일로 들어갈수록 조금더 어려워지고 있는것같다. 또 빨리 자바를 다배워서 여기서 적용하지 못했던것도 해보고싶다~ 벌써 목요일이다. 내일이면 또 한주가 끝난다 엄청 시간이 빠른것같다. 배울 건 산더미인것같은데... 뽜이팅 : )

2021_08_11 개발일지

Wed, 11 Aug 2021 02:00:23 GMT

1) 학습한 내용

오늘은 게임에 e-sport 페이지를 레이아웃해보았다.

1. esport-header

- html

- css

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

.esport-flex-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
}

.esport-flex-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.esport-flex-end {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
}

.esport-container {
    width: 1280px;
    margin: 0 auto;
}

#esport-header {
    position: fixed;
    width: 100%;
    background-color: #151618;
    border-bottom: solid 1px grey;

    left: 0;
    top: 0;

    z-index: 99999;
}

#esport-header #esport-nav {
    /*height: 60px;*/
}

#esport-header #esport-nav a {
    color: #ffffff;
}
#esport-header #esport-nav .nav-wrap {
    height: 60px;
}

#esport-header #esport-nav .left h1 {
    font-size: 20px;
}

#esport-header #esport-nav .left li {

}

#esport-header #esport-nav .left li:before {
    display: inline-block;
    content: '';
    width: 1px;
    height: 14px;
    background-color: rgba(160, 165, 182, .3);
    margin: 0 12px;
}

#esport-header #esport-nav .left li a {
    color: grey;
}


#esport-header #esport-nav .center li {
    margin-right: 24px;
}

#esport-header #esport-nav .center li:last-child {
    margin-right: 0;
}

#esport-header #esport-nav .center li a {
    display: inline-block;
    width: 30px;
    height: 60px;

    line-height: 60px;
    border-bottom: solid 5px transparent;

    color: grey;
    font-size: 15px;
    text-align: center;
}

#esport-header #esport-nav .center li a:hover {
    color: darkgrey;
}

#esport-header #esport-nav .center li a.active {
    color: #ffffff;
    border-bottom: solid 5px #ffffff;
}
#esport-header #esport-nav .right a {
    border:  solid 1px hsla(0, 0%, 80%, .3);
    border-radius: 8px;

    padding: 4px 8px;

    font-size: 12px;
}

#esport-header #esport-nav .right a:last-child {
    margin-left: 10px;
}

2. esport-main-container timeline-wrap

- html



        

            

                

                    
                        
                            
                                오늘 (06.05)
                                2021 LCK AS 챔피언십 풀리그 3일차

                                
                                    LIVE
                                    진행중
                                
                            
                        
                        
                            
                                오늘 (06.05)
                                2021 LCK AS 챔피언십 풀리그 3일차

                                
                                    LIVE
                                    진행중
                                
                            
                        
                        
                            
                                오늘 (06.05)
                                2021 LCK AS 챔피언십 풀리그 3일차

                                
                                    LIVE
                                    진행중
                                
                            
                        
                        
                            
                                오늘 (06.05)
                                2021 LCK AS 챔피언십 풀리그 3일차

                                
                                    LIVE
                                    진행중
                                
                            
                        
                        
                            
                                오늘 (06.05)
                                2021 LCK AS 챔피언십 풀리그 3일차

                                
                                    LIVE
                                    진행중
                                
                            
                        
                        
                            
                                오늘 (06.05)
                                2021 LCK AS 챔피언십 풀리그 3일차

                                
                                    LIVE
                                    진행중

- css

#esport-main {
    padding-top: 61px;
    /*상단의 메뉴뒤로 들어간 글씨를 끌어내리기위해*/
}


#esport-main-top {
    background-color: #151618;
}

#esport-main-top .timeline-wrap {
    padding: 20px 0;
}

#esport-main-top .timeline-wrap ul {
    width: 100%;
}

#esport-main-top .timeline-wrap li {
    width: 16.6%;
    background-color: #272b31;
    border-radius: 10px;
    margin-right: 1px;
}

#esport-main-top .timeline-wrap li:last-child {
    margin-right: 0;
}

#esport-main-top .timeline-wrap li a {
    display: block;
    width: 100%;
    padding: 14px 18px;


    color: #ffffff;
}
#esport-main-top .timeline-wrap li a .date {
    font-size: 12px;
    font-weight: 500;
}

#esport-main-top .timeline-wrap li a h2 {
    font-size: 13px;
    margin-top: 6px;
    color: #a0a5b6;
}

#esport-main-top .timeline-wrap li a .status-wrap {
    margin-top: 35px;
}

#esport-main-top .timeline-wrap li a .status-wrap .live {
    font-size: 12px;
    font-weight: 700;
}

#esport-main-top .timeline-wrap li a .status-wrap .status {
    font-size: 12px;
    font-weight: 500x;
    color: red;
}

3. esport-main-container live-wrap

- html


                    라이브중인 경기 2
                    
                        
                            
                                
                                
                                    진행중
                                    2021 PMPS S1 WEEKLY FINAL DAY 3
                                
                            
                        

                        
                            
                                
                                
                                    진행중
                                    2021 PMPS S1 WEEKLY FINAL DAY 3

- css

#esport-main-top .live-wrap {
    padding-bottom: 60px;
}

#esport-main-top .live-wrap h2 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 20px;
}

#esport-main-top .live-wrap h2 .count {
    color: #8a7cff;
}

#esport-main-top .live-wrap ul {

}

#esport-main-top .live-wrap li {
    overflow: hidden;
    width: 625px;
    background-color: #1f2227;
    border-radius: 10px;
}

#esport-main-top .live-wrap a {
    /*display: block;*/
    /*width: 100%;*/
    /*height: 100%;*/
    align-items: flex-start;
}

#esport-main-top .live-wrap li img {
    width: 442px;
    height: 250px;
}

#esport-main-top .live-wrap li .txt-wrap{
    width: 183px;
    padding: 17px 20px 22px;
}

#esport-main-top .live-wrap li .txt-wrap span{
    color: red;
    background-color: rgba(255, 0, 0, 0.2);
    border-radius: 3px;
    padding: 3px 7px;
}

#esport-main-top .live-wrap li .txt-wrap h3{
    font-size: 15px;
    color: #ffffff;
    margin-top: 8px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

시작전 e-sport 페이지와 게임페이지를 연결하고 게임페이지에서 e스포츠를 눌러서 들어가는 방법으로 들어가려했는데, 보니 이전에 게임페이지를 작업했을때 그림부분이 너무커 상단의 메뉴를 가리고 있어 클릭이 되어지지 않았다.

그래서 이미지와같이 저렇게 가린부분때문에 게임의 일부분 빼고는 상단의 메뉴들이 제대로 작동할 수 없었다. 그래서 고민한 결과 z-index를 주어 앞으로 끌어 내는 것이었다. 처음에는 메뉴전체를 감싸고 있는 곳에 z-index를 사용했는데 안되어 따로 메뉴의 왼쪽과 오른쪽 부분을 각각 감싸고 있는 곳에 z-index를 같은 10을주어 앞으로 끌어내고 밑의 이미지부분을 1로 주어 뒤로 가게만들었다. 또 여기서 걸린부분이 이미지와 함께 겹쳐있는 글씨영역이었는데, 글씨도 z-index 5를 주어 중간으로 끌어내어 이미지가 맨 마지막으로 들어가되 배경보다는 앞으로 나올수 있도록 할 수 있었다. 이렇게 하자 메뉴들이 각각 모두 정상 작동이 되는 것을 알 수 있었다.

3) 학습소감

페이지를 만들때는 놓치는 부분들이 많은 것 같은데, 다른 작업을 하다가 보면 작은 디테일들을 놓친걸 알 수 있었다. 만약 그부분을 신경쓰지 않고 그냥 넘어갔다면 끝까지 몰랐을텐데, 항상 다 만들고 모두 정상 작동이 되는지 꼭 확인 할 수 있는 습관을 길러야겠다.

2021_08_10 JS

Tue, 10 Aug 2021 02:02:44 GMT

1) 학습한 내용

1. html

2. style.css

#color-bg {
    width: 500px;
    height: 500px;
    background: black;
}


#btn {
    width: 100px;
    height: 50px;
    line-height: 50px;

    background: purple;
    color: #ffffff;


    font-size: 20px;

}

3. main.js

// null - 변수 초기화로 명시적으로 ... 빈 값을 변수안에 할당한 상태 

// var n = null;

// console.log(n)

// undefined - 변수를 선언만 한 상태

// var u;

// console.log(u)




/* 둘의 차이점 

// console.log(typeof 10)
// console.log(typeof "Hello World")

1.
console.log(typeof null) - object로 나온다. -> 버그로 이해
console.log(typeof undefined)

2.
console.log(null == undefined)  //true
console.log(null === undefined) //false

3.
console.log(!true)  //false
console.log(!false) //true

console.log(!null)  //true
console.log(!!null) //false
console.log(!undefined) // true
console.log(!!undefined)// false 

4.
console.log(10 + null)  // 10  null = 0
console.log(10 + undefined) //NaN  = not a number

*/




//참조타입
/* 함수 (function) 
console.log(10 + 10)
console.log(20 + 30)
console.log(5 + 10)


// 임의 숫자 두 개를 전달 받아서 덧셈을 하는 기능을 만들고 싶다.
// 함수선언 상태

function sum() {

    console.log("Hello")
    console.log(10 + 10);
}

sum(); //turn on 기능 함수실행기능  = 함수 호출
*/


/* Parameter(매개변수), Argument(인수) 
//Parameter(매개변수) : num1,num2, 모든데이터입가능
function sum(num1, num2) {
    console.log(num1 + num2);
}
// Argument(인수) : 호출시 전달되는 값
sum (10,20)
sum (100, 50)



function fullName(firstName, lastName) {
    console.log(firstName + " " +lastName)
}

fullName("Eunhye", "Yeo")


function area(width, height) {
    console.log(width)
    console.log(height)

    var result = width * height
    console.log(result)
}

area(10)




function test(a) {
    console.log(a)
}

test(10)
test("Hello")
test(true)
test(null)

test(function a() {})
test([10,20,30])
test({name: "Eunhye"})
*/



//return
/*
function sum(num1, num2) {
    // console.log(num1 + num2)
    return num1 + num2
}


var result = sum(10,20)  //함수호출 30 , result = 30
console.log(result)


다른 변수의 값을 전달할때,
리턴으로 전달 받은 값으로 새로운 공식에 대입할때 사용
*/

/*
function area(hor, ver) {
    return hor * ver
}

// area(10,20) 아무것도 출력이 되지 않지만 200을 갖고 있는 상태
//console.log(area(10,20))   200 출력

var volume = area(10,20) * 100
console.log(volume)    //20000
*/



// 배열 (Array)
/*
var banana = "바나나"
var aplle = "사과"
var melon = "메론"


var fruit = ["바나나", "사과", "메론"]
console.log(fruit)

// 인덱스(index)
console.log(fruit[2])
console.log(fruit[0])
fruit[2] = "수박"
console.log(fruit[2])
*/

/*
var arr = [
    10, 
    "Hello", 
    true, 
    null,
    undefined, 
    function a() {},
    [10,20,30],
    {name: "Yeo"}
 ]

//배열안에 있는 데이터느 가능한 동일한 데이터 타입을 갖고 있어야한다.
var numm = [10, 10, 30, 3,14]
//가능한 동일한 성격을 갖고 있는 데이터로 채워주는 것이 좋다.
var fruit = ["사과", "배", "바나나"]

//배열안에 있는 배열 데이터에 접근하는 방법
var score = [[10,20,30], [100,200,300]]
console.log(score)
console.log(score[1])
console.log(score[1][2])
*/




/*property = 
  [객체 (Object) =(구성요소) 이름, 나이, 스킬, 성별]
                          + [key = velue] 

var student = {
    name: "Eunhye",
    age: 29,
    skills: ["자바스크립트","HEML","CSS"]
}
console.log(student)
//우리가 나열한순서대로 나오지 않고 알파벳순으로 나온다.
console.log(student.name) //Eunhye
console.log(student['name']) //Eunhye
console.log(student.skills[1]) //HEML

student.age = 100
console.log(student) //{name: "Eunhye", age: 100, skills: Array(3)}


student.gender = "여자"
console.log(student) //{name: "Eunhye", age: 100, skills: Array(3), gender: "여자"}
*/

/*
var student = {
    name: "Eunhye",
    age: 29,
    skills: ["자바스크립트","HEML","CSS"],

    test1: true,
    test2: null,
    test3: undefined,
    test4: {color: "red"},

    sum: function (num1, num2) {
        return num1 + num2; } //객체안 함수 : 메서드 method
}

var result = student.sum(10,20)
console.log(result)

student.sum(100,200)
console.log("Hello World")

//객체밖 함수: 함수

*/


/*원시타입과 참조타입 차이점 
var str1 = "Hello World"
var str2 = str1

str1 = "Nice"

console.log(str1) //Nice
console.log(str2) //Hello World
// 원시타입은 복사본에는 영향을 주지 않는다.


var obj1 = {name: "Eunhye"}
var obj2 = obj1

obj1.name = "park"

console.log(obj1) //name: "park"
console.log(obj2) //name: "park"
// 참조타입은 원본이 복사본에 영향을 미친다.
*/



// 배열안에 있는 색상을 버튼을 클릭할때마다 랜덤으로 가지고 오도록 적용시키기


var colors =[
       'yellow',
       'green',
       'pink',
       '#dc143c',
       'rgba(123, 123, 123, 0.5)']

var bg = document.getElementById('color-bg');
// console.log(bg);
var btn = document.getElementById('btn')
// console.log(btn)
// document라는 객체를 사용해 html문서에 id 값으로 접근


// 클릭했을때라는 행동을 버튼에 적용
// 행동자체 = Event
/* Listener는 두가지인수를 갖는다. 
- 첫번째인수: 종류 (행동), 
- 두번째인수: 익명함수(=이름없는 함수)(호출)

= 콜백 함수 (호출 기호 없이 특정 조건 하에 호출되는 함수*/
btn.addEventListener('click' , function () {
    // console.log("Hello");
    var random = Math.floor(Math.random() * 5)
    // console.log(random)
    console.log(colors[random])

    bg.style.backgroundColor = colors[random]
    // 캐멀케이스 적용!!
})





// 1 ~ 6 숫자를 랜덤하게 가져오는 게임
//  Math.random()              : 0 ~ 0.999999 < 1
//  Math.random() * 6          : 0 ~ 5.999999 < 6
//  Math.random() * 6)         : 0 ~ 5
//  Math.random() * 6) + 1     : 1 ~ 6
/*
console.log(Math.random()) 
console.log(Math.random() * 6) 
console.log(Math.floor(Math.random() * 6)) 
console.log(Math.floor(Math.random() * 6) + 1) */



/*예약어 - 자바스크립트에서 사전에 정의 해놓은 언어들
 - > 다 알 수 없으므로 변수를 만들때는 두개이상의 단어를
      조합해서 사용하는 것이 좋다.*/



/* idex 에서 
    
    
     연동시켜줄때 순서를 주의 해야 한다.
     */

console.log("Main")  

var mainVar = " Main Var"    
// console.log(mainVar)

function mainFunc(){
    console.log("Main Func")
}

4. custom.js

console.log("Custom") 


console.log(mainVar)


mainFunc()

2) 학습내용 중 어려웠던 점 및 해결방법

함수를 이해하기가 조금은 시간이 걸렸더 것같다. 또 기본적인 언어들의 종류가 많아 외우는 것이 좀 힘들었다.

3) 학습소감

오늘은 지난시간에 이어 기본적인 js 언어에 대해서 배우고 함수와 custom파일을 연결하여 스타일을 주는 방법에 대해 알아보았는데, 역시나 점점 알아야하는 언어들이 많아지고 있고 용어들도 다양하여 참 외울게 많은 것 같다. 함수도 사용해 보았는데, 바로바로 사용할 수 있기보다는 아직은 조금 시간이 필요한것 같다.

2021_08_10 개발일지

Tue, 10 Aug 2021 01:49:22 GMT

1) 학습한 내용

오늘은 게임영역의 오른쪽 까지 마무리 해보았다.

1. game right visitor-section

- html

                

                    
                        최근 방문
                        MY라운지 이동
                    

                    

                        
                            관심있는 게임을 검색해보세요.

- css

#game-main .right {
    float: right;

    width: 358px;
    /*height: 2000px;*/
    /*background-color: grey;*/
}


.right-section {
    background-color: #ffffff;
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
    border-radius: 12px;

    padding: 30px;
    margin-bottom: 24px;
}

.right-section .title-wrap {

}


.right-section .title-wrap h2 {
    font-size: 17px;
    font-weight: 400;
}

.right-section .title-wrap a {
    font-size: 13px;
    font-weight: 400;
    color: #444;
}

.right-section .right-section-body {
    margin-top: 20px;
}

#visitor-section .text-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#visitor-section .text-wrap p {
    font-size: 13px;
    color: #9da5b6;
    text-align: center;

    margin-top: 20px;
}

#visitor-section .text-wrap .input-wrap {
    overflow: hidden;
    position: relative;
    width: 250px;
    height: 44px;
    background-color: #f5f6fa;
    border-radius: 12px;

    margin-top: 18px;
}

#visitor-section .text-wrap .input-wrap input {
    width: calc(100% - 44px);
    height: 100%;
    background-color: transparent;

    padding: 10px 16px;
    border: none;

    font-size: 15px;
}    

#visitor-section .text-wrap .input-wrap input:focus {
    outline: none;
}

#visitor-section .text-wrap .input-wrap button {
    width: 44px;
    height: 100%;
    background-color: transparen;
    background-image: url(../img/serch.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50%;
}

2. game right popular-section-1,2

- html

                

                    
                        인기 게임 라운지 TOP5
                        더보기
                    


                    

                        
                            
                                
                                    1
                                    
                                        
                                    
                                

                                
                                    
                                    
                                

                                
                                    리그 오브 레전드
                                    MOBA
                                
                            

                            
                                
                                    2
                                    
                                        
                                    
                                

                                
                                    
                                    
                                

                                
                                    슈퍼스트링
                                    RPG
                                
                            
                            
                                
                                    3
                                    
                                        
                                    
                                

                                
                                    
                                    
                                

                                
                                    피파 온라인 4
                                    스포츠
                                
                            
                            
                                
                                    4
                                    
                                        1
                                    
                                

                                
                                    
                                    
                                

                                
                                    배틀그라운드
                                    스포츠
                                
                            
                            
                                
                                    5
                                    
                                        1
                                    
                                

                                
                                    
                                    
                                

                                
                                    로스트아크
                                    스포츠
                                
                            


                        

                        🕒2021.06.02 업데이트

                    

                


                

                    
                        급상승 게임 라운지 TOP5
                        더보기
                    


                    

                        
                            
                                
                                    1
                                    
                                        
                                    
                                

                                
                                    
                                    
                                

                                
                                    리그 오브 레전드
                                    MOBA
                                
                            

                            
                                
                                    2
                                    
                                        
                                    
                                

                                
                                    
                                    
                                

                                
                                    슈퍼스트링
                                    RPG
                                
                            
                            
                                
                                    3
                                    
                                        
                                    
                                

                                
                                    
                                    
                                

                                
                                    피파 온라인 4
                                    스포츠
                                
                            
                            
                                
                                    4
                                    
                                        1
                                    
                                

                                
                                    
                                    
                                

                                
                                    배틀그라운드
                                    스포츠
                                
                            
                            
                                
                                    5
                                    
                                        1
                                    
                                

                                
                                    
                                    
                                

                                
                                    로스트아크
                                    스포츠
                                
                            


                        

                        🕝2021.06.02 업데이트

- css


.rank-section .right-section-body {

}


.rank-section .right-section-body ol {

}

.rank-section .right-section-body li {
    margin-bottom: 16px;
}

.rank-section .right-section-body li:after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: grey;
}

.rank-section .right-section-body li:last-child {
    margin-bottom: 0;
}

.rank-section .right-section-body li .count-wrap{
    position: relative;
    width: 25px;
    text-align: center;
    margin-right: 5px;
}

.rank-section .right-section-body .count-wrap .count{
    font-size: 17px;
    font-weight: 700;
}
.rank-section .right-section-body .count-wrap .count.red{
    color: #ff4c51;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap {
    position: absolute;
    left: 6px;
    bottom: -13px;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .equal{
    display: inline-block;
    width: 5px;
    height: 3px;
    background-color: grey;
    margin-left: 3px;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .up {
    color: red;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .up:before {
    background-color: red;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .down{
    color: blue;    
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .down:before {
    background-color: blue;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap span {
    font-size: 10px;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap span:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 7px;
    height: 3px;
    top: -2px;
    margin-right: 1px;
}




.rank-section .right-section-body .image-wrap {
    position: relative;
    width: 55px;
    height: 55px;
    margin-right: 5px;
}


.rank-section .right-section-body .image-wrap img {
    position: absolute;
    width: 100%;    
    height: 100%;
    border-radius: 12px;
}


.rank-section .right-section-body .image-wrap .chk{
    position: absolute;
    width: 21px;
    height: 21px;
    background-color: grey;
    border-radius: 50%;

    top: -2px;
    right: -2px;
}

.rank-section .right-section-body .txt-wrap {

}

.rank-section .right-section-body .txt-wrap h3 {
    width: 182px;
    font-size: 15px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    margin-right: 10px;
}

.rank-section .right-section-body .txt-wrap .genre {
    font-size: 13px;
    color: #999;
}


.rank-section .right-section-body .time {
    margin-top: 12px;
    font-size: 13px;
    color: #999;
}

3. game right news-section

- html

- css

#news-section .right-section-body ul {

}

#news-section .right-section-body ul li {
    margin-bottom: 5px;
}

#news-section .right-section-body ul li:last-child {
    margin-bottom: 0;
}

#news-section .right-section-body ul a {
    display: block;
}

#news-section .right-section-body ul a:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #9da5b6;

    top: -5px;
    margin-right: 5px;
}

4. game right week-section

- html

                

                    
                        이번 주 신생 라운즈
                    

                    
                        
                            
                                
                                    
                                    
                                        무신의 칼
                                        MMORPG
                                    
                                
                            

                            
                                
                                    
                                    
                                        무신의 칼
                                        MMORPG

- css

#week-section li {
    margin-bottom: 16px;
}

#week-section li:last-child {
    margin-bottom: 0;
}

#week-section img {
    width: 128px;
    height: 72px;
    border-radius: 8px;

    margin-right: 10px;
}

#week-section .txt-wrap h3 {
    font-size: 15px;
}

#week-section .txt-wrap span {
    font-size: 13px;
    color: #999999;
}

- html

                
                    네이버 이용약관
                    네이버 게임 운영정책
                    개인정보처리 방침
                    네이버 게임 고객센터

- css

#game-footer-section {

}

#game-footer-section a {
    display: inline-block;
    font-size: 11px;
    color: #666;
}

#game-footer-section a:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 1px 10px 0;
    background-color: #ddd;
    vertical-align: top;
}

2) 학습내용 중 어려웠던 점 및 해결방법

오늘도 폰트사이즈의 차이로 인한 레이아웃 틀어짐 외에는 크게 어려웠던 점이 없었던것같다. 또 반복된 레이아웃으로 1,2는 똑같은 레이아웃을 주어 더 어려운 점 이없었던 것같다.

3) 학습소감

오늘은 네이버에 있는 돋보기 이미지를 가지고와 css 에서 백그라운드이미지로 넣어주었는데, 백그라운드 이미지는 크기에 따라 반복되는 점을 다시 기억해 복습할 수 있는 시간이 되었다. 그래서 네이버와같이 사이즈 조정과 no repeat을 주고 url 작성도 다시 해볼 수 있는 시간이 되어 좋았다.

526yeo_eunhye.log

2021_09_03 개발일지

1) 학습한 내용

1. IF 조건문 , else 문

2. 삼항 연산자 (한줄 짜리는 삼항 연산자가 가독성이 좋아 많이 사용.)

3. 팝업 띄우기

4. 전역변수(Global Variable) & 지역변수(Local Variable)

5. 스코프 scope

6. 호이스팅 - 변수 & 함수

7. 메서드

2) 학습내용 중 어려웠던 점 및 해결방법

3) 학습소감

2021_09_02 개발일지

1) 학습한 내용

1. talk

- html

패션뷰티판

패션뷰티판

패션뷰티판

패션뷰티판

- css

2. today

- html

오늘의 네이버

클로바 램프 최대 42% 혜택

- css

3. footer

- html

- css

2) 학습내용 중 어려웠던 점 및 해결방법

3) 학습소감

2021_09_01 개발일지

1) 학습한 내용

1. now

- html

NOW.

- css

2.banner-2 & 3

- html

- css

3. banner-4

- html

- css

4.corona

- html

코로나19

선별진료소

- css

5.

- html

- css

2) 학습내용 중 어려웠던 점 및 해결방법

3) 학습소감

2021_08_31 개발일지

1) 학습한 내용

1. main-nav

- html

- css

2. header

- html

- css

3. banner-1

- html

- css

4. weather

- html

22° 대전

- css

2) 학습내용 중 어려웠던 점 및 해결방법

3) 학습소감

2021_08_30 개발일지

1) 학습한 내용

1. explore-nav

- html

- css

2. popular-section

- html

인기 급상승 동영상

기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간

기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간