CSS 삽질기록

여기에는 CSS를 다루면서 삽질한 기록을 남겨보려고 합니다..

1. color비교방법

color를 비교할 경우엔 #ffffff 이 아닌 rgb방식으로 해야함. console에 style.color를 찍어보면 rgb로 표현하기 때문에

　

2. JS에서 색을 자연스럽게 변하게 하기

      transition: color 0.5s  ease-in-out;

3. window화면 전체를 크기로 하는 방법

bodytag 안에 있는 tab를 window크기에 맞추고 싶다면 아래와 같이 코딩하면 됩니다.
body태그의 자식 태그가 position : absolute로 할경우 body태그를 기준으로 크기를 잡기 때문에 그런 것 같습니다.

   .main--container {
    position: absolute;
    width : 100%;
    height : 100%;
  }

4. transition

태그의 길이를 자유롭게 줄이거나 늘릴 때 사용합니다. hover,focus같은 상황에 width를 지정해 놓고 transition을 적어놓으면 hover혹은 focus됐을 경우에 자연스럽게 width가 변경되는 것을 확인할 수 있습니다.

input[type=text] {
    animation : fadeLong 0.3s linear;
    transition: width 0.2s;
  }
  input[type=text]:hover,input[type=text]:focus{
      width : 250px;
      outline: none;
  }

5. box-sizing: border-box;

패딩을 넣어서 tag의 크기가 커졌을 때 위 스타일을 적용하면 박스의 크기에 패딩이 포함되기 때문에 크기가 변하지 않습니다. 　

6. 화면 전체를 잡고 싶다면

height : 100vh;

7. flex-box에서 width를 지정해주지 않으면 글자가 overflow된다…. 글자를 내리고 싶으면 그 글자가 들어있는 tag의 width를 정해줄 것 width 가 넘으면 flex-wrap이 자동 적용

8. inline style

inline style을 적용할 때는 style="color: red; font-size: 20px;"와 같이 ;를 붙혀야 한다.

css를 작성할 때는 inline으로 작성하는 것이 아니라 style로 빼는 것이 좋다. style로 빼는 것 보다 css 파일형태로 빼는 것이 더 좋다.

link

link 태그를 작성할 때는 type과 rel을 작성해야한다. type=text/css

rel=stylesheet

위처럼 해야한다.

9. 대문자로 바꾸기

text-transform: uppercase;

10. id 와 class의 우선순위

id와 class에서 style을 사용하면 우선순위로 걸리는 것은 id가 우선으로 적용된다.

11. class 와 tag의 우선순위

index.html

<h1 class="title cursive capitalize" >Top Vacation Spots</h1>

style.css

h1 {
  color: maroon;
}
.capitalize {
  text-transform: capitalize;
}

이렇게 하게 될경우 h1 style은 적용되지 않는다.

important

css적용 우선순위는 id > class > tag 순서이다. (경로를 상세하게 명세하는 경우도 우선순위가 높음)
하지만 id보다 더 우위에 있는 것이 있다. 바로 important이다.
important는 id보다 더 우선순위에 있다. 모든 css를 overriding한다.

그만큼 강력하면서도 위험하다는 얘기다. important가 적용된 tag에는 다른 어떤 css도 적용되지 않는다.

그렇다면 important를 사용해야할 때는 언제일까?

도저히 overriding으로 css를 바꾸기 힘들경우 important로 덮어씌어버리면 된다. 하지만 나중에 추가적으로 overriding해야한다면 위험할것 같음.

12. multi selecter

여러개의 셀렉터에 같은 css를 적용하고 싶을 때 사용하는 방법이다.

h5, p {
	font-family:Georgia;
}

13. 스타일 컴포넌트 url 이미지

  • component props 값 넣어주기 
     <Card img={img}>
  • props 값을 url로 사용하기 
     background-image : ${props => `url(${props.img})`};

14. 스크롤 바 보이지 않게 하기

.portfolio-list::-webkit-scrollbar {
  display: none !important;
}

15. 태그 작성 단축키

div.className>ul.list>li.list-item*3

라고 적으면 아래와 동일함.

<div class="className">
      <ul class="list">
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
      </ul>
    </div>

16. 배경 이미지 중앙에 위치시키고 사이즈 맞추기

background-size: cover;
  background-position: center center;