2,3년간 손놓고 있었던 프론트엔드공부를 다시 시작하려고한다. 무작정 시작하기보다는 로드맵을 참고하여 계획을 세우고 실천해보려고한다.

Front End Roadmap

1) Basic tools 2) Front-end 3) Tools 4) Testing 5) Publishing

1)Basic Tools :

computer(Windows사용)/Text Editor(VS Code,Sublime Text사용)/Browser(Chrome사용)/Terminal(Powershell,Bash,zsh <?? 공부요망)

2)Front-end : HTML / CSS / JavaScript

• HTML : HTML Tags Page Structure-페이지 구조를 어떻게 잡을것인가 Semantic Tags-조금 더 의미있는 tag를 사용 SEO-사용자가 검색시에 웹사이트가 잘 노출되는 것 Accessibility-접근성

• CSS : Styling Layouts-float / flex / grid Responsive Design-반응형 속성, 미디어쿼리 Animation

• JavaScript : 어떻게 동작하는지 일일이 외우는것이 아니라 기본문법부터 탄탄히 해야 한다. ES6+Syntax-자바스크립트 문법 Browser APIS-브라우저에 사용되는 API들

-ES6+ Syntax Basic : let, const, if, for, switch, while, function, object Advanced: Prototype, Hoisting, Scope, Closure -Browser APIS : DOM Manipulation, Events, Fetch API(Async)

-JavaScript 기본 문법공부를 다 마쳤다면 > React, TypeScript, Next.js(React)

3년전 프론트엔드 공부를 할때는, 웹브라우저 화면에 홈페이지 레이아웃 구현에 집중을 하고, 스타일링과 구조에만 신경썼는데, 이번 로드맵을 통하여 html과 css는 중요하지만 기본적인 것에 충실히 하도록하고 JavaScript공부 위주로 파고들어야겠다.

데이터의 종류 (데이터 타입)

원시 타입

1. 문자 (String)

2. 숫자 (Number)

3. 논리 (Boolean)

4. Null

5. Undefined

• Null & Undefined

  **Null** : 변수 초기화를 명시적으로 함 (빈 값을 변수안에 할당한 상태), 명시적으로 값이 비어있음 
  **Undefined** : 변수를 선언만 한 상태 (데이터 타입이자 값을 나타냄)

null과 undefined 는 등록, 저장 여부입니다. null 은 값은 값이지만 값으로써 의미없는 특별한 값이 등록되어 있는 것이고, undefined 는 등록이 되어있지 않기 때문에 초기화도 정의되지도 않은 것입니다. undefined 는 미리 선언된 전역변수(전역 객체의 프로퍼티)이며, null 은 선언,등록을 하는 키워드인 것입니다. 출처

• 부정 연산자 "!"

!true : true의 부정 = false
!false : false의 부정 = true

• null과 undefined에 ! 적용했을 경우

!null : null을 부정한 값 = true
!!null : null을 부정한 값인 true를 부정 = false

• null과 undefined의 연산 결과

10 + null : null을 0으로 인식한다.
10 + undefined : NaN = Not a Number 숫자가 아닌걸로 인식한다.

참조 타입

- 변수 동시 선언

 var a, b, c;

- 변수 동시 초기화

 var d = 10;
 var e = 20;
 var f = 30;

var d = 10, e = 20, f = 30;

- 변수 이름 작성 요령

• 두개 이상의 단어를 연달아서 짓는다. (안전하고 이해하기 쉽다)

var scroe = 10;  

캐멀 케이스 var mathScore = 10;
스네이크 케이스 var math_score = 10;

- 데이터의 종류 (데이터 타입)

- 원시타입

1. 문자열 (String)
2. 숫자 (Number)

숫자와 문자 차이점

숫자와 달리 문자는 덧셈을 뺀 나머지 연산 작업은 가능하다. (글자를 이어 붙이는 개념으로 사용됨)

