HTML CSS 로 원데이 쇼핑몰 만들기
나름 쉬우면서도 어려운것 같은 코딩을 처음 시작해본다! 꼭 멋진 UI/UX 디자이너에서 프론트 엔드까지 다 할줄 아는 자격을 갖춰보리라 아자아자!!!
아래는 파이참을 통해 만든 스파르타 코딩첫번째 숙제 이다!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!--font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
*{
font-family: 'Gamja Flower', cursive;
}
.wrap{
width: 1000px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.mytitle{
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
width: 500px;
height: 500px;
margin: 0 auto;
display: block;
}
span{
font-size: small;
}
.text{
padding-top: 20px;
padding-bottom: 20px;
width: 500px;
text-align: left;
margin: 0 auto;
}
#dropdownMenuButton{
width: 447px;
background-color: white;
color: black;
}
.button{
width: 500px;
margin: 0 auto;
}
.mybtn{
background-color: blue;
color: white;
}
.input-group{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
</div>
<div class="text">
<h1>양초를 팝니다 <span style="font-size: small">가격: 3000원/개</span></h1>
<h4>이 양초는 사실 특별한 힘을 가지도 있어요. 양초를 켜고 소원을 빌면 뭐든지 이뤄지게 한답니다. 하나 사가세요 ! 대나무 향이 아주좋아요</h4>
</div>
<div class="button">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">주문자이름</div>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">수량</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
--수량을 선택하세요--
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">주소</div>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">전화번호</div>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<button class="mybtn red-font"> 주문하기</button>
</div>
</div>
</body>
</html>이것 외에도 자바스크립트 초보 단계도 배우고 있다
지금 주중에 너무 회사일과 운동과 병행하면서 같이 코딩을 배우려니 여간 몸이 지치는게 아니다 그래도 리뷰를 해보자면
자바스크립트 변수는 이렇게 사용한다!
//변수공식
let a=2
a+3
>5
a=5
<5
a+3
<8
let first_name='grace'----- ->문자열은 ('작은 따옴표 안에넣기')
Let last_name='lee'
>first_name + last _name
>'gracelee'
>first_name+5
>gracelee5
//자료형 공식
let a_list=['수박','참외','배'] ---->첫번째 '수박'은 0이되고 '참외'가 1이되고 '배'는 2가 된다.
자바스크립트의 공식은 항상 0으로 시작한다.
a_list[0]
>'수박' --->0을 호출했기 때문에 수박이 나오게 되는것이다.
** 여기서 변수를 추가할경우 !!!
a_list.push['감'] -->할경우 마지막 변수에 감이 추가가 되고 이로써 감은 3번째가 되는것이다.
//dictionary
let a_dict={'name':'bob', 'age': '27'}
여기서 key : value 순서로 이루어 지며 쓰는 순서는 달리 상관은 없다.
//if 문
if(age>20){
console.log('성인입니다')
}else{
console.log('청소년입니다')
}
여기서 20보다 크면 성인입니다 라고 출력이되고 20보다 작으면 청소년 입니다 라고 출력이 되는 if문.
사실 if 문이 가장어렵다... 응용하게 되면 더 어렵다.. 차차 적응이 됬음 좋겠다 !!!ㅠㅠㅠ
#if문#자바스크립트#코딩#스파르타코딩클럽#개발자#개발일지#코딩도와줘#코딩어렵다#코딩#코딩공부#ux#ui#uxui#디자이너의삶#디자이너#if#javascript#dictionary#변수#함수#자료형#조건문#반복문#코딩일지#코린이