block은 한줄한칸으로 공간을 차지
inline은 글자공간만 차지
none은 숨겼을때 사용한다
예제_a태그를 마우스를 올렸을 때, 그 옆에 있는 span태그의 디스플레이를 inline으로 변경
<style>
span{
display: none;
}
a:hover+span{
display: inline;
}
/*
a태그를 마우스를 올렸을 때, 그 옆에 있는 span태그의
디스플레이를 inline으로 변경
*/
</style>
| a | : | hover | + | span |
| a태그 | 를 | 클릭했을때 | 그 옆에 있는 | 스팬태그 |
| display | : | inline |
| 디스플레이 | 를 | 인라인으로 변경! |
a태그를
공간활용을 위해 태그의 공간을 네모로 할당한다
● margin=테두리 바깥쪽에 공백을 부여하는 속성
- 컨텐츠의 크기에는 변화가 없고 위치만 이동
- 10px = 상하좌우 각각 10px값을 부여
- 10px 20px = 상하10px, 좌우20px
- 10px 20px 30px 40px = 상 10, 우 20, 하 30, 좌 40 (시계방향)
- auto = 화면의 가운데로 위치
- margin-left, top .. = 특정 부분에만 공백 부여도 가능
- 주의 : 공백을 부여하기 때문에 공백부분은 사용불가(죽어버린 공간이 되어버림)
실행코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
margin=테두리 바깥쪽에 공백을 부여하는 속성
- 컨텐츠의 크기에는 변화가 없고 위치만 이동
- 10px = 상하좌우 각각 10px값을 부여
- 10px 20px = 상하10px, 좌우20px
- 10px 20px 30px 40px = 상 10, 우 20, 하 30, 좌 40 (시계방향)
- auto = 화면의 가운데로 위치
- margin-left, top .. = 특정 부분에만 공백 부여도 가능
- 주의 : 공백을 부여하기 때문에 공백부분은 사용불가(죽어버린 공간이 되어버림)
*/
div{
width: 200px;
height: 200px;
}
#div1{
background-color: lightgoldenrodyellow;
margin-left: 100px;
}
#div2{
background-color: lightblue;
margin: 100px;
}
#div3{
background-color: lightcoral;
margin: auto;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>실행화면
● padding
- 위치는 그대로있지만 부피가 늘어나 컨텐츠는 패딩안부터 위치된다
- 사용법 : 마진과 동일(auto는 없다)
- 주의 : 안쪽에 공백이 증가하므로 전체크기가 변경
- 사용 예시 : 네이버 검색창을 확인해보면 글자 출력이 중간에서 출력된다.
● 포지션 : 요소를 자유자재로 원하는 위치에 배치할 때 사용
static(기본값) : 태그의 작성 순서대로 배치가 됨
relative(상대적인) : 태그가 처음에 생성된 위치로부터 이동
absolute(절대적인) : 태그가 화면 최상단점을 기준으로 이동(독립적인 공간)
- 조건 : 부모가 relative, absoulte라면 부모의 위치가 기본위치
fixed(고정) : 요소를 특정(화면) 위치에 고정할 떄 사용
'Study > HTML,CSS' 카테고리의 다른 글
| HTML / CSS기초 3일차 <css> (0) | 2022.10.05 |
|---|---|
| HTML/CSS기초 2일차 <a>,<table>,<Form>,<input> (1) | 2022.10.04 |
| HTML/CSS기초 1일차 (1) | 2022.10.01 |