tequila.log https://velog.io/ 프론트엔드 개발자로 자라나는 중 입니다만.. Fri, 22 Apr 2022 05:32:15 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed tequila.log https://velog.velcdn.com/cloudflare/tequila_kong/9f224b3d-dfd9-438e-adf8-673380d8034d/social_profile.png https://velog.io/ Copyright (C) 2019. tequila.log. All rights reserved. <![CDATA[VS Code 주석(ctrl+/) 오류 날 때 해결방법]]> https://velog.io/@tequila_kong/VS-Code-%EC%A3%BC%EC%84%9D-%EC%98%A4%EB%A5%98-%EB%82%A0-%EB%95%8C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95 https://velog.io/@tequila_kong/VS-Code-%EC%A3%BC%EC%84%9D-%EC%98%A4%EB%A5%98-%EB%82%A0-%EB%95%8C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95 Fri, 22 Apr 2022 05:32:15 GMT 어이없지만 윈도우에서 '한컴 입력기' 상태로 설정되어 있으면 주석처리(ctrl+/)가 먹통이 된다.

'Microsoft 입력기'로 바꿔주면 다시 정상적으로 작동한다!

]]> <![CDATA[CSS - 배경(background)]]> https://velog.io/@tequila_kong/CSS-%EB%B0%B0%EA%B2%BDbackground https://velog.io/@tequila_kong/CSS-%EB%B0%B0%EA%B2%BDbackground Sat, 09 Apr 2022 07:10:01 GMT

전체개요

background 속성은 태그의 배경을 지정하는 속성. font 태그와 비슷하게 세부 속성들을 한 번에 쓸 수 있음.

1. background-color

배경색을 의미. 태그의 크기가 없을 경우 배경색은 표기되지 않음.

2. background-image

  • 기본값: background-image의 크기는 원본 사이즈 그대로 표시되며, 컨테이너 크기보다 작으면 이미지는 반복되어 표시됨.

    < 문법 >

    • background-image:url('이미지 경로'); **

3. background-size

배경 이미지의 가로 크기와 세로 크기를 정할 수 있음

  • 기본값: auto
  • 상속: no
  • 애니메이션: yes
  • 버전: css level3

< 문법 > ** background-size: auto | length | cover | contain | initial | inherit **

  • auto: 이미지 크기를 유지 (이미지가 컨테이너 사이즈보다 클 경우 이미지 잘림)
  • length: 값을 두 개 넣으면 첫 번째 값이 가로 크기, 두 번째 값이 세로 크기. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해짐. 백분율을 사용할 수도 있음.
  • cover: 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소. 가로 세로 비율 유지.
  • contatin: 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 or 축소. 가로 세로 비율 유지. (조정된 이미지가 컨테이너보다 작을 경우 남은 여백에 이미지 반복됨)

TIP: 백분율로 크기를 정할 때의 기준은 이미지 크기가 아니라 배경을 사용하는 요소의 크기임

4. background-repeat

  • 기본값: 컨테이너보다 작은 이미지를 사용하면 이미지가 반복되어 출력.

    < 문법 >

    • background-repeat: no-repeat | repeat-x | repeat-y | repeat **

      5. background-position

배경 이미지의 좌표를 수정할 수 있음

  • 기본값: 왼쪽 위부터 이미지 출력
  • 속성값: pixel(px), left, top, center, bottom, right
  • 입력방법: 띄어쓰기를 기준으로 x좌표, y좌표 지정

< 문법 > ** background-potition: x좌표 y좌표; **

참고 사이트

6. background-attachment

배경 이미지의 스크롤 여부를 정함

  • 기본값: scroll
  • 상속: NO
  • 애니메이션: NO
  • 버전: css level1

< 문법 > ** background-attachment: scroll | fixed | local | initial | inherit; **

  • scroll: 바깥을 스크롤하면 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지는 스크롤되지 않음.
  • fixed: 움직이지 않음.
  • local: 바깥을 스크롤하면 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지도 스크롤됨.

참고 사이트

]]> <![CDATA[CSS Selector - 등위선택자, 상태 선택자, 반응선택자(1)]]> https://velog.io/@tequila_kong/CSS-selector1 https://velog.io/@tequila_kong/CSS-selector1 Tue, 05 Apr 2022 16:21:35 GMT comments css 공부한 내용을 정리하려다가 우연히 발견한 @teo님의 글! 무려 css에 대해 얼마나 알고 있는지 자가진단할 수 있는 체크리스트였다.

https://velog.io/@teo/css-self-checklist

마른 하늘에 단비같은 이 가이드 덕분에 배운 내용을 어떻게 정리할지 가닥이 잡힌 듯 하다.

🔰 selector가 뭔지 알고 있다. 🔰 id selector가 뭔지 알고 있다. 🔥 class selector가 뭔지 알고 있다. 🔥 Universal selector가 뭔지 알고 있다. 🔰 하위 요소를 선택할 수 있다. 🔰 a의 target attribute가 "_target"인 노드만 스타일을 적용할 수 있다. 🔰 자식 노드를 선택할 수 있다. 😎 인접 노드 선택자를 알고 있다. 😎 범위 지정 선택자를 알고 있다. 🔥 마우스 hover시 색상을 바꿀 수 있다. 🔰 Pseudo class를 알고 있다. 😎 드래그 했을때 선택영역의 색상을 바꿀 수 있다. 😎 input의 placeholder 색상을 바꿀 수 있다. 🔰 Pseudo element를 알고 있다. 🔰 ::after나 ::before 그리고 content를 알고 있다. 😎 ::after나 ::before 그리고 content에서 실전에서 사용되는 팁을 알고 있다. 🔥 :root를 알고 있다.

1. 등위선택자(형제선택자)

유형 해석
A~B A에 해당하는 태그와 동등한 위치에 있는 B 선택
A+B A에 해당하는 태그와 동등한 위치에 있는 바로 인접한 태그 
<style>
      h2~ul {
        color: blue;
        list-style: none;
    h2+ul {
        background: pink;
            }
  </style>
<html>
<body>
  <h2>장바구니</h2>
  <ul>
    <li>사과</li>
    <li>당근</li>
    <li>두부</li>
  <ul>
  <h3>생필품</h3>
  <ul>
    <li>칫솔</li>
    <li>휴지</li>
    <li>도마</li>
  <ul>
  <h2>저녁메뉴</h2>
  <ul>
    <li>김치찌개</li>
    <li>장조림</li>
  <ul>
    </body>
    </html>

👉🏻 출력물

2. 상태선택자

:상태 선택자는 보통 form 태그에서 input 태그의 특정한 상태에 대해 CSS 속성을 지정 할 때 사용

유형 해석
input:focus focus가 된 input 태그를 선택
input:enabled 입력이 가능한 input 태그를 선택
input:disable 입력이 불가능한 input 태그를 선택

3. 반응선택자

: 반응 선택자는 웹 페이지를 보는 사용자가 마우스로 특정한 행동을 취했을 때 CSS 속성을 지정 할 수 있는 선택자를 의미

유형 해석
h1:hover h1태그에 마우스를 올려놓으면 선택
a:active a태그에 마우스를 클릭하면 선택
a:visited link를 클릭하여 방문하였을 때 선택
a:link 한 번도 안 가본 링크일 때 선택

<참고자료> https://lktprogrammer.tistory.com/99?category=673476

]]>