-
CSS 속성 선택자프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:48
CSS 속성
- 텍스트 속성
- 배경 색상 / 이미지 관련 속성
- 테두리 속성
- 여백 속성
- display 속성 : inline / block / inline-block
- float 속성
- 목록 관련 속성
- 위치 관련 속성
- 겹침 (레이어)
- overflow
- visibility / opacity
- 그림자
텍스트 속성
배경색
배경 이미지 / 반복
테두리 유형 / 굵기 / 색상 지정
여백 속성 (padding / margin)
inline과 block
display에서 inline과 block의 차이
block
- 행으로 배치
- 옆으로 나란히 배치 안 됨
- 여백 있음
- display 속성이 없으면 디폴트
inline
- 옆으로 나란히 배치
- 여백 없이 내용물 만큼만 공간 차지
inline-block
- 인라인, 블록 성격 모두 포함
- 옆으로 나란히 배치되면서, 여백도 있음
inline-block 연습문제 : inline-block.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Inline - block 예제</title> <style type = "text/css"> /* display 속성이 없으면 block이 디폴트 : 행으로 배치/ 여백 있음 */ .greenBox{ /*display:block;*/ /* 디폴트 */ /*display:inline;*/ /* 옆으로 배치되고 내용만큼만 공간 차지 */ /*display:inline-block;*/ /* 옆으로 배치되고 여백 있음 */ float:right; width:150px; height:75px; margin:10px; border:solid 3ps #73AD21; } </style> </head> <body> <h2>display 속성 (block /inline / inline-block)</h2> <div class="greenBox">박스1</div> <div class="greenBox">박스2</div> <div class="greenBox">박스3</div> <div class="greenBox">박스4</div> </body> </html>
float 속성
- 해당 요소를 떠 있게 만든 속성
- 즉, 기본 레이아웃 흐름에서 벗어나 왼쪽이나 오른쪽으로 이동하는 것을 의미
- left : 왼쪽에 배치
- right : 오른쪽 배치
목록 관련 속성
목록 관련 속성 예제 : list.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>목록 관련 예제</title> <style type="text/css"> /* ul {list-style-type:square;}*/ /* ul {list-style-type:none;}*/ ul li {display:inline; } </style> </head> <body> <ul> <li>봄</li> <li>여름</li> <li>가을</li> <li>겨울</li> </ul> </body> </html>
위치 관련 속성 : position 속성
- static
- 디폴트
- 다른 요소와 겹치지 않게 배치
- 위치를 지정하지 않으면 static 적용
- relative
- static의 원래 위치를 기준으로 위치 계산
- absolute
- 가장 가까운 상위 요소(부모)를 기준으로 배치
- 상위 요소가 static 인 경우에는 브라우저 화면 기준
- fixed
- 브라우저 화면을 기준으로 고정 위치에 배치
position 속성 예제 : position.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>position 속성</title> <style type="text/css"> body {margin:0; } #parent { position:relative; top:0px; left:0px; width:200px; height:300px; border:solid 5px #000000; /* margin: 50px 0 0 50px; */ } #boxA, #boxB, #boxC { width:80px; height:80px; } #boxA { background-color:#ff0000;} #boxB { background-color:#00ff00;} #boxC { background-color:#ffff00;} #boxB { /* position:relative; */ /* relative 위치 지정 : static에 해당되는 원래 위치를 기준으로 20, 30 이동해서 배치 */ position:absolute; /* 상위 요소에 위치를 지정하지 않았기 때문에 브라우저 화면(body)를 기준으로 배치 */ top:20px; left:30px; } </style> </head> <body> <div id="parent"> <div id="boxA">A</div> <div id="boxB">B</div> <div id="boxC">C</div> </div> </body> </html>
absolute
- 가장 가까운 상위 요소(부모)를 기준으로 배치
- 상위 요소가 static인 경우에는 브라우저 화면(body)를 기준으로 배치
- 현재 parent 안에 들어 있지만 parent의 position을 설정하지 않았기 때문에 parent가 static이므로 브라우저 화면을 기준으로 배치되었음
parent 박스 안에서 배치되게 하기 위해서는
- parent의 position 설정
정리
- div를 parent 내에 위치 시키기 위해서는
- 먼저 parent의 position 설정(absolute 또는 relative 상관 없음)
- absolute과 relative 차이점은 약간의 여백인데
- 문서 전체에서 margin을 0으로 설정하면 여백 없어짐
- body {margin:0; } 또는 * {margin:0; }
fixed : 지정된 위치에 고정 배치
- 스크롤 시에도 고정되어 있음
- fixed.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fixed 예제</title> <style type = "text/css"> #fixedBox{ position:fixed; width:50px; height:50px; background:blue; top:50px; left:50px; } </style> </head> <body> <div id = "fixedBox"></div> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 문서 끝 </body> </html>
겹침(레이어) 표현 속성
z-index 속성
- 요소들이 겹칠 때 순서 지정
- 나중에 배치하는 것이 위에 놓임
- z-index 값이 클수록 위에 놓임
z-index 속성 예제 : z-index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index 속성</title> <style type="text/css"> #outBox { margin:0 auto; /* 브라우저 화면의 가운데 정렬 */ width:1020px; position:relative; /* absolute인 경우 가운데 정렬 안 됨 */ } #box1 { position:absolute; /* 부모 박스 기준으로 배치 */ left:25px; top:181px; z-index:1; } #box2 { position:absolute; /* 부모 박스 기준으로 배치 */ left:187px; top:155px; z-index:2; } #box3 { position:absolute; /* 부모 박스 기준으로 배치 */ left:369px; top:129px; z-index:5; } #box4 { position:absolute; /* 부모 박스 기준으로 배치 */ left:603px; top:155px; z-index:4; } #box5 { position:absolute; /* 부모 박스 기준으로 배치 */ left:795px; top:181px; z-index:3; } </style> </head> <body> <div id = "outBox"> <div id ="box1"><img src="image/img1.png"></div> <div id ="box2"><img src="image/img2.png"></div> <div id ="box3"><img src="image/img3.png"></div> <div id ="box4"><img src="image/img4.png"></div> <div id ="box5"><img src="image/img5.png"></div> </div> </body> </html>'프론트엔드 프로그래밍 > CSS' 카테고리의 다른 글
반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스) (0) 2022.01.26 CSS 연습문제 (0) 2022.01.26 자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자) (0) 2022.01.26 CSS의 기본 형식 + 선택자(태그, 아이디, 클래스) (0) 2022.01.26 CSS (스타일 시트)란? (0) 2022.01.26