반응형
display 속성
- display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
- HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있는데, block, inline, inline-block, none값이 있다.
- none 값이면 공간조차 사라지며 해당 요소를 화면에 표시하지 않는다.
/* display 속성의 기본 설정값의 변경 */
li { display: inline; }
블록(block)
- display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 넓이를 차지하고, 블록 요소 내에 인라인 요소를 포함할 수 있다.
- width, height, margin, padding 속성 지정이 가능하다.
- <div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록 요소다.
div:nth-of-type(1) {
background-color: #FFA07A;
padding: 20px;
}
인라인(inline)
- display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고 문장 중간에 들어갈 수 있으나 인라인 요소 안에는 블록 요소를 포함할 수 없다.
- 요소의 너비도 해당 라인 전체가 아닌 해당 요소의 내용 만큼만 차지하고, 인라인 요소 뒤에 공백이 있는 경우에는 정의하지 않은 띄어쓰기(4px)가 자동 지정된다.
- width, height, margin-top, margin-bottom 속성을 지정할 수 없고, 상하 여백은 line-height 속성으로 지정한다.
- <span>, <a>, <img>요소는 대표적인 인라인 요소다.
span {
background-color: red;
color: white;
padding: 10px;
}
인라인-블록(inline-block)
- display 속성값이 인라인-블록인 요소는 해당 요소 자체는 인라인 요소처럼 동작하지만 해당 요소 내부에서는 블록 요소처럼 동작한다.
- 인라인 요소처럼 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있으며, 해당 요소의 내용 만큼만 너비를 차지하고, 인라인 요소 뒤에 공백이 있는 경우에는 정의하지 않은 띄어쓰기(4px)가 자동 지정된다.
- 블록 요소처럼 width, height, margin, padding 속성을 모두 정의할 수 있으며, 상하 여백을 margin과 line-height 두 가지 속성으로 제어할 수 있다.
.inline-block {
display: inline-block;
vertical-align: middle; /* inline-block 요소 수직 정렬 */
border: 3px solid #73AD21;
font-size: 16px;
}
visibility 속성
- visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정하는데, 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하며 코드 내에도 당연히 존재한다.
- display가 none일 때는 해당 요소는 웹 페이지에 더 이상 나타나지 않으며 웹 페이지의 레이아웃에도 영향을 미치지 않지만, visibility가 hidden일 때는 눈에 보이지만 않을 뿐 여전히 웹 페이지의 레이아웃에는 존재한다.
p.hidden { visibility: visible; } /* 보여줌 (기본값) */
p.hidden { visibility: hidden; } /* 공간은 있지만 숨김 */
p.none { display: none; } /* 공간도 없음 */
table.hidden { visibility: collapse; } /* 테이블에서만 한 줄로 */
table.hidden { visibility: none; } /* 테이블에서만 행이나 열 숨김 */
opacity 속성
- opacity 속성은 투명도를 말하며, opacity 속성값은 0.0부터 1.0까지 설정할 수 있는데 0에 가까울수록 투명한 상태가 된다.
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
- opacity 속성과 RGBA나 HSLA의 알파 채널 모두 투명도를 조절하지만, opacity는 모든 자식 요소까지 전부 같은 투명도로 설정하고 알파 채널은 투명도를 설정한 요소에만 투명도를 설정한다.
#para_06 {
background-color: rgb(255,0,0);
opacity:1;
}
#para_07 {
background-color: rgba(255,0,0,0);
}
Reference
반응형
'Language > Css' 카테고리의 다른 글
[Css] 기본 속성 - 크기 단위, 색상 (0) | 2023.06.19 |
---|---|
[Css] 위치 정렬 - position, float (0) | 2023.06.19 |
[Css] 박스 모델 - 콘텐츠, 패딩, 보더, 마진, 아웃라인 (0) | 2023.06.19 |
[Css] 레이아웃 - UI, 다중 컬럼, 반응형 웹디자인, 플렉서블 박스 (0) | 2023.06.19 |
[Css] 선택자 - 태그, 아이디, 속성, 동위, 의사 요소 클래스 (0) | 2023.06.19 |