Programming/HCJ(html_css_javascript)

css tags 정리(class, id, 등등)

그렉그의 2023. 2. 8. 22:53

어제 배운 css 태그에 이어 더 적어보겠슴. 

어제 살짝 드릅게 css 정리한거 같은데 조금 더 깔끔하게 해보겠3. 

 

분류 태그 명 내용 비고
- * 모든 내용을 아우르는 태그임
<style>
*{border: 5px dashed black}
html{
background-color: tomato;
}
- class html 내 class 로 분류된 태그들을 지정함
- .class로 활용		 .btn{
padding=20px;
}
.tomato{
background-color: tomato;
}
.teal{
background-color: teal;
}
<span class="btn tomato"> hello </span>
<span class="btn teal"> hello </span>
<span class="btn tomato"> hello </span>
<span class="btn teal"> hello </span>
- id # #first{
background-color: white;
}

<span id="first">hi</span>
flexbox flex - 블락의 사이즈를 웹사이트 frame사이즈에 따라 자유롭게 움직일 수 있도록 설정함 
- (좌우)justify-content: spacebetween; - Main axis
- (위아래)align-items: center; crossborder axis
- <body>가 height 를 가지고 있지 않는다면 align item를 설정하더라도 바뀌지 않음
- 이 경우 height 를 추가할 것. ex, height: 100vh = viewport height which means 화면의 넓이가 100% 라는 것.		 justify-content: center, space-evenly;

align-center: center, flex-start, flex-end;
- flex-direction  flex-direction: column;(default인 row를 column으로 설정함)
justify-content: 수직
align-items: 수평		  
- flex-wrap flex-direction: column;
flex-direction: column reverse;
flex-direction: row reverse;		  
- flex-wrap flex-direction: wrap-reverse 창을 줄이면 3번이 위로가고 2번, 1번이 아래로 옴 
position position:fixed; 스크롤 해도 항상 제자리에 머물고, 처음 고정된 그 자리에 있음 div {
        position: fixed;
        width: 300px;
        height: 300px;
        background-color: teal;
        color: white;
      }
  position:relative; div 안에 또다른 div를 움직일때에 쓰임. 첫 기준점에서 원하는대로 수정 가능 
div를 작은 박스의 relative 로 만드는 방법
첫 디브
div{
position: relative;}로 설정하면 됨		  
pseudo selector div
:를 사용하여 각 element에서 특정한 놈을 지정해줌
  • <div>
 div:last-child {
        background-color: teal;
      }
      div:first-child {
        background-color: tomato;
      }
    </style>
  </head>		  
  span <span>
span 
        background-color: tomato;
      }
      span:nth-child(even,odd, 2n+1) {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
  </body>
</html>		  
  p + space + span p안의 span 찾기
p span {
background-color: teal;}

  
  p+ + + span p 바로 다음의 span 찾기
p+span {
background-color:teal};		  
  P + ~ + span p 다음으로 다른 element가 오고 오는 첫 span
p~span{
background-color:teal;}		  
:: input::placeholder :: 두개 써야 됨
- Placeholder가 있는 element 를 바꾸고 싶을 때 		  
  input::selection 웹에서 커서로 긁을 때 적용 됨  
  input::first-letter 첫 글자에만 작용  
  input::first-line 첫 줄에만 작용  
input input[placeholder="name"] name이 언급된 모든 element
input[placeholder="name"]{
background-color: teal;}

name이 들어간 모든 element
input[placeholder~="name"]{
background-color: teal;}		  
  input:Required{} input:required{
background: teal;}		  
form hover form에 hover 할 때, 나의 인풋은,
form:hover input {
background-color: slateblue;
}

또는 

form:hover input:focus {
background-color: teal;
}

 a:visited {
        color: gray;
      }
      a:hover {
        color: white;
      }
      a:focus {
        color: green;
      }
    </style>
  </head>
  <body>
    <a href="https://apple.com">go to apple
  </body>		  
ease in function linear 변화의 속도가 같음  
  ease-in 시작과 끝이 빠름  
  ease-out 시작과 끝이 느림  
  ease-in-out 시작이 빠르고 끝이 느림  
Transformation  transformation margin, padding이 적용되지 않음 왜냐면 3d transformation이기 때문임
다른 요소의 box를 변형시키지 않고 원하는 요소만 이동시킬 수 있음		  
@keyfrmaes @keyframes supersexycoinflip {
from {transform: rotateX(0);}
to {transform: rotateY(360deg);}
}		 애니메이션 만들때 
@keyframes 라고 적으면 됨
@keyframes supersexycoinflip {
from {transform: rotateX(0);}
to {transform: rotateY(360deg);}
}

애니메이션을 설정 후 애니메이션을 줄 요소에
 img {animation: supersexycoinflip 5s ease-in-out;} 이렇게 적으면 해당 에니메이션 5초 동안 작동.

맨뒤에 infinite를 쓰면 5초 동안의 애니메이션이 무한으로 반복.

@keyframes supersexycoinflip {
        0% {
          transform: rotateY(0);
        }
        25% {
          transform: scale(2);
        }
        50% {
          transform: rotateY(180deg) translateY(-100px);
          border-radius: 0px;
          border-color: tomato;
        }
        75% {
          transform: scale(2);
          border-radius: 20px;
        }
        100% {
          transform: rotateY(0);
        }
      }

  
media @media @media screen and (max-width:400px){
div{
             background-color: tomato;
      }
}

- Media query는 사용자의 screen을 가늠할 수 있음는 
- @media screen and (max-width: 00px) {} --> 00픽셀부터는 다르게 보아라
- media screen에 (orientation: landscape): 세로/가로 모드 구별 가능