Kokoa Clone 강의를 보고 배운것들 정리

justify-content: space-between; (item 3개)일때 가운데 item을 가운데로 두는법 (css hack)

1. item의 width를 33%로 만들기

2. 2번째 item

   display: flex;

   justify-content: center;

3. 3번째 item

   display: flex;

   justify-content: flex-end;

   align-items: center;

input css로 이쁘게 만들기

1. border: none;

2. border-bottom: 1px solid 원하는색깔

3. input focus됐을때 outline 삭제

   input:focus {

   outline: none;

   }

CSS 변수 사용하기

1. :root {변수명: #fae100;}
2. 사용할려면 var(변수명);

not selector

input:not([type="submit"])

input의 type="submit"이 아닌 input을 가르킴

form method와 action

1. method는 get 과 post 방식으로 나뉨

   get이면 input의 name에 username이라고 설정하고 JaeHun을 입력하면 url에 username=JaeHun 이라고 나타남.

2. action="url주소" 해당 url주소로 페이지가 이동함.

position: fixed

fixed 프로퍼티 선언 시 주의할 점은, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

box-sizing: border-box

width가 200px인 element한테 padding-left를 50px주면 해당 element의 총 size는 250px(200px + 50px)이된다. 이러한 이유로 box-sizing: border-box를 설정하면 해당 element에 설정한 width가 유지된다.

css로 소문자 → 대문자

text-transform: uppercase;

inline/block

• linline
  • padding 상하좌우 적용 되지만 margin은 좌우만 적용됨
  • width height적용 불가능
• block
  • padding, margin 적용 가능
  • width, heigh 적용 가능

flex

• flex설정시 item은 width가 content크기만 해짐

border-top-left-radius

• 위와 같이 꼭지점 하나를 특정해서 radius를 줄 수도 있다.

animation

• animation 만들기

@keyframes  hideSplashScreen{
  from {
    opacity: 1;
  } to {
    opacity: 0;
    visibility: hidden;
  }
}

• animation 쓰기

animation: hideSplashScreen 0.4s ease-in-out forwards;
animation-delay: 1.5s;

• forwards는 animation이 끝난 상태를 유지해 준다
• visibility: hidden;
  • visibility 값을 hidden으로 설정한 요소는 접근성 트리에서 제외된다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않는다.

will-change

• 브라우저에게 무엇이 css로 바뀌는지 미리 알려주어 더 부드럽게 동작하게 한다.

first-child와 first-type-of

• first-child

  • 자식요소 중에 가장 첫번째를 선택하는 가상클래스

  • .message-row:first-child는 적용이안됨
    - 자식요소 중에 가장 첫번째를 선택하는데 첫번째 자식이 .chat-timestamp이기 때문
    - .chat-timestamp보다 앞에 있으면 쓸 수 있음.

    		<main class="main-screen main-chat">
          <div class="chat-timestamp">Tuesday, Junew 30, 2020</div>
          <div class="message-row message-fade-in"></div>
          <div class="message-row message-row--own"></div>
        </main>

• first-type-of

  • 밑의 코드역시 .message-row:first-type-of는 적용이안됨

  • first-of-type은 같은 요소타입(같은 tag)중에서 첫번째 요소 이며 추가 조건(클래스 명) 등 을 만족한 경우가 적용됨

  • .chat-timestamp가 같은 요소타입(div)이기 때문에 적용 안됨

  • 적용 될려면 .chat-timestamp을 다른 tag로 쓰면 가능

    		<main class="main-screen main-chat">
          <div class="chat-timestamp">Tuesday, Junew 30, 2020</div>
          <div class="message-row message-fade-in"></div>
          <div class="message-row message-row--own"></div>
        </main>

media query

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

• width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

• 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용한다.

@media screen and (width: 600px) {
    body {
        color: red;
    }
}