레이아웃 설정
Display 속성
- block, inline: 요소의 표시 유형 설정.
- none: 요소가 문서에 존재하지 않는 것처럼 처리.
Visibility 속성
- 요소를 보이거나 (시각적으로만)숨기되, 레이아웃에서 공간을 차지.
Float 속성
- 요소를 좌우측으로 배치하여 레이아웃의 흐름(위에서 아래로 만 가능)에서 벗어나게 함.
- left,right값 사용
*Position 속성
- static, relative, absolute, fixed, sticky: 요소의 문서 내 위치를 결정하고, 필요한 경우 위치 조정.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Position Property Example</title>
<style>
/* 기본값, 요소를 정상적인 문서 흐름에 따라 배치
offset 및 z-index를 제어불가
*/
.static {
position: static;
background-color: #FFD700;
padding: 10px;
}
/* 상대적 위치(레이아웃흐름에따라), 원래 위치를 기준으로 조정 (여기선 30px 아래, 50px 오른쪽)
offset 및 z-index를 제어
*/
.relative {
position: relative;
top: 30px;
left: 50px;
background-color: #90EE90;
padding: 10px;
}
/* 절대 위치, 가장 가까운 위치 지정 부모 (positioned ancestor) 대비 배치 */
.absolute {
position: absolute;
top: 0;
right: 0;
background-color: #00BFFF;
padding: 10px;
}
/* 고정 위치, 뷰포트에 대해 고정되어 스크롤해도 그 자리에 유지 */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #FF6347;
padding: 10px;
}
/* 스티키 위치, 스크롤 위치에 따라 static과 fixed 사이를 전환
요소가 스크롤에 닿으면 따라다닌다.*/
.sticky {
position: sticky;
top: 0;
background-color: #DDA0DD;
padding: 10px;
}
</style>
</head>
<body>
<div class="static">This div is positioned static.</div>
<div class="relative">This div is positioned relative.</div>
<div class="absolute">This div is positioned absolute.</div>
<div class="fixed">This div is positioned fixed.</div>
<p style="height: 2000px;">Scroll down the page to see the sticky positioning.</p>
<div class="sticky">This div is positioned sticky.</div>
</body>
</html>플렉스박스(Flexbox)
- 일차원 레이아웃 구성, 요소 간 공간 분배 및 정렬.
- 주요 속성: flex-grow, flex-shrink, flex-basis, justify-content, align-items.
- 샘플코드 및 기타 궁금즘은 MDN 참고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example with Comments</title>
<style>
/* Flex 컨테이너 설정: flex 요소들을 포함 */
.container {
display: flex;
width: 100%;
height: 200px; /* 컨테이너의 높이 설정 */
background-color: lightgrey;
}
/* flex-grow: 요소가 flex 컨테이너 내 남은 공간을 얼마나 차지할지 결정 */
.box1 {
flex-grow: 1; /* 다른 요소들보다 공간을 더 차지하도록 설정 */
background-color: tomato;
padding: 10px;
}
/* flex-basis: 요소의 기본 크기 설정 */
/* flex-shrink: 컨테이너 공간 부족 시 요소의 축소 비율 */
.box2 {
flex-basis: 150px; /* 시작 크기를 150px로 설정 */
flex-shrink: 1; /* 공간 부족 시 축소되는 비율 설정 */
background-color: gold;
padding: 10px;
}
/* flex-grow: 남은 공간 중 요소가 차지할 비율 설정 */
.box3 {
flex-grow: 2; /* box1보다 두 배 많은 공간을 차지하도록 설정 */
background-color: dodgerblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</div>
</body>
</html>
*그리드(Grid)
- 2차원 레이아웃을 통해 복잡한 배치와 정렬 가능.
- grid-template, grid-row, grid-column, grid-area 등을 사용하여 세부적인 레이아웃 조절.
- 샘플 코드 및 기타 궁금증은 MDN 참고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid; /* 그리드 레이아웃을 사용하도록 설정 */
grid-template-columns: 1fr 3fr; /* 두 열의 크기 비율을 1:3으로 설정 */
grid-template-rows: auto 1fr auto; /* 세 행 중 가운데 행의 크기를 유연하게 설정, 나머지는 자동 크기 */
grid-template-areas: /* 그리드 영역의 이름을 지정하여 레이아웃을 설계 */
"header header"
"content slider"
"footer banner";
gap: 10px; /* 그리드 사이의 간격 설정 */
height: 100vh; /* 뷰포트 높이의 100% 크기로 설정 */
padding: 10px; /* 그리드 컨테이너의 내부 여백 설정 */
}
.header { grid-area: header; background: lightgrey; padding: 20px; } /* header 영역 지정 및 스타일링 */
.slider { grid-area: slider; background: lightgrey; padding: 20px; } /* slider 영역 지정 및 스타일링 */
.content { grid-area: content; background: lightgrey; padding: 20px; } /* content 영역 지정 및 스타일링 */
.footer { grid-area: footer; background: lightgrey; padding: 20px; } /* footer 영역 지정 및 스타일링 */
.banner { grid-area: banner; background: lightgrey; padding: 20px; } /* banner 영역 지정 및 스타일링 */
</style>
</head>
<body>
<div class="grid-container">
<div class="header">header</div>
<div class="slider">slider</div>
<div class="content">content</div>
<div class="footer">footer</div>
<div class="banner">banner</div>
</div>
</body>
</html>*반응형 디자인
미디어 쿼리
- 다양한 디스플레이 환경에 맞게 CSS를 조정.
- 주로 뷰포트 너비에 따라 스타일을 다르게 적용.
샘플코드(외부 스타일)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design Example</title>
<!-- 인쇄용 스타일 시트 -->
<link rel="stylesheet" href="print.css" media="print">
<!-- 모바일 화면(600px 이하)용 스타일 시트 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">
<!-- 태블릿 화면(600px ~ 900px)용 스타일 시트 -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 601px) and (max-width: 900px)">
<!-- 데스크탑 화면(901px 이상)용 스타일 시트 -->
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 901px)">
</head>
<body>
<h1>Welcome to Responsive Web Design</h1>
<p>This is a demonstration of media query in action. Resize your browser to see different styles applied.</p>
</body>
</html>
샘플코드(내부 스타일)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design with Internal Styles</title>
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
h1 {
color: #007BFF;
}
/* 인쇄용 스타일 */
@media print {
body {
color: black;
}
h1 {
color: gray;
}
}
/* 모바일 화면(600px 이하)용 스타일 */
@media screen and (max-width: 600px) {
body {
background-color: #f8f9fa;
}
h1 {
font-size: 1.5rem;
}
}
/* 태블릿 화면(600px ~ 900px)용 스타일 */
@media screen and (min-width: 601px) and (max-width: 900px) {
body {
background-color: #e9ecef;
}
h1 {
font-size: 2rem;
}
}
/* 데스크탑 화면(901px 이상)용 스타일 */
@media screen and (min-width: 901px) {
body {
background-color: #dee2e6;
}
h1 {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<h1>Welcome to Responsive Web Design</h1>
<p>This is a demonstration of media query in action. Resize your browser to see different styles applied.</p>
</body>
</html>
인라인 스타일은 반응형 처리 불가
*반응형 이미지
- <picture> 태그를 활용하여 다양한 화면 크기에 맞는 이미지 제공.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Example</title>
</head>
<body>
<h1>Responsive Image with Picture Tag</h1>
<picture>
<!-- 화면 너비가 1200px 이상인 경우 큰 이미지를 제공 -->
<source media="(min-width: 1200px)" srcset="large-image.jpg">
<!-- 화면 너비가 600px 이상 1199px 이하인 경우 중간 크기 이미지를 제공 -->
<source media="(min-width: 600px)" srcset="medium-image.jpg">
<!-- 화면 너비가 599px 이하인 경우 작은 이미지를 제공 -->
<source media="(max-width: 599px)" srcset="small-image.jpg">
<!-- 위 조건들 중 어느 것도 만족하지 않을 경우 기본 이미지를 제공 -->
<img src="default-image.jpg" alt="Responsive image">
</picture>
</body>
</html>반응형 주의 사항
- 고정 크기 사용을 지양하고, max-width, min-height 등을 활용하여 유동성 있게 레이아웃 설정.
CSS 사용 규칙 및 주의 사항
- 클래스와 ID 명명 규칙, 순서 일치 등 가독성 및 유지보수성을 고려한 스타일 시트 작성 권장.
추가 사항
- CSS에서 콤마(,)를 사용하는 셀렉터는 여러 개의 서로 다른 요소에 동일한 스타일을 동시에 적용할 수 있습니다.
- HTML에서는 일반적으로 인라인 레벨 요소가 블록 레벨 요소를 포함할 수 없습니다. 그러나 <a> 태그는 이 규칙에서 예외적으로 블록 레벨 요소를 포함할 수 있습니다. 이는 <a> 태그의 유연성을 높여 다양한 디자인과 레이아웃에 적용할 수 있게 합니다.
샘플코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag Example</title>
<style>
/* link-block 클래스 스타일 정의 */
.link-block {
display: block; /* 블록 레벨 요소처럼 표시 */
background-color: #f4f4f4; /* 배경색 설정 */
padding: 20px; /* 내부 여백 설정 */
text-align: center; /* 텍스트 중앙 정렬 */
border: 1px solid #ccc; /* 테두리 스타일 설정 */
margin-top: 10px; /* 위쪽 여백 설정 */
}
</style>
</head>
<body>
<!-- 링크로 구성된 블록 레벨 요소 -->
<a href="https://example.com">
<!-- 링크 클릭 시 example.com으로 이동 -->
<div class="link-block">
<!-- 블록 내에 포함된 제목 -->
<h2>Visit Example.com</h2>
<!-- 블록 내에 포함된 부가 설명 텍스트 -->
<p>Click here to learn more about this amazing site!</p>
</div>
</a>
</body>
</html>
- CSS에서 transition 속성은 요소의 스타일 변화를 시간에 따라 부드럽게 전환하게 하는 역할을 합니다.
*느낀점
강의에서 배운 속성 및 값들이 이렇게 동작한다는것만 파악하자 필요에 따라 MDN 또는 GPT 이용 정보 습득
중요하다고 생각하는 부분은 * 처리 해당 내용은 외우고 있는게 좋을것 같다.
'클라우딩 어플리케이션 엔지니어링 TIL > 3주차' 카테고리의 다른 글
| [파트10] CSS 첫번째 (0) | 2024.04.25 |
|---|---|
| [파트9] HTML 두번째 (0) | 2024.04.24 |
| [파트8] HTML 첫번째 (0) | 2024.04.23 |
| [파트7] 환경실습(vscode) (0) | 2024.04.23 |
| [파트4] Node.js에 db연동 준비(npm 사용) (0) | 2024.04.23 |
