데이터 분석을 위한 웹 개발 언어
✔️ 배경 설정
✔️ 배치와 위치 설정
✔️ 스타일 및 효과 설정
✔️ 배경 설정
배경색 지정
background-color :요소의 배경색 변경
(블록 요소의 배경색을 변경 가능)
설정 가능 값 단위
색상명 : Red, Green, Blue, ...
16진수 : #000000
RGB : rgb(0, 0, 255)
RGBA : rgba(0,0,255,1) (마지막 숫자는 투명도 지정)
.backgcolor div:nth-child(1) {background-color: black; color: white;}
.backgcolor div:nth-child(2) {background-color: #aaaaaa; color: white;}
.backgcolor div:nth-child(3) {background-color: rgb(255, 255, 0);color: white;}
.backgcolor div:nth-child(4) {background-color: rgba(0, 255, 255, 1);color: white;}<div class="backgcolor">
<div>검정 배경</div>
<div>회색 배경</div>
<div>노랑 배경</div>
<div>청록 배경</div>
</div>(backcolor의 div의 검정 배경은 배경색(검은색)과 글자색(흰색) 설정, 회색 배경는 배경색(회색)과 글자색(흰색) 설정
노랑 배경은 배경색(노란색)과 글자색(흰색) 설정, 청록 배경은 배경색(청록색)과 글자색(흰색) 설정)
그라디언트 배경 지정
linear-gradient : 직선 방향으로 색이 변함
repeating-linear-gradient : 패턴처럼 반복
(deg를 적용하면 각도를 변경할 수 있음)
.backgcolor2 div:nth-child(1) { height: 300px; background: repeating-linear-gradient(45deg, #f06, #f06 10px, #fff 10px, #fff 20px); color: white; }
.backgcolor2 div:nth-child(2) { background: radial-gradient(#000 10%, transparent 10%); background-size: 20px 20px; }
.backgcolor2 div:nth-child(3) { height: 300px; background: repeating-linear-gradient(90deg, #f06 0px, #f06 20px, #fff 20px, #fff 40px), repeating-linear-gradient(0deg, #f06 0px, #f06 20px, #fff 20px, #fff 40px); color: white; }<div class="backgcolor2">
<div>대각선 줄무늬</div>
<div>원형 패턴</div>
<div>격자 무늬</div>
</div>(대각선 줄무늬는 높이 300px, 45도 분홍-흰색 반복 줄무늬 설정,
원형 패턴은 배경에 검정 원이 20px 간격으로 반복 설정, 격자 무늬는 가로세로 분홍-흰색 격자 패턴 반복 설정)
배경 이미지 삽입
background-image : 배경이미지 삽입
background-repeat : 배경이미지를 반복
.backimg div { width: 200px; height: 200px; border: 1px solid black; }
.backimg div:nth-child(1) { background-image: url('pattern.png'); }
.backimg div:nth-child(2) { width: 500px; height: 500px; background-image: url('car1_small.jpg'); }
.backimg div:nth-child(3) { width: 300px; height: 300px; background-image: url('pattern.png'); background-repeat: repeat-x; }
.backimg div:nth-child(4) { width: 300px; height: 300px; background-image: url('pattern.png'); background-repeat: repeat-y; }
.backimg div:nth-child(5) { width: 300px; height: 300px; background-image: url('pattern.png'); background-repeat: no-repeat; }<div class="backimg">
<div>기본 반복</div>
<div>큰 이미지 반복</div>
<div>가로 반복</div>
<div>세로 반복</div>
<div>반복 없음</div>
</div>(기본 반복은 배경이미지의 기본적 반복 진행, 큰 이미지 반복은 너비와 높이가 모두 500px로 고정된 이미지의 반복 진행
가로 반복은 이미지가 가로 방향(x축) 반복 진행, 세로 반복은 이미지가 세로 방향(y축) 반복 진행, 반복 없음은 이미지 반복되지 않고 삽입)
이미지의 위치 조정
background-position : 배경 이미지의 위치 지정
(이미지의 위치를 부모의 블록 요소 안에서 이동 가능)
.backimg2 div { width: 300px; height: 300px; border: 1px solid black; }
.backimg2 div:nth-child(1) { background-image: url('pattern.png'); background-repeat: no-repeat; background-position: center; }
.backimg2 div:nth-child(2) { background-image: url('pattern.png'); background-repeat: no-repeat; background-position: center bottom; }
.backimg2 div:nth-child(3) { background-image: url('pattern.png'); background-repeat: no-repeat; background-position: right top; }
.backimg2 div:nth-child(4) { background-image: url('pattern.png'); background-repeat: no-repeat; background-position: 50px 100px; }
.backimg2 div:nth-child(5) { background-image: url('pattern.png'); background-repeat: no-repeat; background-position: 20% 50%; }<div class="backimg2">
<div>가운데</div>
<div>가운데 아래</div>
<div>오른쪽 위</div>
<div>50px 100px</div>
<div>20% 50%</div>
</div>(가운데는 이미지 가운데 정렬, 가운데 아래는 이미지 가운데 아래 정렬, 오른쪽 위는 이미지 오른쪽 위 정렬,
50px 100px은 왼쪽 50px, 위 100px 위치 정렬, 20% 50%는 가로 20%, 세로 50% 위치 정렬)
이미지 크기 조절
background-size : 배경 이미지의 크기
contain : 이미지 비율 유지하며 박스에 맞춤
cover : 박스를 꽉 채우며 잘릴 수 있음
.img_size div { width: 300px; height: 200px; border: 1px solid black; }
.img_size div:first-child { background-image: url('rose.jpg'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.img_size div:last-child { background-image: url('rose.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }<div class="img_size">
<div>Contain</div>
<div>Cover</div>
</div>(contain은 rose 이미지 비율 유지하며 박스에 맞춤, Cover는 rose 이미지를 박스를 꽉 채움)
두 이미지 겹치기
background-attachment : 배경 이미지가 움직이지 않게 고정
(이미지가 고정된 위치 이후에서는 다른 이미지를 겹쳐서 확인)
.twoinone { width: 90vw; height: 90vh; margin: 4vh auto; border: 1px solid black; }
.twoinone div { width: 100%; height: 50%; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }
.twoinone div:first-child { background-image: url('car1.jpg'); background-size: contain; }
.twoinone div:last-child { background-image: url('car2.jpg'); background-size: contain; }<div class="twoinone">
<div>car 1</div>
<div>car 2</div>
</div>( car 1,2를 설정하여 박스 높이 90vh의 50%씩 나눠 두 이미지가 겹치지 않고 고정된 위치 표시,
두 이미지 전부 contain 활용하여 비율 유지하며 가운데 정렬)
✔️ 배치와 위치 설정
좌우 배치
float : 블록 요소를 왼쪽 / 오른쪽 이동 배치 가능
.wrap { width: 800px; margin: 100px auto; border: 5px solid black; }
.wrap .left { width: 400px; height: 400px; background-color: pink; float: left; }
.wrap .right { width: 400px; height: 400px; background-color: lightblue; float: right; }
.wrap::after { content: " "; display: block; clear: both; }<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>(wrap(이미지 이동 공간 전체)를 확인 가능한 테두리 설정,
왼쪽 요소는 너비와 높이가 400px, 배경색(핑크색), 왼쪽으로 배치,
오른쪽 요소는 너비와 높이가 400px, 배경색(하늘색), 오른쪽으로 배치(나란히 배치))
이미지와 텍스트 배치
float : 이미지, 텍스트 요소를 왼쪽 / 오른쪽 이동 배치 가능
.float img { width: 400px; float: left; margin-right: 1rem; }<div class="float">
<img src="rose.jpg" alt="장미">
<p>텍스트가 이미지 옆에 배치됩니다.</p>
</div>(이미지 요소가 너비가 400px 오른쪽에 여백을 1rem 주고 왼쪽으로 배치, 텍스트는 오른쪽 이미지 옆에 배치)
위치 자유롭게 배치
position : 요소를 자유롭게 배치
주요 속성값
static : 기본값(위치 조정 속성이 적용 X)
relative : 적용된 요소의 현재 위칫값을 기준으로 상대위치를 설정
absolute : 부모 요소의 특정 구간을 기준으로 절대 위치 설정
fixed : 웹브라우저 기준으로 절대 위치를 설정
sticky : 스크롤에 따라 붙는 위치(스크롤에 따라 일정 구간 고정 및 따라감)
.box { width: 100px; height: 100px; text-align: center; line-height: 100px; color: white; }
.red-box { background-color: red; position: absolute}
.green-box { background-color: green; bottom: 10%; right: 10%; }
.blue-box { background-color: blue; position: fixed}<div class="position">
<div class="box red-box">빨강</div>
<div class="box green-box">초록</div>
<div class="box blue-box">파랑</div>
</div>(box는 너비와 높이 모두 100px, 텍스트는 가운데 정렬, 줄 간격은 100px, 글자색은 흰색으로 설정
빨강은 배경색이 빨간색이고 포지션이 absolute이므로 부모 기준으로 위치 설정,
초록은 배경색이 초록색이고 밑에서 10%, 오른쪽으로 10% 떨어진 위치 설정,
파랑은 배경색이 파란색이고 포지션은 fixed이므로 화면에 지속적으로 보이는 위치 설정)
겹침 순서 설정
z-index : 겹쳐있는 요소의 z축 순서 정하기
(position이 static(기본값)인 요소에서는 설정되지 X)
z-index: 값의 숫자가 높으면 우선순위 높음(0이 기본값)
.zindex { width: 400px; height: 400px; border: 1px solid black; margin: 100px auto; position: relative; }
.zindex .zileft { width: 200px; height: 200px; background-color: blue; position: absolute; top: 50px; left: 50px; z-index: 7; }
.zindex .zimiddle { width: 200px; height: 200px; background-color: lightcoral; position: absolute; top: 100px; left: 0px; z-index: 5; }
.zindex .ziright { width: 200px; height: 200px; background-color: red; position: absolute; bottom: 50px; right: 50px; z-index: 6; }<div class="zindex">
<div class="zileft">왼쪽</div>
<div class="zimiddle">가운데</div>
<div class="ziright">오른쪽</div>
</div>(클래스 z-index의 설정 안에 왼쪽은 너비와 높이 모두 200px, 배경색(파란색), 위(50px) 왼쪽(50px) 설정
가운데는 너비와 높이 모두 200px, 배경색(연한 산호색), 위(100px) 왼쪽(0px) 설정
오른쪽은 너비와 높이 모두 200px, 배경색(빨간색), 밑(50px) 오른쪽(50px) 설정
z-index의 값이 큰 순서대로 맨위부터 왼쪽 > 오른쪽 > 가운데 순으로 나타남)
✔️ 스타일 및 효과 설정
투명도 설정
opacity : 투명도 조절
1은 불투명(일반적 상태), 0은 투명
.opacity { width: 400px; height: 400px; border: 1px solid black; margin: 100px auto; position: relative; }
.opacity .opleft { width: 200px; height: 200px; background-color: blue; position: absolute; top: 50px; left: 50px; z-index: 4; opacity: 0.5; }
.opacity .opmiddle { width: 200px; height: 200px; background-color: greenyellow; position: absolute; top: 100px; left: 0px; z-index: 2; opacity: 0.5; }
.opacity .opright { width: 200px; height: 200px; background-color: red; position: absolute; bottom: 50px; right: 50px; z-index: 3; opacity: 0.2; }
<div class="opacity">
<div class="opleft">왼쪽</div>
<div class="opmiddle">가운데</div>
<div class="opright">오른쪽</div>
</div>(클래스 opacity 설정 안의 왼쪽은 너비와 높이 모두 200px, 배경색(파란색), 위(50px) 왼쪽(50px) 투명도(0.5) 설정
가운데는 너비와 높이 모두 200px, 배경색(연한 산호색), 위(100px) 왼쪽(0px) 투명도(0.5) 설정
오른쪽은 너비와 높이 모두 200px, 배경색(빨간색), 밑(50px) 오른쪽(50px) 투명도(0.2) 설정
z-index의 값이 큰 순서대로 맨위부터 왼쪽 > 오른쪽 > 가운데 순으로 나타남)
그림자 설정
box-shadow : 박스 요소 그림자 생성
text-shadow : 텍스트 요소 그림자 생성
box(text)-shadow 가로세로 위아래 진하고연하게 그림자색 설정
.shadow { width: 400px; height: 400px; border: 1px solid black; margin: 100px auto; position: relative; }
.shadow .shleft { width: 200px; height: 200px; background-color: blue; position: absolute; top: 50px; left: 50px; z-index: 4; color: white; text-shadow: 10px 10px 10px black; box-shadow: 30px 30px 30px yellow; }
.shadow .shmiddle { width: 200px; height: 200px; background-color: greenyellow; position: absolute; top: 100px; left: 0px; z-index: 2; box-shadow: 10px 10px 30px black; }
.shadow .shright { width: 200px; height: 200px; background-color: red; position: absolute; bottom: 50px; right: 50px; z-index: 3; box-shadow: 10px 10px 30px black; }
<div class="shadow">
<div class="shleft">왼쪽</div>
<div class="shmiddle">가운데</div>
<div class="shright">오른쪽</div>
</div>(클래스 shadow 설정 안에 z-index 설정과 동일한 설정으로
왼쪽은 텍스트 요소에 10px 10px 10px 검은색의 그림자, 박스 요소에 30px 30px 30px 노란색의 그림자 설정
가운데는 박스 요소에 10px 10px 30px 검은색의 그림자 설정, 왼쪽은 박스 요소에 10px 10px 30px 검은색의 그림자 설정)
모서리 둥글게 처리
border-radius : 모서리 둥글게 처리
.radius { width: 400px; height: 400px; border: 1px solid black; margin: 100px auto; position: relative; }
.radius .rdleft { width: 200px; height: 200px; background-color: blue; position: absolute; top: 50px; left: 50px; z-index: 3; border-radius: 30px; }
.radius .rdmiddle { width: 200px; height: 200px; background-color: greenyellow; position: absolute; top: 100px; left: 0px; z-index: 1; border-radius: 50%; }
.radius .rdright { width: 200px; height: 200px; background-color: red; position: absolute; bottom: 10px; right: 0px; z-index: 2; border-radius: 100%; }<div class="radius">
<div class="rdleft">왼쪽</div>
<div class="rdmiddle">가운데</div>
<div class="rdright">오른쪽</div>
</div>(클래스 redius 설정 안에 z-index 설정과 동일한 설정으로
왼쪽은 모서리를 30px만큼 둥글게 처리, 가운데는 50%만큼 둥글게 처리, 왼쪽은 100%만큼 둥글게 처리)
그라디언트 색상 적용
linear-gradient : 그레디언트 색상 적용
linear-gradient(방향, 색상1, 색상2)
.box { width: 300px; height: 300px; text-align: center; line-height: 300px; color: white; border: 1px solid black; }
.gradient .box.grleft { background: linear-gradient(to top, blue, red); }
.gradient .box.grmiddle { background: linear-gradient(45deg, blue, red); }
.gradient .box.grright { background: linear-gradient(to right, blue, red); }<div class="gradient">
<div class="box grleft">왼쪽</div>
<div class="box grmiddle">가운데</div>
<div class="box grright">오른쪽</div>
</div>
(클래스 gradient는 너비와 높이가 모두 300px, 텍스트는 가운데 정렬, 줄 간격은 300px, 글자색(흰색),
1px 두께의 검은 실선 테두리 설정, 왼쪽은 위에서부터 파란색부터 빨간색으로 이어지는 색상 설정
가운데는 파란색부터 빨간색으로 이어지는 45도 방향으로 색상 설정
오른쪽은 오른쪽에서부터 왼쪽 방향으로 파란색부터 빨간색으로 이어지는 색상 설정)
특수효과 적용
filter : 특수효과 적용
주요 속성값
blur : 블러 처리
brightness : 0 어둡고 1 밝음
contrast : 100% 작아지면 대비 감소, 커지면 증가
grayscale : 100%에 가까울 수록 흑백으로 전환
hue-rotate : 0 원본 0-360deg까지 변경 가능
invert : 100%에 가까울수록 색이 반대로 변환
saturate : 0에 가까울수록 채도가 낮아짐
sepia : 100%에 가까울수록 갈색 톤으로 변경됨
.filter div {
width: 100px;
height: 100px;
background-image: url(rose.jpg);
background-size: contain;}
.filter div:nth-child(1) {filter: blur(3px);}
.filter div:nth-child(2) {filter: brightness(0.3);}
.filter div:nth-child(3) {filter: contrast(130%);}
.filter div:nth-child(4) {filter: grayscale(90%);}
.filter div:nth-child(5) {filter: hue-rotate(180deg);}
.filter div:nth-child(6) {filter: invert(100%);}
.filter div:nth-child(7) {filter: saturate(0.5);}
.filter div:nth-child(8) {filter: sepia(80%);}<div class="filter">
<div class="item">블러 처리</div>
<div class="item">어두움 밝음 처리</div>
<div class="item">대비 증가, 감소</div>
<div class="item">흑백 전환</div>
<div class="item">색조/색상 변환</div>
<div class="item">색상 반전</div>
<div class="item">채도 변경</div>
<div class="item">갈색 톤으로 변환</div>
</div>(클래스 filter는 너비와 높이 모두 100px, rose.jpg를 불러와서 이미지를 크기에 맞춰 설정
블러 처리는 3px만큼 흐릿한 장미 이미지, 어두움 밝음 처리는 0.3만큼 어두운 장미 이미지,
대비 증가, 감소는 130%만큼 흑백 처리된 장미 이미지, 색조/색상변환은 색이 180도(반대색)만큼 변환,
색상 반전은 100%만큼 반대되는 색으로 반전, 채도 변경은 0.5만큼 채도가 흐릿하게 변경,
갈색 톤으로 변환은 80%만큼 갈색톤으로 변환)
이번 내용에서는 HTML과 CSS에서의
HTML과 CSS를 활용한 배경 및 요소의 배치와 위치, 스타일 및 효과 설정에 대해 공부하였습니다.
HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데
웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.
더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데
위 블로그 글 참고해서 공부하면 좋을 것 같습니다.
'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록
데이터 분석 공부 열심히 하는 중😁
everyonelove.tistory.com
'BOOTCAMP > 웹 개발 언어' 카테고리의 다른 글
| [HTML][CSS]웹 개발 언어_HTML과 CSS 활용한 폰트/텍스트 변환, 레이아웃 설정 (0) | 2025.03.08 |
|---|---|
| [HTML][CSS]웹 개발 언어_CSS의 복합 셀렉터와 가상 셀렉터 (0) | 2025.03.07 |
| [HTML][CSS]웹 개발 언어_CSS의 태그/아이디/클래스/속성 셀렉터 (0) | 2025.03.07 |
| [HTML] 웹 개발 언어_HTML의 목록, 폼, 오디오와 비디오 태그 활용 (0) | 2025.03.06 |
| [HTML] 웹 개발 언어_HTML의 서식 태그 활용 (0) | 2025.03.05 |