가상요소 활용하기1

가상요소 :first-child, :last-child selector

  • 1
  • 2
  • 3
  • 4
html은 <ul>
<li>1</li> /* :nth-child(1) 또는 :first-child */
<li>2</li> /* :nth-child(2) */
<li>3</li> /* :nth-child(3) */
<li>4</li> /* :nth-child(4) 또는 :last-child */
<ul> css는 
ul{
    width: 150px;
    background: #d9d9d9;
}
ul li{
    color: #333;
    font-size: 14px;
}
ul li:nth-child(3){font-size: 30px;}

:first-child, :last-child의 활용

  • 메뉴1
  • 메뉴2
  • 메뉴3
html은 <ul> <li> <a href=""> 메뉴1 </a> </li> <li> <a href=""> 메뉴2 </a> </li> <li> <a href=""> 메뉴3 </a> </li> </ul> css는 
ul li{
    float: left;
    position: relative;
}
ul li:before{
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    width: 2px;
    height: 10px;
    background: #f11883;
} /* 각각의 li 왼쪽에 선을 그림 */
ul li a{padding: 10px;}
ul li:first-child:before{display: none;} /* 첫번째 요소의 before를 삭제함 */
ul li:first-child a{padding-left: 0;}
/* 첫번째 li안의 a에 왼쪽 여백을 삭제함, 이때 li가 first-child임. a:first-child 아님!!!!!!!!!! */
  • Volumn 비용 효율적인 빅데이터 저장과 분석! 데이터 기반의 의사결정 기반 마련 새로운 비즈니스 가치 창출
  • Velocity 센서(loT)데이터 실시간 수집 장기데이터 저장 기반 마련 장애 사전 예측 및 대응
  • Variety 내부 보안 통제로 보안 강화 신뢰성 향상 및 탐지 고도화 사전, 사후 대응 체계 확립
html은 <ul> <li> <h2>Volumn</h2><p>비용 효율적인</p> </li> <li> <h2>Velocity</h2><p>센서(loT)데이터</p> </li> <li> <h2>Variety</h2><p>내부 보안 통제로</p> </li> </ul> csss는 
ul li{
    float: left;
    width: 300px;
    margin-right: 50px;
} /* 모든 li에 오른쪽 여백을 줌 */
ul li:last-child{margin-right: 0;} /* 마지막 li만 오른쪽 여백 삭제 */

:nth-child(n)의 활용

  • 메뉴1
  • 메뉴2
  • 메뉴3
html은 <ul> <li> <a href=""> 메뉴1 </a> </li> <li> <a href=""> 메뉴2 </a> </li> <li> <a href=""> 메뉴3 </a> </li> </ul> css는 
ul li{
    float: left;
    width: 100px;
    height: 50px;
    color: #fff;
    text-align: center;
}
ul li:nth-child(1){background:#082559;} /* first-child라고 해도 됨 */
ul li:nth-child(2){background:#4475cb;}
ul li:nth-child(3){background:#31a2ac;}
  • 탭1
  • 탭2
  • 탭3
  • 탭4
  • 탭5
  • 탭6
html은 <ul> <li> <a href=""> 탭1 </a> </li> <li> <a href=""> 탭2 </a> </li> <li> <a href=""> 탭3 </a> </li> <li> <a href=""> 탭4 </a> </li> <li> <a href=""> 탭5 </a> </li> <li> <a href=""> 탭6 </a> </li> </ul> css는 ul li{float:left; width:100px; height:50px; color:#fff; text-align:center;} ul li:nth-child(odd){background:#082559;} ul li:nth-child(even3){background:#31a2ac;}