CSS39 3월 9일 (1) JavaScript - 신규 표준 문법, 제어문 for문 2015년 신규 표준 자바스크립트 문법(ECMAScript 6) 1. const와 let - 변수 관련 변수 선언 var 식별자; - 변수 let 식별자; - 변수 let 사용이유 : 호이스팅(hoisting)을 막기 위해서 호이스팅 : 선언 전에 먼저 사용할 수 있도록 융통성을 두는 것 const 식별자; - 상수 상수란? 변하지 않는 수, 초기화 이후 값을 변경할 수 없는 변수, 선언과 동시에 초기화! 용도) 상한 max/하한 min / 제어할 요소를 저장 2. 템플릿 리터럴 (Template Literals) - 데이터 관련 ' , " 로 문자열 데이터를 처리 Template 레이아웃 틀, Literals 실존하는 값 나이를 입력받아서 문장과 결합하여 출력 let age = 10; console.l.. 2023. 3. 9. 사이트 그대로 따라 만들기(롯데월드 메인 페이지-css) @charset "UTF-8"; * { margin: 0; padding: 0; } li { list-style: none; } body { font-family: 'NotoSans-Light', '맑은 고딕', 'Malgun Gothic', sans-serif; font-size: 16px; color: #555; } header { height: 147px; } section { height: 3000px; margin: 0 auto; } footer { height: 250px; } /* header */ div#h_top { height: 47px; background-color: rgb(248, 248, 248); } div#h_bottom { width: 1400px; height: 100px.. 2023. 3. 4. 교육원 사이트 만들기 정답 @charset "UTF-8"; * { margin: 0; padding: 0; } li { list-style: none; } header { height: 105px; } section { /* width: 960px; */ height: 1220px; margin: 0 auto; } footer { height: 205px; } div#h_top { height: 35px; background-color: gray; /* margin: 0 auto; */ } div#h_bottom { width: 960px; height: 70px; margin: 0 auto; } div#h_top>div#h_top_wrap { /* height: 35px; line-height: 35px; */ width: 96.. 2023. 2. 28. 과제 교육원 사이트 만들기(CSS 연습) css 파일 @charset "UTF-8"; * { margin: 0; padding: 0; } li { list-style: none; } header { height: 105px; } section { width: 960px; height: 1220px; margin: 0 auto; } footer { height: 205px; } div#h_top { height: 35px; background-color: gray; margin: 0 auto; } div#h_bottom { width: 960px; height: 70px; margin: 0 auto; } div#h_top>div#h_top_wrap { height: 35px; line-height: 35px; } div#h_top>div#h_to.. 2023. 2. 28. 2월 28일 영역별 레이아웃 만들기 정답 + 사이트 레이아웃 만들기 GIMP GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor www.gimp.org 무료 그래픽 툴 선택자 지정 시 구체적으로 명확하게 명시해 주는 것이 좋다. 색이 지정되어 있지 않으면 그림판에서 색을 뽑아서 확인한다. 탑-다운 접근법 : 큰 문제를 쪼개서 시작하는 것이 필요하다 float 영역이 나누어져 있으면 서로 간섭을 하지 않는다. 개발자 도구를 통해서 똑같이 적용해 보는 연습 해 보기 오류를 찾을 때도 사용 CSS 파일 @charset "UTF-8"; /* 전체 요소에 대한 처리 */ * { padding: 0; margin: 0; } /* 리스트 요소 처리*/ li { list-style: none;.. 2023. 2. 28. 영역별로 레이아웃 만들기(이미지 포함) 똑같이 만들어 보기! 1. header header { background-color: yellow; border: 2px solid blue; margin-bottom: 10px; position: relative; } 2. nav nav { background-color: lime; border: 1px solid red; position: absolute; right: 5px; bottom: 5px; width: 300px; } 3. aside aside { float: right; width: 20%; background-color: orange; padding: 10px; } 4. section section { padding: 10px; border: 1px solid black; backgr.. 2023. 2. 28. 이전 1 2 3 4 5 6 7 다음
