개인 프로젝트(HTML/CSS) 4차 미션

📌 input placeholder 위치 조정엔 "text-indent:"

input 태그의 placeholder text의 위치를 조정하려할 때,
padding을 사용하면 늘린만큼 가로 너비도 늘어나지만,
text-indent를 사용하면 가로 너비는 변하지 않고 글자만 옆으로 이동한다

(tip)
단순히 input에서 입력 받는 글자나 placeholder의 시작부분을 좀 안쪽으로 하고 싶을 때(들여쓰기처럼)는 text-indent를 이용하면 크기에 영향을 주지 않고 text 시작부분만 안쪽으로 할 수 있다!

📌 select box (드롭박스)의 기본 브라우저 스타일 화살표를 없애고 싶을 때

구글링을 통해 알아낸 방법으로 스타일을 바꿨다.

① 기존에 있는 화살표를 없애기 위해 세 가지 속성을 추가했다.
-webkit-appearance : none; (크롬)
-moz-appearance: none; (파이어폭스)
appearance: none;

② 새로운 화살표를 추가하기 위해 background로 화살표 이미지를 넣었다.

(+)
button 등 브라우저 기본 스타일을 없앨 때 사용하면 된다!
예)

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}

📌 목록 스타일과 관련된 CSS

list-style
기본적으로 css 기본 스타일인 불릿 등을 사용할 수 있다
(값 : disc / circle / square 등)

하지만 보통 많이 사용되는 건 list-style : none

ul {
  list-style: none;
}

📌 CSS속성 order

플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정하는 속성

order에 적는 값으로는 정수(integer)

0이 가장 앞쪽에 배치가 되며 큰 숫자가 가장 뒤쪽에 배치가 된다.
우선순위라고 생각하면 됨

📌 <a>태그에서 target을 사용할 때 보안문제 보완

mdn의 <a>태그에 적힌 참고글을 참고했다

참고: target을 사용할 때, rel="noreferrer"를 추가해 window.opener API의 악의적인 사용을 방지하는걸 고려하세요.

참고: 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 rel="noopener"를 적용한 것과 같은 동작을 합니다.

📌 CSS 텍스트 정렬 좌우 / 상하

좌우 : text-align
값 : left, center, right

상하 : vertical-align
값 : top, middle, bottom

📌 CSS background-position 값

(출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;