버튼을 클릭했을 때, 임의의 헥사코드값으로 배경색에 변하면서 화면에 배경색의 헥사코드값이 출력되도록 함※ HEX Code(헥사코드) - \`\`\`코드)◆ for문 작동 스크린샷btn_click_color_random◆ 결과 스크린샷btn_click_color_rand

□ 자바스크립트 - 2강 2/3 ★ 작성코드 Git 링크.자바스크립트2 1. 반복문 조건을 만족하면 명령을 반복해서 실행함 무한반복(루프)에 빠지지 않도록 ‘조건’이 어느 시점에서 마무리 될 수 있도록 설정해야 함 ※ 예시 → 구구단 2단의 경우 고정값 : 일정

Git 링크.자바스크립트2● 만약 ( ) 조건이 참(true)이면, { }의 동작을 수행함예시)① 조건이 참(true)일 경우 if_true② 조건이 거짓(false)일 경우if_false● else – if 조건문에서 참(true)이 아닐 경우, 동작을 수행함예시)i

Git 링크.자바스크립트● 웹사이트의 주요기능, 주요 애니메이션 효과를 구현하는 언어● 하이브리드 앱html, css, javaScript를 같이 이용하여 안드로이드 앱, 애플 앱을 개발 할 수 있음● node.js – 자바스크립트 언어로 구성되어 있는, 서버개발을 도

Git 링크.유튜브 카피캣● word-break : 텍스트의 줄바꿈의 영향을 주는 CSS 속성keep-all 속성값 : 단어를 기준으로 줄바꿈예시)● 결과 스크린샷youtube_left_nav_1youtube_left_nav_2● 결과 스크린샷youtube_main_c

Git 링크.유튜브 카피캣● 유튜브 왼쪽 메뉴 영역 공간 만들기 유튜브 왼쪽 메뉴 영역에서 스크롤바가 content 영역을 침범하지 않게 하기위해 구역을 하나 더 추가함왼쪽 메뉴 전체 영역의 width 값(240px)에서 스크롤바 생성 크기를 제외한 값을 content

CSS 추가설명● CSS 작성시, 전부 초기화하는 내용을 작성해놓은 코드 – 원래 html 태그가 가지고 있는 고유의 CSS를 초기화시킴링크 : https://meyerweb.com/eric/tools/css/reset/※ 링크 코드 내용 복사하여 reset.

Git 링크.트위치● background: url()을 이용하여 이미지를 넣을 때, 이미지가 공간에 맞지 않을 경우와 수정방법twitch_background_cover_x위와 같이 이미지가 맞지 않을 경우, background-size: cover를 이용하여 공간에 맞

Git 링크.트위치● 결과 스크린샷twitch_header● left-area 영역이 화면의 크기가 변하더라도, 그에 맞춰 화면에 채워지도록 하는 방법position이 3차원인 상태에서 top의 값을 지정하고, bottom: 0;을 설정하면 공간이 늘어지게 됨예시)●

Git 링크.네이버 오디오클립● display: inline-block 상태에서는 margin: 0 auto; (x축 가운데 정렬)이 적용되지 않기에, display: block으로 바꿔줘야 함● 결과 스크린샷(인기채널 소개 & 오늘의 발견)audio_main_righ

Git 링크.네이버 오디오클립● latter-spacing : 글자간의 간격 조정예시)※ 글자간의 간격을 0.8px만큼 좁힘● audio-container에서 overflow: hidden을 사용하지 못하는 경우오늘의 오디오클립에서 방향 버튼을 표시하려고 할 때, co

Git 링크.네이버e스포츠● 사각형의 네 꼭지점 중, 원하는 곳만 radius값 적용하기예시)● 결과 스크린샷(특정 부분에만 border-radius 적용)esport_border_bottom_right● 폰트 서체 지정하기font-family를 사용하여 폰트 서체 지

Git 링크.네이버e스포츠● 기사 영역 3분할(1:0.5:0.5) 방법esport_main_left_article_exfloat 기능과 width: %값, height: %값을 사용하여 구역을 3분할함예시)● 결과 스크린샷(3분할)esport_main_left_arti

● 결과 스크린샷esport_header● 형제관계의 레이아웃 겹침현상 수정 상단 영역이 position: fixed를 사용하여 3차원이 되어 main영역과 레이아웃이 겹치게 됨esport_main_top_pd_top_x이를 수정하기 위해 padding-top값을 상단

Git 링크.네이버게임● 결과 스크린샷(최근 방문 영역)최근 방문 영역● 결과 스크린샷(인기 게임라운지 및 급상승 게임 라운지 영역)게임 라운지 영역● 결과 스크린샷(e스포츠 주요 뉴스 영역)e스포츠 주요 뉴스 영역● 결과 스크린샷(이번주 신생 라운지 및 이용약관 영역

Git 링크.네이버게임● 결과 스크린샷(section-3)game_main_section_3● 결과 스크린샷(section-4)game_main_section_4● 결과 스크린샷(section-5)game_main_section_5● 결과 스크린샷(section-6)g

Git 링크.네이버게임● css in js : 자바 스크립트를 기반으로 하여 css를 적용하는 방법● box-shadow : 영역에 그림자를 넣는 속성참고 사이트 : https://cssgenerator.org/box-shadow-css-generator.ht

Git 링크.네이버 TV연예● 결과 스크린샷(section-10 & banner)ent_main_right_section_10_banner● 결과 스크린샷(section-11)ent_main_right_section_11● 결과 스크린샷(section-12)ent_ma

Git 링크.네이버 TV연예● { box-sizing: border-box }의 사용유무 차이점( ※ li{ } 에 width 값과 border값이 있는 상태)예시)① 사용하지 않을 경우 – li img{ } 의 width 값이 li의 width값과 같아도 img가 b

Git 링크.네이버 TV연예● margin 병합 현상형제 관계에서 공통된 공백이 있는 경우, 큰 값이 작은 값을 병합함형제 관계에서는 margin 병합 현상이 top, bottom에서만 일어나고 left, right에서는 일어나지 않음● 결과 스크린샷ent_header