[9, 10] 230204, 230205 개인 프로젝트 (1) 9일, 10일 차 Sat, Sun) 메인 화면 진행 중 (3)

230204 Sat [9th day for portfolio :)]
230205 Sun [9th day for portfolio :)]

-울산 관광 가이드북 참고하기

2023.01.18 - [2. 포트폴리오/자료 수집] - *자료) 울산 울주군 관광지 리스트 및 관광가이드북 다운로드

---

새로 알 게 된 것

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다.

property: value !important;

---

vh = viewport height, vw = viewport width

즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻이다.
100vh, 100vw가 전체 화면의 기준이 된다.
예를 들어, 현재 스크린 크기가 height = 1000px, width = 800px이라면
1vh = 10px, 1vw = 8px 이 될 것이고
height: 50vh; width: 25vw; 로 설정한다면
height - 500px width - 200px 으로 적용된다.

참고: https://programming119.tistory.com/93

---

z-index는 드롭 다운 메뉴와 슬라이드 쇼 사용에서 유용하다. 
The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.
참고: https://www.w3schools.com/cssref/pr_pos_z-index.php

---

텍스트를 최하단에 위치하게 한다. 

display: inline; vertical-align : bottom;

 

웹폰트를 불러온다.

<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>

---

https://mondaymonday2.tistory.com/245

[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)

 

90도로 돌린다.

transform: rotate(90deg);

Sliders 두 개 쓸 때 변수가 두 개이면 하나는 변수 이름 뒤에 숫자 1개 붙이는 등 이름 바꾸면 동시에 작동한다.

var swiper2 = new Swiper('.blog-slider', { //변수 이름 다르게 지정하면 스와이퍼 2개가 작동 된다. :)