3. 논리 (Boolean) - true/false
4. undefined
5. null

- 참조타입

1. 배열 (Array)
2. 함수 (Function)
3. 객체 (Object)

학습소감

변수의 선언 방법 및 이름 작성 요령, 데이터의 종류에 대하여 배웠다. html 문서에서 class이름을 짓고 css 문서에서 이 class를 사용하여 style값을 정하는것과 달리, java안에서 변수를 선언하고 이를 활용하여 작성한다는 점이 특이했다. 그리고 한가지 더 인상깊은 것은 데이터 타입중에서 숫자와 문자는 둘다 똑같이 연산 작업이 가능하지만, 한가지 다른점은 문자는 덧셈을 글자를 이어 붙인다는 개념으로 사용한다는 것이다.

• 입력한 자바스크립트 코드는 개발자도구 'console'탭에서 확인이 가능하다.

  <script>
        console.log("Hello"); 
  </script>

• 몇번째 줄 어느 파일에서 작성되었는지도 확인할 수 있다.

• html문서 안에 script태그로 연동이 가능하나, 연동한 코드에 내용은 넣지 못한다.

• 변수를 박스에 비유하면 내용(데이터)는 변수명이라고 할 수 있다.

• 모든 변수는 선언과 동시에 'undefined' 자동으로 할당된다.

<script>
var house;
house = "집";

console.log(house); 
</script>

house= "집"
console.log(house);

• undefined에서 '집'으로 변경됨.

학습소감

구조를 짜거나 디자인을 하는 html과 css와는 조금 다른 유형의 java script를 배웠다. 내가 어떻게 정의하느냐에 따라서 console에 다르게 정의할 수 있다는 점이 특이했다. 모든 변수는 처음에 'undefined'로 할당되고 나중에 내가 어떻게 정의하는지에 따라 변한다. 조금은 생소하지만 재미있는 공부였다.

• 유튜브 영상 썸네일 부분은 크게 영상이미지(영상시간)과 타이틀(텍스트)로 나누어서 코딩하였다.

• 유튜브 상단영역 html구조 및 css 디자인

• 유튜브의 전체적인 레이아웃 구조를 짰다.

  • 상단 / 왼쪽 / 오른쪽

  

• body 컨텐츠를 감싸고 있는 wrapper는 최소 너비를 1320px로 지정하였다.

• 상단영역은 스크롤을 내려도 고정되어있기 때문에 position을 fixed로 지정함.

• 왼쪽 메뉴역시 고정이기때문에 fixed로 지정.

  

• 메인영역은 left_content의 너비만큼 왼쪽으로 밀어냄 (left:240px)

학습소감

매일 보는 유튜브 사이트이지만 이번기회를 통하여 레이아웃 구조를 자세히 볼 수 있었다. 의외로 간단한 구조로 구성되어있는 유튜브였다. 오늘 배운 내용은 아니지만, 웹사이트를 둘러보면서 유튜브 영상 썸네일에 마우스오버하면 소리없이 재생되는 것은 어떠한 방식으로 구현되는지 궁금해졌다.

• Reset CSS : 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있어, 이를 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정

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

• Nomalize CSS : reset css와는 다르게 디자인이 적용되어 있으며, 여러 브라우저에 가능한 오차를 줄이면서 디자인 적용되도록 함. (완전 초기화는 아님) 실제 실무에서 많이 쓰임.

  Nomalize CSS

  ---

  • CSS 변수

:root {
   --black: #18181a;
   --purple: #9147ff;
   --font-size-40 : 40px;
} 
h1 {
   background-color: var(--black);
   font-size: var(--font-size-40)
   color: var(--purple);
}
  --black,--purple,--font-size-40 : 변수
  #18181a, #9147ff, 40px : 데이터 

   * 일괄적인 디자인 수정작업을 할 때 변수를 사용하여 쉽게 수정할 수 있다. 
   * root안에 있는 데이터는 모든곳에서 사용가능하나, 선택자로 정할경우 그 선택자에만 적용됨.

