22.06.21 TIL

 

- Position 가운데 정렬 팁.

  img {

    position : absolute;

    left : 50%;

  }

 

부모의 50%이라는 의미는, 부모가 100px이었다면, 이미지가 left: 50px으로 이동했다는 뜻입니다. 사과이미지의 왼쪽시작선이 50px에서 시작하게 되죠. 그래서 사과가 차지하는 영역은 50%+20px입니다. 한가운데 지점에서 이미지가 시작하고 20px만큼 차지했으니 이미지의 중심점이 한가운데가 아닌것입니다. 다시 사과이미지의 반만큼 왼쪽으로 이동시키면 이제 한가운데로 이동하게 됩니다.

 

 

-vh, vw와 width % 차이

 

vh = viewport height

vw = viewport width

 

즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다.

 

100vh, 100vw 가 전체 화면의 기준이 됩니다.

예를들어,

현재 스크린 크기가 height = 1000px, width = 800px 이라면

1vh = 10px  /  1vw = 8px 이 될 것이고

 

height: 50vh; 

width: 25vw; 

로 설정한다면

 

height - 500px

width - 200px 

 

실제로 이런식으로 적용이 되겠죠!

vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환합니다!

반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환합니다.

 

 

 

- display : flex; flex-wrap 속성

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

 

- display : flex; align-content 속성

. align-content를 사용하여 여러 줄 사이의 간격을 지정할 수 있습니다. 이 속성은 다음의 값들을 인자로 받습니다:

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

 

 

- css의 논리, Smallbox가 hover될 때 colorNameBox 의 opacity가 1이된다.

.smallBox:hover ~ .colorNameBox {

  opacity:1

}

이거.

 

 

- media query !

media query란 Responsive Web 을 구현하는 CSS technique 입니다. 특정 조건에서는 어떤 CSS 를 적용 하라는 규칙을 줄 수 있습니다. CSS에 @media 라는 문법으로 작성하게 됩니다. 아래의 css는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것입니다.

 

@media only screen and (max-width: 480px) {

body {

font-size: 12px;

}

 

• @media : 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.
• only screen : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.
• and (max-width : 480px : 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다.

- 아래 조건 해석

@media only screen and (min-width: 320px) and (max-width: 480px) {

/* ruleset for 320px - 480px */

}