변수와 데이터 타입 1

기억해야 할 것

연습 결과

❔ 궁금했던 것

💡 해결 방법!

🌱 공부를 마무리하며,

네이버 모바일 2편

기억해야 할 것

연습 결과

❔ 궁금했던 것

💡 해결 방법!

🌱 공부를 마무리하며,

네이버 모바일 1편

기억해야 할 것

연습 결과

❔ 궁금했던 것

💡 해결 방법!

🌱 공부를 마무리하며,

유튜브 메인 2편

기억해야 할 것

1. left 컨텐츠 도면 설계

   • 각 세션 마다 bottom 넣어주기
   • 모든 메뉴에 아이콘 삽입

연습 결과

❔ 궁금했던 것

없음

💡 해결 방법!

🌱 공부를 마무리하며,

스크롤이 생성되더라도 컨텐츠의 움직임이 없는 설계는 앞으로 유용하게 사용 될 것 같다.

유튜브 상단 영역 (2)

기억해야 할 것

1. 상단 네비게이션 설계

• left, center, right 3단계로 나누기
  • left
    • button 태그 사용
    • h1, a, img(로고) 태그 사용
  • center
    • input 태그 사용
    • button 태그 사용
    • voice button 만들기
  • right
    • button 태그 사용
    • 로그인 a 태그 사용

2. flexbox.help 사이트 활용해 flex 미리 만들어 주기

연습 결과

❔ 궁금했던 것

없음

💡 해결 방법!

🌱 공부를 마무리하며,

미리 flex를 만들어 둠으로써 작업의 효율성을 높이는 방법을 배울 수 있었다.

유튜브 상단 영역 (1)

기억해야 할 것

1. 공통점 분석

• 메인페이지, 채널페이지
  • 상단 네비 + 왼쪽 사이드 네비 공유

2. index.html style.css 파일 만들기

3. 기본적인 css 초기화 작업

4. 도면 설계

• 스크롤 방지
  • 스크롤 생기는 것을 감안해서 nav태그 안에 div태그로 공간을 만들어줌
    • nav:230 div:220으로 공간의 크기를 만든다면, 스크롤은 nav에 영향을 받아 내용물이 밀리지 않을 것

5. css 작업

• 왼쪽 사이드 네비 고정

  • position: fixed;

• 스크롤

  • overflow-y: auto;
    • 영역 넘어갔을 때만 보이도록 선택적으로 스크롤 생성

연습 결과

❔ 궁금했던 것

• overflow-y: scroll;

💡 해결 방법!

• 항상 스크롤이 보이게 해줌

🌱 공부를 마무리하며,

트위치 사이트의 스크롤 단점을 보완하여 설계하는 법을 알 수 있었고, 앞으로 진행될 팀프로젝트에서도 이 점을 접목하는데 도움을 얻었다.

Reset과 Normalize CSS의 차이점

Reset CSS

_초기화 작업_을 위해 미리 만들어둔 코드 = 기존 HTML 코드가 가진 모든 CSS를 초기화 작업

• 추천 사이트 : https://meyerweb.com/eric/tools/css/reset/

  • 브라우저 마다 각 고유의 CSS가 사전에 정의된 곳이 많다 !
  • 커스텀 작업하기 전, 필수라고 할 수 있음
  • ✨ link 연결 순서가 굉장히 중요함 ✨ (캐스케이딩 발생)

Normalize CSS

Reset과 같은 초기화 작업이지만, 디자인을 조금 가공한 초기화 작업 = 디자인이 되어 있음 ✨ _오차와 버그를 줄이는 방향_으로 스타일을 재정의 할 때 사용 ! ✨

• 사이트 https://necolas.github.io/normalize.css/
  • 다운로드 방법
    1. 우클릭 👉 다른 이름으로 링크 저장 👉 HTML 파일로 불러오기
    2. 파일명 index.html에서 normalize.css로 변경하기
    3. link태그로 normalize.css 연결하기

정리

• 2개 중에 어떤 것을 사용하나요 ? 👉 개발자 취향입니다 ! 디자이너가 작업한 형태 그대로 설계하고 싶다면, reset 추천 ! 하지만, 실제 실무에선 normalize 많이 사용한다고 함 ! ( 단, 환경에 따라 달라짐 )

CSS 변수

주의점! 익스플로럴에서 거의 사용하지 않음, 제약이 크다 ❗ ( 단독 사용에 무리가 있다.. )