Root

:root 선택자는 문서의 최상위 요소를 가리킵니다. HTML 문서에서 최상위 요소라 함은 당연히 을 말하겠죠! 아니 그럼, :root{}랑 html{}이랑 같은 거 아닌가 싶은데요. :root는 가상 선택자이기 때문에, html 셀렉터보다도 우선순위가 높습니다. 그래서 :root와 html에 대한 스타일을 동시에 선언하면, :root에 대한 스타일이 우선됩니다.
흠... 그럼, 이 :root는 어디에다 써먹을 수 있을까요? 바로 전역 스코프의 CSS 변수를 선언할 때 사용합니다.
:root를 사용하여 선언한 사용자 정의 속성은 var( )를 통해 접근할 수 있습니다. 출처

학습소감

CSS 변수라는 것을 배웠다. 함수처럼 CSS값을 먼저 정의해놓은 뒤 변수를 입력하면 되는것이다. 나중에 한 컨셉의 컬러라던지 디자인을 수정할 때, 일일이 css를 변경하는것이 아니라 이 변수값만 수정하면 아주 편리하게 바꿀 수 있을 것 같다.

(트위치 왼쪽영역)

• 추천채널은 ul과 li를 사용하여 구조를 짰다.
• li의 내용물은 a태그로 감쌌고, 그림과 텍스트, 시청자 수 등은 flex-strat로 정렬시켰다.
• 조회수는 count라는 class명의 span으로 작성했고, 아이콘은 before를 사용하였다.

  .count:before {
    content: '';
    position: relative;
    display: inline-block; 
    top: 1px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%; 
    margin-right: 5px;
  }

• 크게 h2, p, button 태그를 사용하였다.
• h2부분에 'Twitch'는 font_purple이라는 class를 붙이고 따로 디자인해주었다.

학습소감

가끔씩 즐겨보는 트위치 웹사이트를 클론코딩해서 즐거웠다. 코딩을하면서 언제나 느끼는 거지만, 수 많은 컨텐츠들로 인해 복잡하고 어려워보일 수도 있지만, 자세히 보면 방대한 양의 컨텐츠들을 유저들이 어떻게 쉽게 받아들일 수 있을까 고민하여 짜여진 체계적인 레이아웃들이라는 것이다.

• 이전에 코딩했던 html코드를 참고하였다.
• 크게 header와 body로 구성되어있고 컨텐츠를 담고있는 body는 ul과 li 구조로 되어있다.

• ul과 li 태그를 사용하여 html구조를 짰다.
• flex를 사용하여 x축으로 정렬한 뒤 세부 디자인을 적용시켰다.
• live의 이미지에는 흰색선을 적용시켰고 live이미지를 감싸고 있는 div에는 회색선을 적용시켰다.

<div class="live_state">
 <span class="live active">LIVE</span>
</div>
#audio_live li a .image_wrap {
    position: relative;
    width: 120px;
    height: 120px;
    border: 2px solid gray;
    border-radius: 50%;
}

#audio_live li a .playlist_img {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
}

• live의 빨간색 강조색은 li에 active라는 class가 붙었을 경우로 설정하였다.

  <li class="active">
  #audio_live li a .live_state span.live {
    display: block;
    padding: 4px 8px;
    color: red;
    border: 2px solid red;
    border-radius: 3px;
    font-size: 10px;
  }
  

#audio_live li.active a .live_state span.live { border: 2px solid red; background-color: red; color: #fff; } --->li에 active가 올 경우의 css 디자인

