원 트루 레이 아웃
/ 17_oneTrueLayout.css : 고정폭 레이아웃, 중앙정렬 /
/ 요약 :
- oneTrueLayout : 고정폭 레이아웃, 중앙정렬, 각 요소별로 크기를 고정해서 디자인
- 마진 이용 중앙정렬 : 사용법) margin : 숫자 auto;
/
/ 여백 초기화 /
- {
padding: 0;
margin: 0;
}
/ 페이지 : container /
#container {
/ 예) 만약 웹브라우저 크기 == width 크기 , 중앙정렬 안됨 (여백 필요) /
width: 1200px;
/ 중앙정렬 : 마진 이용 /
/ TODO: 마진(축약식) : 상하 좌우 /
margin: 0 auto;
background-color: beige;
}
/ 머리말 /
header {
height: 120px;
background-color: gray;
}
/ 메뉴 /
nav li {
display: inline-block;
height: 30px;
}
/ 본문 : 왼쪽 /
section {
width: 900px;
background-color: aqua;
float: left;
height: 600px;
}
/ 사이드바 : 오른쪽 /
aside {
width: 250px;
background-color: violet;
float: right;
height: 600px;
}
footer {
clear: both;
height: 100px;
background-color: brown;
}
자바 스크립트
// 01_alert_console.jsalert
// alert("안녕하세요");
// TODO: 코딩 자료형
// 1) 문자열 : "글자" , "홍길동"
// 2) 숫자열 : 1,2,3,4 ....
// js출력방법 :1) alert("글자");
// alert("안녕하세요");
// alert 대화상자를 이용해서 화면에 123 숫자를 출력하세요
// alert(1234);
// js 출력방법 : 2
// console.log("안녕하세요");
// 간단연습 : 123을 console.log 출력하세요
console.log(123);
// TODO: 연산자
// 1) 사칙연산자 : +, -, *(곱셈), /(나눗셈, 슬래쉬)
// TODO: 나머지 연산자 : % (퍼센트)
// 1) 덧셈
// let num = 52 + 273;
// alert(num);
// 간단 연습 : 뺄셈
// let num = 52 - 273;
// alert(num);
// 간단연습 : 52, 273 , 곱셈, 나눗셈도 출력하세요
// let num = 52 * 273;
// alert(num);
// let num = 52 / 273;
// alert(num);
// TODO: 나머지 연산 : 나누었을때 나머지가 결과로 나옴
// let num = 8 % 2;
// alert(num);
// TODO: 특수 문자 : 사용법) \ (역슬래쉬) 이용
// 1) 줄바꿈 : \n
// let value = "안녕하세요\n 홍길동입니다.";
// alert(value);
// 2) 쌍/홑따옴표 출력 : \" , \'
// let value = '안녕"하세요';
// alert(value);
// let value = "안녕'하세요";
// alert(value);
// 문자열이 쌍따옴표 일때 홑따옴표(역슬래쉬x) 출력 ?
let value = "안녕'하세요";
alert(value);
// 03_value2.js
// TODO: 문자열 연산(붙이기)
//
// let value = "안녕하세요 " + "홍길동입니다";
// alert(value);
// 간단연습 : "안녕" , "hello" , "잘가세요"
// 붙여서 출력하세요
// let value = "안녕 " + "hello " + "잘가세요";
// alert(value);
// TODO: 논리 연산 : 참 거짓 연산
// TODO: 기본자료형 1) 문자(열) 2) 숫자 3) 참/거짓 : true/false
// let value = true;
// alert(value);
// TODO: 논리 연산 : &&(그리고, and) , ll(또는, or)
// TODO: && - 2개 값이 true 일때 결과가 true 임
// let value = true && true; // true
// alert(value);
// 잠깐 요약: 1) 변수 : 값을 저장(넣어두는 곳), 값을 수정
// 상수 : 값을 저장, 값 수정 불가
// 연산자 사칙연산
// 논리연산 && and ll (or)
// 출력 방법 : 1)alert(), 2) console.log()
// let value = true && false; // true
// alert(value);
// TODO: ll(또는, or) - 실습
// 2개의 값이 1개라도 true이면 참임
// TODO: ! (논리 부정,NOT)
let value = !true;
alert(value);
// TODO: 3) 대입 연산자 : 값을 넣어두는 행위를(저장) 하는 연산자
// 사용법 : = (등호)
// TODO : 대입 연산자 활용, 사칙연산
// 예)
// let x = 10; // 변수 정의(선언)
// x = x + 5; // 값 수정 (값15)
// TODO: 축약식 - 위의 식을 줄일 수 있음
// X += 5;
// alert(x);
// TODO: 축약식 2) 뺄셈
// let x = 10; // 변수 정의
// x = x -5; // 값 수정(5)
//축약식 변경
// x -= 5; // 값 수정(5)
// alert(x);
// 간단연습 :1) 곱셉, 나눗셈 축약식 코딩하기r
// 1 곱셈
// let y = 10;
// y = y 5;
// y = 5;
// alert(y);
// 나눗셈
// let z = 10;
// z = z / 5;
// z /= 5;
// alert(z);
// TODO: 4) 증감 연산자 : 1씩 증가시킴/감소시킴
// TODO: 4-1) 사용법) ++변수명; 또는 --변수명;
// 사용법) ++변수명;
// 1) 1증가
// let x = 10;
// ++x;
// alert(x);
// 2) 1감소
// let x = 10;
// --x;
// alert(x);
// TODO: 4-2) 사용법)
// 1) 1증가
// let x = 10; // 변수 정의 선언
// x++;
// alert(x);
// 2) 1감소
let x = 10;
x--;
alert(x);
// TODO: 비교 연산자 : >=(크거나같다) <=(작거나같다) >(크다), <(작다)
// TODO: ==(같다), ===(js :같다,추천, 엄격체크)
js.input
// 예제) a 을 입력받아 a 를 출력하세요
// TODO: 사용법 : let 변수 = prompt("대화상자에 표시될 문자");
// TODO: 화면에 입력한 글자가 변수에 저장됨
let value = prompt("1개의 문자");
alert(value);
// 07_number.js
// 숫자 <-> 문자(열) 바꾸기
// 예제 1) 문자 -> 숫자 바꾸기
// 함수 : 어떤 기능을 가지고 있는 것
// js 함수 : 1) 입력대화상자 나타내기 함수
// TODO: 사용법) let 변수 = number("숫자글자");
// let value = Number("3"); // "3" -> 3
// let value2 = Number("5"); // "5" -> 5
// alert(value + value2);
// 예제 2) 숫자 -> 문자 바꾸기
let value = 3 + "";
let value2 = 5 + "";
// 3 + 5 = > 35
alert(value + value2);
JS.IF
// TODO: 조건문 : if 문
// 예제 1) 19살 이상이면 성인입니다. 출력하세요
// TODO: 사용법 :
// 요약 : 조건에 따라 참이면 결과실행 거짓이면 결과를 실행하지 않기
// if(조건식) {
// 실행문;
// }
// TODO: 해석 : 조건식이 true(참) 이면 실행문이 실행됨 (출력됨)
// TODO: 조건식 : 비교연산자(>=, < 등) 논리연산자(&&, ||)
// let age = 20; // 변수 정의 선언
// if (age >= 19) {
// alert("성인입니다.");
// }
// 간단 연습 : 12시 이상이면 오후입니다 라고 출력하세요
// let value = 12;
// if (value >= "12") {
// alert("오후입니다.");
// }
// 간단 연습 : 입력을 받아서 조건을 판단해서 출력하세요
// 입력 : 14
// 출력 : 미성년입니다
// prompt() 이용 조건문 사용
// let value = Number(prompt());
// if (value <= "14") {
// alert("미성년입니다.");
// }
// TODO:2)조건문 : 조건식이 참이면 실행문이 실행되고 거짓이면 else 실행문이 실행됨
// TODO: 사용법 : 참과 거짓일때 모두 실행된다
// IF(조건식){}
// 실행문;
// } else {
// 실행문2;
// }
// 예제 2) 19살 이상이면 성인입니다. 를 출력하고, (1)
// 19살 미만이면 미성년입니다.를 출력하세요 (2)
let value = 10; // 변수 정의 (선언)
// 조건문
if (value >= 19) {
alert("성인입니다");
} else {
alert("미성년입니다");
}
// TODO: 3) 조건문 : 조건식1이 참이면 실행문1이 실행되고 조건식2가 참이면 실행문2가 실행되고 모두 거짓이면 (조건문 1,2) ELSE 실행문3 이 실행됨
// TODO: 사용법 :
// 예제 3) 19살 이상이면 성인입니다. 를 출력하고
// 18살 이면 청소년입니다 를 출력하고
// 17살 이하이면 미성년입니다. 를 출력하세요
// let value = 18;
// if (value >= 19) {
// alert("성인입니다");
// } else if (value === 18) {
// alert("청소년입니다.");
// } else {
// alert("미성년입니다.");
// }
