display 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

display 속성 본문

Front-End (웹)/CSS

display 속성

친절한개발초보자 2021. 7. 21. 21:29

728x90

선택자, 선택자{css속성}

css속성 앞에 있는 모근 선택자를 싹 다 한 번에 적용이 가능하다.
뒤에 있는 css속성으로 코딩 최적화 가능하다.

블록 레벨 요소와 인라인 레벨 요소

블록 레벨(block-level) 요소
- 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것
(한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻)
- 블록 레벨의 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
- <h1>, <div>, <p> 태그 등이 있다.
인라인 레벨(inline-level) 요소
- 한 줄을 차지하지 않는다.
- 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.
(한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다.)
- <span>, <img>, <strong> 태그 등이 있다.

배치 방법을 결정하는 display 속성

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다.
주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 만든다.
inline	블록 레벨 요소를 인라인 레벨 요소로 만든다.
inlin-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
none	해당 요소를 화면에 표시하지 않는다.

display의 형태와 종류

dislay:block (<h> 태그,< p> 태그, div, ul, li,...)
- 장점
▷ 사이즈를 조절할 수 있다.
(weight / height 값을 줄 수 있다.)
- 단점
▷ 세로 배치
- 가로 값을 따로 적어주지 않으면 알아서 최대 길이로 늘어난다.
▷ 이 가로 값은 상대적이다.
- 만약에 내가 선택한 대상이 아무런 태그 안에 들어가 있지 않으면 웹사이트 전체 가로길이를 기준으로 최대 사이즈로 늘어나고, 태그 안에 들어가 있으면 그 태그에 가로 값만큼만 늘어난다.
- 세로 값을 따로 적어주지 않으면 내용물에 크기에 따라서 자동으로 늘어나고 줄어든다.
- 주의사항
▷ 둘 다 안 적으면 안 된다.
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>display #1</title>
    <style>
        *{margin:0;padding:0}
        div,p{width:200px;height:200px;}
        
        div{background-color:yellow}
        
        p{background-color:blue}
        
        h1{background-color:pink}
        
        h2{width:200px;background-color:#123456}
    </style>
</head>
<body>
    <div></div>
    <p></p>
    <h1>안녕하세요</h1>
    <h2>안녕하세요 h2태그입니다</h2>
</body>
</html>
```
display:inline(a, span,...)
- 장점
▷ 가로배치
- 단점
▷ 사이즈 조절할 수 없음 (width, height 적용이 안된다.)
- <a> 태그
▷ 그냥 사용하면 글자색이 검은색이 아니라 다른 색으로 색칠되어 있다.
▷ 밑에 밑줄이 생긴다.

cf) a{text-decoration:none}
▷ 밑 줄 없애는 속성
<a href="#">
▷ 아무것도 적지 않을 경우 #을 넣어주는 게 기본 원칙이다.
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>display #2</title>
    <style>
        *{margin:0;padding:0}
        
        a{text-decoration:none;color:black;font-weight:bold}
        
        span{/*width:300px;height:300px*/;background-color:yellow;}
    </style>
</head>
<body>
    <a href="#">a태그 입니다</a>
    <span>span태그 입니다</span>
</body>
</html>
```

display:inline-block(img...)
- 장점
▷ 사이즈 조절 가능
▷ 가로 배치
- 단점
▷ 공백 생성
- 사이사이에 들어가는 공백 없애는 방법
▷ display:block 속성을 가지고 있는 태그 아무거나 상관없다.
▷ img 태그를 감싸준다.
▷ 감싸준 다음 해당 태그에 이미지의 크기와 똑같은 가로세로 값 주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>display #3</title>
    <style>
        *{margin:0;padding:0;}
        
        img{width:200px;height:200px;}
        div{width:200px;height:200px;float:left;}
    </style>
</head>
<body>
    <div><img src="7.jpg" alt=""></div>
    <div><img src="8.jpg" alt=""></div>
    <div><img src="9.jpg" alt=""></div>
</body>
</html>

display:none
: 태그를 웹사이트에서 보이지 않도록 삭제시킨다.
- display:block / hover 함께 사용하면 마우스를 올렸을 때만 나오게 할 수 있다.
- display 속성은 css속성
(언제든 속성을 사용할 수 있다.)
- 모든 태그의 기본적인 display 속성이 있지만 css에서 언제든 이것을 바꿔줄 수 있다. 하지만 각자의 태그의 역할이란 게 있기 때문에 굳이 바꿔줄 필요는 없다.

★ hover
- 선택자:hover{css속성}
▷ 앞에 있는 대상에 마우스를 올리면 뒤에 있는 css속성 적용한다.
- 선택자:hover 선택자{css속성}
▷ 앞에 있는 선택자에 마우스를 올렸을 때 뒤에 있는 선택자가 바뀌게 할 수 있다.
- 웹사이트에 있는 마우스 올렸을 때 무언가 바뀌는 것들은 모두 hover로 만든 것

★ active
- 선택자:active{css속성}
▷ 앞에 있는 대상에 클릭을 했을 때 뒤에 있는 css속성 적용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>display #4</title>
    <style>
        #a{width:300px;height:300px;background-color:red;}
        
        #a:hover{background-color:yellow;color:blue;font-size:30px}
        
        #b{width:200px;height:200px;background-color:green;}
        #b:active{background-color:orange}
        
        #c{width:300px;height:300px;background-color:beige}
        
        #d{width:100px;height:100px;background-color:violet;}
        
        #c:hover #d{background-color:cornflowerblue;}
    </style>
</head>
<body>
    <div id="a">검은색글씨</div>
    
    <div id="b"></div>
    
    <div id="c">
        <div id="d"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>display #5</title>
    <style>
        *{margin:0;padding:0;}
        
        #a{width:400px;height:400px;background-color:#123456;}
        
        #b{width:100px;height:100px;background-color:#987654;display:none}
        
        #a:hover #b{display:block}
        
        a{width:200px;height:200px;background-color: yellow;display:block;}
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
    
    <a href="#">안녕하세요</a>
</body>
</html>

728x90