1. Web 개발 = 홈페이지, Web 페이지를 만드는 기술이다.
Web 브라우저 작동 원리
Client(개인용 컴퓨터, 스마트 폰) : 요청을 요구하는 대상
Server(서버 컴퓨터) : 요청에 대한 응답을 주는 대상
이때, HTML, CSS, JavaScript가 무엇인가?
HTML : 뼈대
CSS : 꾸미기
JavaScript : 움직이기
이다.
HTML만 있으면 Web 페이지의 뼈대만 존재하게 되고, CSS로 그 뼈대를 꾸며 나갈 수 있으며, JavaScript로
유저 행동에 대한 동작을 만들 수 있다.
2. HTML에 들어가기 앞 서
FrontEnd : 눈에 보이는 영역을 FrontEnd
BackEnd : 눈에 보이지 않는 영역을 BackEnd
라 한다.
3. HTML 구조
HTML은 head 부분과 body 부분으로 나눠있다.
head 부분은 정보를 세팅하는 영역이다.
body부분은 눈에 보이는 모든 영역이다.
head에는
- title : 사이즈 제목
- css : 꾸미기 정보
가 있다.
body에는
- div : 구역 나누기
- p : 문단 나누기
- ul
li : 불렛 포인트
- h1 ~ 6 : 제목 태크(h1 ~ 6로 갈수록 크기가 작아진다.)
- hr : 수평선
- a href : 하이퍼링크
- img : 이미지
- input type =
text : 텍스트
radio : 단일 선택 체크 박스
checkbox : 다중 선택 체크 박스
submit : 폼 양식을 서버에 전송
button : 버튼
reset : 폼 초기화
file : 파일 업로드
date : 날짜 정보 입력
email : 이메일 형식 입력
color : 색상 입력
range
min : 최소 범위
max : 최대 범위
search : 검색 인풋 요소
select
option : 옵션 박스
label : 이름 붙이기
이다.
외울 필요 없이 필요한 경우에 인터넷에서 검색해 사용하면 된다!!!
(억지로 외울 필요가 없다!!!)
위의 html 테그들을 바탕으로 위와 같이 간단한 로그인 정보 입력 창을 만들어 보았다.
그 후 CSS로 꾸며보았다.
CSS 사용법은
head 부분에서 <style></style> 를 추가한 후
<style>
.(앞에 점 있음)class이름(ex : mytitle)
{
color : red;
}
</style>
처럼 사용된다.
이렇게 만든 class의 이름을
body에 적용시킬 테그에서
<h1 class="mytitle">로그인 페이지</h1>
처럼 사용하면 된다.
그 결과 :
처럼 "로그인 페이지"가 빨간색으로 바뀐 것을 볼 수 있다.
자주 쓰는 CSS로
- width : 가로 사이즈
- height : 세로 사이즈
- text- align : 글자 정렬
left, center, right
- color : 글자 색상
- margin : 마진(외부 객체간 간격 띄위기)
top, right, bottom, left
- padding : 패딩(내부 간격 띄우기
top, right, bottom, left
- border-radius : 테두리 둥글게
- background-image : url
배경 이미지 가져올 url 주소
- background-position : 배경 주소
- background-size : 배경 사이즈
contain, cover
등이 있다. 이렇게 자주 사용하는 CSS를 바탕으로
만들어 보았다.
이후, Google에서 제공하는 폰트로
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
*
{
font-family: "Black Han Sans", sans-serif;
}
</style>
로 글자 폰트 import해 바꿔 보았다.
이후, 부트 스트랩을 이용해서 남이 만들어 놓은 템플릿을 가져와서
위와 같은 사이트를 만들어 보았다.
전체 코드 :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>My Album</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
color: white;
height: 250px;
/* 내용물을 정렬 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center;
background-size: cover;
}
.mytitle > button {
width: 150px;
height: 50px;
background-color: transparent;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
border: 1px solid white;
margin-top: 20px;
}
.mycards {
margin: 20px auto 20px auto;
width: 1200px;
}
.mypostbox {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px blue;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.mybtn>button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">앨범 내용</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>