< script > 자바스크립트
// : 주석처리
console.log( )
코드 곳곳에 console.log를 넣음으로서 계산한 데이터나 코드가 제대로 실행됐는지 확인
" " : 문자열
let 숫자 = 1 <---- 숫자데이터
let 문자 = "문장" <---- 문자데이터
1 : 계산의미의 숫자
"1" : 문자의미의 숫자
"899999" < "9" (사전형식)
console.log(1) : 숫자
console.log("문자") : 문자
console.log(문자) : 변수
사칙연산 ( + _ * / )
% : modular
나머지를 구함 (10 % 3 = 1)
함수
자주 쓰는 코드를 모아놓고 필요할때 편하게 쓰는 것
function 함수이름(변수, 변수) { }
CSS
style = "(임의태그)"
< style > [지정태그] {(임의태그)}
color : 색 넣는 태그 ;뒤에 추가태그 가능
text-align : 글 위치 조정
div와 활용하는 태그들
width, height : 가로세로 크기 조절
border : 테두리 ( solid:실선, dotted:점선, dashed:대시 )
border-radius : 모서리
padding : 박스와 글자 사이의 여백
margin : 박스와 배경사이의 여백
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 첫시간</title>
<style>
p { color: chartreuse;background-color: blueviolet;
text-align: center;
}
div {
background-color: hwb(0 79% 18%);
width: 400px; height: 200px;
border: 3px solid black; /* solid:실선 dotted:점선 dashed:대시 */
border-radius: 20px;
padding: 30px; margin: 50px;
}
</style>
</head>
<body>
<h1>CSS 적용하기 첫 시간</h1>
<h2 style="color:aquamarine; background-color:darkorange" >글씨에 색깔 넣기</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis aut, vero repellendus tempora, consectetur porro doloribus accusamus, quis impedit provident corrupti! Deserunt, itaque! Deleniti facilis similique fugiat dolores voluptas dolor. </p>
<p>두 번째 만든 p태그</p>
<p>세 번째 p태그</p>
<div></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log("메세지 입력")// 미ㅏㅇㄹ미ㅏ으리마ㅡㅇ림아ㅡㄻ나ㅡ츈마엄ㅇㄴㅁㄹ
let 몸무게 = 58
console.log(몸무게)
// 코드 곳곳에 console.log를 넣음으로서 내가 계산한 데이터나 코드가 제대로 실행되었는지 확인
let 키 = 168
console.log(키)
// 변수2. 자료의 종류
let 숫자 = 1 // 1. 숫자 데이터
let 문자1 = "문장" // 2. 문자 데이터
let 문자2 = "3"
// 숫자1과 문자1의 차이점은 무엇인가?
// 집어넣을 수 있는 데이터 : 숫자, 문자, 변수
console.log(1) // 숫자
console.log("문자1") // 문자
console.log(문자1) // 변수
// 사칙 연산 + - * /
let x = 10
let y = 3
console.log("사칙연산 해보기")
console.log(x+y)
console.log(x-y)
console.log(x*y)
console.log(x/y)
console.log("% 계산 : modular") // 나머지를 구하기 위해 사용하는 연산
console.log(x % y) // 10 % 3
//save
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let 성민이키 = 179
let 성민이체중 = 60
let 성민이BMI = 성민이체중 / (성민이키/100 *성민이키/100)
console.log("성민이의 BMI : ", 성민이BMI)
let 은성이키 = 179
let 은성이체중 = 76
let 은성이BMI = 은성이체중 / (은성이키/100 * 은성이키/100)
console.log("은성이BMI : ", 은성이BMI)
let 선생님키 = 188
let 선생님체중 = 78
let 선생님BMI = 선생님체중 / (선생님키/100 * 선생님키/100)
console.log("선생님 BMI : ", 선생님BMI)
let 나의키 = 168
let 나의체중 = 58
let 나의BMI = 나의체중 / (나의키/100 * 나의키/100)
console.log("나의 BMI : ", 나의BMI)
let 태연이키 = 170
let 태연이체중 = 60
let 태연이BMI = 태연이체중 / (태연이키/100 * 태연이키/100)
console.log("태연이 BMI : ", 태연이BMI)
// 함수 : 자주 쓰는 코드를 그룹으로 만들어두고, 필요할 때 편하게 쓰는 것
// 사용법 : 1.만든다 2.쓴다
function bmi계산( 키, 체중 ) { // 외부에서 키, 체중 가져옴
// 여기에 자주 쓰는 코드 집어넣음
// 키를 m 단위로 변환
let 변환한키 = 키/100
// 체중을 가져오기
// bmi를 최종 계산
let bmi = 체중 / (변환한키 * 변환한키)
// console.log로 bmi를 알려줌
console.log(bmi)
}
console.log("성민이 bmi")
bmi계산(성민이키, 성민이체중) // 2. 함수 사용하기
console.log("은성이 bmi")
bmi계산(은성이키, 은성이체중)
console.log("나의 bmi")
bmi계산(나의키, 나의체중)
</script>
</body>
</html>