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 클래스를 사용하면 특정 화면 크기에 맞게 컨테이너가 반응형으로 동작
'💡 URECA > 🗒️ 스터디 노트' 카테고리의 다른 글
| [URECA] Day07 JS(4), TS(1) (1) | 2025.02.04 |
|---|---|
| [URECA] DAY 5 | JavaScript(2) (0) | 2025.01.24 |
| [URECA] Day 4 | 부트스트랩(2), JavaScript(1) (0) | 2025.01.23 |
| [URECA] Day 2 | HTTP 메서드, RESTful, 그리고 CSS(1) (0) | 2025.01.21 |
| [URECA] Day 1 | Computer Paradigm의 변천과 Web 사용 버전 그리고 HTML(1) (1) | 2025.01.20 |
CSS Box Model
- Content(내용) - 텍스트와 이미지가 나타나는 상자 내용
- Padding(패딩) - 콘텐츠 주변에 투명한 영역을 만들어 border과 content사이에 여백을 추가하는 역할
- border(경계, 테두리) - padding과 content를 둘러싸는 테두리
- Margin(여백) - border 외부에 투명한 영역을 만들어 요소와 다른 요소 사이의 간격을 조정
⭐ CSS로 요소의 너비와 높이 속성을 설정할때는 Content 영역의 width와 height만 설정하면 된다. 요소의 전체 width와 height를 계싼하려면 padding과 border도 포함해야한다.
<div> 요소의 총 너비는 350px이고 총 높이는 80px이다.
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 클래스를 사용하면 특정 화면 크기에 맞게 컨테이너가 반응형으로 동작
'💡 URECA > 🗒️ 스터디 노트' 카테고리의 다른 글
| [URECA] Day07 JS(4), TS(1) (1) | 2025.02.04 |
|---|---|
| [URECA] DAY 5 | JavaScript(2) (0) | 2025.01.24 |
| [URECA] Day 4 | 부트스트랩(2), JavaScript(1) (0) | 2025.01.23 |
| [URECA] Day 2 | HTTP 메서드, RESTful, 그리고 CSS(1) (0) | 2025.01.21 |
| [URECA] Day 1 | Computer Paradigm의 변천과 Web 사용 버전 그리고 HTML(1) (1) | 2025.01.20 |
