[웹프로그래밍]4주차
<학습내용>
- 테두리 속성
- 그림자 속성
- 배경 속성
- position 속성
-float 속성
-레이아웃 구성
1. 테두리 속성
1) border-width속성
(1) 테두리의 너비 지정
(2) 종류-> thick, medium, thin, 1px(아무거나 사용 가능)
ex) {border-width: 4px;}
2) border-style 속성
(1) 테두리 스타일 지정
(2)종류-> none, dotted, dashed, solid, double, groove, ridge, inset, outset
ex) {border-style: solid}
3)border-color 속성
(1) 테두리 색상 지정
ex) {border-color: green;}
◈통상적으로는 'border'를 통해 { border: thick dashed black} 한번에 지정.
3)border-radius 속성
(1) 테두리 둥글기 지정
(2) 테두리가 둥근 사각형 또는 원모양의 테두리 생성
왼쪽 위부터 시계방향으로 1,2,3,4번째
2. 그림자 속성
1) text-shadow속성
2) box-shadow속성
3.배경속성
1)background-image속성
(1) 배경에 넣을 그림을 지정하는 속성
<!DOCTYPE>
<html>
<head>
<title>배경속성 이미지 삽입 테스트</title>
<style>
body{
background-image:url("린캔버스.png");
}
</style>
</head>
<body>
</body>
</html>(2) 중첩된 배경 이미지 사용 가능
<!DOCTYPE>
<html>
<head>
<title>배경속성 이미지 삽입 테스트</title>
<style>
#body{
background-image:url("린캔버스 .png"),url("웹프.png");
}
</style>
</head>
<body>
</body>
</html>2)background-size속성
(1) 그림크기 지정
(2) 가로 세로 길이 따로 조정은 {background-size: 100% 250px}; 처럼 사용
-> 쉼표를 넣게 된다면?
{background-size: 100%, 250px}; = 중첩된 이미지의 크기를 각각 따로 지정해주는 의미와 같음
3)background-repeat속성
(1) 배경 이미지 크기 조정으로 인해 같은 그림이 여러번 출력되는 경우가 있음. 한번만 보이게 하고 싶다면
{background-repeat: no-repeat;}사용
4)background-attachment속성
(1) 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지 지정
- scroll - 기본속성, 화면 스크롤에 따라 배경이미지가 함께 이동
- fixed - 스크롤을 이동해도 화면에서 배경 이미지의 위치가 고정
4.position 속성
1) 블럭영역간의 배치
(1) 동위관계에 있는 블럭간의 배치
<html>
<style>
div{
width: 50px;
height: 50px;
padding: 10px;
border: 1px solid black;
}
</style>
<body>
<div class=block1>
<span>Block1</span>
</div>
<div class=block2>
<span>Block2</span>
</div>
<div class=block3>
<span>Block3</span>
</div>
</body>
</html>
(2) 계층구조를 갖는 블럭간의 배치
<!DOCTYPE html>
<html>
<head>
<style>
.parent-block{
width: 200px;
height: 150px;
padding: 10px;
border: 1px solid black;
}
.child-block{
width: 100px;
height: 30px;
padding: 5px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class=child-block>
<span>Block1</span>
</div>
<div class=child-block>
<span>Block2</span>
</div>
<div class=child-block>
<span>Block3</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent-block{
border: 1px solid black;
}
.child-block{
width: 100px;
height: 30px;
padding: 5px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class=child-block>
<span>Block1</span>
</div>
<div class=child-block>
<span>Block2</span>
</div>
<div class=child-block>
<span>Block3</span>
</div>
</body>
</html>
2) positon 속성
(1) 상대적 위치 좌표
-static
: (디폴트 값)태그를 위에서 아래로, 왼쪽에서 오른쪽으로 배치
ex)
-★★relative
: static으로 초기 위치가 지정된 상태에서 상하좌우로 이동(offset속성을 줄 수 있다)
ex)
#second{
border: 1px solid blue;
position:relative;
top:10;
left:10;
}
(2) 절대적 위치 좌표
-absolute
:절대적 위치 좌표, 스크롤을 내리면 없어짐(offset속성을 줄 수 있다.)
ex1) offset 안준경우
#second{
border: 1px solid blue;
position:absolute;
}
ex2) offset 준 경우
#second{
border: 1px solid blue;
position:absolute;
top:0;
left:0;
}
ex3)★★부모의 position은 relative, 자식 position은 absolute(second의 부모가 first이고, first의 position이 relative)
#second{
border: 1px solid blue;
position:absolute;
top:0;
left:0;
}
ex4) 부모의 position은 static, 자식 position은 absolute
#second{
border: 1px solid blue;
position:absolute;
top:0;
left:0;
}
- fixed
: 화면을 기준으로 화면상의 절대적 위치 좌표 설정(스크롤을 내려도 바뀐 화면 절대좌표에 의해 안없어짐)
5. overflow속성 (부모블럭에 지정)
1) 내부의 요소가 부모의 범위를 벗어나는 경우
(1) hidden (영역을 벗어나는 부분은 보이지 않게 만든다)
(2) scroll (영역을 벗어나는 부분을 스크롤로 만든다)
6. float속성
1) ★float속성 개요
(1) left :태그를 왼쪽에 붙인다
(2) right :태그를 오른쪽에 붙인다
2) 하나의 라인에 여러개의 블럭을 수평배치하는 방법
(1) display: inline-block
inline으로 하되 block이 가지는 속성을 함께 하겠다.
(2) float
Ex)
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
</style>
</head>
<body>
<img src="hanbit.jpg"> <!--img태그는 inline형식-->
<p>Lorem ipsum dolor sit amet, ~~</p> <!--p태그는 block형식이므로 그림아래에 문단출력-->
<p>In hac habitasse platea dictumst~~</p>
</body>
</html>-> 이미지와 p태그를 수평배치하기 위해서는?
<style>
img{
float: left;
}
//p태그 float을 right로 지정해도 되긴하나 p태그 보다는 img를 left로.
암기
자손에 float속성을 적용하면, 부모의 overflow속성에 hidden 키워드 적용!!
3) float속성 사용시 주의사항
(1) 자손영역이 부모 영역의 높이에 영향을 주지 않음
(2) 대응책
-부모에게도 float속성 부여(조상이 많으면 조상 모두 float속성 부여를 해야함)
-overflow속성으로 대응(부모의 overflow속성을 auto또는 hidden으로 부여)
->auto: 자식의 너비가 가변적이고 부모의 너비가 커지는 경우, 자동 스크롤 생김
->hidden: 자식의 너비가 가변적이고 부모의 너비가 커지는 경우 잘라냄
자식이 float속성을 갖는데 부모가 자식 크기를 다 포함하는height를 가졌을 때는
overflow:hidden안해줘도 됨. 대신 height가 넘치면 수평배치 안됨.