반응형
Javascript
데이터 타입과 연산자
- 데이터 타입
string
number
boolean
...
- 연산자
산술 연산자
비교 연산자 ( === 같다, !== 다르다 //자바와 차이점은 =이 하나 더 들어간다)
-차이점?
=== : 데이터 타입까지 같은가? ex) string "1" === int 1 // false
== : 생김새만 같은가? ex) string "1" == int 1 // true
논리 연산자
&& : and
|| : or
! : not
조건문 / 반복문
자바와 같은 방식을 사용하기 때문에 생략.
배열은 반복문과 같이 많이 사용한다.
배열의 길이가 길 때에는 length함수를 이용한다.<<자주 이용되므로 암기!!
수학객체
JS의 수학기능을 사용하는 명령어
Math.max : 최대값
Math.min : 최소값
Math.random : 0~1 사이의 랜덤수 // 많이 쓰인다.
Math.round : 반올림
Math.ceil : 올림
Math.floor : 버림
Math.random()는 0과 1사이의 랜덤값을 반환하기 때문에 원하는 정수 값 만큼 *10^n을 해준다.
그리고 뒤의 소숫점을 버리기 위해 Math.floor함수를 사용해줌.
이때, 랜덤 수 맨 앞자리가 0이 되어서 오류가 날 수 있기 때문에 ex) 045488 >> 45488
문자열로 형변환을 해준 후 .padStart(길이값, start)를 붙여주어서 '045488' 형태로 출력될 수 있게 바꿔준다.
ex) String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
Cyworld
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>싸이월드</title>
<link href="styles/index.css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div class="background">
<div class="outerbox">
<div class="wrapper">
<div class="wrapper__left">
<div class="wrapper__left__header">
<div class ="today">
TODAY <span class="zero">0</span> | TOTAL <span class="count">12345</span>
</div>
</div>
<div class="wrapper__left__body">
<div class="header">
<div class="headerGrey">
</div>
<div class="line"></div>
<div class="profileWrapper">
<div class="profile">
<i class="fas fa-file-signature"></i> 이름
</div>
<div class="profile">
<i class="fas fa-phone"></i> Phone
</div>
<div class="profile">
<i class="fas fa-envelope-square"></i> E-mail
</div>
<div class="profile">
<i class="fas fa-images"></i> 인스타그램
</div>
</div>
</div>
<div class="footer">
<div class="feelWrapper">
<div class="feel">오늘의 기분</div>
<select class="feelSelect">
<option>기쁨 😀</option>
<option>슬픔 😭</option>
<option>분노 😡</option>
<option>행복 😊</option>
<option>웃음 😆</option>
</select>
</div>
</div>
</div>
</div>
<div class="wrapper__right">
<div class="wrapper__right__header">
<div class="wrapper__right__title">사이좋은 사람들, 싸이월드</div>
<div class="wrapper__right__setting">사생활보호설정<i class="fas fa-caret-right bbbb"></i></div>
</div>
<div class="wrapper__right__body">
<iframe src="home.html"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>home.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>홈</title>
<link href="styles/home.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="wrapper__header">
<div class="wrapper__title">
<div class="title">Updated news</div>
<div class="subtitle">TODAY STORY</div>
</div>
<div class="divideLine"></div>
<div class="content">오늘의 기분 너무 좋음</div>
</div>
<div class="wrapper__body">
<div class="wrapper__title">
<div class="title">My Video</div>
<div class="subtitle">INTRODUCE YOURSELF</div>
</div>
<div class="video">
</div>
</div>
</body>
</html>
index.css
* {
margin: 0px;
box-sizing: border-box;
}
.background {
background-image: url('../images/background.png');
width: 1024px;
height: 600px;
padding-left: 20px;
padding-top: 20px;
}
.outerbox {
background-image: url('../images/outerbox.png');
width: 808px;
height: 544px;
}
.wrapper {
display: flex;
flex-direction: row;
padding-left: 32px;
padding-top: 32px;
}
.wrapper__left {
width: 208px;
height: 472px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
.wrapper__left__header {
}
.today {
font-size: 9px;
padding-bottom: 8px;
}
.zero {
color: red;
font-size: 11px;
}
.count {
font-size: 11px;
}
.wrapper__left__body {
width: 208px;
height: 440px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid gray;
border-radius: 15px;
padding-top: 20px;
padding-bottom: 31px;
padding-left: 30px;
padding-right: 30px;
background-color: white;
}
.wrapper__left__body .header {
width: 100%;
height: 70%;
}
.headerGrey {
width: 148px;
height: 133px;
background-color: #c4c4c4;
}
.line {
border-top: 1px dotted black;
margin-top: 12px;
margin-bottom: 12px;
}
.profileWrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 72px;
}
.profile {
color: #999999;
font-size: 9px;
}
.wrapper__left__body .footer {
width: 100%;
height: 30%;
display: flex;
align-items: flex-end;
}
.wrapper__right {
width: 524px;
height: 472px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 10px;
z-index: 1;
}
.wrapper__right__header {
padding-top: 10px;
width: 510px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper__right__title {
padding-left: 40px;
color: #55b2d4;
font-weight: 700;
font-size: 16px;
}
.wrapper__right__setting {
font-size: 13px;
font-weight: 500;
}
.wrapper__right__body {
width: 524px;
height: 430px;
background-color: white;
border: 1px solid gray;
border-radius: 15px;
}
.feelWrapper {
width: 141px;
height: 41px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.feelSelect {
width: 141px;
}
.bbbb {
color: red;
}
iframe {
width: 100%;
height: 100%;
border: none;
}home.css
* {
margin: 0px;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wrapper__header {
width: 100%;
height: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wrapper__body {
width: 100%;
height: 270px;
}
.wrapper__title {
display: flex;
align-items: center;
}
.title {
color: #55b2d4;
font-size: 13px;
font-weight: 700;
}
.subtitle {
padding-left: 5px;
font-size: 8px;
}
.divideLine {
width: 100%;
border-top: 1px solid grey;
}
.content {
font-size: 11px;
color: #999999;
}
.video {
margin-top: 15px;
width: 464px;
height: 240px;
background-color: #c4c4c4;
}반응형
'Review' 카테고리의 다른 글
| [후기] 메가 IT 아카데미 웹프로그래밍 과정, 6개월 간의 여정 회고 (0) | 2022.04.19 |
|---|---|
| [코드캠프] 프리캠프 4일차 (0) | 2021.11.01 |
| [코드캠프] 프리캠프 2일차 (0) | 2021.10.27 |
| [코드캠프] 프리캠프 1일차 (0) | 2021.10.26 |
| 메가 IT 아카데미 자바 웹프로그래밍과정 청강 1, 2일차 후기 (0) | 2021.10.18 |