• 사용하는 이유 ? 수정사항이 생기면, 변수값만 변경하면 되기때문에 ! = 유지보수하기 쉬운 상태 일괄적인 수정작업이 쉬움 !

• :root 만들기

  • 변수를 불러오는 var 사용
  • 결과

• 활용

  • 변수 사용 범위 제한주기 (CSS 선택자를 활용하여 !)

    • intro 라는 영역 안에서만 사용이 가능해짐

  • 결과

    • header만 변수 적용됨

❔ 궁금했던 것

• 변수란 ?

💡 해결 방법!

• 어떤 내용물을 넣을 때 이것을 담을 수 있는 _박스_를 변수라 한다.
• value, 값, 데이터 = 실질적인 내용물*
• 원하는 이름으로 넣을 수 있다. ( 변수명 )
• 자바스크립트에서 더 딥하게 사용한다.

🌱 공부를 마무리하며,

CSS에서 변수를 사용한다면 유지 보수 등 장점이 많을 것 같은데, 익스플로럴에서의 사용에 제약이 있다는 점이 아쉬웠다.

트위치 컨텐츠 영역 (2)

기억해야 할 것

• 더보기 만들기

  • 회색줄 위에 더보기 덮어쓰는 방식
    • 끊김 효과를 위해 배경색 넣어주기
    • video-section이 기준점이 되야하니까, position: relative; 적용
    • bottom 값을 주어 더보기로 덮어쓰기

• 마우스를 올렸을 때 배경색 보이는 효과 ( 간단한 CSS 활용 )

  • hover 태그 사용 : 마우스 올렸을 때 이미지 움직이게 !
  • 좀 더 자연스럽게 움직임 효과 주기
    • 실제 애니메이션이 구현되는 것은 img이기때문에, img태그에 transition 값 주기

연습 결과

❔ 궁금했던 것

• background-size: cover; 에 대해서 ?

💡 해결 방법!

• 만들어둔 공간 안에 이미지가 다 채워질 수 있도록 자동으로 확대, 축소가 된다
• 가로, 세로 비율은 원본 이미지 비율을 유지한다.

🌱 공부를 마무리하며,

hover 태그와 transition 태그를 함께 썼을때 고급스러운(?) 효과를 나타낸다는 것이 새삼 놀라웠다. 유용하게 함께 쓸 수 있는 태그를 배울 수 있었고, 함께 사용하면 유용한 태그에 또 어떤 것들이 있을지 궁금해졌다.

트위치 컨텐츠 영역 (1)

기억해야 할 것

• jQuery Scrollbar

  • 참고 사이트 https://gromo.github.io/jquery.scrollbar/demo/basic.html
  • 제이쿼리에서 제공하는 스크롤 기능을 이용하면 수월한 배치작업이 가능하다
  • 오픈소스 활용 : 스크롤 적용시 컨텐츠 밀림 현상 방지

• 메인 컨텐츠 겹침현상 해결

  • 여러가지 방법이 있지만, position: absolute; 이용하기
  • top, left 값을 주어 시작점 설정하기

• 상단바를 고정하고, 스크롤 움직이게 !

  • overflow-y: auto; 사용

• background 삽입

  • 이미지 참고 사이트 https://unsplash.com/
  • url 연결해서 불러오기
  • background-size: cover;
    • 배경 이미지를 내가 설정한 값에 맞춰주는 역할
    • 특정 공간을 가득 채우는 배경이미지를 사용할 때 사용
    • 이미지의 가로,세로 비율은 유지 !
    • 보통, 반응형 웹페이지 제작할 때 사용
    • Tip. center에 주요 컨텐츠가 보이게 작업 : 사용자에게 잘 보이게 !

연습 결과

❔ 궁금했던 것

없음

💡 해결 방법!

복습했습니다 !

🌱 공부를 마무리하며,

공부를 마무리하며 문득 드는 생각은 오늘 이 강의를 듣는 것만으로는 어떤 것도 할 수 없음을 깨닫고, 많이 부족하다. 비전공자이고, 독학으로 업계에 뛰어들어가신 분들 정말 대단하고 존경하게 된다. 아직도 나는 현실에 살지 못하고 꿈만 꾸고 있는 건 아닌지 점검해 볼 필요성을 느꼈다.

트위치 왼쪽 영역

오늘의 중요한 내용 ⭐

