CSS - 5

haechi·2021년 5월 14일

Poiemaweb

poiemaweb

목록 보기

12/13

210514 - 3

1.display 프로퍼티

layout 정의에 자주 사용되는 중요한 프로퍼티

1.1 block 레벨 요소

항상 새로운 라인에서 시작
화면 크기 전체의 가로폭을 차지(width : 100%)
widht,height, margin, padding 프로퍼티 지정이 가능
block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있음
block 레벨 요소 예
div/h1~h6/p/ol/ul/li/hr/table/form

1.2 inline 레벨 요소

새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
content의 너비만큼 가로폭을 차지
width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정
inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정
inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용
inline 레벨 요소 예
span/a/strong/img/br/input/select/textare/button

1.3 inline-block 레벨 요소

block과 inline레벨 요소의 특징을 모두 가짐. inline레벨 요소와 같이 한 줄에 표현되면서 width,height,margin프로퍼티를 모두 지정할 수 있다.

기본적으로 inline레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있음
block레벨 요소처럼 프로퍼티 모두 정의 가능
content너비만큼 가로폭 차지

2.visibility 프로퍼티

요소를 보이게 할 것인지 정의. (요소의 렌더링 여부)

3.opacity 프로퍼티

요소의 투명도 정의 0.0~1.0값

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=4, initial-scale=1.0">
  <title>Document</title>
    <style>
      div, img {
        float: left;
        width: 150px;
        height: 150px;
        margin: 30px;
        background-color: blue;
        color: white;
        opacity: 0.5;
        transition: opacity 1s;
      }
      div:hover, img:hover {
        opacity: 1.0;
      }
    </style>
</head>
<body>
  <div>opacity: 0.5</div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeWMROnWszBhw4kIAIhPJC28aNUU0f5tNplDf3LxlfQ-old63S7iuGoXFu7l7yVUSA9Cw&usqp=CAU" alt="doug">
</body>
</html>