CSS배경 속성
- 배경 이미지 불러오기 등 배경 이미지와 관련된 속성들
- background-image : 배경 이미지 불러옴
- background-size : 배경 이미지 크기
- background-repeat : 배경 이미지 반복형태
- background-attachment : 배경 이미지를 화면에 부착시킬건지
- background : 이런것들을 한꺼번에 적용
배경 불러오기 속성
- background-image 속성으로 배경 이미지 불러옴
- 값으로 url 적기
배경 불러오기 예제
- background_image.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png');
}
</style>
</head>
<body>
</body>
</html>- CSS로 <body> 태그에 대해 배경 이미지를 불러오고 있다
- CSS를 쓰지 않고 HTML 만으로 쓰려면 <body> 태그 안에 background 속성을 쓴다
- 같은 폴더 안에 BackgroundFront.png 가 있으므로 이름만으로 이미지를 불러올 수 있다.
- repeat 가 기본속성이어서, 이미지 크기가 작은 경우엔 반복된다
두 장의 배경 이미지 불러오기
- background-image의 값에서 url 을 , 으로 연결해줌
두 장의 배경 이미지 불러오기 예제
- background_imageLayer.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
/* 각각의 그림을 레이어라고 부릅니다. */
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
}
</style>
</head>
<body>
</body>
</html>
배경 이미지 너비와 높이 조절 속성
- background-size 속성 으로 조절
- background-size 설정 안하면 기본 크기로 나타남
- background-size의 값이 1개일때는, 가로(너비) 만 설정하는 것
- background-size의 값이 2개일때는, 너비, 높이 순서대로이다.
배경 이미지 너비와 높이 조절 예제
1. 너비(가로) 설정
- background_size.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%; /* 배경 이미지의 너비(가로) */
}
</style>
</head>
<body>
</body>
</html>- background-size : 100%는 가로로 브라우저에 꽉 찬 상태를 의미한다.
- background-size : 80%로 설정시 가로 80%만큼 채우고 남은 부분은 반복시킴
- 즉, background-size 속성 은 한개의 값만 설정시 배경이미지의 가로(너비) 만 설정하는 것임
1. 높이(세로) 설정
- 1개의 값을 더 부여하면 높이가 됨
- background_sizeEach.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
/* 배경 이미지의 너비(가로) 높이(세로) */
background-size: 100% 250px;
}
</style>
</head>
<body>
</body>
</html>- 이렇게 background-size의 값이 2개가 왔을때는 각각 너비, 높이 가 된다
- 값은 % 비율로 설정할 수도 있고 절대값으로 설정할 수도 있다
- 이미지 높이가 작아서 같은 이미지가 여러번 반복됨
배경 이미지 반복 유무 속성
- 크기가 맞지 않을때 배경 이미지가 반복된다.
- 반복여부와 반복 방식을 background-repeat 속성으로 제어
1. 반복을 하지 않을때
- background-repeat : no-repeat;
2. 반복을 할 때
- background-repeat : repeat;
- 기본값은 repeat이므로 background-repeat을 설정하지 않으면 반복된다.
+ 반복 방향 설정
- x방향으로 반복할건지 y방향으로 반복할건지 설정 가능
- repeat-x : x축 방향으로만 이미지 반복
- repeat-y : y축 방향으로만 이미지 반복
배경 이미지 반복 유무 속성 예제1
- 1. 반복을 하지 않을때
- background_repeatNone.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>- background-repeat : no-repeat; 이므로 반복하지 않는다.
- 반복 없이 1번만 출력하고 있다
배경 이미지 반복 유무 속성 예제2
2. 반복을 할 때
- y축 방향으로만 반복하기 예제 (이전 코드 수정)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
- y축(세로) 방향으로만 반복하고 있다
- 가로 너비 100%이므로 가로는 꽉 채워서 나오는 것
스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성
- background-attachment 속성 으로 제어
- 내용이 많이 들어있을때 스크롤링을 하게되는데, 이때 배경 이미지를 같이 움직일건지, 고정하고 내용만 움직일건지 설정
- 속성값 : scroll, fixed
스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성 예제1
1. 배경이미지를 같이 스크롤링
- background_attachmentScroll.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: scroll; /* 배경 이미지 스크롤링 */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 스크롤링시 배경이미지도 같이 스크롤링 된다 (움직인다)
- 스크롤을 아래로 내리면 배경이미지(산 그림) 이 없어진 것을 보고 움직였음을 알 수 있다.
스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성 예제2
2. 배경이미지를 고정
- background_attachmentFixed.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed; /* 배경 이미지 고정 */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>- 배경이미지 고정하려면 background-attachment : fixed; 속성값을 준다.
- 스크롤링 해도 배경 이미지는 고정되어있다
- 아래로 스크롤링해도 산 모양이 계속 나옴을 통해 배경 이미지는 움직이지 않음을 알 수 있음.
배경 이미지 위치 설정 속성
- backgrount-position 속성으로 설정함
- 한쪽방향으로만 위치를 설정할 수도 있고, x축, y축에서 떨어진 간격을 통해 위치를 설정할 수도 있다.
- 위쪽에 배치시 top, 아래쪽에 배치시 bottom, 왼쪽에 배치시 left, 오른쪽에 배치시 right
- 반복이 안되도록 no-repeat 이어야만 위치 설정 가능함, 반복이 되면 위치 제어 불가
배경 이미지 위치 설정 속성 예제1
1. 한쪽방향으로만 위치를 설정
- background-positionBottom.html
- 배경 이미지를 브라우저 하단에 배치하는 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 배경 이미지(산 그림)가 하단 영역에 나타난다
배경 이미지 위치 설정 속성 예제2
2. 한쪽방향으로만 위치를 설정
- 방금은 한쪽 방향(y축방향)으로만 위치를 설정했지만 정교한 위치 설정을 하려면 x축, y 축 다 설정 가능
- x축 떨어진 간격, y축 떨어진 간격을 통해 위치를 설정 가능
- background_positionEach.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
font-family:
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>- 0px은 x축에서 떨어진 간격, 50%는 y축에서 떨어진 간격을 의미
왜?
글자에 대한 속성
글자 크기 속성
- font-size 속성으로 글자 크기를 설정
- 속성값을 여러 단위로 설정 가능
글자 크기 속성 예제
- font_size.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.a { font-size: 32px; }
.b { font-size: 2em; }
.c { font-size: large; }
.d { font-size: small; }
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p class="a">Lorem ipsum</p>
<p class="b">Lorem ipsum</p>
<p class="c">Lorem ipsum</p>
<p class="d">Lorem ipsum</p>
</body>
</html>- px, em 등의 단위를 사용하고 있다
- large, small 등으로도 가능하다.
- 주로 px이나 %를 많이 쓴다
+ . 선택자이므로 class 속성으로 불러온다.
글꼴 설정 속성
- font-family 속성으로 글꼴을 설정 가능
글꼴 설정 속성 예제
- font_family.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
글자 스타일 설정 속성
- font-style 속성으로 글자 스타일 설정
- 속성값 : italic 등 (기울임)
- font-weight 속성으로 글자 굵기 설정
- 속성값 : bold 등 (굵은 글자)
글자 스타일 설정 속성 예제
- font_styleWeight.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold">Lorem ipsum dolor amet</p>
</body>
</html>- class 속성으로 불러와서 font-size, font-style, font-weight 를 모두 적용하고 있다
- 2em, italic, bold -> 2em (영문 대문자 M의 2배) 크기로 기울임체로 굵게 출력하라
글자 정렬 속성
- text-align 속성으로 가운데, 왼쪽, 오른쪽 정렬이 가능하다
- 속성값 : center, left, right
- 기본값은 left 이다
글자 정렬 속성 예제
- font_textAlign.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.font_right { text-align: right; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold font_center">Lorem ipsum dolor amet</p>
<p class="font_bold font_right">2019.07.10</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
- 제목은 text_align : center; 로 설정했기 때문에 가운데 배치되어있다
- 날짜는 text_algin : right; 로 설정했기 때문에 오른쪽에 배치되어있다.
링크의 밑줄 제어 속성
- text-decoration 속성으로 제어
- text-decoration : none; 으로 하면 밑줄이 사라짐
- 어제 정리 했다.
div의 위치 설정 속성
- position 속성 으로 div를 위치를 설정한다.
- div가 여러개만들어졌을때 배치하기위해 반드시 position 속성 사용
- 속성값
- absolute : 절대적인 좌표 위치 설정
- relative : 상대적인 위치 설정
div의 위치 설정 속성 예제1
- div 를 absoulte 로 위치 설정
- 아직 위치는 설정하지 않음
- position_absoulute.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) { background-color: red; }
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>- box위치 position을 absoulte 로 설정하면 브라우저 좌측 상단 기준으로 절대적인 위치 제어가 가능하다
- 3개의 div 박스는 좌표값이 설정되지 않았고 같은 좌표를 가지게 됨
- .box:nth-child(1) 은 .box 중에서 첫번째 자식 을 의미한다, 배경색 red 적용
- .box:nth-child(2) 은 .box 중에서 두번째 자식 을 의미한다, 배경색 green 적용
- .box:nth-child(3) 은 .box 중에서 세번째 자식 을 의미한다, 배경색 blue 적용
- 3개의 박스 모두 좌표값을 설정하지 않아 동일하므로 마지막의 박스(세번째 자식 div)가 덮어버려서 1개의 박스만 있는것처럼 보인다.
div의 위치 설정 속성 예제2
- absolute 에서 3개의 박스마다 좌표값을 다르게 설정해줘서 3개의 박스가 모두 출력되도록 함
- left와 top으로 위치 제어, 왼쪽에서 떨어진간격과 위에서 떨어진 간격을 제어
- position_absoluteLeftTop.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>- .box 에는 모든 박스 공통적으로 적용할 내용이 들어감
- absoulte 하면 좌표는 좌측 상단을 기준으로 함
- 위치가 잘 설정되어 출력하고 있다.
겹치는 경우 위 아래 출력
- 따로 순서를 지정하지 않았을때는 위 처럼 박스가 불려진 순서대로 출력을 한다
- 즉, 가장 마지막에 출력된 파란색 div 박스가 가장 위에 출력됨
겹치는 경우, 위 아래 출력 제어 속성 (z 축 관련 설정)
- z-index 속성으로 좌표값이 겹쳤을때, 위 아래 배치 설정 가능
- z-index 값이 클수록 위쪽에 배치됨
- 서로 다른 박스가 불려졌을때 위치가 겹칠때 어떤 div를 위, 아래로 배치할것인지 제어
겹치는 경우, 위 아래 출력 제어 속성 (z 축 관련 설정) 예제
- position_zindex.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>- 첫번째 div는 z-index값 100, 두번째 div는 10, 세번째 div 는 1 을 주어서 첫번째 div 박스가 가장 위로 출력되도록 함
- z-index값이 큰 div 박스가 위로 배치된다.
- div position 이 absoulute인 것을 했다.
내용이 요소를 넘쳤을때 처리 속성
- overflow 속성으로 특정 영역의 범위를 벗어났을때 그걸 보여주게 만들건지 숨길건지 설정 가능
1. hidden 속성 값 : 영역을 벗어나는 내용을 감춤
- hidden이 일반적이다.
2. scroll 속성 값 : 영역을 벗어나는 부분을 스크롤로 만들어서 나타나도록 함
내용이 요소를 넘쳤을때 처리 속성 예제1
1. 부모 영역을 벗어난 부분을 잘라 감춤
- position_fomulaOverflowHidden.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>- overflow : hidden; 속성을 통해 특정 영역의 범위를 벗어났을때 그걸 보여주지 않고 감춤
- overflow : hidden; 을 body>div 태그에 적용, 즉 body 바로 아래의 자식태그인 div인 검은 두꺼운 선 가진 박스에 적용됨
- 그 두꺼운 선 가진 박스는 3개 div 박스의 부모 태그이다.
- 즉, overflow는 자식이 아닌 부모 영역에 이 설정을 적용함
내용이 요소를 넘쳤을때 처리 속성 예제2
2. 부모 영역을 벗어나는 부분을 스크롤로 만들어서 나타나도록 함
- position_fomulaOverflowScroll.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow: scroll;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>- 아까의 코드에서 overflow : scroll; 만 다르다
- 스크롤바를 만들어서 영역을 넘친 내용들을 보여줌
float 속성
- div를 배치할떄 쓰는 속성
- 전체적인 레이아웃 만들때 쓰는 속성
- 가로 방향으로 배치할때 주로 사용됨
- 속성값 : left (왼쪽에 배치), right (오른쪽에 배치) 2가지 뿐이다.
float 속성으로 레이아웃 잡기
- 레이아웃을 잡을 때, 이렇게 가운데 부분에서 맨 왼쪽은 left, 가운데는 left로 해서 맨 왼쪽 다음에 오도록 배치하고, 가장 오른쪽은 right로 배치
- 전체적인 레이아웃을 배치할때 float 속성을 많이 사용한다.
float 속성 예제1
+ float값을 설정하지 않았을때 예제
- float_basic.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
</style>
</head>
<body>
<img src="hanbit.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>
- float 속성을 쓰지 않고 이미지를 출력했다.
- 로고이미지가 가장 위에 배치되고 나머지 텍스트 내용들이 줄이 바뀌어서 아래쪽에 나타난다.
float 속성 예제2
float 값을 설정했을때 위치
- float : left; 설정해서 왼쪽에 배치시키기
- float_image.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="hanbit.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>
- float : left; 가 되어 이미지가 왼쪽에 배치되고, 나머지 본문 내용들은 이미지의 오른편에 배치되어 나타난다.
float 속성 예제3
float 값을 설정했을때 위치
- float : right; 로 수정해서 오른에 배치 (코드 수정)
- 수평방향으로 배치할때 주로 float : left , float : right 를 쓴다.
float 속성 예제4
- CSS를 적용하지 않은 경우, div 2개가 있을때
- float_boxBasic.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
- css 적용되지 않은 상태
float 속성 예제5
- 두 div 박스를 모두 float : left;로 왼쪽에 배치
- 수평 배치
- float_boxLeft.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
/* 태그를 왼쪽으로 붙입니다. */
float: left;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>- div 박스 2개 모두 float : left;를 적용한다
- margin : 10px 이므로 두 div 사이 간격이 10px 이다.
- padding : 10px 이므로 테두리와 내용 1, 2 숫자사이의 간격이 10px
- 먼저 출력되는게 왼쪽에 배치되고 거기에 쌓이듯이 다음에 출력되는게 붙어서 나온다
- 둘 다 left 지만, 1번 div가 먼저 왼쪽에 배치가 되고, 2번 div가 다음에 배치되기 떄문에 오른쪽으로 나오는 것
+ 만약 left를 없앤다면?
- 수평방향으로 배치할떄는 float : left나 float : right를 써야한다
- 만약 float 를 없애면 수평방향으로 출력되지 않음
float 속성 예제6
- 두 div 박스를 모두 float : right;로 오른쪽에 배치
- 수평 배치
- float_boxRight.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
/* 태그를 오른쪽으로 붙입니다. */
float: right;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>- 둘 다 float : right ; 이지만 1번박스가 먼저 나와있으므로 먼저 오른쪽으로 배치되고, 2번 박스는 쌓이듯이 배치되므로 상대적으로 왼쪽에 배치된다.
float 속성 예제7
- float 속성을 쓰고 있다.
- 2-layout.html
- footer 는 하단에 배치할 것이므로 float를 쓰면 안된다.
- clear : both; 로 양쪽을 해제해야만 위의 float값의 영향을 받지 않음
- 그럼으로서 한줄로 출력된다.
+ footer 에서 clear : both; 를 빼면?
- footer에서 clear : both ;를 하지않으면 float의 영향을 받아서 footer가 위로 딸려감
float 속성 예제8
- float 속성을 쓰고 있다.
- 3-layout.html
그림자 효과 속성
- 입체적인 모양으로 보이게 하는 효과
- 속성값의 순서 : ( 오른쪽 아랫쪽 흐림도 색상 ) 순서
- 오른쪽과 아랫쪽의 값이 클수록 오른쪽과 아랫쪽으로 그림자가 치우친다.
- 흐림도가 클수록 그림자가 흐려지고 흐림도가 작을수록 그림자가 선명해진다
1. 텍스트에 그림자 효과
- text-shadow 속성으로 텍스트에 그림자 효과를 줄 수 있다.
2. 박스에 그림자 효과
- box-shadow 속성으로 박스에 그림자 효과를 줄 수 있다.
그림자 효과 속성 예제1
1. 텍스트에 그림자 효과
- 텍스트에 대해 그림자를 주는 예제
- shadow_textShadow.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
h1 {
/*text-shadow: 오른쪽 아랫쪽 흐림도 색상;*/
text-shadow: 5px 5px 5px black;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>- h1태그의 텍스트에 대해 그림자 두께, 색상 등을 설정하고 있다.
- 오른쪽의 그림자 크기 5px, 아래쪽의 그림자 크기 5px, 흐림도 5px, 색상 black 설정
- 오른쪽 그림자 크기를 더 큰 값으로 설정해보자 -> text-shadow : 15px 5px 5px black;
- 오른쪽으로 더 치우쳐진다.
- 아랫쪽 그림자 크기를 더 큰 값으로 설정해보자 -> text-shadow : 5px 15px 5px black;
- 흐림도를 크게 해보자 -> text-shadow : 5px 5px 15px black;
- 값이 작을수록 그림자가 선명하고 클수록 그림자가 흐릿하게 나타난다.
그림자 효과 속성 예제2
2. 텍스트에 그림자 효과
- 박스에 대해 그림자를 주는 예제
- text 에 대한 그림자 효과와 비슷함
- 속성값 순서 : 마찬가지로 (오른쪽 아랫쪽 흐림도 색상) 순서이다.
- shadow_boxShadow.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
div {
border: 3px solid black;
/*box-shadow: 오른쪽 아랫쪽 흐림도 색상;*/
box-shadow: 10px 10px 30px black;
text-shadow: 5px 5px 5px black;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>+ 선택자가 div 이므로 div 안의 내용들은 (h1 태그 포함) 모두 저 CSS의 적용을 받게 된다.
- 박스에 대해 그림자 효과를 내고 있다
- 오른쪽으로 10px, 아랫쪽으로 10px 그림자가 있다.
chapter_7 공부
레이아웃 만들기, 전체적인 배치 관련
수평 정렬
- float 속성으로 수평으로 정렬한다, 왼쪽에 배치시 left, 오른쪽에 배치시 right 속성값을 이용한다
+ overflow : hidden; 시 넘쳤을때 숨기고 overflow : scroll; 시 스크롤을 만들어줘서 보여줌
수평 정렬 예제
- example_1.html
<!DOCTYPE html>
<html>
<head>
<title>Float With Overflow</title>
<style>
div.container {
overflow: hidden;
}
div.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
</body>
</html>- 공통적인 속성은 div.container를 이용해 적용하고 개별은 div.item 으로 적용하고 있다.
- div.container 는 "div 태그에서" class=container 불러와야만 적용이 된다!
- div.item 은 "div 태그에서" class=item 불러와야만 적용이 된다!
- overflow 는 부모인 container 에 적용함, 이 container를 넘어가는 값이 있으면 보여주지 않도록 hidden 으로 설정
- 각 item들은 float : left; 에 의해 수평 배치, 메뉴 - 1 이 먼저 나오므로 가장 먼저 적용되어 가장 왼쪽에 배치된다.
- 나머지는 메뉴 - 2, 메뉴 - 3, 메뉴 - 4 순으로 왼쪽부터 오른쪽으로 배치되고 있다.
+ margin : 0 3px ; (위쪽과 아래쪽이 0px, 왼쪽과 오른쪽이 3px)
중앙 정렬
- margin : 0 auto ; 로 설정시 전체 내용이 브라우저 가운데 배치된다.
- 주로 가장 바깥쪽의 div에 margin : 0 auto; 설정해서 전체가 중앙 정렬시킨다.
- 전체 내용을 브라우저 가운데 배치할때 사용하는 속성
- 많이 쓰는 속성이다.
중앙 정렬 예제1
- example_2.html
<!DOCTYPE html>
<html>
<head>
<title>Margin Width</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0; }
/* 주제 */
body {
margin: 0 auto; /* 중앙 정렬 */
width: 700px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Neque porro quisquam est qui...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat vehicula erat vel hendrerit. Etiam in est dolor, non pretium justo. Aliquam eu ipsum diam, sed dictum ante. Nunc pellentesque semper cursus. Nam aliquet consequat sapien id porttitor. Proin quis pharetra urna. Nam risus arcu, tincidunt quis imperdiet in, ullamcorper in sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vestibulum enim gravida sapien vehicula id consectetur ipsum gravida. Nulla porta consequat velit vitae elementum.</p>
<p>Nullam neque quam, blandit eget venenatis at, viverra vitae metus. Pellentesque quis ligula turpis. Nulla at justo est, id egestas mauris. Phasellus nec nunc egestas magna iaculis rhoncus. Praesent ut risus tellus. Ut pretium hendrerit vehicula. Donec id felis quis neque ornare facilisis. Praesent dictum orci quis metus vestibulum vitae vulputate sapien luctus. Aliquam pellentesque urna id nunc aliquam aliquam quis sed nunc. Sed rhoncus accumsan dolor, ut interdum quam ultricies in. Morbi venenatis nisi a nunc porta tempus. Vestibulum hendrerit posuere consequat. Nam eleifend malesuada est at dictum. Mauris sit amet nisi lobortis dolor consequat ullamcorper.</p>
</body>
</html>- * (all tags) 모든 태그에 대해 margin : 0; padding : 0;을 준다 -> 모두 왼쪽 위에 배치됨
- body 에 대해 margin : 0 auto; 를 주면 body 태그 모든 내용이 가운데 배치가 됨.
- 주로 가장 바깥쪽의 div에 margin : 0 auto; 설정해서 전체가 중앙 정렬시킨다.
- 제목 및 본문이 모두 가운데 정렬되어있다.
+ margin : 0 auto; 를 없애면?
- 좌측 상단부터 출력됨
중앙 정렬 예제2
- 3-layout.html
- #container는 가장 바깥쪽의 div에 적용되었음
- margin : 0 auto; 로 인해 container 안의 모든 내용이 가운데 나타남
- 가운데 배치되어있다
One True 레이아웃
- 포털사이트에서 많이 쓰는 메인 페이지 레이아웃
- 행을 독립적으로 생각해서 공간을 나눔
One True 레이아웃 예제
- example_3.html
<!DOCTYPE html>
<html>
<head>
<title>One True Layout</title>
<style>
body {
width: 500px;
margin: 10px auto; /* 중앙 정렬 */
}
#middle { overflow: hidden; }
#left { float: left; width: 150px; background: red; }
#right { float: left; width: 350px; background: blue; }
#top { background: green; }
#bottom { background: purple; }
</style>
</head>
<body>
<div id="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
<div id="middle">
<div id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut.</div>
<div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus.</div>
</div>
<div id="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
</body>
</html>- 전체 폭 width는 500px 으로 했고 margin: 10px auto; 가 중앙정렬 해주고 있다
- 상단에 나타날 내용을 id=top, 하단에 나타날 내용을 id=bottom으로 했다, 배경색 외 따로 설정 안함
- 가운데 영역 middle은 왼쪽 left 와 오른쪽 right 두가지로 나눠져 있다
- middle의 overflow : hidden; 이므로 넘쳤을때 보이지 않도록 하겠다
- left 선택자에서 float : left; 이므로 먼저 왼쪽에 배치됨, width값이 150px
- right 선택자에서 float : left;이므로 쌓여서 배치됨, width값이 350px
-> #middle 의 left , right 박스에는 hidden에 의해 글자들이 넘치더라도 보여주지 않음, 글이 잘리고 있다.
- 상단에 글 , 좌측에 사이드, 우측에 본문, 하단에 글 이 출력됨
- top과 bottom 은 전체가 꽉 찬 형태로 출력
- 가운데 왼, 오른쪽은 hidden에 의해 글자들이 넘치더라도 보여주지 않음, 글이 잘리고 있다.
div 배치 속성
- position 속성으로 div를 배치한다
- 속성값 : absolute, relative, fixed
- 왼쪽에서 떨어진 건 left, 위쪽에서 떨어진 건 top
div 배치 속성 예제
- example_4.html
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
#container {
width: 500px; height: 300px;
border: 3px solid black;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
width: 100px; height: 100px;
border-radius: 50% 50%;
}
#red {
background: red;
left: 20px; top: 20px;
}
#green {
background: green;
right: 20px; top: 20px;
}
#blue {
background: blue;
right: 20px; bottom: 20px;
}
#yellow {
background: yellow;
left: 20px; bottom: 20px;
}
</style>
</head>
<body>
<h1>Dummy Text</h1>
<div id="container">
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="blue" class="circle"></div>
<div id="yellow" class="circle"></div>
</div>
<h1>Dummy Text</h1>
</body>
</html>- 원의 위치를 제어하고 있다
- 공통적인 속성은 .circle 로, 개별적인 속성들은 #red, #green, #blue, #yellow로 적용시키고 있다.
- 가장 바깥쪽 div에 적용할 #container 는 position : relative; 로 설정한다
-> container 는 상대적인 위치로 위치 설정됨, 상대적인 위치의 기준은 바로 위의 Dummy Text 텍스트
- .circle에서 width=100px; height=100px로 가로길이와 세로길이가 동일하므로 정사각형이 되고, border-radius : 50% 50%으로 하면 원이 된다.
- .circle의 position은 바로 바깥쪽 div를 기준으로, 즉 container를 기준으로 왼쪽에서 얼마, 위에서 얼마 떨어질지 결정한다
+ position 속성 추가
position : relative;
- 그자체로는 특별한 의미가 없다.딱히 어느 위치로 이동하지는 않고 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
position : absolute;
- 요소에 적용하면 특정 부모에 대해 절대적으로 움직이게 된다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여한다.
요소의 중앙 배치
- example_5.html
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0; }
/* 주제 */
body { background: red; }
#container {
/* 색상 및 크기 적용 */
width: 500px; height: 250px;
background: orange;
/* 위치 설정 */
position: absolute;
left: 50%; top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
</html>- 안의 div 박스의 width : 500px, hegith : 250px, 오랜지색
- position : absoulute; 이고 left : 50%, top : 50% 에 의해 왼쪽에서 50%, 위에서 50% 떨어져서 정가운데(정중앙) 배치가 된다.
- margin-left 는 왼쪽에서 부터 떨어진 간격을 의미하는데 음수값이다. 음수값은 방향을 의미하기때문에 음수값을 넣으면 왼쪽으로 이동함
- margin-top 은 위에서부터 떨어진 간격을 의미하는데 음수값이므로 위쪽으로 배치가 올라감
margin-left 와 margin-top 을 빼면?
- 기준점 기준으로 left : 50%; right : 50% 되므로 요소를 정 가운데로 이동하고 싶다면 margin-left 와 margin-top 음수값을 이용해야한다.
요소 고정 (고정바 배치)
- 특정 div 박스의 position 값을 fixed로 하면 고정이 된다
- 고정이 되면 스크롤링이 되어도 움직이지 않음
- example_6.html
<!DOCTYPE html>
<html>
<head>
<title>Fixed Bar</title>
<style>
.container {
margin-top: 50px;
margin-left: 50px;
}
.top_bar {
background: red;
position: fixed;
left: 0; top: 0; right: 0;
height: 50px;
}
.left_bar {
background: blue;
position: fixed;
left: 0; top: 50px; bottom: 0;
width: 50px;
}
</style>
</head>
<body>
<div class="top_bar"></div>
<div class="left_bar"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
</div>
</body>
</html>- 상단의 .top_bar 는 상단바를 만들어주며 position : fixed; 가 적용되므로 고정이 되어 스크롤링 해도 움직이지 않는다
- 상단의 .top.bor 의 height가 50px이므로 두께(세로높이)가 50px
- 좌측의 .left_bar는 좌측바를 만들어주며 position :fixed; 가 적용되어 고정이 되어 스크롤링 해도 움직이지 않는다.
- 좌측의 .left_bar 의 weight가 50px이므로 두께(너비)가 50px
- 좌측의 .left_bar 의 top : 50 px 을 통해서 위에서 50px떨어진 곳 부터 바가 시작한다.
- 또한, .container의 margin-top : 50 px, margin-left : 50px을 통해 바가 있는 곳이 아닌 곳부터 본문을 출력함
- 상단바(red), 좌측바(blue)
- 스크롤바를 움직여도 좌측바와 상단바는 움직이지 않
내용이 넘쳤을때 ... 으로 생략 표시해주는 속성
- text-overFlow : ellipsis; 하면 글자를 ... 으로 생략해줌
내용이 넘쳤을때 ... 으로 생략 표시해주는 속성 예제
- example_7.html
<!DOCTYPE html>
<html>
<head>
<title>Ellipsis</title>
<style>
h1, p {
width: 300px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>- white-space : nowrop; 내용이 많을때 줄을 바꾸지 않게 하는 속성
- overflow : hidden; 이므로 넘칠때 보여주지 않게 설정, 넘치는 내용을 아예 나타나지 않게함
- text-overflow : ellipsis; 하면 넘친 내용을 ... 으로 보여줌
- 글의 내용이 영역을 넘치고 있다.
- text-overflow : ellipsis;에 의해 넘친 부분이 ... 으로 표시되고 있다.
text-overflow : ellipsis; 가 없다면?
overflow : hidden; 이 없다면?
- 그냥 출력시킴
2단 레이아웃
- 2단으로 레이아웃을 잡음
- 2-layout.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 레이아웃</title>
<style>
div {
border: 1px solid #ccc; /* 모든 영역에 테두리 표시 */
}
#container {
width:960px; /* 컨테이너 너비 */
padding:20px; /* 패딩 */
margin:0 auto; /* 화면 중앙에 배치 */
}
#header {
padding:20px; /* 패딩 */
margin-bottom:20px; /* 아래 요소들과의 간격(마진) */
}
#contents {
width: 620px; /* 너비 */
padding: 20px; /* 패딩 */
float: left; /* 왼쪽으로 플로팅 */
margin-bottom: 20px; /* 아래 요소와의 간격 */
}
#sidebar {
width: 220px; /* 너비 */
padding: 20px; /* 패딩 */
float: right; /* 오른쪽으로 플로팅 */
margin-bottom: 20px; /* 아래 요소와의 간격 */
background:#eee;
}
#footer {
clear:both; /* 양쪽 플로팅 해제 */
padding:20px; /* 패딩 */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="sidebar">
<h2>사이드 바</h2>
<ul>
<li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>
<p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
</div>
<div id="footer">
<h2>푸터</h2>
<p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
</div>
</div>
</body>
</html>- 공통적으로 적용할 내용은 div 태그 전체에 대해 적용할 div 태그 선택자에 넣었다.
- container id를 보면 전체적인 배치를 가로 960px, padding : 20px, margin : 0 auto 이므로 전체를 가운데 정렬
- #header 부분은 헤더 아래쪽의 마진을 20px로 설정
- 사이드바가 float : right; 로, 본문은 float : left;로 지정되어있기 떄문에 사이드바가 먼저 나온다고 해도 사이드바가 오른쪽에 무조건 배치됨
- footer에서는 위에서 float 속성을 썼으므로 clear 속성으로 양쪽을 해제해야만 따로 아래에 만들어짐, clear해주지 않으면 딸려서 올라감
- 제목 본문과 20px만큼 떨어져있다
- 이렇게 div 태그로 레이아웃을 잡을수도 있고, 시맨틱 태그로 레이아웃을 잡을 수도 있다.
- HTML4까지는 전부 <div id=header> 이런식으로 레이아웃을 잡았었다, HTML5로 오면서 따로 <header> 라는 시맨틱 태그가 추가됨
- <header> <footer> <article> <section> 등이 시맨틱 태그, 하지만 태그만으로는 효과가 없다.
- div태그나 시맨틱 태그 중 어느걸 써도 상관 없다
3단 레이아웃
- 3단으로 레이아웃을 잡음
- 3-layout.html
<!doctype html>
<html lang="ko">
<head>
<title>CSS 레이아웃 - 2단 레이아웃</title>
<meta charset="utf-8">
<style>
div {
padding:20px;
border:1px solid #ccc;
}
#container {
width:960px;
margin:0 auto;
}
#header {
padding:20px;
margin-bottom:20px;
}
#contents {
width: 490px;
float: left;
margin-bottom: 20px;
}
#left-sidebar {
width: 150px;
float: left;
margin-bottom: 20px;
margin-right: 20px;
}
#right-sidebar {
width: 150px;
float: right;
margin-bottom: 20px;
}
#footer {
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="left-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다. 이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
<p>국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.</p>
<p>모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대한민국의 국민이 되는 요건은 법률로 정한다. 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.</p>
</div>
<div id="right-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div id="footer">
<h2>푸터</h2>
<p> 저작권 정보 </p>
<p> 연락처 등 </p>
</div>
</div>
</body>
</html>- 왼쪽 사이드바 float : left; 본문 float : left;, 오른쪽 사이드바 float : right; 로 해줘야 이렇게 3단으로 배치된다.
- #continaer에서 width: 960; 하고 margin:0 auto;를 통해 전체 내용을 전부 가운데 배치한다, 브라우저를 늘리든 줄이든 가운데 배치된다.
- 본문 #content 에서 float : left;지만 left side bar가 먼저 나왔기떄문에 먼저 왼쪽에 배치되고 거기에 이어서 본문이 상대적으로 오른쪽으로 배치됨
- css 잘 적용되었는지, margin 과 padding을 확인 하기 위해 개발자 도구(F12)에서 확인해볼 수 있다
+ 파이썬 크롤링할때도 F12를 눌러서 어떤 선택자로 되어있는지 확인해야함
chapter_8 공부
반응형 웹 관련
반응형 웹
- 반응형 웹 페이지 : 접속하는 단말기에 맞게끔 다르게 보여주는것
- 한개의 페이지를 잘 만들어 놓고 사용자가 PC로 접속할때나 모바일로 접속할때에 맞춰서 보여주는 웹
+ 반응형 웹인지 아닌지는 확대나 축소를 시켜보면 안다
+ 네이버는 반응형 웹을 만들지 않고 모바일 접속시 m.naver.com 처럼 모바일용 웹 따로 만들었다.
+ 네이버는 반응형 웹이 아니다
+ 오라클 웹페이지는 반응형 웹
+ 부트스트랩은 기본적으로 반응형 웹 지원
- 확대나 축소시 화면이 변한다
반응형 웹 만들기
- 일반적인 페이지를 만들때 쓰지 않는 속성들을 설정해야만 반응형 웹 만들 수 있다.
- 이 두가지를 반드시 설정해야함
1. head 태그 안의 meta 태그를 이용해서 viewport를 설정
2. 미디어 쿼리 설정
1. head 태그 안의 meta 태그를 이용해서 viewport를 설정
- viewport 설정시 속성들 설정해야 반응형 웹 만들 수 있다.
- name : viewport 를 해야하고 단말기에 맞게끔 이 코드가 들어가야함
- 기본적으로 자주 쓰는 속성들 정해져 있다.
2. 미디어 쿼리 설정
- 해상도 등 설정할떄 미디어 태그로 설정함
- 해상도 설정시 미디어태그를 써야만 그걸 이용해서 반응형 웹에서 해상도 설정 가능
- 모니터와 프린터 구분 등도 가능하다.
- 화면 출력시 red로, 프린트 단말장치로 출력시 green으로 출력하라는 의미
반응형 웹 만들기 예제
미디어 쿼리 예제1
- 반응형 웹 만들때 반드시 설정해야하는 속성 중 미디어 쿼리 예제
- media_feature.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Web Basic</title>
<style>
@media (max-width: 499px) {
body { background: red; }
}
@media (min-width: 500px) and (max-width: 799px) {
body { background: green; }
}
@media (min-width: 800px) {
body { background: blue; }
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>- @media 는 미디어 태그라고 한다
- max-width : 499px일때 배경색은 red로 설정
- 또한 500 px ~ 799 px 일때 배경색은 green으로 설정
- min-width : 800px일때 배경색은 blue
- 그냥 실행시 (100%화면에서) 해상도가 800px이 넘어가므로 배경색이 blue
- 250%까지 확대되어 해상도가 799px보다 작고 500px보다 클떄는 배경색이 green
- 해상도가 499px 이하일때 배경색이 red
- 모바일로 접속시 해상도가 작아서 이렇게 빨간색으로 뜸
- 단말장치 크게에 따라서 다른 속성을 적용할때 @media (미디어 태그)를 사용한다
+ 모바일 장치처럼 실행해보자
- localhost 자리에 자기 컴퓨터 ip주소로 접속해보기
- 모바일로 접속시 배경이 빨간색으로 뜸
@media 의 operation 속성
- @media 에서 스마트폰은 세로로 길게 볼수도 있고 옆으로 눕혀 볼수도 있고 가로로 볼수도 있다
- 그때마다 다른 화면 보여주기 위해서 orientation 속성을 사용함
- 세로방향일때 orientation : portrait 이고, 가로 방향일때 orientation : landscape
반응형 웹 만들기 예제
미디어 쿼리 예제2 / operation 속성 예제
- orientation.html
<!DOCTYPE html>
<html>
<head>
<title>Media Feature</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
/* 세로 방향 */
@media screen and (orientation: portrait) {
body {
background-color: red;
}
}
/* 가로 방향 */
@media screen and (orientation: landscape) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>- viewport 속성을 넣고 화면에 맞게끔 출력하겠다고 표시함
- orientation 은 방향을 의미하고
- orientation : portrat 는 세워져있을때를 의미, 배경색 red
- orientation : landscape는 눕혀져 있을때를 의미, 배경색 green
- PC로 접속시 가로 방향 기준으로 나온다
- 스마트폰 단말장치로 접속
반응형 웹 패턴
1. 데스크톱에서는 메뉴가 왼쪽에 있고, 모바일 장치에서는 메뉴가 위쪽에 있는 패턴
ex)
- 왼쪽은 PC로 접속했을때, 오른쪽은 모바일 장치로 접속했을때dlek
- 왼쪽의 창에서는 메뉴가 좌측에 나타나고 오른쪽의 창에서는 메뉴가 상단에 나타남.
반응형 웹 패턴 예제
- pattern1.html
<!DOCTYPE html>
<html>
<head>
<title>패턴1</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
* {
margin:0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right; /* left로 입력해도 상관 없습니다. */
}
@media screen and (max-width: 767px) {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
</div>
</body>
</html>- PC 접속시 #menu가 float : left 이고, #section이 float : right ; 이므로 본문이 수평으로 오른쪽에 배치됨
- 최대 해상도가 max-width : 767px 인 경우에는, 즉 767px보다 작은 경우엔 속성들을 전부 auto, none으로 해제함으로서 PC화면의 배치 (메뉴는 왼쪽에, 본문은 오른쪽에) 를 해제함
- 모바일 화면일때는 width값이 auto이므로 내용이 부족하면 아래쪽으로 내려오게 되는 것임.
- PC로 봤을때 : 메뉴가 좌측에 있음
- 스마트폰으로 봤을때 : 메뉴가 상단으로 올라감
+ 프론트엔드는 신경쓸게 많다
- 브라우저 종류에 따라서도 보여주는 내용이 달라짐
- 스마트폰 기종에 따라서도 보여주는 내용이 달라짐
부트스트랩
부트스트랩 (Bootstrap)
- CSS 라이브러리를 제공하는 CSS 프레임워크
- CSS를 쉽게 쓸 수 있도록 외부 CSS 파일을 만들어서 제공함
- Bootstrap은 2010년 중반에 트위터 개발자 중 @mdo와 @fat을 사용하는 개발자가 만든 오픈소스 프레임워크
- 프레임워크란 "짜여있는 작업" 이란 뜻으로, 부트스트랩은 HTML, CSS, JavaScript 및 다양한 UI 컴퍼넌트로 구성
- 즉, 효율적인 웹 디자인을 하기 위해 미리 필요한 부분을 작업해 놓은 것
- 현재 Bootstrap 5점대까지 나와있다.
부트스트랩 사용 방법 2가지
1. 직접 다운하는 방식
2. CDN 방식
1. 직접 다운하는 방식
- 부트 스트랩 공식 사이트에서 해당 라이브러리 직접 다운로드
- 부트스트랩 공식 사이트 : http://getbootstrap.com
- Download Bootstrap 클릭해서 다운로드 받는다.
- 압축 해제하면 이런 css 파일들이 있는데 그걸 link 태그로 가져와서 사용한다.
- .min은 압축된 파일, 사진 속 여러 .css 파일 중 하나를 불러와서 쓰는 것
- 하나를 열어보면 몇천라인의 css코드가 있다
- 다운로드 받은 Bootstrap 파일들을 link 태그로 불러와서 사용함
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/bootstrap.min.js"></script>
2. CDN 방식
- 라이브러리가 서버에 올라가있고 그 서버 주소를 알면 쓸 수 있다.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>- 이러한 코드는 bootstrap 공식 페이지나 w3schools같은 페이지에서 가져올 수 있다.
- 참고 사이트: http://www.w3schools.com
부트스트랩 레퍼런스
- 어느걸 어떻게 써야할지 모르므로 w3schools 등의 사이트에서 확인 가능함
- 버전마다 적용할 클래스가 다름을 주의
- BS 3점대로 들어가보자
- 메인 화면에 관한 템플릿 제공해주는 Bootstrap Themes
- 사용하고 싶다면 Try it Yourself > 를 눌러서 나오는 소스코드를 통쨰로 가져오면 됨
- link 태그로 js를 불러오고 있다, 이런 방식이 CDN 방식
- BS는 기본적으로 반응형 웹으로 되어있음
- BS 4점대를 사용해보자(실습)
실습 준비
- WebContent 폴더 하위에 bootstrap 폴더 생성
- 그리고 클라우드 의 work폴더를 그대로 (미리 만들어진 파일들) 가져오자
- 4점대 BS 파일들을 가져왔음
- 지금은 직접 다운받는 방식으로 부트스트랩을 쓸 것
- css 폴더 안에 css파일들이 js폴더 안에 js파일들이 들어있다
부트스트랩 사용 예제1
직접 다운 방식 예제
- WebContent/bootstrap/first.html 열어보기
- first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 방법1. bootstrap 다운로드 받은 파일 불러오기 -->
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
</head>
<body>
<img src="img/Koala.jpg" width=300 height=250 class="rounded"> <br><br>
<img src="img/Penguins.jpg" width=300 height=250 class="rounded-circle"> <br><br>
<img src="img/Jellyfish.jpg" width=300 height=250 class="img-thumbnail"> <br><br>
</body>
</html>- 직접 다운받은 bootstrap 을 사용하는 방법이다.
- css 는 link 태그로 상대경로 지정해서 css파일을 불러옴
- js는 script 태그로 상대경로 지정해서 js파일을 불러옴
- img 태그로 이미지 3장을 불러오고 있는데 이 img에 여러 효과 처리 해보자
- 이때, class만 적용하면 효과를 줄 수 있다.
+ BS4 images : 이미지에 대한 여러 효과 관련
- 이건 CDN 방식의 코드이다
- 이미 직접 다운 받았으므로 class="rounded-circle"만 해주면 효과가 적용된다
BS를 직접 다운받았을때 장점
- 선택자의 내용을 속성값을 수정과 변경해서 적용 가능
- bootstrap.css 파일을 보자
부트스트랩 사용 예제2
CDN 방식 예제1
- first.html 에서 첫번째 방식으로 직접 다운받는 방법을 사용헀으니 이번엔 CDN 방식을 사용해보자
- css나 js가 저장된 주솟값을 알아야함 -> w3school 에서 확인 가능
+ CDN : Content Delivery Network 약자
- 저 코드를 통째로 가져오면 된다. 이미지명만 바꿔주면 됨
- cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 방법2. CDN방식 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="img/Koala.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
<h2>Circle</h2>
<p>The .rounded-circle class shapes the image to a circle:</p>
<img src="img/Penguins.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="img/Jellyfish.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>- 부트스트랩 4.6.1 버전을 불러오고 있다
- 이 코드는 w3schools에서 복사한 코드 3 가지를 합쳐둔것
- 직접 다운방식으로 할때와 동일한 출력
부트스트랩 사용 예제3
CDN 방식 예제2
버튼 예제1
- 다양한 버튼 적용을 위해 클래스값만 다르게 설정하면 된다.
- Try it Yourself 누르기
- 그대로 복사하고 work 폴더 하위에 html 파일인 botton.html 생성하고 거기에 다 복붙
- botton.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
- 클래스값이 어떤 값이냐에 따라 버튼 모양이 달라짐
- 어떤 버튼 모양 쓸건지만 선택하면 된다.
부트스트랩 사용 예제4
CDN 방식 예제3
버튼 예제2
- botton01.html
- botton.html 과 비슷한 내용
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<br><br><br>
<button type="button" class="btn btn-secondary">가입</button>
<input type="button" value="확인" class="btn btn-secondary">
<a href="#" class="btn btn-secondary">글작성</a>
<div class="btn btn-secondary">로그인</div>
</div>
</body>
</html>- 가입 버튼에 마음에드는 버튼 모양을 적용
- 심지어 anchor 태그로 만든 '글작성' 도 이 클래스값 적용해서 버튼처럼 만들어짐
'국비지원 과정 > 웹표준' 카테고리의 다른 글
| 코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0) | 2022.08.19 |
|---|---|
| 코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0) | 2022.08.12 |
| 코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0) | 2022.08.11 |
| 코딩 37일 / 2022.08.10 / 부트스트랩2,아파치 톰캣에 배포,자바스크립트 기초,내장함수1 (0) | 2022.08.10 |
| 코딩 35일 / 2022.08.08 / CSS 선택자,단위,속성1 (0) | 2022.08.08 |