• position: fixed;에서 top, bottom을 사용할 경우의 특징

  • top: 50px; 50px 만큰 밑으로 내려오게 됨
  • bottom: 0; 강제로 top 50px부터 bottom까지의 사이 공간이 늘어지게 된다.
  • 브라우저 기준 좌표기준 생성
  • 이 현상은** 순수3차원** 만이 가진 특징
  • fixed 뿐만 아니라, absolute를 사용해도 동일하게 나타낼 수 있음
  • 높이값이 가변값으로 바뀐다.

• 왼쪽 영역에 대해서만 스크롤 생성

  • 트위치 스크롤은 자바스크립트 이용한 것
  • css로 활용하고 싶다면, overflow-y 태그 사용

• codepen 사이트 활용

  • https://codepen.io/
  • 간단한 프론트엔드 코딩 가능한 사이트
  • 코딩테스트 가능
  • 까다로운 세팅 없이 React, Angular, Backbone, BootStrap 등의 기술 사용

연습 결과

❔ 궁금했던 것

• position 속성 ?

💡 해결 방법!

• 참고 사이트 http://tcpschool.com/css/css_position_position

🌱 공부를 마무리하며,

3차원 position에 대한 개념을 다양한 방법으로 활용할 수 있다는 것을 알 수있었다.

트위치 상단 부분

설계 전 확인 사항

• 접었다 펼쳐지는 부분
  • 자바스크립트 활용
• 왼쪽, 상단 영역 고정
  • position :fixed; 적용해야한다는 것

기억해야 할 것

• CSS 초기화 작업

  • a태그
    • 언더바 삭제
    • 폰트 흰색으로 설정
  • 배경색 초기화
    • background-color: transparent;

• 바 만들기

  • position: relative사용해 margin값, top값을 주어 간격 맞추기

• input, button 만들기

  • placeholder : 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않음
  • * 전체에 box-sizing: border-box; 적용
    • 배치작업을 수월하게 하기위해 미리 적용하는 것이 좋다!

• rem 단위 (해외사이트로 네이버사이트와 다른 수치들이 많이 나옴)

  • 1rem = 16px
  • 단위 변환 사이트 http://pxtoem.com/
  • em과 rem의 큰 차이는 없다.

• 손가락 모양 표시

• (참고용) color-text-base

  • 최신브라우저용

연습 결과

❔ 궁금했던 것

1) em / rem 단위의 차이 ?

💡 해결 방법!

1) _기준이 되는 값_이 다름 rem 은 최상위 태그의 font-size 값이 기준 / em 은 현재 요소의 font-size 값이 기준 참고사이트 http://triki.net/prgm/3250

🌱 공부를 마무리하며,

해외사이트의 경우 검사 기능으로 확인하는데 한계가 있어 카피캣에 어려움이 있었다. 최대한 비슷하게 카피캣 해보는 것에 집중해 학습하였다.

네이버 오디오 오른쪽

기억해야 할 것

• 웹표준

  • 글자 영역에 div태그를 작성한 것은 웹표준에 어긋난 것.
  • 정보를 입력할 때 사용하는 태그를 입력하는 게 올바른 것. 예 ) P h1 span
  • div의 경우 공간을 만들 때 사용하는 태그 !

• audio-header 전체 부분에 position: relative; 지정

  • a태그에 position: absolute; 사용해서, 배치 작업 진행하기 위해서 사전에 relative 라는 막으로 감싸준 것

연습 결과

네이버 오디오 하단 footer

기억해야 할 것

• HTML에서 사용하는 특수문자

• letter-spacing 태그

  • 글자 사이 간격 조절
  • -0.5 = -.5 표기 가능

연습 결과

네이버 오디오 카테고리페이지

기억해야 할 것

• 선택자 연달아 불러오기

  • audio-main 안에 있는 audio-sub-main 불러오기

• flex에서 justify-content: space-between;의 단점

  • 사전 정의한 숫자의 갯수가 라인마다 맞지 않으면 공백이 맞지않게 된다.
  • between은 오브젝트 영역안에서 균등하게 배치하는데, 배치할 공간이 없다면 자동으로 아랫쪽에 배치되어 나타나는 현상이다.

  해결방법 1) justify-content: flex-start;를 먼저 사용해, 왼쪽에서부터 정렬하기 2) 각 lists 사이에 margin으로 공백을 넣어준다 3) 6번째 마다있는 lists의 margin-right 값은 없애주기

  +) nth-child 홀수, 짝수 선택

  • 홀수

  • 짝수

