2024. 8. 26. 21:15ㆍFront-end
※ 참고 : 해당 게시글은 각 언어의 함수 또는 기능을 세세하게 다루지 않았습니다. 실습에 사용한 내용을 정리한 글인 점을 알립니다.
HTML, CSS 그리고 Bootstrap 을 활용한 실습에서 구현한 내용을 정리하는 것이 목적이다.
실습 결과 이미지이다. 위와 같은 결과를 출력하기 위해 작성한 코드를 하나씩 뜯어보며 되짚어 보려한다. 아래는 실습에 사용한 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억 앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&family=Black+Han+Sans&family=Jua&display=swap');
* {
font-family: "Jua", sans-serif;
}
.mytitle {
height: 250px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url(https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80);
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: white;
border: 1px solid white;
border-radius: 5px;
margin-top: 20px;
}
.mycards {
width: 1200px;
margin: 30px auto 0px auto;
}
.mypostingbox {
width: 500px;
margin: 30px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px blue;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn > button {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 제목">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 내용">
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 날짜">
<label for="floatingInput">앨범 날짜</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">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1. HTML
1-1. <head>, <body>
HTML 에는 많은 요소가 있겠지만 크게 두 영역으로 나뉜다. 하나는 '<head>' 영역이고 다른 하나는 '<body>' 영역이다. 나의 경우 직역한 뜻이 이해하는데 도움이 됬는데, '<head>' 는 뜻 그대로 '머리' 의 역할을 한다. 우리가 생각을 하면 다른 사람이 무슨 생각을 하는지 모르는 것 처럼 페이지의 속성을 정의하는 등의 코드를 작성해 사용자에게 보이지 않는 부분이다. '<body>' 의 경우 '몸(통)' 의 역할인데, 다른 사람의 눈, 코, 헤어스타일을 보고 확인 할 수 있는 것처럼 웹 브라우저를 통해 사용자에게 보여지는 부분이다.
1-2. <title>
페이지 명으로 이해했다. 보통 웹 브라우저의 '탭' 에 표시되는 것이 바로 '<title>' 이다.
1-3. <div>
'<div>' 의 'div' 라는 말은 사실 코드 작성시 '나눈다' 의 의미로 자주 사용하였는데 HTML 에서는 '구역을 나눈다' 라는 의미가 가장 알맞는 표현인 것 같다. 여기서 '구역' 은 페이지를 나눈다는 것도 맞지만, 각 요소를 그룹을 지어 위치하게 한다는 의미도 포함하는 것을 잊지 않도록 하자.
1-4. <button>
태그명 그대로 버튼 추가시 사용된다.
1-5. <h1>, <h2> ... <h6>
깃허브에 'README.md' 를 작성할 때 마크다운 언어를 사용했는데 거기서 사용되는 '#' 의 기능과 같다. 숫자가 작을 수록 큰 텍스트가 출력되며 순차적으로 '제목', '소제목' 등을 의미한다.
2. CSS
2-1. <style>
'<head>' 영역 안에 선언하여 클래스의 스타일(형식)을 지정할 때 사용한다. '<style>' 안에 '.클래스명 { 형식 지정 코드 작성 }' 형식의 구문으로 특정 클래스의 형식을 지정하게 된다. '>' 를 통해 클래스 (영역)에 포함된 특정 타입을 지정할 수 있다.
2-2. background
배경에 관한 형식을 다룰 때 사용하는 것으로 보인다. 물론 'color', 'image' 등의 옵션들이 다수 존재하며 옵션을 사용할 땐 '-' 를 구분자로 사용하여 'background-color' 같은 방식으로 사용한다.
2-3. width, height
클래스의 사이즈를 다룰 때 사용하며, 다양한 단위가 지원되는 듯하다. 현재로서는 '픽셀(px)' 만 사용해 보았다.
2-4. color
폰트(글씨)의 색상을 정할 때 사용한다.
2-5. fmaily
사용 폰트를 지정할 때 사용하는 것으로 보인다.
2-6. margin, padding
'margin' 와 'padding' 둘 다 영역을 다룬다. 하지만 다루는 영역의 기준이 달라 이를 알아 두어야 한다. 'maring' 의 경우 오브젝트와 화면 사이 여백에 대해 작동하므로 '외부 여백' 을 다룰 때 사용하며, 'padding' 의 경우 오브젝트 안의 여백인 '내부 여백' 을 다룰 때 사용한다.
3. Bootstrap
영상 편집을 할 때 미리 만들어둔 영상틀을 탬플릿이라 하여 많이 사용하는데 프론트엔드의 탬플릿은 아마 'Bootstrap' 이 아닐까 싶다. 보기에는 간단하지만 구현하려면 다소 시간을 잡아먹게 될텐데, 잘 만들어진 'Bootstrap' 은 확실히 생산성을 높이는 것 같다.