[URECA] Day 3 CSS(2), 부트스트랩(1)

코딩하세현 2025. 1. 22. 18:51

728x90

CSS Box Model

Content(내용) - 텍스트와 이미지가 나타나는 상자 내용
Padding(패딩) - 콘텐츠 주변에 투명한 영역을 만들어 border과 content사이에 여백을 추가하는 역할
border(경계, 테두리) - padding과 content를 둘러싸는 테두리
Margin(여백) - border 외부에 투명한 영역을 만들어 요소와 다른 요소 사이의 간격을 조정

⭐ CSS로 요소의 너비와 높이 속성을 설정할때는 Content 영역의 width와 height만 설정하면 된다. 요소의 전체 width와 height를 계싼하려면 padding과 border도 포함해야한다.

<div> 요소의 총 너비는 350px이고 총 높이는 80px이다.
div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
320 px(콘텐츠 영역의 너비)
+ 20 px (왼쪽 패딩 + 오른쪽 패딩)
+ 10 px(왼쪽 테두리 + 오른쪽 테두리)
= 350 px(총 너비)

50 px(콘텐츠 영역의 높이)
+ 20 px (상의 패딩 + 하의 패딩)
+ 10 px(위쪽 테두리 + 아래쪽 테두리)
= 80 px(총 높이)

CSS Outline

📌 CSS Outline은 border과 다르다. border과 달리, outline은 요소의 border 바깥쪽에 그려지며, 다른 콘텐츠와 겹칠 수 있다. outline은 요소의 크기(너비와 높이) 계산에 영향을 주지 않는다. 요소의 총 너비와 높이는 outline의 두께에 영향을 받지 않는다. (outline의 두께(outline-width)가 커져도, 요소 자체의 크기(width, height)는 변하지 않는다.)

CSS outline 속기 순서

outline-width
outline-style (required)
outline-color

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>

<h2>The outline Property</h2>

<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>

</body>
</html>

CSS Outline-offset

아웃라인과 요소의 경계 사이에 간격을 설정합니다.
설정된 간격은 투명하게 유지됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>

CSS Fonts

CSS Fonts가 중요한 이유!

폰트 선택은 웹사이트 디자인에서 중요한 요소입니다. 적절한 폰트는 웹사이트의 브랜드 정체성을 형성하고, 사용자 경험을 향상시킵니다.
읽기 쉬운 폰트, 적절한 색상과 크기를 선택하는 것은 웹사이트의 가독성을 높이고, 사용자가 내용을 쉽게 이해할 수 있도록 돕습니다.

Serif 폰트	우아하고 공식적인 느낌, 작은 획이 있음
Sans-serif 폰트	현대적이고 미니멀한 느낌, 깔끔한 선
Monospace 폰트	고정된 너비로 균일한 느낌, 기계적
Cursive 폰트	손글씨를 모방한 폰트, 자유롭고 감성적인 느낌
Fantasy 폰트	장식적이고 재미있는 폰트, 특색 있는 분위기

CSS Lists

<ul> - 정렬되지 않은 목록: 총알로 표시

<ol> - 정렬된 목록: 숫자 또는 문자로 표시

속성	설명
list-style	리스트 스타일을 한 번에 설정
list-style-image	리스트 항목의 마커를 이미지로 설정
list-style-position	리스트 항목의 마커 위치를 지정 (inside, outside)
list-style-type	리스트 항목의 마커 유형을 지정 (예: disc, circle)

CSS Layout - display 속성

페이지에서 HTML 요소가 어떻게 표시될지를 결정하는 중요한 속성
각 HTML 요소는 기본적으로 특정한 display 값을 가지며, 이 값을 변경하여 요소의 표시 방식을 조정 가능

기본 display 값

블록 레벨 요소 (Block-level Elements)
- 예시: <div>, <h1>, <p>
- 특징: 전체 너비를 차지하고, 새로운 줄에서 시작합니다.

인라인 요소 (Inline Elements)
- 예시: <span>, <a>, <img>
- 특징: 필요한 만큼만 너비를 차지하고, 새 줄에서 시작하지 않습니다.

display 속성의 주요 값들

