HTML(12) - 요소 배치/관계를 고려한 배치/float 제거/overflow 발생/넘치는 요소 다 출력/요소의 중첩 처리/표 너비 설정/표 테두리 처리/표 꾸미기/투명도 조절/가시성/보이는 형식의 변환/배경 이미..
KCasey2020. 5. 18. 17:53
position.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 배치</title>
<style type="text/css">
.sp1 {
position: static;
width: 300px;
height: 50px;
background-color: cyan;
left: 50px;/*static은 위치이동이 불가하기 때문에 위치를 지정해주어도 의미가 없다*/
}
.sp2 {
position: static;
width: 300px;
height: 50px;
background-color: orange;
}
.sp3 {
position: relative;/*원래 있어야할 위치에서부터 어떻게 스타일 적용할지~*/
width: 300px;
height: 50px;
background-color: lightgreen;
left: 20px;/*왼쪽으로 부터 px만큼 이동하라*/
top: 50px;/*위로부터 px만큼 이동하라*/
}
.sp4 {
position: absolute;
width: 300px;
height: 50px;
background-color: navy;
right: 10px;
top: 500px;
}
.sp5 {
position: fixed;
width: 300px;
height: 50px;
background-color: pink;
right: 20px;
bottom: 10px;
}
</style>
</head>
<body>
<!-- 다양한 요소를 배치할 때 사용하는 속성
주요 속성값
static : 기본값. 웹 문서의 흐름에 따라 배치
relative : 상대 위치로 설정. 기본 위치에서 상대적으로 얼마나 떨어져 있는지~
absolute : 절대 위치로 설정. top, right, bottom, left로 설정
fixed : 절대 위치로 설정하되, 스크롤에 영향을 받지 않는다
-->
<h2>정적 위치(static)</h2>
<p class="sp1">정적 위치 설정 적용1</p>
<div class="sp2">정적 위치 설정 적용 2</div>
<p class="sp3">상대 위치 설정 적용</p>
<p class="sp4">절대 위치 설정 적용</p>
<p class="sp5">고정 위치 설정 적용</p>
</body>
</html>
float.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>관계를 고려한 배치</title>
<style type="text/css">
img {
float: left;
margin: 0px 10px 10px 0px;
}
</style>
</head>
<body>
<!-- float
요소 간의 관계를 고려하여 각 요소를 배치
속성 값
left : 요소를 왼쪽에 배치
right : 요소를 오른쪽에 배치
none : float 속성을 적용하지 않음
inherit : 부모 요소의 속성을 그대로 적용
-->
<p>float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다</p>
<p>
<img alt="image" src="images/aladin.jpg" width="140" height="140">
float 속성은 특정 요소를 떠 있게 해줍니다.
여기서 '떠 있다'라는 말의 의미는 특정 요소가
기본 레이아웃에서 벗어나 웹 문서의 왼쪽이나
오른쪽에 이동하는 것을 말합니다.
float 속성은 복잡한 형태의 레이아웃을
구성하는 데 필요한 핵심 속성으로, 특정 요소가
주변 요소와 자연스럽게 어울리도록 해줍니다.
주의할 점은 float 속성을 사용할 때 요소의
위치가 고정되면 안 되기 때문에 position 속성의
absolute를 사용하면 안 됩니다.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오버플로우 발생</title>
<style type="text/css">
.div1 {
background-color: gray;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
.div2 {
background-color: gray;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
.div3 {
background-color: gray;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: scroll;/* 내용이 영역을 벗어나지 않아도 스크롤바가 무조건 생김*/
}
.div4 {
background-color: gray;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;/* 내용이 영역을 벗어나게 되면 스크롤바가 자동으로 생김*/
}
.clearfix {
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<!-- overflow 속성
특정 요소가 너무 커서 영역과 맞지 않을 때
내용을 제어하는 속성
속성 값
1. visible : 기본값. 내용이 모두 출력됨. 영역을 벗어나게 됨.
2. hidden : 벗어난 요소의 일부를 화면에서 제거
3. scroll : 벗어난 요소의 일부를 화면서에 제거하고 영역에 스크롤바를 추가
4. auto : 내용이 모두 출력되도록 영역의 크기를 조정.
-->
<h3>Overflow 기본 </h3>
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero diam, imperdiet sit amet sagittis a, accumsan non risus. Nunc ut suscipit tellus. Vivamus diam augue, feugiat sit amet urna vel, sodales pellentesque orci. Nunc in orci quis erat b</div><br><br><br><br><br><br><br><br><br>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero diam, imperdiet sit amet sagittis a, accumsan non risus. Nunc ut suscipit tellus. Vivamus diam augue, feugiat sit amet urna vel, sodales pellentesque orci. Nunc in orci quis erat b</div><br><br><br><br><br>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero diam, imperdiet sit amet sagittis a, accumsan non risus. Nunc ut suscipit tellus. Vivamus diam augue, feugiat sit amet urna vel, sodales pellentesque orci. Nunc in orci quis erat b</div><br>
<div class="div3">Lorem ipsum</div><br><br><br><br><br>
<div class="div4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero diam, imperdiet sit amet sagittis a, accumsan non risus. Nunc ut suscipit tellus. Vivamus diam augue, feugiat sit amet urna vel, sodales pellentesque orci. Nunc in orci quis erat b</div><br>
<div class="div4">Lorem ipsum</div><br><br><br><br><br>
<hr>
<h3>overflow를 사용하여 이미지 다 보이게 하기</h3>
<div class="clearfix">
<img class="img1" alt="image" src="images/aladin.jpg" width="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero diam, imperdiet sit amet sagittis a, accumsan non risus. Nunc ut suscipit tellus. Vivamus diam augue, feugiat sit amet urna vel, sodales pellentesque orci. Nunc in orci quis erat b
</div>
</body>
</html>
overflow-auto.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>넘치는 요소 다 출력</title>
<style type="text/css">
div {
border: 3px solid green;
padding: 5px;
clear: both;
}
.over {
overflow: auto;/* 영역의 세로길이가 지정되어 있지 않을 경우 가장 큰 요소의 크기로 영역의 크기가 결정됨. */
}
.img1 {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<img class="img1" src="images/aladin.jpg" width="150px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="over">
<img class="img1" src="images/aladin.jpg" width="150px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>보이는 형식의 변환</title>
<style type="text/css">
span.a {
display: inline;/*span은 기본값이 inline*/
width: 100px; height: 100px;/*inline 효과때문에 가로세로 스타일 안먹음*/
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;/* block 요소로 변경되서 표현됨 */
width: 100px; height: 100px;/* inline 효과때문에 가로세로 스타일 안먹는 단점을 보완할 수 있음 -> 가로세로 크기 지정 가능*/
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<!-- display 속성
보여지는 형식을 변환하는 속성.
1. none : 화면에서 요소를 제거(자리도 같이 제거)
2. block : 요소를 블록 요소로 변경
3. inline : 요소를 인라인 요소로 변경
4. inline-block : 요소를 인라인 요소로 변경하면서 블록 형식도 같이 가지도록 지정.
-->
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
background-image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style type="text/css">
body {
background-image: url("images/salmon.jpg"), url("images/aladin.jpg"); /* 기본으로 바둑판 배열됨. 두장 이상의 이미지를 배경으로 설정 가능 */
background-repeat: no-repeat, repeat;
/* repeat, repeat-x(x축으로만 이미지 반복), repeat-y, no-repeat */
background-position: right top, left bottom; /* 백그라운드 이미지 위치 설정*/
background-attachment: fixed, scroll; /* 스크롤 시에 백그라운드 위치 고정여부 */
}
</style>
</head>
<body>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
<h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1><h1>a</h1>
</body>
</html>