---
![](https://images.velog.io/images/kimminji32_/post/16edb00e-8cc1-4443-80f8-4c1b38a734bd/image.png)
![](https://images.velog.io/images/kimminji32_/post/1d983a63-0338-4537-b3fa-e7c5cafa9ebe/image.png)

- 강의 내용과 기존사이트의 디자인이 조금 달라서 기존사이트를 기준으로 코딩해보았다. 
- 에세이 섹션에 나오는 시간은 time이라는 span태그를 만들어서 배치하였다. 

• '새로나온 채널' 섹션은 위에 반복되는 레이아웃을 참고하였고, 이미지 사이즈(120px,120px)와 border-radius값만 수정하였다.

실습 코드 깃허브 링크

• 오늘의 오디어클립 섹션은 크게 header와 body로 나누어서 html구조를 짰다.
• body에는 flex/space-between을 적용하여 정렬시킴.
• 내용물을 담고있는 audio_slide라는 div 안에 btn이라는 버튼을 추가하여 디자인하였다.
• 버튼은 다른 내용보다 위로 배치할 수 있도록 position을 absolute로 하였고 left와 right두개로 나누어서 각각 위치를 설정하였다.

.btn {
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: yellow;
    border-radius: 50%;
    top: 80px;
    cursor: pointer;
}

• 추천 오리지널 섹션은 ul과 li를 사용하여 구조를 짰다.
• 각각의 li들은 flex/ space-between으로 가로 정렬시켰다.
• li의 내용물은 block구조로 배치되어 있었기 때문에 따로 위치 조정없이 padding이나 font세부 디자인만 하였다.
• 오리지널 섹션에는 right-btn만 있었기 때문에 light-btn은 생략함.

• 전체적인 구조는 위에서 했던 추천 오리지널과 비슷했기 때문에 참고하여 코딩하였다.
• li의 타이틀과 플레이 버튼은 이미지보다 위에 있기때문에 absolute를 이용하여 배치하였다.
• 타이틀 부분은 개인적으로 title_wrap으로 감싸고 title_wrap의 높이와 배경색을 지정한뒤 배치하고, 타이틀은 따로 padding값으로 위치를 조정하였다.
• 플레이 버튼을 배치할 때 계속 아랫부분이 타이틀에 잘려서 z-index로 z축을 조절하였다.

  #audio_playlist .audio_body a .image_wrap i{
    position: absolute;
    bottom: 45px;
    right: 15px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ddd;
    z-index: 999;
  }

• header 부분을 크게 두 섹션으로 나누었다. (로고와 메인 메뉴 / 검색창 & 로그인)
  • flex / space-between으로 정렬
• 메인메뉴는 flex-end로 정렬시켰다.

<ul class="audio_flex_end">
 <li><a href="#" class="active"><span>홈</span></a></li>
 <li><a href="#"><span>랭킹</span></a></li>
 <li><a href="#"><span>연재 채널</span></a></li>
 <li><a href="#"><span>오디오북</span></a></li>
 <li><a href="#"><span>카테고리</span></a></li>
 <li><a href="#"><span>이벤트</span></a></li>
</ul>
.audio_nav_left li a span {
    position: relative;
    display: inline-block;  > span태그에 inline-block속성 부여함
    height: 21px;
}

• 첫번째 li에 active라는 class를 덧붙이고 font-weight를 따로 설정. active라는 class가 활성화 되었을 때 밑줄 표현을 위해 span의 after도 설정해줌.

  <li><a href="#" class="active"><span>홈</span></a></li>
  

.audio_nav_left li a.active { font-weight: 700; }

.audio_nav_left li a.active span:after { display: block; position: absolute; left: -4.5px; right: -5.5px; bottom: -20px; content: ''; border-bottom: 3px solid #222; border-radius: 1.5px; z-index: 1; }

![](https://images.velog.io/images/kimminji32_/post/baf6da21-26cd-4728-a5db-d9963e22774d/image.png)

.audio_nav_right .search_wrap i { width: 40px; height: 100%; background-color: skyblue; }

.audio_nav_right .search_wrap input { width: calc(100% - 40px); height: 100%; padding: 8px 15px; font-size: 15px; border: none; }

- 검색창 부분은 아이콘과 검색어를 입력하는 input영역을 flex-strat로 정렬시킴
- 먼저 검색아이콘의 너비를 설정하고 input의 width값은 calc를 사용함.

--- 
#### 학습소감 

검색창 부분을 구현하는 코드가 잘 생각나지 않았는데, 복습하면서 연습할 수 있었던 시간이었다. 전체를 감싸고 있는 div에넌 flex-start 속성을 부여하고 버튼의 너비값을 설정해준뒤, 검색어를 입력하는 input태그의 width값은 calc로 계산해주고 padding값과 font-size를 설정하는 등의 세부작업을 해준다! 

• 제목은 h2로 작성한 뒤 내용물은 ol과 li를 사용하여 코딩하였다.
• 그림부분과 타이틀은 flex / space-between으로 배치.

• rank부분은 span 태그를 사용하여 디자인하였다.

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

• 기사 사진 세개가 있는 부분에는 일단 article이라는 div로 기본 구조를 짰다. 그 다음 css로 왼쪽 article에 full이라는 class를 덧붙여서 full이 붙어있으면 너비 50% /높이 100%가 되도록 지정하였고, 붙지 않으면 너비 50% / 높이 50%가 되도록 설정하였다.

#esport_main_article .article {
    position: relative;
    float: left;
    width: 50%;
    height: 50%;
} 
#esport_main_article .article.full {
    height: 100%;
}

• 경기 다시보기 부분은 ul과 li를 사용하여 구조를 짠 뒤 flex-start를 사용하여 x축으로 나열하였다. 원싸이트에 첫번째 경기 부분에는 다른 색깔로 강조하였기 때문에 보라색을 넣어주었다.

• 각각의 li들을 디자인하고, flex-start로 가로 정렬하였다.

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

• 한칸 전체가 클릭범위였기 때문에 html 구조를 짤 때 a태그로 감쌌다.

• ul과 li 태그로 전체적인 구조를 잡았다.
• li태그 안의 내용물은 span/h2/div 구조로 쌓았다.
• 'live'와 '진행중'은 flex/space-between을 사용하여 가로로 정렬시켰다.
  • 첫번째 li와 마지막 li의 모서리 부분이 둥글게 처리되어서 first-child와 last-child라는 가상선택자를 이용하여 border-top-left-radius/bottom-left-radius 등으로 지정하였다.

.timeline_wrap li:first-child { 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
} 
.timeline_wrap li:last-child { 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

(지금 일지를 쓰면서 정리해보니 첫번째와 마지막 li의 모서리를 처리하기보다는 li를 
 감싸고 있는 ul자체에 모서리 처리를 했으면더 깔끔한 코딩이 되지않았을까라고 생각되었다.)

• 이 부분을 코딩할때는 전체를 감싸고있는 li자체에 border-radius를 지정하였다.
• 클릭범위가 li전체였기때문에 내용물을 a태그로 감쌌다.

학습소감

모서리를 둥글게 처리하는 border-radius에서 더 세부적으로 border-top-left/border-top-right 등으로 어느 부분을 둥글게 할건지를 정할 수 있다는 것을 알게되었다. 그리고 header부분을 코딩할 때, 글자를 강조하는 active를 조절한다던가, 일정등에서 쓰일 수 있는 슬라이더를 조정하는 자바스크립트도 한번 다뤄보고 싶어졌다.

• 최근방문 / MY라운지 이동을 두개의 div로 html 작성하고, flex / space-between을 적용시켜 양쪽 끝에 배치하도록 하였다.
• 검색창부분은 column으로 세로 배치시켰고 검색창 부분에는 따로 margin-bottom값을 주어 원싸이트와 비슷하게 공백을 넣었다.
• 검색창을 감싸고 있는 input_wrap에는 flex를 적용하였고, input과 button중에서 button의 width값을 먼저 설정한뒤 input은 calc를 사용하여 width값을 적용하였다.

  <style>
  .right_section_body .input_wrap {
    position: relative;
    display: flex;
    width: 250px;
    height: 44px;
    background-color: #f5f6fa;
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
  } 
  .right_section_body .input_wrap input {
    width: calc(100% - 44px);
    height: 100%;
    padding: 10px 16px;
    border: none;
    font-size: 15px;
    background-color: #f5f6fa;
    color: #444;
  } 
  .text_wrap .input_wrap button {
    width: 44px;
    height: 100%;
    background-color: gray;
    cursor: pointer;
  }
  </style>

• 랭킹은 ol과 li를 사용하였다.
• flex를 사용하여 일정한 간격으로 세로 배치 시켰다.

• 더보기 아이콘은 more이라는 class명을 붙이고 개인적으로 코딩해보았다.
• 먼저 more이라는 div를 만들고(보라색 원) 그 안에는 span 두개를 넣어서 플러스 모형을 코딩으로 구현하였다.
• position은 absolute로 지정하여 다른 요소들보다 위에 배치하도록 하였다.
• 원형을 먼저 코딩한 뒤 위치값을 적용하였다.
• span 한개는 먼저 정가운데에 배치 시킨후 두번째 span에 transform : rotate를 활용하여 회전시켰다.

<div class="image_wrap">
  <div class="popular_img_more">
    <span></span>
    <span></span>
  </div>
  <div class="popular_img"></div>
  <i class="chk"></i>
</div>
<style>
.popular_img_more {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: #7776FF;
} 
.popular_img_more span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 10px;
    background-color: #fff;
    border-radius: 1px;
} 
.popular_img_more span:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 2px;
    height: 10px;
    background-color: #fff;
    border-radius: 1px;
}
</style>

