HTML, CSS 관련 기본사항 5

*HTML, CSS 기본사항3

1. position: fixed 

- position: fixed; 설정 시 스크롤바를 따라 다닌다.

 

2. before, after

- ::before; : 앞에 특정 구문 등을 붙인다.

- ::after; : 뒤에 특정 구문 등을 붙인다.

// HTML
<ul>
  <li>연예인 1</li>
  <li>연예인 2</li>
  <li>연예인 3</li>
  <li>연예인 4</li>
  <li>연예인 5</li>
  <li>연예인 6</li>
  <li>연예인 7</li>
  <li>연예인 8</li>
  <li>연예인 9</li>
</ul>


// CSS
ul>li::after {
  content:"님";
}
ul>li::before {
  content:"위대하신 ";
}
ul > li::after, ul > li::before {
  display: block;
}

 

3. transition

- 변환옵션을 주는 것.

- transition: 설정값 숫자s; : 설정된 값이 숫자만큼 걸려서 나타나게 한다.

- transition: 설정값1 숫자s, 설정값2 숫자s; 로 설정도 가능하다.

// HTML
<div></div>


// CSS
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}

body {
  height: 1000px;
}

div {
  width: 0;
  height: 10px;
  background-color: red;
  transition: width 3s;
}
body:hover > div {
  width:100%;
}

 

4. opacity

- 투명도 설정

- opacity: 0; : 0은 완전 투명, 안보임 / 1은 완전 불 투명, 보임

// HTML
<div></div>


// CSS
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}

body {
  height: 1000px;
}

div {
  width: 0;
  height: 10px;
  background-color: red;
  transition: width 3s;
  opacity: 0;
}
body:hover > div {
  width:100%;
  opacity: 1;
}