HTML (Hyper Text Markup Language)
구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어
-
웹 페이지(web page) : 월드 와이드 웹 상에 있는 개개의 문서
html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View 라고 하는 스크린을 통해 접하게 되는 것
-
open tag, close tag 로 구성됨(콘텐츠를 감싸기 위함)
정리
- DOCTYPE
DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 가장 먼저 선언되어야 한다. 선언된 문서의 html 버전을 웹 브라우저에 알려주기 위해 적어야 함 - UTF-8
유니코드를 인코딩(encoding)하는 방식 - 문서는 크게 head,body 로 나뉘며 head는 메타데이터를 body는 문서 내용을 담고있다.
태그 예시
-
title : 웹 페이지를 열었을때 상단 바에 보이는 제목을 바꿀 수 있다.
-
p : 단란을 나눌때 사용
-
br : 줄바꿈
등등..
CSS (Cascading Style Sheet)
HTML로 만들어진 문서의 텍스트 색상이나 크기, 이미지 크기나 위치, 표의 색상, 배치방법 등 웹 문서의 디자인 요소를 담당하는 언어
정리
- 태그에 직접 코드를 쓰는 inline 방식, head 에 style,/style 을 정의하는 embed방식, css파일을 외부에 정의하는 external file 방식 으로 나뉜다.
in-line 방식
<div style="color:black; font-size: 20px; font-weight: bold;">안녕</div>embed 방식
<head>
<style>
div{
color:red;
font-size: 20px;
font-weight : bold;
}
</style>
</head>
<body>
<div>HELLO</div>
</body>JAVASCRIPT
동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어
1주차 숙제 코드
<!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>homework</title>
<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=Gothic+A1:wght@100&family=Nanum+Brush+Script&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gothic A1', sans-serif;
font-family: 'Nanum Brush Script', cursive;
font-family: 'Nanum Pen Script', cursive;
}
img {
display: block;
margin: 30px auto;
}
.up {
margin-left: 300px;
margin-right: 300px;
}
.button {
margin-bottom: 30px;
}
p {
line-height: 5px;
}
</style>
<script>
function order() {
alert('주문이 완료 되었습니다.')
}
</script>
</head>
<body>
<div>
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTExMjRfMTkg%2FMDAxNjM3NzE5ODY5OTI2.j7RWE8gc3ZSw-FjKFcDwGZnuxM8m2yZbivZr2oCWgJAg.vn_hr4dysjTYC_A_j2ccM02ApBKXEPn6mIQVJ4OGjTQg.JPEG.bigbrogym1%2Fhgfhgf.jpg&type=a340"
alert="커피한잔하세요" style="width:300px; height:330px"/>
</div>
<div class="up">
<div style="font-size: 30px">
<p>상품제목 <span style="font-size: 12px">가격: FREE</span></p>
</div>
<p>코딩하기 위해 날밤까기는 필수 커피와 함께 하세요</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
</div>
<input type="text" class="form-control" placeholder="" aria-label=""
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<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" id="basic-addon1">주소</span>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">전화번호</span>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div style="text-align:center" class="button">
<button type="button" onclick="order()" class="btn btn-primary">주문하기</button>
</div>
</div>
</body>
</html>
요약
display: block, margin auto로 사진 중앙배치
자바스크립트로 주문하기 버튼을 눌렀을때 '주문이 완료되었습니다' 문구 띄움
부트스트랩으로 input 박스 가져옴
'상품제목 가격: free' -> 가격: free 부분에 span 태그로 부분 폰트사이즈 조정
TIL 정리