👀 Self Quest solution

Quest1. <svg>에 대해 알아보기
Quest2. search bar 변화주기
Quest3. 반응형 웹사이트 만들어보기
Quest4. input에 생기는 X알아보기
Quest5. background속성이 무효속성이 된 이유 알아보기

🍏 Quest1

SVG 태그

참고 블로그
MDN svg
생황코딩
svg tutorial

SVG는 2차원 그래픽을 표현하기 위한 XML 파일 형식의 마크업 언어입니다.
벡터 이미지로 CSS나 JS로 수정이 가능합니다.

• svg를 사용하게 되면 레티나나 모바일에 대응하기 위한 추가작업이 필요없습니다.

• 시각 장애가 있는 사용자가 확대해도 이미지의 품직 저하가 없어서 접근성에도 좋습니다.

그렇다면 어떻게 SVG를 사용하나요?

참고

svg 속성

마크업 언어 XML

<svg>``</svg>

svg태그 안에 있는 width와 height 값은 그림의 캔버스 사이즈를 뜻합니다.
svg 태그 안에 들어있는 속성들로 svg를 통해서 그림을 그리는 것입니다!
svg 압축

색 속성

• fill : 채우기
• stroke : 선

SVG 사용하기

svg는 img, background, object등 다양한 방식으로 문서에 삽입할 수 있습니다. 그러나 대체로 <svg>태그를 사용해서 html 파일에 적용합니다.

html 상에 코드로 들어있을 경우 이미지 로드가 필요없기에 로드되는 속도가 빠릅니다!
🏃‍♀️))

그러나 html 문서 자체가 지저분해질 수 있고, 캐싱이 불가능하다는 단점도 존재합니다.

svg 태그를 이용해서 로고에 이벤트를 추가했습니다!
이 경우 alt를 text-indent를 이용해서 추가해주어야 한다는 것을 잊지 맙시다!

CSS로 SVG 애니메이션

svg가 마크업 언어라고 했잖아요?
그렇다보니까 각 path마다 class도 존재합니다.

path들의 class 이름을 가지고 CSS tradition이나 animation을 사용한다면 움직이는 애니메이션도 만들 수 있습니다!😙

svg 애니메이션 만들어보기!

참고

🍑 Quest2

search bar : focus

transition? keyframe?

CSS로 움직임을 추가 하고 싶을 때 두가지 방법이 있습니다.
transition과 @keyframe인데요!
search bar에는 어떤 속성을 사용하는 것이 좋을까요? 🤔

search bar가 focus되면 늘어나고 blur가 되면 다시 줄어드는 움직임을 주고 싶을 때는 애니메이션보다 transition이 @keyframe보다 잘 맞는다.

keyframe의 경우 blur가 되었을 때 툭 끊겨서 돌아오게 된다.

🥑 Quest3

Responsive 🍔

Practicing..

🍅 Quest4

input type="search" ❎?

input의 타입값을 search로 주게 되면 입력했을 때 ❎표시가 뜨게 됩니다. 디자인적으로 불필요한 요소가 되기 때문에 제거 하고 싶은데 브라우저에서 생성한 것이기에 커스텀이 불가합니다.

🙄 삭제하고 싶은데 그렇다면 어떻게 하지?

이럴때 사용하는 것이 vendor prefix입니다.
브라우저의 실험적인 기능을 사용할 수 있게 해줍니다.

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

를 사용하면 ❎를 보이지 않게 할 수 있습니다.

하지만 보통 벤더픽스를 사용해서 삭제하는 방식보다는 input타입을 text로 바꿔서 사용합니다.

🌽 Quest5

user-image

div에 border-radius값을 준 뒤 back ground-image로 사진을 넣어주는 줄 알았는데 그냥 img 태그에 바로 radius 값을 주는 방법이 있었다..!

🥗 추가 Quest

오른쪽 부분에도 svg를 이용해서 이미지를 넣어주었습니다.

근데 저 🔽표시는 svg가 아닌 border로 만든 이미지더라구요..?
근데 또 색은 color 속성으로 입히고..

자세히 알아봐야 겠어요! 🤔

.dropdown-caret {
    display: inline-block;
    vertical-align: top;
    height: 0;
    width: 0;
    margin-top: 7px;
    border-bottom: 0 solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top-style: solid;
    border-top-width: 4px;
    content: "";
}

비슷한 예제

밑의 CSS 속성 같은 경우에는 rotate 를 사용해서 밑으로 모서리가 향하게 한 후 border를 top과 right에 넣어 주어서 화살표 모양을 만들었다.

    transform: rotate(135deg);
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid;
    border-right: 1.5px solid;
}