온보딩커리큘럼 3주차(CSS 1일차)

퍼블리싱이란?

💡 Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.

 

Figma(피그마)란?

💡 Sketch + Zeplin 과 더불어 많이 사용되는 디자인/프로토타이핑 툴입니다. Figma는 하나의 툴로 기획, 와이어프레임, 디자인, 프로토타이핑까지 수행할수 있는 장점이 있어요.

 

CSS 트랜지션란?

💡 CSS 트랜지션은 주로 이전 스타일과 다음 스타일을 부드럽게 연결시켜주는 애니메이션을 구현할 때 주로 사용됩니다.

 

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

transition: all 0.3s ease-in-out;

만약 한가지값만 적용하고 싶다면 all이 아닌 color등 all이 아닌 원하는것만 적어줘야한다.

0.3s ⇒ 애니메이션 속도 0.3초를 뜻한다.

ease-in-out ⇒ 처음에 시작할때 천천히 시작이되고 점점 빨라지다가 끝날때쯤 느려지게 적용된다.

이건 여러가지 방법이 있으니 찾아보기.

.button.use-css:hover

클래스네임이button과use이 같이 있는것에만 css주고싶을때 사용한다.

 

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 내부에있는 요소를 가운데 정렬한다. */
}

a {
  text-decoration: none;
  /* 밑줄을 없앤다. */
  color: inherit;
  /* 상위 클래스의 지정한 색깔을 그대로 가져온다. */
  /* a태그가 가지고있는 원래 속성을 지운거라고 볼 수 있다. */
}

.dropbtn {
  padding: 5px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  /* 마우스를 올렸을때 손가락 모양이 나온다. */
  color: #e8344e;
  background-color: white;
  border: solid 2px #e8344e;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #e8344e;
  color: white;
}

ul {
  display: none;
  /* 맨 처음에는 보이지 않는다. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: show;
  position: absolute;
  /* 화면내에서 볼때 원하는 위치에 absolute를 주면 거기서만 보인다. */
  background-color: #f1f1f1;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px #00000033;
  overflow: hidden;
}

ul li a{
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

ul li a:hover{
  background-color: #fb6379;
  color: white;
}

CSS미디어 쿼리란?

💡 주로 화면 크기가 다른 장치(PC, 태블릿, 스마트폰) 마다 다른 디자인을 보여주기 위해 사용됩니다.

 

• 즉, 일정 해상도(화면 크기) 에 따라 다른 CSS 코드를 가집니다.

@media (max-width: 768px) {
        .button {
          width: 100%;
        }
      }

브라우저 창의 크기가 768px보다 작을경우 .button의 클래스가 width가 100%가 되도록한다.

 

개발자도구란?

크롬을 비롯한 사파리, 엣지, 파이어폭스, 오페라 등에서 제공하는 기능이며 이 도구를 통해 헤당 웹 페이지가 어떤 구조로 이루어져 있는지를 손쉽게 파악할수 있습니다.