[수업 목표]
1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
3. Javascript 기초 문법을 익힌다.
✍️새로 학습한 내용
1. 부트스트랩
기본적으로 웹 페이지 구조를 만들기 위해서는 HTML을 사용하며, 만들어진 구조(요소)를 꾸미기 위해서 CSS를 활용한다.
이때, 부트스트랩을 활용하면 미리 만들어 놓은 스타일을 활용하여 손쉽게 웹 페이지를 꾸밀 수 있다.
무조건 부트스트랩을 활용하는 것보다는 개발자가 정의하는 CSS와 부트스트랩을 함께 조화롭게 사용하는 것이 좋다.
사용법
1. html문서에서 head 태그 안에 아래와 같이 부트스트랩을 사용하기 위한 2줄의 코드를 넣는다.
- 부트스트랩 CDN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 부트스트랩 CDN
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
......
2. 원하는 스타일을 적용하기 위해 부트스트랩 사이트에서 적절한 스타일을 찾아 지정되어 있는 코드를 html문서에 적용한다.
- 부트스트랩 컴포넌드 5.0 : https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
2. 이모티콘 사용
웹 사이트를 만들면서 이모티콘 형태의 글씨를 넣어 좀 더 다채로운 페이지를 꾸미고 싶을 시 원하는 이모티콘을 선택하여 복사/붙여넣기로 손쉽게 적용할 수 있게 해준다.
https://kr.piliapp.com/facebook-symbols/
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
3. 모바일 처리(max-width 사용)
영역에 크기를 지정하기 위해서는 css 요소로 width, height를 지정해준다. 이때 크기를 지정해주는 방식을 px, %등 여러가지가 있을 수 있다. 1주차 강의에서는 px을 통하여 고정크기로 지정해주었다. 이럴 경우 현재 창 화면이 지정한 크기보다 작아지면 화면을 벗어나는 경우가 발생한다.
이러한 현상은 PC에 비해 상대적으로 화면크기가 작은 모바일에 적용하려 할 경우에도 고려해볼 수 있는 부분이다. 이를 해결하기 위해서 본 과정에서 max-width를 학습했다.
아래 첨부한 사진을 통해서 확인할 수 있듯이 width를 적용할 경우 고정크기이기에 화면이 상대적으로 작아지면 깨지는 현상이 발생한다. 그러나 width대신 max-width를 활용하면 영역이 커질 수 있는 최대크기를 제어할 수 있게된다. 이때 width를 함께 사용하여 최대크기보다 작을 동안에는 얼마로 할 것인지를 지정해 줄 수 있다. 여기서는 상대크기인 %를 활용하여 전체 창 크기 대비로 지정해주었다.
정리해서 전체 창 크기 대비해서 영역에 크기가 max-width보다 작을 동안에는 상대크기로 영역이 지정되며, max-width에 도달하면 더 이상 크기는 변경되지 않고 max-width 값으로 지정된다.
💻과제
- 팬명록 만들기
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 1주차 과제</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.newsculture.press/news/photo/202209/511072_621954_2920.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mypost{
max-width:500px;
width:95%;
margin:20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding:20px;
}
.mypost > button {
margin-top: 10px;
}
.mycard{
max-width:500px;
width:95%;
margin:20px auto 0px auto;
}
.card {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>이영지 팬명록</h1>
</div>
<div class="mypost">
<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" style="height:100px" placeholder="Leave a comment here"
id="floatingTextarea"></textarea>
<label for="floatingTextarea">응원댓글</label>
</div>
<button type="button" class="btn btn-dark">응원남기기</button>
</div>
<div class="mycard">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>SMTM11 우승 축하한다</p>
<footer class="blockquote-footer">jypark</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>MZ세대 롤모델</p>
<footer class="blockquote-footer">X세대</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>장하다 우리 딸!</p>
<footer class="blockquote-footer">더 쿼이엇</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>🖊 회고
HTML, CSS, JS를 공부하고 사용해본 적이 있었기에 1주차 강의를 들으면서 크게 어려움 없이 수강할 수 있었던 것 같다. 그렇기에 기본적인 개념이나 내용보다는 강의중 유용한 팁들을 통해서 새롭게 배운 부분들이 있었다. 그 중 부트스트랩은 기존에 한번쯤 배워보고 싶었던 부분이나 프론트 쪽으로는 크게 관심을 갖고 공부하지는 않았기에 관심을 갖고 찾아보고나 알아보고자 하지는 않았던 것 같다. 그러나 이번 강의를 통해서 배워보고 사용해보면서 너무 간편하고 깔끔하게 디자인 할 수 있는게 신기하면서도 재미있었다.
다음으로 별점 주는 기능 관련하여 필요했던 적이 있었고, 별을 화면에 나타내는 것에 대해서 여러가지로 고민하고 찾아봤던 기억이났다. 당시 직접 맡은 부분은 아니라 협동하는 관점에서 찾아봤으나, 이번 강의에서 관련 부분이 나오고 마치 이모티콘을 텍스트처럼 사용했다는게 너무 신기했다. 이 부분은 앞으로 정말 유용하게 많이 사용할 듯 싶다!!!
마지막으로 내가 프론트쪽을 만들어보고자 할 때 늘 항상 고민한 것이 화면에 크기에 따라 구성이 깨지는 부분인데 이 부분에 대해서도 또 하나 배웠다는게 정말 큰 수확이라 생각된다. 실제로도 강의를 수강 후 여러가지로 변경해보고 max-width관련 내용들도 검색해보며, 관심 있게 봤던 부분이다.
전체적으로 항해99를 시작하면서 초보자도 할 수 있다. 열정이 중요하다 여러번 들은 것 같은데, 1주차를 들어보고 전체적인 5주차 커리큘럼을 봐도 딥하게 배우는 것이 아닌 전반적으로 개발이 어떻게 진행되며, 만들어지고, 시중에 배포되는지까지 큰 흐름을 순차적으로 쉽고 빠르게 훑고 넘어가기에는 좋은 강의라 생각든다.
코드 스니펫 딸깍!! 이거 진짜 너무 중독되서 어느 순간 나도 모르게 깔딱하고 있는 내 모습 .. ㅎㅎ
'항해99' 카테고리의 다른 글
| 사전 스터디(웹개발 종합반 5주차) (0) | 2022.12.10 |
|---|---|
| 사전 스터디(웹개발 종합반 4주차) (0) | 2022.12.09 |
| 사전 스터디(웹개발 종합반 3주차) (0) | 2022.12.08 |
| 사전 스터디(웹개발 종합반 2주차) (0) | 2022.12.06 |