• popular_arrow라는 클래스명을 붙이고 화살표 모양도 span으로 만들어보았다.
• span 두 개를 감싸고있는 div형태로 위의 more과 비슷한 방법으로 만들었다.

<div class="popular_arrow">
  <span></span>
  <span></span>
</div>
<style>
.popular_arrow {
    position: relative;
    width: 14px;
    height: 14px;
    transform: rotate(90deg); 
} 
.popular_arrow span {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 2px;
    height: 10px;
    transform: rotate(45deg);
    background-color: gray;
} 
.popular_arrow span:nth-child(2) {
    position: absolute;
    bottom: 0%;
    left: 40%;
    width: 2px;
    height: 10px;
    transform: rotate(135deg);
    background-color: gray;
}
</style>

• 뉴스 리스트 앞에 있는 작은 점은 a태그 안에 div를 만들어서 따로 코딩했다.
• 리스트 중에서 맨 위의 두 줄은 굵게 표시되어있어서 strong이라는 태그를 사용했다.

  <li>
  <a href="#">
  <div></div><strong>페이커-쇼메이커가 생각하는 초시계의 가치</strong>
  </a>
  </li> 

• 뉴스의 제목들이 많이 길지만 너비는 한정되어있기 때문에 text-overflow : ellipsis를 사용하였다.

