-
[CSS] position, display, visibilty, shadowVScode/CSS 2022. 9. 8. 16:41
position
1. position: 웹 문서 안의 요소들을 자유자재로 배치해주는 속성(양/음수 모두 사용가능)
-HTML 태그의 위치 설정 방법을 변경할 때 사용
-상대적 위치 좌표 사용시 키워드
1) static: 요소를 문서의 흐름에 맞추어 배치(top/right/bottom/left 이용 배치 변경 불가). float 속성을 이용해 좌우로 배치 가능
2) relative: 현재 위치를 기준으로 위치 지정. 자연스럽게 연결해 배치. (top/right/bottom/left)를 사용해 위치를 지정할 수 있음
-절대적 위치 좌표 사용시 키워드
1) absolute: body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있음. 원하는 위치를 정해 배치. 요소를 감싸는 <div> 태그(컨테이닝 박스)를 만들고 position을 relative로 지정해놓고 사용해야 됨
2) fixed: 스크린을 기준으로 위치 고정. 지정한 위치에 고정해 배치. 화면에서 요소가 잘릴 수도 있음. 스크롤 시에도 위치가 이동하지 않음
2. z-index 속성: default 값: auto
-HTML 페이지의 뒤에 입력한 태그가 상위에 위치하는 순서를 변경시 사용
-position 속성인 relative, absolute가 적용된 상태에서 적용해야 됨
3. overflow 속성
-내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할 지 지정하는 속성
1) hidden: 영역을 벗어나는 부분을 보이지 않게 만듦
2) scroll: 영역을 벗어나는 부분을 스크롤로 만듦
3) auto: 영역을 벗어날 때 스크롤바 생기고, 벗어나지 않을 때 스크롤바 숨겨짐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Position.html</title> <style type="text/css"> .box1{width:100px; background:blue; padding:20px; color:white; font-weight:bold; float:left;} /* static: 별도의 position 속성지정 없이 사용하면 static으로 인식되어 사용됨 */ .box2{width:300px; background:red; padding:20px; color:white; font-weight:bold; float:left; /*left:-20px; top:30px;*/} /* static은 left 또는 top으로 조정되지 않음 */ .temp{clear:both; height:50px;} /* clear:both; -> float:left 또는 float:right를 해제하는 CSS */ .box3{width:100px; background:yellow; padding:30px; float:left;} .box4{position:relative; width:300px; background:green; padding:20px; float:left; color:white; left:-50px; top:30px;} #wrap{position:relative; width:300px; height:300px; border:1px solid black; background:white; overflow:hidden;} .box5{position:absolute; width:50px; height:50px; } #abs1{background:blue; left:0; top:0;} #abs2{background:red; left:50; top:50;} #abs4{background:blue; left:100px; top:100px;} #abs5{background:red; left:150px; top:150px;} #abs3{background:blue; left:200px; top:200px;} #abs6{background:red; left:250px; top:250px;} #abs7{background:blue; left:300px; top:300px;} /* id가 abs1~abs7인 dib들은 positon:absolute일 때, 초기 상태는 left좌표:0 top좌표:0인 상태로 설정됨. 별도로 left값, top값을 지정하면 해당위치로 이동함. 이때 좌표의 기준은 그들이 감싸고 있는 id - wrap div 태그임. wrap div의 왼쪽 경계가 left 0 위치, 위쪽 경계가 top 0 위치임*/ /* position:absolute를 사용하기 위해서는 그들을 감싸고 있는 div가 반드시 relative position 이어야 함. 만약 그렇지 않다면 그의 상위 div 또는 최종 body 태그가 기준으로 바뀜 */ #fixed{position:fixed; top:5px; left:5px; width:100px; height:100px; background:silver; z-index:10;} /* z-index:10; 다른 어떤 div보다 위에 있게 하려고 높은 인덱스 값을 지정함 */ </style> </head> <body> <h1>절대적 위치 좌표-fixed</h1> <div id="fixed"></div> <h1>절대적 위치 좌표-absolute</h1> <div id="wrap"> <div id="abs1" class="box5"></div> <div id="abs2" class="box5"></div> <div id="abs3" class="box5"></div> <div id="abs4" class="box5"></div> <div id="abs5" class="box5"></div> <div id="abs6" class="box5"></div> <div id="abs7" class="box5"></div> </div> <h1>상대적 위치 좌표-relative</h1> <div class="box3">박스3</div> <div class="box4">박스4</div> <div class="temp"></div><hr/> <h1>상대적 위치 좌표-static</h1> <div class="box1">박스1</div> <div class="box2">박스2</div> </body> </html>
display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Display.html</title> <style type="text/css"> .box{background-color:yellow; width:300px; height:100px; margin:10px} #box1{display:none;} /* 화면에서 사라짐. 자리도 없어짐*/ #box2{display:inline;} /*div에 display:inline;가 적용되면 width, height가 적용되지 않고 span처럼 작동함*/ #box3{display:inline-block;} /*inline에서 width, height만 살려내어 표시함*/ #box4{display:block;} /* display:block 원래 div가 block이므로 변화 없음*/ </style> </head> <body> <span>Dummy</span> <div id="box1" class="box"> <span>교육의 자주성 전문성 정치적</span></div><span>Dummy</span><br/><br/> <span>Dummy</span> <div id="box2" class="box"> <span>교육의 자주성 전문성 정치적</span></div><span>Dummy</span><br/><br/> <span>Dummy</span> <div id="box3" class="box"> <span>교육의 자주성 전문성 정치적</span></div><span>Dummy</span><br/><br/> <span>Dummy</span> <div id="box4" class="box"> <span>교육의 자주성 전문성 정치적</span></div><span>Dummy</span><br/><br/> </body> </html>
visibilty
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DocumentDocument</title> <style type="text/css"> .box{background-color:yellow; width:300px; height:50px; margin:10px} table{visibility:collapse;} /* collapse가 테이블에 적용되면 블럭 형식만 남고 공간은 없어짐*/ #box1{display:none;} /* 태그까지 화면에서 제거*/ #box2{visibility:hidden} /* 태그가 화면에 보이지 않을뿐 블록형식 동작됨*/ #box3{visibility:collapse;} /* collapse가 일반 태그에 적용되면 hidden과 같이 적용*/ </style> </head> <body> <span>Dummy</span> <table border="1"> <tr><td>Test1</td><td>Test2</td></tr> <tr><td>Test3</td><td>Test4</td></tr></table> <span>Dummy</span><br/><hr/> <span>Dummy</span> <div id="box1" class="box"> <span>교육의 자주성 전문성 정치적</span></div><span>Dummy</span><br/><br/><hr/> <span>Dummy</span> <div id="box2" class="box"> <span>교육의 자주성 전문성 정치적</span></div><span>Dummy</span><br/><br/><hr/> <span>Dummy</span> <div id="box3" class="box"> <span>교육의 자주성 전문성 정치적</span></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shadow.html</title> <style type="text/css"> div{width:600px; margin-bottom:20px; padding:5px 20px; background-color:yellow;} .a{box-shadow: -5px 10px;} /* 첫번째와 두번째 요소는 좌우 상하 그림자 크기, 첫번째 요소 좌우, 두번째 요소 상하, 첫번째 요소 양수는 오른쪽 음수는 왼쪽, 두번째 요소 양수는 아래쪽 음수는 위쪽 그림자를 표시함*/ .b{box-shadow:5px 5px 5px;} /* 세번째 요소는 번짐 정도 */ .c{box-shadow: 5px 5px 5px 5px;} /* 네번째 요소는 그림자 확장 */ .d{box-shadow: 5px 5px 5px 5px orange;} /* 다섯번째 요소는 색깔 */ /* 같은 방식으로 text-shadow도 있음. 다만 글자에 그림자를 넣는 동작이므로 사용할 때 글자 크기나 굵기, 글자체 등을 고려하여 사용하는 것이 자연스러움*/ </style> </head> <body> <div class="a"><p>box-shadow: 5px 5px</p></div> <div class="b"><p>box-shadow: 5px 5px 5px</p></div> <div class="c"><p>box-shadow: 5px 5px 5px 5px</p></div> <div class="d"><p>box-shadow: 5px 5px 5px 5px orange</p></div> </body> </html>
'VScode > CSS' 카테고리의 다른 글
[CSS] transition (0) 2022.09.08 [CSS] layout (0) 2022.09.08 [CSS] background, font, button, gradiant (0) 2022.09.08 [CSS] pseudoclass (0) 2022.09.08 [CSS] border, checked, box model, list (0) 2022.09.08