연습 결과

❔ 궁금했던 것

• HTML에서 사용하는 카피라이트 기본 특수문자 ?

💡 해결 방법!

• 카피라이트 = 저작원 표시 참고 사이트 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dartplus&logNo=220499694317

🌱 공부를 마무리하며,

오늘 강의를 통해 웹표준에 대해서 한번 더 정리 할 수 있었다. 웹표준에 맞게 설계한다는 것은 다른 사람에게 설계 도면을 넘겨주었을 때, 유지보수하기 쉬워진다는 것을 알 수 있었다.

네이버 오디오 왼쪽

기억해야 할 것

• HTMl에서 font 적용

  • style 태그로 작성

    <h2 style="font-size: 50px;">오늘의 오디오클립</h2>

• 슬라이드 효과

  • 자바스크립트 이용해야한다

• 각 섹션별 공통 디자인

  • 섹션이 반복 될 경우, 공통 된 디자인 설계작업을 먼저 해준다.

• 각각의 단어간 간격 조정

  • letter-spacing 태그 사용

• overflow: hidden; 사용하지 않고 왼쪽, 오른쪽 배치 작업

  • 미리 만들어둔 CSS audio-flex-between 사용
  • align-items: flex-start; 사용

연습 결과

❔ 어려웠던 것

어려웠던 점은 없었지만, 설계 속도가 느렸다.

💡 해결 방법!

설계 작업 속도 향상을 위해 복습!

🌱 공부를 마무리하며,

부모-자식 관계에서 나타나는 현상에 대해서 더 학습해야겠다 생각했다.

네이버 오디오 상단 영역

기억해야 할 것

• 필요한 css 미리 만들어 두고 시작하기

코드 설계 작업

#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;
    content: "";
    border-bottom: solid 3px #222222;
    border-radius: 1.5px;

    z-index: 1;

    left: -4.5px;
    right: -5.5px;
    bottom: -17px;
}





#audio-header .audio-nav-right {
    width: 330px;
}

#audio-header .audio-nav-right .search-wrap {
    width: 180px;
    height: 40px;
    background-color: #ffffff;
    border: solid 2px rgba(0, 86, 201, .2);
    border-radius: 4px;
}

#audio-header .audio-nav-right .search-wrap .icon-search {
    width: 40px;
    height: 100%;
    background-color: yellow;
}

#audio-header .audio-nav-right .search-wrap input {
    width: calc(100% - 40px);
    height: 100%;

    padding: 8px 15px;
    font-size: 15px;

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

연습 결과

❔ 어려웠던 것

없음

💡 해결 방법!

복습으로 해결 !

🌱 공부를 마무리하며,

기본적인 css를 설계를 먼저 해두는 방법으로 도면을 깔끔하는 부분이 효율적이었다.

네이버 이스포츠 오른쪽 영역

기억해야 할 것

• rgba 컬러 소숫점 표기

  • 0.04 = .04 로 표기 가능

• border-radius: inherit;

  • 부모의 요소에 있는 것을 border값으로 받겠다는 것

• 원하는 지점 테두리 둥글게 만들기

  • 오른쪽 하단 : border-bottom-right-radius: 4px;
  • 왼쪽 상단
    • 이미지 전체에 border-radius가 이미 적용되어 있기 때문에,overflow: hidden; 적용

• 말줄임 표시 코드 ( 외울 필요X )
  • 구글링 : CSS말줄임효과 검색하기
  • 개발자가 되면 구글링 많이하게 되니, 구글링하는 것도 좋은 것이라 생각하기 !

    display: -webkit-box;
    width: 218px;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    

연습 결과

웹폰트 적용하기

기억해야 할 것

• font-family 사용

  • 여러개의 폰트를 입력할 수 있다. -> 브라우저마다 지원하는 폰트가 다르기 때문 !
  • sans-serif : 모든 브라우저 적용 가능

• 구글 웹폰트

  • 참고사이트 https://fonts.google.com/
    • 링크 태그 / CSS 태그 이용
  • 주의 사항
    • 폰트 적용하는 link태그 먼저 사용 후 css연결 link사용해야 함!

❔ 궁금했던 것

• inherit 대해서 ?

💡 해결 방법!

• https://developer.mozilla.org/ko/docs/Web/CSS/inherit

🌱 공부를 마무리하며,

