1주차 강의에서는 웹 페이지를 시각적으로 구현하는 HTML, CSS 에 대해 배워보았습니다.
해당 수업을 이전에 스파르타 코딩클럽 '내일배움단' 을 통해 '웹개발 종합반' 과 '앱개발 종합반' 을 한 번 수강했던 적이 있어서 수업 내용을 이해하는 데에는 큰 어려움이 없었습니다.
강의 내용은 크게 변한 건 없었지만, 개발환경이 파이참에서 비주얼 스튜디오 코드로 변경되었습니다.
HTML
HTML 은 웹 페이지의 뼈대 역할을 하는 마크업 언어입니다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는 데 사용됩니다.
다음 태그들은 구역을 나누는 태그들입니다.
div: 구역을 나눕니다.
<div></div>
p: 문단입니다.<p></p>
ul, li: 리스트입니다.
<ul> <li>bullet point!1</li> <li>bullet point!2</li> </ul>
다음 태그들은 구역 내 콘텐츠 태그들입니다.
h1 ~ h6: 제목을 나타내는 태그입니다. 페이지마다 하나씩 써줘야 구글 검색이 잘 됩니다.
<h1> h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. </h1> <h2>h2는 소제목입니다.</h2> <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
span: 특정 글자를 꾸밀 때 사용합니다.<span style="color: red">글자</span>
a: 하이퍼링크를 만듭니다.<a href="http://naver.com/"> 하이퍼링크 </a>
img: 이미지를 만듭니다.<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
input: 여러 종류의 input 박스를 넣습니다.<input type="text" />
button: 버튼입니다.<button>버튼</button>
textarea: 글 쓰는 공간을 만듭니다.<textarea>글 쓰는 공간</textarea>
위 HTML 태그들을 이용해 아래와 같이 웹 페이지를 구현할 수 있었습니다.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</body>
</html>CSS
HTML 이 뼈대였다면, CSS 는 꾸미는 역할을 합니다. 하지만, 한 가지 조건이 붙는데, 특정 글자, 박스, 구역, 배경 등을 꾸미기 위해선 해당하는 특정 태그를 가리키는 코드가 필요할 겁니다.
때문에 HTML 태그에 class="이름" 라는 코드를 붙여 CSS 코드를 작성하는 style 태그에 특정 태그를 가리키는 코드를 작성하고 원하는 대로 꾸밀 수 있습니다.
<div class="이름">꾸며줄 대상(텍스트, 박스, 배경, 구역 등)</div>
※ 여기서 '이름' 은 임의로 '이름' 이라고 정했지만, 사용자가 편한 대로 이름을 만들어주면 됩니다.
CSS 코드는 head 태그 안에서 style 태그를 만들어 style 태그 안에 CSS 코드를 작성해도 되지만, CSS 코드들이 많아질 것을 대비해 미리 CSS 파일을 따로 만들어 HTML 파일에서 CSS 파일을 import 하는 것이 효율적입니다.
다음 코드들은 주로 쓰는 CSS 코드입니다.
width, height: 구역의 가로와 세로의 크기를 지정
background-image: url('')
background-position: center
background-size: cover
: 구역의 배경에 url 에 해당하는 이미지를 가득 채운채 가운데에 넣기
margin, padding: margin 은 바깥 여백을, padding 은 안 쪽 여백의 간격이고, 속성값을 auto 로 하는 경우 여백의 상하좌우가 모두 동일해져 가운데로 위치하게 됨.
border: 테두리
border-radius: 테두리의 가장자리(꼭지점)의 둥근 정도
text-align: 글씨 가운데 정렬
display: flex
flex-direction: column or row
align-items: center
justify-content: center
: 구역 안의 내용물을 가운데로 정렬함.
구글폰트 적용하기
글씨체를 바꾸고 싶다면, 아래 구글 폰트 페이지에서 임포트로 불러와 CSS 코드를 복사해 원하는 폰트로 바꿔 사용할 수 있습니다.
https://fonts.google.com/?subset=korean
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
import 코드는 style 태그나 CSS 파일의 제일 위에 붙여넣으면 되고,
CSS 코드는 style 태그나 CSS 파일에서 전체를 특정하는 *{ } 을 사용해서 웹 페이지 전체에 적용시킬 수 있습니다.
위 HTML 태그와 CSS 코드들을 이용해 아래와 같이 웹 페이지들 구현할 수 있었습니다.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: white;
text-align: center;
padding-top: 30px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap {
width: 300px;
margin: 0px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호을 입력하세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
index.html
<!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>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
}
.mytitle > button {
width: 250px;
height: 50px;
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn > button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</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">영화 URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
</select>
</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">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰세요.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰세요.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰세요.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰세요.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
'항해 16기 > 웹개발 종합반' 카테고리의 다른 글
| [웹개발 종합반 4주차] Flask (0) | 2023.07.02 |
|---|---|
| [웹개발 종합반 3주차] Python (0) | 2023.06.30 |
| [웹개발 종합반 2주차] JavaScript & JQuery, fetch (0) | 2023.06.30 |
