juchanhwang/cbnu-wp

web programming playground (cbnu)

CBNU web-programming playground

🙌 1주차 실습

• hello world

🙌 2주차 실습

DEMO: CLICK HERE 👀

• Anchor 태그 실습
• Image 태그 실습
• List 태그 실습
• Table 태그 실습
• Audio 태그 실습
• Video 태그 실습
• Youtube 동영상 삽입
• Form 양식 태그 실습

🙌 4주차 실습

Demo: CLICK HERE 👀

요구사항

'My Home Page' 레이아웃 구현하기

구조 설계

• 각 section의 구조 정하기

  header section

  

  • navigation menu 구현 (list tag 사용)

    <ul class="nav">
      <li class="nav-menu">메뉴1</li>
      <li class="nav-menu">메뉴2</li>
      <li class="nav-menu">메뉴3</li>
    </ul>

    {
      display: flex;  
      align-items: center;
    }

    flex값을 적용시켜 메뉴들을 나란히 나열한다.

    hover와 active 상태일 때, 컬러를 적용하여 유저에게 UI피드백을 제공한다.

    hover

    

    active

    
  
  

  content section

  

  • content-image section

    
    • image container영역에 position: relative값을 적용
    • img태그에 width 100%를 적용
    • "My Home Page"와 하단의 "Lorem ipsum dolor" 텍스트에 absolute값을 적용하여, 각각의 위치를 잡아줌

  • article-section

    
    • Section1 과 Aside를 top-section, Section2를 bottom-section으로 구분
    • Section1과 Aside container에 flex를 적용
    • Section1 에 flex: 2 1 0, Aside에 flex: 1 1 0을 적용하여 2:1 비율 유지
    • Section2와 이미지는 flex로 나열
  
  

  footer section

  

  {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  flex 속성을 이용하여, 좌우 상하 가운데 정렬

🙌 5주차 실습

Demo: CLICK HERE 👀

변경 사항

• img => div의 background-image의 url로 이미지 삽입
• background 관련 스타일 추가

{
  background-image: url('./image/article-image.jpg');
  background-size: cover;
  background-blend-mode: overlay;
  background-position: center center;
}

• h1영역에 animation(keyframe) 적용

  h1 {
    animation: slide 1.5s;
  }
  
  
  @keyframes slide {
    from {
      left: -50%;
    }
  
    to {
      left: 50px
    }
  }