강의에서 많은 개념을 한꺼번에 배우면 머리아플 것 같다하셨지만, 종종 새로운 개념이 나와주면 환기용으로 좋을 것 같다.

네이버 이스포츠 왼쪽 영역

기억해야 할 것

• padding 값을 사용할지 ? width 값을 사용할지 ?

  • 개발자의 취향이므로 본인에게 맞는 것으로 사용하면 된다.

• 영역이 나눠진 레이아웃 구조

  • grid 개념은 입문자 입장에서 복잡하기 때문에, float를 활용하자.!

연습 결과

❔ 궁금했던 것

• grid 개념 ?

💡 해결 방법!

• 사이트 참고 https://studiomeal.com/archives/533
  • 설명이 잘 되어있는 사이트를 발견했다. css의 끝판왕 grid , 다음 실습에서는 시도해봐야겠다 !

🌱 공부를 마무리하며,

강의를 통해서 grid를 알게 되었지만, 입문단계에서 사용하기 복잡한 태그다. 입문단계에서 더 성장하기 위해서 스스로 어려운 태그를 사용해보고 연구해보는 자세가 필요한 것 같다.

네이버 이스포츠 상단

기억해야 할 것

• 마우스 스크롤을 내리면, 특정 지점에서 화면이 고정되는 것

  • 자바스크립트와 Position: fixed 를 결합해 만드는 것

  • 아직 배우지 않은 부분이라 fixed는 생략

• hsla() 태그로 색상 표현

  • (색조, 채도, 밝기, 불투명도) 색상 정의

  • Hue : 색상 Saturation : 채도 Lightness : 명도 Alpha : 불투명도

연습 결과

❔ 궁금했던 것

• 강사님과 같은 크롬 브라우저인데, 상단 메뉴부분 폰트 사이즈가 맞지 않았다.

💡 해결 방법!

우선 css 폰트 사이즈를 조절해주니 해결되었지만, webkit을 활용해야할지 어떤 부분에서의 오류인지 확인 해볼 예정이다.

🌱 공부를 마무리하며,

자바스크립트를 배우지 않아서 구현하는데 있어 제한이 점점 생겨나고 있다. 독학으로 자바스크립트 공부를 하게될 것 같은데 잘할 수 있을까 ? .. 🤔

네이버 게임 오른쪽 카피캣

연습 결과

❔ 궁금했던 것

반복되는 부분이므로 어려웠던 점은 없음

💡 해결 방법!

복습위주의 학습을 진행했음

🌱 공부를 마무리하며,

스스로 레이아웃 설계가 점점 되고있어, 뿌듯했던 날 !

네이버 게임 왼쪽 영역

기억해야 할 것

• li태그ul태그 사용
  • 어떤 순서를 기반을 나열된 것이 아니기 때문에 ol태그 보다 ul태그가 적합

❔ 어려웠던 것

어려웠던 점은 없었고, 설계 작업 속도를 높이려 노력했음

💡 해결 방법!

반복적인 연습이 해결 방법이라 생간된다.

🌱 공부를 마무리하며,

카피캣 연습을 많이 하다보니, 체계적인 설계가 가능해졌고 작성 시간을 줄일 수 있었다. 체계적인 설계가 유지보수하는데 큰 도움을 준다는 것을 느낄 수 있었다.

네이버 게임 왼쪽 영역 1 - 게임 라운지 인기글

기억해야 할 것

• border-radius 값(테두리) 적용이 안되는 이유

  • overflow:hidden; 태그 사용
  • border-radius를 벗어난 모든 영역을 hidden처리 하겠다.
  • 실제로 이미지 자체 테두리에는 문제가 없고, 감싸고 있는 부모영역 (즉, border-radius를 적용한 영역) 제외하고 hidden 처리가 된 것.

• 중앙 정렬 공식

  • game-section 안에서 중앙 정렬

    left: 50%;
    transform: translateX(-50%);

    

연습 결과

❔ 어려웠던 것

어려웠던 것은 없었지만, 스스로 복습하면서 설계 시간을 단축하고 싶어졌다.

💡 해결 방법!

반복적으로 코드를 작성해보고, 나만의 효율적인 코드 작성법을 만들어야 겠다.

🌱 공부를 마무리하며,

오늘 강의를 통해 검사기능 활용법을 알게되었다. 검사기능에서 바로 bottom이나 border값을 적용한 후 css 코드에 적용하는 것이 시간단축에 도움될 것 같다.