🐥HTML, CSS: 첫 번째 개인 프로젝트 하면서 새로 알게 된 것 모음 조각들 [K-디지털 트레이닝 21일~26일]

[230127~230205] 첫 번째 개인 프로젝트 하면서 새로 알게 된 것 모음

새로 알게 된 것뿐만 아니라 이전에 이론 공부 했던 것들 중에 다시 상기하게 된 것도 포함했다.
프로젝트를 만드는 과정에서 배웠던 이론들을 직접 적용하니 머릿속에 더 남는 것 같다. :)

상대적으로 길이가 긴 내용은 개별 글로 옮겼다. (230329 ~ )

---

230130 

div가 중앙 정렬이 된다.

margin: auto;

특수문자
https://www.compart.com/en/unicode/U+2B9F

Find all Unicode Characters from Hieroglyphs to Dingbats – Unicode Compart

---

230131

1) 이메일 아이디, 직접 입력 옵션, 중복확인 버튼이 화면 크기가 줄어듦에 따라 같이 안 움직였는데
아래 코드를 쓰고 같이 움직이게 됐다.

#emailDoubleCheck{padding:0 0 0 5px;width: 470px; display:flex;flex-direction:row;}/*같이 움직이도록 한다.*/

2) name is the name that is used when the value is passed (in the URL or in the posted data).
id is used to uniquely identify the element for CSS styling and JavaScript.

---

230201 

이미지를 imgur.com에 올려서 이미지 주소 복사 쓰기

---

230203

여러 가지 스타일링을 한꺼번에 적용해야 할 때는 클래스(class)를 사용하고, 한 가지만 적용하고 싶다면 아이디(id)를 사용하면 된다.
id selectors take precedence over class selectors.

---

230204, 230205

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

property: value !important;

---

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>

---

90도로 돌린다.

transform: rotate(90deg);

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

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

---