inline	요소를 인라인 요소로 표시 (새로운 줄을 만들지 않음)
block	요소를 블록 요소로 표시 (새로운 줄에서 시작하고 전체 너비를 차지)
contents	요소 자체는 사라지고 자식 요소들만 상위 요소로 이동하여 표시
flex	요소를 플렉스 컨테이너로 표시
grid	요소를 그리드 컨테이너로 표시
inline-block	요소는 인라인처럼 표시되지만, 높이와 너비를 설정할 수 있는 블록 요소처럼 동작
inline-flex	인라인 레벨의 플렉스 컨테이너로 표시
inline-grid	인라인 레벨의 그리드 컨테이너로 표시
table	요소를 테이블 요소처럼 표시
none	요소를 완전히 숨긴다. 이 상태에서는 레이아웃에 영향을 미치지 않는다.

display: none;와 visibility: hidden;의 차이점

display: none: 요소를 숨기고 완전히 페이지 레이아웃에서 제거합니다.
visibility: hidden: 요소는 보이지 않게 숨겨지지만, 여전히 공간을 차지하고 레이아웃에 영향을 미칩니다.

CSS Layout - width and max-width

max-width: 요소의 최대 너비 정의

요소가 지정된 최대 너비를 초과하지 않도록 제한해야한다.

만약, 요소의 너비가 max-width 보다 커지려고 하면, max-width 값으로 제한된다.

width: 요소의 고정된 너비

요소의 너비를 정확히 설정하며, 요소가 차지하는 공간의 크기를 지정한다. 단, 부모 요소의 너비나 화면 크기에 상대적으로 달라질 수 있다.

CSS position

CSS position 속성은 HTML 요소를 페이지 내에서 어떻게 위치시킬지 결정하는 속성이다.

5가지 값을 가질 수 있으며, 각 값에 따라 요소의 위치 지정 방식이 달라진다.

1. position: static

기본값
요소는 정상적인 흐름에 배치된다.
top, botto,, left, right 속성은 동작하지 않는다.

div.static {
  position: static;
  border: 3px solid #73AD21;
}

2. position: relative => 상대 기준

기본 위치를 기준으로 이동
top, right, bottom, left 속성으로 상대적인 위치를 지정가
그러나 이동한 공간은 다른 요소에 영향을 미치지 않는다.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

2. position: fixed

뷰포트를 기준으로 위치가 고정된다.
페이지를 스크롤하더라도 위치가 변하지 않으며, 항상 같은 자리에 표시된다.

3. positioin: absolute; => 절대 기준

가장 가까운 위치 지정된 상위 요소를 기준으로 배치되는 요소
만약 조상 요소가 없다면, **body**를 기준으로 위치를 잡습니다.
일반적으로 정상적인 흐름에서 제외되며, 다른 요소들과 겹칠 수 있습니다.

기준이 어디냐? 가장 가까운 위치 지정된 상위 요소를 기준으로 배치되는 요소

밖에 상대적이고 안이 절대적위치에 있다.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

5. position: sticky

요소가 스크롤에 따라 위치를 고정
특정 위치에 도달하면 **position: fixed**처럼 고정되며, 그 전까지는 **position: relative**처럼 동작

📌 **position: sticky;**를 사용할 때는 top, right, bottom, left 중 하나 이상의 속성을 반드시 지정해야 한다. 그렇지 않으면 sticky가 제대로 동작하지 않는다..

z-index 속성

요소의 스택 순서(어떤 요소를 다른 요소보다 앞이나 뒤에 배치해야하는지) 를 지정할 수 있다.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Overlapping elements</h1>

<p>If two positioned elements overlap each other without a z-index specified,
the element defined last in the HTML code will be shown on top:</p>

<div class="container">
  <div class="black-box">Black box (z-index:1)</div>
  <div class="gray-box">Gray box (z-index:2)</div>
  <div class="green-box">Green box (z-index:3)</div>
</div>

</body>
</html>

CSS layout - overflow

요소의 콘텐츠가 지정된 영역에 맞지 않을 정도로 큰 경우 콘텐츠를 잘라낼지 아니면 스크롤바를 추가할지 여부를 지정

overflow 속성은 높이가 지정된 블록 요소에만 작동한다.

overflow: visible;

기본값! 오버플로는 잘리지 않는다. 잘리지 않고 요소의 상자 외부에 렌더링

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

overflow: hidden;

오버플로가 잘리고 나머지 콘텐츠는 숨겨진다.