<style>
#news_section ul li {
    position: relative;
    width: 287px;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

학습소감

강의시간에는 간단한 도형으로 표현했던 아이콘들을 직접 코딩으로 구현해보았다. 오랜만에 이런 도형들을 css로 디자인해보니 재미있었다.
오늘 right영역을 코딩하면서 초반에 검색영역부분이 가운데에서 올라오지 않아서 개발자 도구로 이것저것 만져보았다. left영역과 right영역의 콘텐츠 길이가 다르다보니 이러한 현상이 생긴것 같다. left와 right를 감싸고 있는 game_container에 align-items : center를 지우고 strech로 바꿔주니 같은 높이로 정렬되었다.

실습코드 깃허브 링크

• 타이틀 / 리스트 부분으로 나누어서 코딩하였다.
• section_title_wrap 부분은 flex / space-between을 사용하여 좌우 끝에 배치하도록 하였다 (생생 주요 게임 뉴스 / 더보기 )

• 목록 부분도 미리 작성해놓은 flex/space-between으로 배치

• 오리지널 시리즈 부분은 하나의 ol에 두가지 li를 일정한 간격으로 배치하게 한다음 이 ol들을 연속으로 나열시켜 목록을 만들었다.
• 더보기 버튼은 position : absolute를 사용하여 다른 요소보다 위로 오게 배치하였다.

  .btn_circle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: -27.5px;
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
  }

