CSS_02_영역 지정
- 문서의 크기 단위
- em: 부모 태그의 글자 크기를 기준으로 상대배수 단위
- rem: 웹브라우저 문서 기본 크기를 기준으로 상대배수 단위
2. display: 요소가 화면에 보이는 방식 지정
- block: 웹페이지의 가로 한 줄 공간을 모두 차지하는 속성
예)div, p, h1, ul, ol table 태그, 너비(width)와 높이(height)를 설정할 수 있다.
- inline: 입력한 내용의 크기만큼 영역을 차지하는 속성
예)span, a, strong, textarea, 너비(width)와 높이(height)를 설정할 수 없다.
- none: 해당 요소를 보이지 않게 지정
#none영역을 제목 클릭 시 보이도록 설정하기
<head>
<style>
#question:active+#answer{
display: inline;
}
</style>
</head>
3. 공간분할태그: 경계를 분할하거나 영역을 나눌 때 사용하는 태그
태그의 일부만 속성을 변경할 때 사용한다.
- span: 문장의 영역을 구분하는 태그
- div: 웹페이지의 영역을 분할하는 태그
content가 많아도 지정한 크기를 벗어나지 않음
4. 가시속성 visibility
- visible: 요소를 보이게 하는 속성
- hidden: 요소가 보이지 않지만, 자리는 그대로 차지함
<hiddenvs none과의 차이>
-hidden: 눈에 보이지 않고 공간은 그대로 차지함
-none: 눈에 보이지 않고 공간도 사라짐
5. 박스모델: 모든 요소는 박스(box)로 구성됨
- 원형이나 다른 형태의 크기만큼 차지할 수 없음
6. 여백 조절하기
1)margin; 테두리를 기준으로 요소의 바깥 여백 지정
-margin: 상하좌우 모든 방향으로 여백 지정
-margin-top: 위쪽에 여백 지정
-margin-bottom: 아래쪽에 여백 지정
-margin-left: 왼쪽에 여백 지정
-margin-right: 오른쪽에 여백 지정
ㅁmargin-top: 100px;
*body 태그의 margin 없애기
body{
margin: 0px;
}
[실습1]
가로 100px, 세로 100px, div 4개 만들기
margin을 사용하여 박스 계단식으로 배치하기
- margin: 겹침 현상: 형제관계인 요소의 margin 값이 중첩되면 더 큰 값을 가진 margin영역으로 병합되는 현상
=>형제관계일 때, 두 요소의 간격은 50px
2)padding:테두리를 기준으로 요소의 안쪽 여백 지정
-padding: 상하좌우 모든 방향으로 여백 지정
-padding-top: 위쪽에 여백 지정
-padding-bottom: 아래쪽에 여백 지정
-padding-left: 왼쪽에 여백 지정
-padding-right: 오른쪽에 여백 지정
[실습2]
가로 100px, 세로 100px,padding 사용하여 계단 만들기
7. border: 테두리 스타일 지정
- border: 크기 형태 색깔
- border-width: 테두리 크기
- border-color: 테두리 색깔
- border-radius:테두리 모서리 둥글게
-전체 테두리: border-radius
-특정 테두리: border(top-left, top-right, bottom-left, bottom-left)-radius
모두 둥글게 border-radius 위쪽-왼쪽만 둥글게 top-left
위쪽-왼쪽만 둥글게 top-left
[실습3]
div 4개, margin, border 사용하여 꿀떡 모양 만들기
8. position: 요소의 위치를 자유자재로 배치하는 속성, 기준에서 떨어진 정도만큼 요소 이동
<사용방법>
① position: 종류 입력
② top, bottom, left, right에 크기 입력
예)top:20px →위에서 20px 떨어진 정도
1)static(정적인): position의 기본값, 위치속성 비활성화
2)relative(상대적인): 위치속성 활성화, 원래 있던 위치 기준으로 이동
-기준점 확인: top=0px left=0px,
3)absolute(절대적인): 위치 속성 활성화
-부모의 position이 static이 아닌 경우 부모 기준으로 이동
-부모가 없거나, 부모가 전부 static인 경우 body 태그 기준
[부모의 position이 static이 아닌 경우]
[부모의 position이 static이거나 부모가 없음]
4)fixed(고정적인): 특정 좌표에 화면이 고정됨
-스크롤을 내려도 fixed된 요소의 위치가 변하지 않음
-top, bottom, left, right에서 떨어진 만큼 요소 배치가능
[실습4]
4개의 박스를 상하좌우 끝에 배치하기
body 기본 여백 줄이기 body{ margin:0px;}
노란 상자 오른쪽 끝에 붙이기 #yellow{ right: 0px;}
파란 상자 아래쪽 끝에 붙이기 #blue{ bottom: 0px;}
초록 상자 아래쪽의 오른쪽 끝에 붙이기 #green{ bottom: 0px; right: 0px;}
'HTML&CSS' 카테고리의 다른 글
| [CSS]3. 레이아웃 (0) | 2023.06.12 |
|---|---|
| [CSS]1. 선택자 (0) | 2023.06.10 |
| [HTML]2. 태그 (0) | 2023.06.09 |
| [HTML]1. HTML 개요 (0) | 2023.06.05 |