2026년 2월 6일 - 6주차
HTML 레이아웃
오늘 수업 주제
레이아웃: inline block
박스에 대한 이해: margin padding border
flex, relation, absolute
대표적인 글자 스타일 지정 속성
[css6.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#aaa {
/* 글자 스타일을 지정하는 속성중에는 색상, 두께, 크기 등이 있다.. */
color: #1d3566;
font-weight: bold;
font-size: 1em;
/*
글자크기 기본값은 16px이다.
수업할때는 px를 쓰겠지만 나중에는 px 사용 금지.
px는 절대값이기 때문에 화면마다 다 다르게 나오기 때문에..
em, rem, % 등과 같은 해상도에 맞춰서 자동으로 조절되는 상대값 사용.
*/
/*
1em: m은 OS가 정해둔 기본 폰트의 크기인데. 컴퓨터마다, 해상도마다
다 다르게 잡혀있다. 그렇기 때문에 1em은 그냥 폰트 크기를 기본값으로
하는것이고, 소수점단위로 세밀하게 폰트 크기 조절 가능하다.
1보다 숫자가 크면 글자크기도 커지고 작으면 작아진다.
왠만하면 0.75em 아래로 내려가지 말것..
*/
}
</style>
</head>
<body>
<!-- 지금은 예시니까 그냥 id로 하는데 나중에는 클래스로 해야 함. -->
<div>안녕하세요. <span id="aaa">반갑습니다.</span> 잘부탁드립니다.</div>
</body>
</html>Inline, Block
대부분의 태그들은 박스를 가지고 있ㄷ고 보면 되는데, 그 속성으로 inline과 block가 있다. 각 속성의 생김새를 보기 위해 background-color를 줘서 확인 한다.
block - 레이아웃의 핵심. 중요함
- 너비가 부모 크기의 100%이다. 그렇기때문에 공간이 없어서 다음 박스가 아래로 내려간다. 높이는 내용만큼의 크기를 가지는데, 이건 inline도 마찬가지이다. (match_parent)
- 레이아웃 잡을때는 주로 block을 씀. 이름부터가 그럼.. 레이아웃을 블록 쌓기한다.
- 대표적인 예시: \
태그
inline- 너비를 컨탠트(내용)만큼만 가진다. 그렇기때문에 옆에 공간이 남기때문에 아래로 내려가서 출력되지 않고 옆으로 쭉 붙어서 출력된다. (wrap_content)
- 레이아웃 잡을때는 거의 쓰지 않는다..
- 대표적인 예시: \ 태그
간단하게 태그를 썼는데 아래로 내려가네?: 블록, 옆으로 붙네?: 인라인 이렇게 생각하는게 좋음. 다 외울 필요는 없음
[css7.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
블록: <div>
ㄴ 너비는 부모의 크기 기준 100% (match_parent)
인라인: <span>
ㄴ 너비는 컨탠트(내용) 크기 (wrap_content)
-->
<style>
.inline {
display: inline;
}
.block {
display: block;
}
/* 설명하려고 이러는거지 실제로 이렇게 하진 않음. */
</style>
</head>
<body>
<!-- div가 가지는 유일한 속성의 기본값 = display: block
display에 inline class를 상속시키면, inline으로 바꿀 수 있다. -->
<div class="inline" style="background-color: cadetblue;">안녕하세요</div>
<div style="background-color: aqua;">안녕하세요</div>
<div>안녕하세요</div>
<span style="background-color: darkgreen;">안녕하세요</span>
<span style="background-color: green;">안녕하세요</span>
<span class="block" style="background-color: lime;">안녕하세요</span>
<div>야호</div>
<!-- span 옆에 분명 공간이 있는데 출력화면엔 내려가있다.
왜냐면, div는 무조건 부모크기의 100%를 가져야 하기 때문. -->
</body>
</html>박스 모델
- 콘텐츠(content): 박스에 들어가는 텍스트나 이미지 등의 내용물
- 패딩(padding): 콘텐츠와 경계선 사이의 간격
- 경계선: 콘텐츠와 패딩을 포함한 경계를 나타내는 선
- 마진(margine): 경계선과 외부 요소 사이의 간격
[css8.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>
#qqq {
width: 10em;
height: 10em;
/* 블록 속성을 유지 한 채로 박스의 크기를 조절 할 수 있음.
높이는 기본으로 내용의 크기에 맞춰지지만 내용이 없더라도 억지로
원하는 만큼 늘릴 수 있다. */
}
#www {
width: 5em;
height: 5em;
/* 분명 첫번째 블록 뒤에 공간이 있는데도 출력하면 아래로간다.
즉, 블록속성은 공간과 상관없이 밑으로 내려간다 */
}
#eee {
width: 10em;
height: 10em;
border: 5px solid black;
/* border: 테두리 지정하는 속성. 무조건 3개의 속성이 들어가야 한다.
순서대로 테투리두께, 테두리 모양, 테두리 색상이다. */
}
#rrr {
width: 20em;
height: 20em;
padding: 3em 1em;
/* 박스 내부의 공백 추가. 1개만 쓰면 좌표 상관 없이 통채로 공백이 들어가고,
2개 쓰면 첫번째 숫자는 가로, 두번째는 세로의 공백을 지정한다. */
}
#ddd {
width: 20em;
height: 20em;
margin: 1em;
/* 박스와 박스 사이의 공백을 추가해준다. 즉, 박스 외부 공백 */
}
</style>
</head>
<body>
<div id="qqq" style="background-color: red;">안녕하세요</div>
<div id="www" style="background-color: green;">안녕하세요</div>
<div id="eee" style="background-color: blue;">안녕하세요</div>
<div id="rrr" style="background-color: blue;">안녕하세요</div>
<div id="ddd" style="background-color: blue;">안녕하세요</div>
<div id="fff" style="background-color: blue;">안녕하세요</div>
</body>
</html>flex, relation, absolute
[css9.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 태그에 기본적으로 들어있는 공백을 다 없애고 통제하기 위해 사용. */
}
#wrapper {
background-color: rgb(224, 224, 224);
width: 930px;
height: 800px; /* 원래 높이는 잘 안건들임 */
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1 0 0;
}
.col-10 {
flex: 0 0 10%;
}
.col-20 {
flex: 0 0 20%;
}
.col-30 {
flex: 0 0 30%;
}
.col-40 {
flex: 0 0 40%;
}
.col-50 {
flex: 0 0 50%;
}
.col-auto {
flex: 0 0 auto;
}
.hidden {
visibility: hidden;
/* 존재하지만 화면에 안보이게 함. 안보이는거 뿐이라 위치(자리)는 남아있음. */
}
.none {
display: none;
/* 존재하지 않는것으로 만듬. 아예 없는것 취급하기 때문에 위치도 사라진다. */
}
.fixed {
/*
position 기본(default) 값은 static.
position: 박스들을 겹치게 하는 것.
단, 변경시에는 left, top 속성을 사용 가능하다.
*/
/* fixed: 화면 위에 고정시키는 것. 상하단 메뉴바를 만들때 주로 쓰인다.
상단으로 하고싶으면 top: 0px; 하단으로 하고싶으면 bottom: 0px;로 한다.
스크롤 해도 계속 따라서 움직인다. */
position: fixed;
left: 0px;
bottom: 0px;
background-color: rgba(2, 18, 70, 0.836);
color: white;
}
.relative {
/* 원래 위치에서 지정한 만큼 움직여서 출력하는것 */
position: relative;
left: 1px;
top: 3px;
}
/* 가장 가까운 position: relative 속성을 가진 부모 기준 */
.absolute {
position: absolute;
left: 0px;
top: 0px;
/*
absolute: 지정한 부모의 위치에 붙는다. fixed와 비슷함.
하지만 웹브라우저 전체에서 독립적인 fixed와 달리 붙어있을 곳을 지정할수 있으며
스크롤 해도 따라서 움직이지 않음. 이미지 위에 좋아요 버튼 올리는때만 사용함 */
}
</style>
</head>
<body>
<div id="wrapper" style="margin-top: 35px;">
<div style="display: flex;">
<!-- 그냥 div만 하면 세로로만 짜짐. 가로로 짜려면 display: flex 해야 함 -->
<div style="flex: 1 0 0;">1-1</div>
<!-- 부모가 flex면 자식도 자동으로 값이 flex 된다. -->
<div style="flex: 1 0 0;">1-2</div>
<!-- 근데 여기서는 style="flex"가 값이 아닌 스타일 이름이다. -->
<div style="flex: 1 0 0;">1-2</div>
<!-- 이렇게 style="flex" 해주면 같은 비율로 자른다. -->
<!-- 첫번째 값은 비율이다. 지금은 3개 다 1이라 같은 비율인데,
한개만 2로 바꾸면 1:2:1 비율로 잘린다. 세번째 값은 남는 공간을 어떻게
가져갈지의 기준 너비를 지정한다.
-->
</div>
<div class="row">
<div class="col" style="background-color: red;">2-1</div>
<div class="col" style="background-color: green;">2-2</div>
<div class="col" style="background-color: blue;">2-3</div>
</div>
<div class="row">
<div class="col-10" style="background-color: red;">3-1</div>
<div class="col-20" style="background-color: green;">3-2</div>
<div class="col-30" style="background-color: blue;">3-3</div>
</div>
<div class="row">
<div class="col-auto" style="background-color: red;">4-1</div>
<div class="col-auto" style="background-color: green;">4-2</div>
<div class="col-auto" style="background-color: blue;">4-3</div>
</div>
<div class="row">
<div class="col" style="background-color: red;">5-1</div>
<div class="col hidden" style="background-color: green;">5-2</div>
<div class="col" style="background-color: blue;">5-3</div>
</div>
<div class="row">
<div class="col" style="background-color: red;">6-1</div>
<div class="col relative" style="background-color: green;">6-2</div>
<div class="col" style="background-color: blue;">6-3</div>
<div class="col absolute" style="background-color: blue;">6-4</div>
</div>
</div>
<!-- fixed 용은 따로 빼주는게 좋음 -->
<div class="fixed" style="width: 100%;">
<div class="row">
<div class="col">fixed data1</div>
<div class="col">fixed data2</div>
<div class="col">fixed data3</div>
</div>
</div>
</body>
</html>간단한 버튼 만들기
[css10.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.button {
margin: 20px 20px;
background-color: darkred;
text-align: center;
color: white;
padding: 0.5em 1em;
border: 1.5px solid black;
border-radius: 0.3em;
}
.button:hover {
margin: 20px 20px;
background-color: rgb(192, 11, 11);
text-align: center;
color: white;
padding: 0.5em 1em;
border: 1.5px solid black;
border-radius: 0.3em;
/* 버튼에 마우스 올렸을때 반응하는 것 */
}
</style>
</head>
<body>
<span class="button bottin:hover">야호!!</span>
</body>
</html>bootstrap 라이브러리
html은 라이브러리를 쓰는게 자랑할 수준이 아니라고 함. 하지만, 우리는백엔드 과정이고 당장에 html을 예쁘게 해야하긴 하기 때문에 사용한다. 대신 관심이 있다면 사용하면서 어떤식으로 이 라이브러리를 구현했는지 보면서 공부하면 좋다.
bootstrap 사용하는 법
[bootstrap1.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- head에 이 아래 줄 넣고, -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<button class="btn btn-primary">회원가입</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<!-- body 맨 마지막에 이걸 넣어서 라이브러리 사용 -->
</body>
</html>간단한 로그인 페이지 작성
[login.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- head에 이 아래 줄 넣고, -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!--
bootstrap 사용할때..
1. 컨테이너로 시작한다.
2. 항상 row로 시작하고. row 안에는 꼭 col만 존재해야 한다. 즉, row -> col -> row -> col 이렇게 번갈아서
3. 컨텐츠(글자, 이미지.. 등등)는 꼭 col에만 담아야 한다. 한개만 있더라도 안됨. 꼭 col을 열어서 담아라.
이미지는 꼭 img-fluid를 사용한다.
버튼은 꼭 하나의 col 안에 넣고 그 col은 d-grid(display grid)를 잡아줘라
텍스트 컨트롤 - 부분 text는 <span> 태그 활용
text-center
text-start
text-end
fs-1 ~ 6 = 폰트 크기(font-size)
fw-bold = 글자 두껍게(font-weight="bold")
-->
<div class="container-fluid" style="width: 1024px; margin: 0 auto;">
<div class="row">
<div class="col-6 mx-auto"> <!-- 화면을 6개로 나누는 것. -->
<!-- 배너 이미지 -->
<div class="row my-3">
<div class="col">
<img class="img-fluid" src="./img/banner.png">
</div>
</div>
<!-- 로그인 관련 글 -->
<div class="row my-3">
<div class="col">
<div class="row">
<div class="col text-center text-secondary">돌아온 만큼 더 <span class="text-danger fw-bold">크게 쏜다!!</span> 역대금 웰컴 쿠폰팩</div>
</div>
<div class="row mt-5">
<div class="col text-center fs-4 fw-bold">로그인</div>
</div>
</div>
</div>
<!-- 아이디 입력-->
<div class="row">
<div class="col">
<input placeholder="아이디를 입력해주세요" class="form-control" type="text">
<!-- form-control: 박스 크기에 딱 맞춰서 이쁘게 해줌 -->
</div>
</div>
<!-- 패스워드 입력-->
<div class="row mt-2">
<div class="col">
<input placeholder="비밀번호를 입력해주세요" class="form-control" type="password">
</div>
</div>
<!-- 로그인 버튼 -->
<div class="row mt-3">
<div class="col d-grid">
<button class="btn btn-primary">로그인</button>
</div>
</div>
<!-- 회원가입 버튼 -->
<div class="row mt-2">
<div class="col text-end">
<a href="...">회원 가입</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<!-- body 맨 마지막에 이걸 넣어서 라이브러리 사용 -->
</body>
</html>기타
UI/UX 잘하는 법: 레이아웃, 세부조정(margin, padding, 테두리 ...), 글자 컨트롤(크기,색상, 두께)
취업하고싶다...