Learn & Record
HTML CSS (선택자, 태그 선택자, 아이디 클래스 선택자, 후손 자손 선택자, table 태그, form 태그, 동위 선택자, 반응 선택자, 구조 선택자, 형태구조 선택자, 상태 선택자, 복합 .. 본문
HTML CSS (선택자, 태그 선택자, 아이디 클래스 선택자, 후손 자손 선택자, table 태그, form 태그, 동위 선택자, 반응 선택자, 구조 선택자, 형태구조 선택자, 상태 선택자, 복합 ..
Walker_ 2024. 3. 21. 16:591. 선택자
- 전체 선택자
- 모든 웹페이지에 빠지지 않고 사용하는 선택자로 웹 페이지 시작 전 초기화시키기 위해서도 사용
- body 안에 있는 태그뿐 아니라 <html><head> 태그에도 적용이 됨. 가급적 사용하지 말 것
- 주로 리셋 CSS를 사용
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2. 태그 선택자
- html 내부에서 특정 태그를 모두 선택할 때 사용하는 선택자
- 여러 태그들을 한 번에 선택해 스타일 속성을 적용할 때 쉼표 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, p, h1, h2, h3, h4, h5, h6 {
border: 5px solid gray;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<h3>Lorem ipsum</h3>
<h4>Lorem ipsum</h4>
<h5>Lorem ipsum</h5>
<h6>Lorem ipsum</h6>
<p>LoremLoremLoremLorem ipsum</p>
</body>
</html>
3. 아이디, 클래스 선택자
- 아이디 : 아이디 속성을 가지고 있는 태그를 선택
- 클래스 : 특정한 클래스를 가지고 있는 태그를 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>id, class</title>
<style>
#header {
width: 300px;
line-height: 50px; /* 줄 간격 */
background-color: green;
text-align: center;
color: -moz-win-communicationstext;
}
.box {
color: #47a39f;
}
</style>
</head>
<body>
<h1 id="header">good morning</h1>
<p class="box">good morning good morning</p>
<p class="box">good morning good morning</p>
</body>
</html>
- id는 고유값이어야 하지만, 스타일시트에서는 id 속성 중복이 문제가 되지 않음
- 하지만 자바스크립트는 id 속성이 중복될 경우에 문제가 발생. 예) getElementById()
- id 속성은 중복되지 않게 사용해야 함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#rint {
color: red;
}
</style>
</head>
<body>
<h1 id="rint">CSS3 Selector Basic</h1>
<h2 id="rint">CSS3 Selector Basic</h2>
<h3 id="rint">CSS3 Selector Basic</h3>
</body>
</html>
- 태그 선택자와 클래스 선택자를 함께 사용하면 더 정확하게 태그를 선택할 수 있음
- li 태그 중 class 속성값으로 select를 가지는 태그의 color 속성을 red 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li.select {
color:red;
}
</style>
</head>
<body>
<h1 class="select">Lorem ipsum</h1>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
</html>
4. 후손 자손 선택자
- 아래 html 태그 구조는 복잡한데 클래스나 아이디가 적어서 요소를 선택하기가 어려움
- 자손 선택자
- 부모 선택자 바로 아래 계층에 있는 선택자. 자손 선택자 표기는 '>'로 표시
- 형태 : 선택자A > 선택자B : 선택자 A의 자손에 위치하는 B를 선택
- 후손 선택자
- 부모 선택자 안에 들어있는 모든 자식 선택자. 후손 선택자의 표기는 공백으로 표현
- 형태 : 선택자A 선택자B : 선택자 A의 후손에 위치하는 B를 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div > h1 { /* 자손 선택자 */
background-color: blue;
}
</style>
</head>
<body>
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<div>
<ul>
<li>menu1</li>
<li>menu2</li>
<li><span>menu3</span></li>
</ul>
</div>
<h2>제목2</h2>
<span>span</span>
<ul class="point">
<li>menu4</li>
<li>menu5</li>
<li><span>menu6</span></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div > h1 { /* 자손 선택자 */
background-color: blue;
}
div h1 { /* 후손 선택자 */
background-color: blue;
}
div span { /* 후손 개념의 div 아래에 있는 모든 span */
background-color: yellow;
}
div > span { /* 자손 개념의 div 바로 아래에 있는 span */
border: 4px solid blue;
}
.point span {
color : red;
}
</style>
</head>
<body>
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<div>
<ul>
<li>menu1</li>
<li>menu2</li>
<li><span>menu3</span></li>
</ul>
</div>
<h2>제목2</h2>
<span>span</span>
<ul class="point">
<li>menu4</li>
<li>menu5</li>
<li><span>menu6</span></li>
</ul>
</div>
</body>
</html>
5. table 태그
- 표 형식을 만들 때 주로 사용
- table 태그와 자손 선택자 주의 사항
- 웹 브라우저가 자동으로 tbody 태그를 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table > tr > th { /* table 태그 아래의 tr 태그 아래 th 태그의 color 속성에 red 키워드를 적용 */
color: red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Region</th>
</tr>
<tr>
<td>홍길동</td>
<td>대구광역시 중구</td>
</tr>
</table>
</body>
</html>
6. form 태그
- 웹과 앱 모두에서 중요한 태그
- input 태그 : 로그인 창 같은 기능을 구현하는 태그 form 태그안에 있어야 함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form>
<input type="text" name="id"/>
<input type="password" name="passwd"/>
</form>
</body>
</html>
- 속성 선택자
- 특정 속성을 가진 태그를 선택
- 선택자 뒤에 대괄호([])를 사용하여 속성과 값을 입력
- 형태 : 선택자[속성=값] : 속성 안의 값이 특정값과 조건에 만족하는 문서 객체를 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
<style>
input[type=text] {
/* input 태그 중에서 type 속성값을 text를 가지는 태그의 배경 색상을 지정 */
background-color: red;
}
input[type=password] {
/* input 태그 중에서 type 속성값을 password를 가지는 태그의 배경 색상을 지정 */
background-color: blue;
}
/* 자바스크립트의 쿼리셀렉터에서 폼 태그를 선택할 때 주로 name 속성을 사용 */
input[name=id] {
color: #acf1ec;
}
input[type=text], input[type=password] {
background: none;
border: none;
border-bottom: 1px solid #666666;
padding: 6px;
margin: 0 2px;
font-size: 16px
}
</style>
</head>
<body>
<form>
<input type="text" name="id"/>
<input type="password" name="passwd"/>
</form>
</body>
</html>
7. 동위 선택자
- 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자
- 형태 : 선택자A + 선택자B : 선택자 A 바로 뒤에 위치하는 선택자 B를 선택
- 형태 : 선택자A ~ 선택자B : 선택자 A 뒤에 위치하는 선택자 B를 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>H Tag</title>
<style>
h1 + h2 {
/* h1 바로 뒤에 있는 h2 태그에 글자 색상 지정 */
color: red;
}
h1 ~ h2 {
/* h1 뒤에 있는 모든 h2 태그에 배경 색상 지정 */
background: orange;
}
</style>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
</body>
</html>
8. 반응 선택자
- 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자
- 사용자가 마우스를 특정 태그에 올리거나 클릭했을 때의 상태
- 형태 : active : 사용자가 마우스로 클릭한 태그를 선택
- 형태 : hover : 사용자의 마우스가 위치한 태그를 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1:hover {
/* h1 태그에 마우스를 올렸을 때 글자 색상을 변경 */
color: red;
cursor: pointer;
}
h2:active {
/* h2 태그에서 마우스로 클릭했을 때 글자 색상을 변경하고 배경 색상을 나타냄 */
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
</body>
</html>
9. 구조선택자
- CSS3부터 지원하는 선택자로 특정한 위치에 있는 태그를 선택하는 선택자
- 형태
- first-child : 부모박스 안에서 형제 관계 중에서 첫 번째에 위치하는 태그 선택
- last-child : 부모박스 안에서 형제 관계 중에서 마지막에 위치하는 태그 선택
- nth-child(수열) : 부모박스 안에서 형제 관계 중에서 "앞에서" 수열번째 태그 선택
- nth-last-child(수열) : 부모박스 안에서 형제 관계 중에서 "뒤에서" 수열번째의 태그 선택
- 자주 주 사용하는 수열에는 숫자번째(숫자), 짝수열(2n), 홀수열(2n+1)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
div span:first-child { /* div의 자손 중 첫번째 자식에 해당하는 span 태그 지정 */
background : red;
}
div p:first-child { /* div의 자손 중 첫번째 자식에 해당하는 p 태그 지정 (이 문서에는 없음) */
background: blue;
}
div span:last-child{
background: red;
}
div p:last-child{
background: blue;
}
</style>
</head>
<body>
<div>
<span>text1</span>
<p>text2</p>
<span>text3</span>
<p>text4</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
li {
list-style: none;
float: left;
padding: 15px;
}
li:nth-child(2n) { /* li 태그 중에서 짝수 번째에 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
background: gray;
color: pink;
}
li:nth-child(2n+1) { /* li 태그 중에서 짝수 번째에 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
background: black;
color: #bebe4d;
}
li:first-child { /* li 태그 중에서 첫 번째 해당하는 li ㅐㅌ그의 배경 색상과 글자 색상을 지정 */
color:white;
}
li:last-child { /* li 태그 중에서 마지막 번째에 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
color: green;
}
li:nth-child(3) { /* 1부터 시작 - n */
background: pink;
color: gray;
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
li {
list-style: none;
float: left;
padding: 15px;
}
li:first-child{
border-radius: 10px 0px 0px 10px;
}
li:last-child{
border-radius: 0px 10px 10px 0px;
}
li:nth-child(2n) {
background: #ff0000;
}
li:nth-child(2n+1) {
background: #750000;
}
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</body>
</html>
10. 형태구조선택자
- 일반 구조 선택자와 비슷하지만 태그 형태를 구분
- :first-of-type : 부모박스 안에서 형제 관계 중에서 첫 번째에 위치하는 특정한 태그 선택
- :last-of-type : 부모박스 안에서 형제 관계 중에서 마지막에 위치하는 특정한 태그 선택
- :nth-of-type(수열) : 부모박스 안에서 형제 관계 중에서 앞에서 수열번째의 특정한 태그 선택
- :nth-last-of-type(수열) : 부모박스 안에서 형제 관계 중에서 뒤에서 수열번째의 특정한 태그 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SELECT</title>
<style>
h1:first-of-type { /* h1 태그 중에서 첫 번째 h1 태그의 글자 색상 지정 */
color:red;
}
h1:first-of-type { /* h1 태그 중에서 첫 번째 h1 태그의 글자 색상 지정 */
color:blue;
}
h2:last-of-type { /* h2 태그 중에서 첫 번째 h2 태그의 글자 색상 지정 */
color:white;
background: blue;
}
div span:first-of-type{
background: red;
}
div p:first-of-type{
background: blue;
}
div span:last-of-type{
background: red;
}
div p:last-of-type{
background: blue;
}
</style>
</head>
<body>
<h1>header-1</h1>
<h2>header-2</h2>
<h3>header-3</h3>
<h3>header-3</h3>
<h2>header-2</h2>
<h1>header-1</h1>
<div>
<span>text1</span>
<p>text2</p>
<span>text3</span>
<p>text4</p>
</div>
</body>
</html>
11. 상태선택자
- 입력 양식(form 태그)의 상태를 선택할 때 사용하는 선택자
- checked 체크상태의 input태그에 선택
- focus 초점이 맞춰진 input태그를 선택
- enabled 사용 가능한 input 선택
- disabled 사용 불가능한 input 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
<style>
input:enabled { /* 입력을 할 수 있는 상태의 input 태그의 배경 색상과 글자 색상 지정 */
background: blue;
color: white;
}
input:disabled { /* 입력을 할 수 없는 상태의 input 태그의 배경 색상 지정 */
background: black;
}
input:focus { /* input 태그의 입력을 위한 초점이 맞추어진 상태에서의 배경 색상 지정 */
background: orange;
}
</style>
</head>
<body>
<form>
<!--입력을 할 수 있는 상태-->
<h1>enabled</h1>
<p>
<input type="text" name="email"/>
</p>
<!-- 입력을 할 수 없는 상태-->
<h1>disabled</h1>
<p> 입력을 할 수 없는 상태로 만들기</p>
<input disabled="disabled" name="address"/> <span>클릭</span>
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('span');
btn.addEventListener('click', () => {
document.querySelectorAll('input')[1].removeAttribute('disabled');
});
});
</script>
</body>
</html>
12. 상태 선택자와 동위 선택자의 복합 활용
- input 태그의 type 속성값이 checkbox인 태그가 체크 되었을 때
- 바로 뒤에 위치하는 div 태그의 height 속성에 0픽셀을 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CheckBox</title>
<style>
input[type=checkbox]:checked + div {
height: 0;
}
span{
display: none;
}
input[type=checkbox]:checked ~ span {
display: inline;
}
div {
overflow: hidden; /* 박스의 높이만큼만 보이도록 함 */
width: 650px;
height: 300px;
background: yellow;
}
/* 초기 화면에서는 "약관에 동의하셨습니다."가 나오지 않고 체크박스 클릭시에 나오도록 수정 할 것 */
</style>
</head>
<body>
<input type="checkbox"/>동의</label>
<div>
<h1>Lorem Ipsum</h1>
<p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</p>
</div>
<span>약관에 동의하셨습니다.</span>
</body>
</html>
13. 시작문자 선택자
- 태그 내부의 첫 번째 글자의 첫 번째 줄을 선택할 때 사용
- ::first-letter : 첫 번째 글자를 선택
- ::first-line : 첫 번째 줄을 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
p::first-letter { /* 문단의 첫 번째 글자를 선택 */
font-size: 20px;
color: red;
font-weight: 900; /* 글자 굵기 */
}
p::first-line { /* 문단의 첫 번째 줄을 선택 */
background-color: blue;
color: yellow;
}
</style>
</head>
<body>
<h1>리메이크되는 [달콤한 인생] </h1>
<p>
영화감독을 꿈꾸시는 분이라면 크게 도움이 될 영화 중의 하나인 페데리코 펠리니 감독의 [달콤한 인생]이 리메이크 된다고 합니다.
</p>
<p>
'아니, 왜?'라는 말이 나올 정도로 완성도 높은 영화들을 리메이크하는 것을 좋아하지 않지만, 현재를 배경으로 하거나 현재의 시각으로 본다면 어떻게 변하게 될 것이라고 한다면 리메이크를 반기게 될 것 같습니다. 아무튼 원작을 존경하는 관점에서 리메이크를 하게 된다고 하는데요.
</p>
<p>
그동안 후속편이나 프리퀄 제작을 시도했으나 여의치 않았고 원작에서 큰 영감을 얻어 현대적으로 재해석하게 될 것이라고 합니다.
</p>
</body>
</html>
14. 가상요소 선택자
- HTML 코드에는 존재하지 않는 구조 요소에 스타일을 부여할 수 있음
- 문서내에는 보이지 않지만, 미리 정의한 위치에 삽입하는 것이 가능
- 선택될 요소의 특별한 상태를 지정하는 선택자료
- 선택될 요소의 앞 혹은 뒤쪽으로 가상의 요소를 넣어 표현
- ::befor 특정요소의 앞에 삽입. 내용이나 필요한 경우 content 속성을 이용
- ::after 특정요소의 뒤에 삽입. 내용이나 필요한 경우 content 속성을 이용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
h2::before{
content: '하하';
}
p::before{
content: '호호';
}
</style>
</head>
<body>
<h2>TITLE-1</h2>
<p>HTML 코드에는 존재하지 않는 구조 요소에 스타일을 부여할 수 있음
- 문서내에는 보이지 않지만, 미리 정의한 위치에 삽입하는 것이 가능
- 선택될 요소의 특별한 상태를 지정하는 선택자료
- 선택될 요소의 앞 혹은 뒤쪽으로 가상의 요소를 넣어 표현</p>
</body>
</html>
15. 반응 문자 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 반응 문자 선택자
::selection : 사용자가 드래그한 글자를 선택 */
p::selection { background: black; color: red; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed nisi velit. Phasellus suscipit pellentesque leo, vel efficitur mi placerat sed. Fusce vel condimentum leo, at iaculis ante. Suspendisse posuere, dolor non tempor ullamcorper, nisl elit facilisis erat, nec lacinia augue erat id lacus. Curabitur mollis, justo nec lobortis hendrerit, libero nunc aliquam lacus, ut tristique sem nunc eu metus. Quisque varius orci eu felis sollicitudin malesuada. Vivamus pretium ligula velit, eget facilisis enim imperdiet ac.</p>
<p>Nam enim sem, pulvinar sed nibh non, vestibulum suscipit dui. Vestibulum vitae sodales velit. Nam cursus, velit id semper malesuada, sem mauris iaculis diam, sit amet auctor ligula lectus in eros. Aliquam tincidunt semper odio, sit amet ornare neque tristique ut. Suspendisse placerat consequat lectus ut varius. Aliquam in ligula non massa auctor porta. Proin auctor mattis elit sit amet tincidunt. Cras auctor mauris augue, et volutpat diam iaculis vitae.</p>
</body>
</html>
16. 부정 선택자
- 선택자를 반대로 적용
- input 태그 중에서 type 속성값이 password가 아닌 태그의 background 속성에 red 키워드를 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SELECT</title>
<style>
input:not([type=password]) {
background: red;
}
</style>
</head>
<body>
<input type="password"/>
<input type="text"/>
<input type="password"/>
<input type="text"/>
<input type="date"/>
</body>
</html>
17. image Background 태그
- 배경 이미지 속성
- 배경 이미지 속성은 특정 태그의 배경 이미지 또는 배경 색상을 지정하는 스타일 속성으로
- 사용 빈도도 많아 지고 있음
- 배경 이미지에 권한 속성
- background-image : url(이미지 경로) / 배경 이미지 경로
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body { /* 배경 이미지를 적용하는 기본 형식 */
background-image: url("img/cat_bg.png");
background-color: cadetblue;
}
</style>
</head>
<body>
</body>
</html>
- 배경 이미지를 2개 이상 적용하는 경우 왼쪽에 위치한 이미지가 앞으로 나온다.
- 상위 레이어가 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body { /* 배경 이미지를 2개 적용하는 형식 */
background-image: url("img/cat_bg.png"), url("img/land.png");
}
</style>
</head>
<body>
</body>
</html>
- 배경이미지에 대한 size를 지정하기 위한 값
- background-size : 100%, cover, contain, px 값 / 배경이미지 크기
- background-repeat : no-repeat, repeat-x, repeat-y / 배경이미지 반복
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body { /* 배경 이미지를 2개 적용하는 형식 */
background-image: url("img/art.jpg");
background-size: 100%;
background-repeat: no-repeat;
/*
배경이미지의 초기 반복 값은 가로, 세로 모두 반복
no = 반복 하지 않음
x = 가로 반복 y = 세로반복
*/
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body { /* 배경 이미지를 2개 적용하는 형식 */
background-image: url("img/art.jpg");
background-size: 100% 500px;
background-repeat: no-repeat;
/*
배경이미지 크기 100%는 브라우저의 가로 길이를 기준으로 100%
100%(가로 크기), 500px (세로 크기)
*/
}
</style>
</head>
<body>
</body>
</html>
- background-attachment 속성
- 배경 이미지를 어떤 방식으로 넣을 것인지 지정하는 스타일 속성
- 세로가 같아야 확인이 가능해서 body 선택자에 높이를 지정해서 스크롤이 생기게 함
- background-attachment : fixed, scroll / 스크롤에 따를 조정
- scroll : 기본값으로 스크롤 바의 움직임에 따라 배경 이미지도 움직임
- fixed : 브라우저 화면에서 스크롤 바를 움직이더라도 배경 이미지는 고정되어 있음
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
