저번 'Javascript 공부일지' 에서는 '앱 개발'을 5주간 배우며 앱 서비스를 배포하는 것까지 완성해보았습니다.
개발을 할때 앱을 만들어 배포하는 것도 좋지만, 인터넷을 통해 쉽게 접속하고 모바일로도 쉽게 접할 수 있는 '웹 서비스' 개발 또한 흥미가 생겼습니다. 이번 'Javascript 공부일지2' 에서는 앱을 만들지 않고, 인터넷에 접속하는 것만으로 웹 서비스를 이용할 수 있는 '웹 개발'에 대해 배워보려고합니다!
<자바스크립트 복습하기>
이 블로그 내 관련 게시물 : https://lefton.tistory.com/50
1. 이미지 넣기
background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size:cover;
background-position:center;background-image:url(" ");
background-size: ;
background-position: ;
이 세줄은 항상 같이 다니며 이미지를 배치해줍니다. (이미지 주소, 이미지 크기, 이미지 위치 등)
margin : 5px 10px 10px 10px
/*
속성은
^ > v <
위-우-아래-좌 순서입니다.
*/margin속성을 통해 콘텐츠 주변으로 간격을 줄 수 있습니다.
2. 브라우저 화면에서 모든 태그요소를 중앙 정렬하기
그 태그 요소의 상위요소로 div를 만들어 묶어서 그 div를 옮기는 것이 중요합니다.
div class=wrap처럼 설정해준 후
style 태그에 .wrap 클래스를 만들어
margin:auto; 속성을 주면 전체적으로 중앙 정렬이 됩니다.
<style>
.wrap{
margin:auto;
}
<div class=wrap>
<text>예시입니다</text>
</div>3. 부트스트랩을 활용한 '중고거래' 사이트 만들기
기존 나홀로메모장 예시 사이트에서
1) display:block
2) dropdown 템플릿 사용 >> 부트스트랩 검색
3) span 태그로 특정 부분만 스타일 매기기
4) 판매할 이미지는 img 태그 or div태그의 background로 지정 가능
<최종화면>
<중고거래 사이트 HTML 전체코드>
<!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>
<title>부트스트랩 연습</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.item-img {
width: 500px;
height: 300px;
background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG");
background-position: center;
background-size: cover;
}
.price {
font-size: 20px;
}
.item-desc {
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}
.item-order {
width: 500px;
margin-bottom: 50px;
}
.btn-order {
margin: auto;
width: 100px;
display: block;
}
.wrap {
width: 500px;
margin: auto;
}
.rate {
color: blue;
}
</style>
<script>
// 추후 자바스크립트 코드가 들어가며 기능을 할 위치
</script>
</head>
<body>
<div class="wrap">
<div class="item-img"></div>
<div class="item-desc">
<h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>
<p>이 양초는 사실 특별한 힘을 지니고 있어요!</p>
<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
</div>
<div class="item-order">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주문자이름</span>
</div>
<input id="order-name" type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select id="order-count" class="custom-select">
<option selected>-- 수량을 선택하세요 --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주소</span>
</div>
<input id="order-address" type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">전화번호</span>
</div>
<input id="order-phone" type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">수량</th>
<th scope="col">주소</th>
<th scope="col">전화번호</th>
</tr>
</thead>
<tbody id="orders-box">
</tbody>
</table>
</div>
</body>
</html>4. 버튼에 margin:auto 처럼 간격이 적용되지 않을때
이는 버튼이 글 속성을 가지고 있기때문인데, 박스 속성으로 만들어 준 후 적용해주어야 정상처리가 됩니다.
글 속성을 박스 속성으로 만들어주는 코드
display:block;
5. 짝 / 홀수에 따라 다른 얼럿(Alert)를 띄우는 onclick 함수 만들어보기
지난 번 나홀로메모장 에서 실습했던 부분에서 '포스팅 박스 열기'를 눌렀을 때 body태그안에 있는 hey() 함수가 실행되어
'안녕!!!' 이라는 문구가 뜨게됩니다. 이 hey() 함수 안에다가 구현할 것입니다.
function hey() {
let count = 1; // 첫번쨰 클릭시 1이므로 1부터 시작
if (count % 2 == 0) {
alert('짝수입니다');
} else {
alert('홀수입니다');
}
count += 1;
}그 다음 실행해서 HTML 페이지에서 코드검사를 해보면 원하는 결과가 나오지 않습니다.
그 이유는 let count=1 이 함수안에 선언되어있기때문에 함수가 모두 끝나는 count += 1시점에
count는 계속 새로 생기게 되어 홀수만 출력되는 것입니다.
따라서 함수 바로 위 or 밖에 선언을 해주면 됩니다.
+) 전역 변수 선언 : 함수 밖에 선언한 코드
let count = 1; // 첫번째 클릭시 1이므로 1부터 시작
// 함수 밖에 선언
function hey() {
if (count % 2 == 0) {
alert('짝수입니다');
} else {
alert('홀수입니다');
}
count += 1;
}이렇게 선언하는 방식을 전역변수로 선언한다고 부릅니다.
다음 공부일지에서는 웹 서비스의 데이터를 관리하기 위해 필요한 개념인 '제이쿼리(jQuery)'에 대해서 😃포스팅해보겠습니다.
'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.
'Programming > Javascript_자바스크립트' 카테고리의 다른 글
| [Javascript 공부일지2] 1주차 - 3 (웹개발 - Ajax (에이잭스)) (0) | 2022.09.04 |
|---|---|
| [Javascript 공부일지2] 1주차 - 2 (웹개발 - jQuery (제이쿼리)) (0) | 2022.09.03 |
| [JAVASCRIPT 공부일지] '수익성 앱 만들기'를 마치며 (0) | 2022.08.29 |
| [JAVASCRIPT 공부일지] 5주차 - 3 (수익성 앱 만들기 - 배포하기) (0) | 2022.08.29 |
| [JAVASCRIPT 공부일지] 5주차 - 2 (수익성 앱 만들기 - 애드몹 (배너생성)) (0) | 2022.08.20 |
