basic

alt+ 드래그를 통해 복수의 줄의 같은 위치에 같은 내용을 작성 가능

복붙보다 더 편하게 가능하다!

Carousel

• 슬라이드 쇼 처럼, 여러 content에 접근 가능하게 함

*bootstrap v4.5 기준

<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
        <img src="..." class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" style="background-color: green;">
      <img src="..." class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color: blue;">
      <img src="..." class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#testimonial-carousel" type="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#testimonial-carousel" type="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

• slide 부분
  • data-ride: false( autoplay x) / carousel: 자동재생
  • carousel-inner 안에 슬라이드 쇼들 넣으면 됨
  • carousel-item이 하나의 슬라이드 쇼. 그 옆에 active 있는 게 가장 처음으로 뜸
• button 부분
  • prev/next로 전후 버튼 구분
  • href로 슬라이드 쇼의 아이디(여기서는 testimonial-carousel) 연결. 어디에 영향을 끼치는지 알려주는 부분
  • role="button"을 추가해 줌으로써 <a>를 버튼으로 바꾸는 거임
  • data-slide를 통해 앞으로 가는건지, 뒤로 가는건지 설정
  • span을 통해 icon 더함(사실 i써도됨)
  • aria-hidden: 스크린 리더같은 거 쓸때 얘도 읽는지 여부(버튼이니 안 읽게 하고 싶으면 true 씀)
  • sr-only => screen reader only 위에 class 읽는것보다, 옆에 작성해둔 값 읽도록(여기선 Previous, Next 읽도록 하는 역할)

z축

같은 위상을 가질 때(hierarchical level), 자연스럽게 stack 됨

그러나 하나가 다른 하나의 child일때, 위에 올라간다고 할 수 있음(child가 위로)

이런 방식으로 겹쳐올리는 것은 불편하니까 다른 방식을 쓸 수 있다!

• z-index
  • elements가 positioned 됐을때만 효력 존재!!!(position이 기본이면, not-overlapping이라는 것 기억)
    • position이 static일때만 먹히지x
  • 숫자가 클 수록 화면과 가까움(가장 위에 stack된다고 보면 됨)
  • 기본적으로 0으로 설정된 것임
  • stacking order에 영향을 끼치는 것으로, 다 동일하다면 원래의 값과 같다

media query

상황을 만족할 때 괄호 안의 내용이 적용됨

@media <type> <feature>

@media (min-width: 900px){

해당 조건을 충족할 때에만 작동, 따라서 이 경우에는 화면 크기가 최소 900 이상
//Change sth
}

 

• <type>
  • print =>출력할 때
  • screen =>스크린 사이즈에 따라 달라짐
  • speech
• <feature> 상세 조건

sizes to consider

• device: fixed
• browser
• viewport: size of the screen where your website is being displayed on

href에서 url이 아닌 것을 사용할 수 있다! #id내용으로 쓰면 됨

->navbar 쓸 때 유용. 같은 페이지에서도 해당 id 있는 곳으로 화면 이동 가능!