ＴＩＬ (ToDay I LearNEd)/JavaScript

꾸밀 때 자주 쓰는 CSS 모음 (부트스트랩 버튼 바로가기)

sooyeoneo 2024. 9. 5. 17:04

 

HTML 의 구조 : head와 body

head : 속성 정보 → meta, script, style, link, title 

body : 페이지 내용 → span, img, input, textarea 

 

VS code 에서 HTML 파일 만들고, 코드를 적는 공간에 html 적기.

 

자동완성 항목에 html:5

 

구역 <div> <\div>

 

 

하나의 묶음 처럼 생각하자. 박스안에 한 묶음. <div> <\div>

div 묶음을 이동하면 안의 내용물 함께 이동, 색을 바꾸면 같이 바뀜.

 

CSS  : 꾸미기를 위해 어떤 것을 꾸밀 것인지 대상을 지칭해야 함.

head 안에 <style> <\style>

body 에 mytitle 라는 클래스를 지칭.

head 에 .mytitle {   } 입력.

 

배경관련

background-color
background-image
background-size

 

사이즈

width

height

 

폰트

font-size

font-weight

font-family

color

 

간격

margin : 바깥 여백

padding : 안쪽 여백

 

구글 폰트 사용 예시

<style>

* {
font-family: "Gowun Dodum", sans-serif;
}
 
 

 

부트스트랩(Bootstrap) : 예쁜 CSS 를 모아둔 것.

 

부트스트랩 버튼 바로가기

https://getbootstrap.com/docs/5.3/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

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억앨범</title>
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>

* {
font-family: "Gowun Dodum", sans-serif;
}

.mytitle {
height: 250px;
background-color: green;
color: white;

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;
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;
border-radius: 5px;
}

.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">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 제목">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 날짜">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 내용">
<label for="floatingInput">Email address</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-body-secondary">앨범날짜</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-body-secondary">앨범날짜</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-body-secondary">앨범날짜</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-body-secondary">앨범날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

 

 

 

 

ＴＩＬ 9월 4일

'ＴＩＬ (ToDay I LearNEd) > JavaScript' 카테고리의 다른 글

javascript 오류, git clone으로 프로젝트 내려받기 / Live Server 설치 및 실행 (html 파일 실행 시 script나 css 적용이 되지 않을 때)  (0) 2024.10.02
jQuery란? Javascript 라이브러리! .append() 활용하기  (0) 2024.10.01
Javascript란? 움직이는 법! (리스트&딕셔너리, 반복문, 조건문)  (4) 2024.10.01
웹 페이지 만들기 실습한 코드_스파르타플릭스  (0) 2024.09.26
HTML의 작동원리 (visual studio code 단축키)  (0) 2024.09.02

'ＴＩＬ (ToDay I LearNEd)/JavaScript'의 다른글

  • 현재글꾸밀 때 자주 쓰는 CSS 모음 (부트스트랩 버튼 바로가기)

관련글

티스토리툴바