[TIL] 2021년 12월 28일

HTML과 CSS를 다시 차근차근 공부하니 모르는 것들 (혹은 배웠는데 잊은 것들...) 이 생겨 정리해보고자 한다.

---

1

input과 textarea는 모두 입력을 받는 폼을 만드는 태그
차이점은 textarea가 더 긴 입력을 받을 수 있다

• input에는 미리 어떠한 설명을 띄워놓을 수 있는 placeholder 속성이 있고, 어떠한 값을 미리 입력해놓을 수 있는 value 속성이 있다.

• textarea에는 placeholder 속성이 똑같이 있지만, 미리 어떤 값을 입력해 놓으려면 그냥 태그 안에 쓴다. (input은 닫힌태그)

<input type="number" value="123456">
<textarea>소개:</textarea>

type 속성
여러가지 타입이 있는데 대표적인 것 3가지

• <input type="text">

• <input type="number">

• <input type="password">

2

Attribute Selector
그리고 type을 조건으로 선택할 수 있는 CSS 선택자도 있었다!
(진짜 이건 처음 봤고 굉장히 유용할 것 같으니 꼭 기억하자)

원하는 속성을 [] 사이에 쓴다

input[type="text"] {

}

// type이 text인 input들만 선택!

MDN Attribute Selector

hover element affect other
이건 예전에도 해봤었는데, 왜 다시 까먹었는지는 모른다.
하지만 어쨌든 한 요소에 hover 했을 때 다른 요소에 변화를 주는 방법은 자식/형제 선택자를 이용하는 것.

• > 자식 선택자
• + (인접) 형제 선택자

.colorBox:hover > span {
  display: inline;
}

//colorBox에 hover하면 colorBox의 자식인 span에게 css property를 줌

3

fixed와 sticky의 차이

position: fixed; 는 헤더 같이 항상 보여야하는 영역에 쓴다고 배웠는데
내가 웹페이지를 만들 때 헤더에 적용했던 것은 항상 position: sticky 였다.

• fixed 항상 뷰포트의 지정 위치에 붙어있음
• sticky 처음엔 relative처럼 있다가, 스크롤이 만나면 fixed처럼 행동

그래서 아마 난 sticky를 선호해서 쓴 것 같다. fixed를 쓰면 헤더 부분만큼의 영역이 문서상 비어있게 되어서 아래 내용들이 위로 올라간다.

하지만 caniuse에 검색하니 sticky는 빨간불이 많으니 지양해야겠다 ⛔️

[디앤디랩][IT개발실] 스크롤해도 나는 안사라져! Css Fixed, Sticky 속성 소개

4

flex를 언제쯤 flex할 수 있을까?

여러분 flex 레이아웃 잡는 값 중에서 space-evenly 들어봤어요???
나만 안들어본거야?? 나만 space는 between이랑 around밖에 없는줄 알았어????

아무튼 있답니다.

그리고 잊고있던 flex 속성들

• order
  임의로 순서를 정해줄 수 있음

• align-self justify-self
  한 요소에만 다른 레이아웃 주기

• flex-flow
flex-direction flex-wrap 순으로 입력하는 단축 속성

이제는 잊지말자...