div {
  overflow: hidden;
}

overflow: auto;

값 auto은 와 유사 scroll하지만 필요할 때만 스크롤바를 추가

div {
  overflow: auto;
}

overflow: hidden;

CSS 속성은 콘텐츠가 요소의 크기를 초과할 때 그 초과된 부분을 숨기는 역할

즉, 요소의 크기를 넘는 콘텐츠는 화면에 보이지 않게 잘려서 보이지 않게 된다.

div {
  overflow: hidden;
}

overflow-x / overflow-y

overflow-x 콘텐츠의 왼쪽/오른쪽 가장자리를 어떻게 처리할지 지정
overflow-y 콘텐츠의 상단/하단 가장자리를 어떻게 처리할지 지정

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

CSS layout - float and clear

CSS float 속성은 요소가 어떻게 떠오를지 지정한다. (요소가 페이지에서 왼쪽이나 오른쪽으로 떠서 다른 콘텐츠와 함께 배치되도록 한다. float 속성을 사용해 텍스트와 이미지를 함께 배치하거나, 여러 요소를 한 줄에 나란히 배치할 수 있다.

CSS clear 속성은 clear된 요소 옆에 떠 있을 수 있는 요소와 어느 쪽에 있을 수 있는지 지정한다.

float: right;

이미지를 오른쪽으로 띄운다.

float: left;

이미지를 왼쪽으로 띄운다.

float: none;

이미지가 텍스트에서 발생하는 위치에 표시

clear 속성은 float된 요소 옆에 다른 요소가 어떻게 배치될지를 결정한다.

예를 들어, 이미지나 div 요소가 왼쪽 또는 오른쪽으로 떠서 텍스트나 다른 요소와 겹치지 않도록 할 때 사용된다.

clear:none;

기본값으로, 왼쪽 또는 오른쪽으로 떠있는 요소 아래로 이동하지 않으며, 요소는 일반적인 흐름에 따라 배치된다.

clear: left;

왼쪽으로 떠있는 요소 아래로 이동하도록 설정

clear: right;

오른쪽으로 떠있는 요소 아래로 이동하도록 설정

clear: both;

왼쪽과 오른쪽으로 떠있는 요소들 아래로 이동하도록 설정

clear: inherit;

부모 요소에서 clear 값을 상속받는다.

Clearfix 해킹 💀

Clearfix는 플로트된 요소가 부모 컨테이너를 벗어나면서 발생하는 레이아웃 문제를 해결하는 기법

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

css 가상클래스 (CSS Pseudo-classes)

가상 클래스는 요소의 특별한 상태를 정의하는 데 사용된다.

가상 클래스와 HTML 클래스는 결합이 가능하다.

a.highlight:hover {
  color: #ff0000;
}

CSS Pseudo-element

HTML 요소의 특정 부분을 스타일링하는 데 사용

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

부트스트랩

Bootstrap은 웹 개발을 빠르고 쉽게 할 수 있도록 돕는 무료 프론트엔드 프레임워크

Bootstrap 5는 2021년에 출시된 최신 버전입니다. 이전 버전인 Bootstrap 3 및 4와의 주요 차이점은, Bootstrap 5가 jQuery 대신 순수 JavaScript를 사용

부트스트랩 컨테이너

컨테이너는 콘텐츠를 감싸고 패딩을 제공하는 역할

.container – 반응형 고정 너비 컨테이너로, 화면 크기에 따라 너비가 달라진
.container-fluid – 화면 너비를 가득 채우는 전체 너비 컨테이너로, 항상 화면의 너비(100%)를 차지

.container (고정 너비 컨테이너)

.container 클래스는 반응형 고정 너비 컨테이너를 생성합니다. 이 컨테이너의 너비는 다양한 화면 크기에서 달라진다.

.container-fluid (전체 너비 컨테이너)

.container-fluid 클래스는 전체 너비 컨테이너를 생성하며, 항상 화면의 너비(100%)를 차지한다. 이 컨테이너는 화면 크기에 관계없이 항상 100% 너비를 유지한다.

반응형 컨테이너

.container-sm, .container-md, .container-lg, .container-xl, .container-xxl 클래스를 사용하면 특정 화면 크기에 맞게 컨테이너가 반응형으로 동작

728x90