<html>
<head>
<style>
.div_align {
text-align: right;
}
</style>
</head>
<body>
<div class="div_align">
<span>하이?</span>
</div>
</body>
</html>*bootstrap*
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>-> 대부분의 정렬은 자기자신 기준이 아니라
부모한테 정렬기준을 줘서 그 자식들을 정렬하는 것이다.
배경에 색을 줘서 확인한다 ex) bg-danger
style
padding
-> 안쪽여백
((얜 class)p는 padding의 약자 / 0~5까지 가능)
margin
-> 바깥쪽여백
((얜 class)m은 margin의 약자 / 0~5까지 가능)
ex) pl- padding left, my- margin y
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<style>
html, body {
height: 100vh;
postion:absolute;
}
</style>
<div style="top:50%; left:50%; width:200px; height:200px; margin-left:-100px; margin-top:-100px;" class="bg-info position-absolute">가운데</div>
</body>
</html>display
-> flex를 주면 "자식"태그들이 모두 inline으로 바뀌며 귀신처럼 원하는 대로 정렬이 가능해진다(세로 정렬 포함) -> 후손태그는 X.
justify-content-start -> text-align-left
justify-content-between -> 좌 중앙 우 다 떨어져서 정렬
height는 상속이 안된다
container에 m-0, p-0하면 안됨.
class="row"를 주는 순간 12등분 된다.
ex) col-8, col-4
gird로 전체적인 틀을 정렬하고 flex는 그 안에 요소들을 정렬.
<div>...이 안에는 아무 내용이나 들어가야 화면에 뜬다.</div><html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 bg-danger">
.
</div>
<div class="col-9 p-0">
<div class="bg-primary">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="bg-warning p-3">
<div class="row">
<div class="col-4 p-4">
<div class="bg-light">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-4 p-4">
<div class="bg-light">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-4 p-4">
<div class="bg-light">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>스타일은 head안에 넣기
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="bg-danger p-2">
.
</div>
<div class="bg-primary p-3">
.
</div>
<div class="bg-warning p-5">
.
</div>
<div class="bg-dark p-2">
<div class="row">
<div class="col-6 p-3">
<div class="bg-light p-3">.</div>
</div>
<div class="col-2 p-3">
<div class="bg-light p-3">.</div>
</div>
<div class="col-4 p-3">
<div class="bg-light p-3">.</div>
</div>
</div>
</div>
<div class="bg-secondary p-2">
<div class="row">
<div class="col-8 p-3">
<div class="bg-light p-3">.</div>
</div>
<div class="col-4 p-3">
<div class="bg-light p-3">.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Front-end Engineer, Web Developer & UX/UI Design