• 인기게임영상의 영상썸네일 부분과 텍스트는 바로 전에 만든 코드들을 활용하였고, 플레이 버튼과 영상시간표시는 span을 사용하여 따로 디자인하였다.
• 영상 설명과 조회수 부분은 flex를 사용하여 정렬시킴.

• 타이틀과 날짜 부분은 바로 전 강의시간에 코딩하였던 [게임 라운지 인기 글] 코드를 활용하였고, 바로 위에 인기게임영상과 같이 반복되는 레이아웃 또한 다시 사용했다. [사전예약] 부분은 span을 사용하여 스스로 디자인해보았다. (class명 : reserve)

  #game_section_5 .reserve { 
    position: absolute;
    top: -5px;
    left: -5px;
    width: 69px;
    height: 30px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 30px;
    background-color: #6664F6;
    border-radius: 7px;
  }

• [게임 라운지 인기글]은 [오리지널 시리즈]의 레이아웃을 참고하여 만들었다.

학습소감

담고있는 컨텐츠가 많아서 복잡해보일 수도 있는 네이버 게임 페이지이지만, 반복되는 레이아웃이 많기 때문에 미리 만들어 놓은 코드들을 참고하여 만들어서 수월하게 결과물이 나온것 같다. 복사 붙여넣기를 하면 편리하긴 하지만 만들고 나서 나중에 수정을 하거나 업데이트를 할 때, 수정하기 쉽도록 직관적이고 보기 편한 코드로 짤 수 있도록 처음에 잘 해야할 것 같다.

• 게임 라운지 인기글 / 전체 Joined flex / space-between을 사용 하여 정렬함.

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

• space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 줌

• '전체'라는 글자에는 active라는 클래스를 붙여서 활성화 되었을 때의 강조색을 넣어줌.

  <div class="section_title_wrap">
  <h2 class="font_19 font_400">게임 라운지 인기글</h2>
  <div class="section_btn_wrap">
     <a href="#" class="active">전체</a>
     <a href="#">Joined</a>
  </div>
  </div>
  

.section_btn_wrap a.active { color: #7776ff; }

- 공략, 커뮤니티 부분에도 활성화되어있는 글자에는 active라는 클래스명을 붙이고 강조색과 밑줄을 넣어주었다. 


![](https://images.velog.io/images/kimminji32_/post/ead4aa5d-226a-4dd0-8603-01195e252d04/image.png)
- '롤 패치' 목록은 ol, li 태그를 사용하였다. 
- flex-start와 기본값인 가로 정렬을 사용하였다. 

![](https://images.velog.io/images/kimminji32_/post/fc99de9a-4a97-431a-b096-79b403cc8a9e/image.png)

-padding값으로 위아래 여백을 주고 border-bottom값을 설정하였다. 

---
#### 학습소감
html과 css로 구조를 짜는 것 이외에도 원싸이트에서는 더보기 버튼을 누르면 목록이 보이고 펼쳐진다. 웹사이트를 구현할때, html과 css로 구조를 탄탄하게 하는것도 중요하지만, 생동감을 불어넣는 자바스크립트 또한 중요한 요소라고 생각한다. 네이버 게임 html과 css 코드를 다 짜고 홈페이지에 적용된 간단한 자바스크립트도 조금 더 조사해봐야겠다.