Web/HTML&CSS

CSS | 자주 쓰는 Tag들의 CSS 속성

일렁이는코드 2021. 9. 6. 00:40
width/ height
text
font
border / background-color / background-image
transition
filter

width/ height

%로 width,height 값을 표현할때는 바로 상위 태그에 있는 width, height값의 %로 설정이 된다.

 

text

.p{
font-size: 30px;
coloe: red;
text-align : center;
text-decoration: underline;
text-transform: uppercase; //영문자를 모두 대문자로 변환, lowercase는 소문자로 변환해줌
line-height: 3; //줄간격
letter-spacing: -1px; //문자사이의 간격

-webkit-text-stroke: 1px black; //문자 자체에 외곽선 씌우기
}

 

font

.p{
font-family: 'Noto Sans KR', sans-serif;
font-size: 30px;
font-weight: 800; // bold,thin .. 보통은 수치로 조정 
}

🪐 웹 폰트 설정하기 (https://fonts.google.com/)

사용하고 싶은 폰트를 선택하여 <link>내용은 html <head> 태그 안에, CSS rules to specify families 내용은 css에 추가해준다. 사용하고자 하는 굵기가 다양한 경우에는 여러개 다 선택한 후 링크 복사!
추천 = 영> montserrant / 한> noto sans

 

 

border / background-color / background-image

.box{
  width: 400px;
  heignt: 500px;

  border: 1px solid black;
  border-bottom: 0.2px solid skyblue;
  border-radius: 30px; 

  background-color: pink;
  background-image: url('/images/test.png');
  background-size: contain; //이미지의 가로 사이즈를 width값에 맞춰 줄이기
  background-size: contain; //이미지의 세로 사이즈를 height값에 맞춰 줄이기
}

 

transition

어떤 이벤트를 일으킬 때 동적인 효과를 내줄수 있는 기능

p{
  font-size: 30px;
  color: black;
  text-align: center;
}

p:hover{
  color: skyblue;
  font-size: 35px;
  trasition: 2s; //위에 설정한 모든 변화에 대하여 2초 안에 서서히 변화시키기
  trasition-delay: 1s; //1초 있다가 진행
  transition-timing-function:linear; //애니메이션 효과를 낼때 어떠한 속도로 진행을 할 지에 대한 기능
}

🪐 transition-timing-function의 추가기능 (https://matthewlein.com/tools/ceaser)

 

filter

.myfilter img {
    filter: blur(48.86px) brightness(2.25) sepia(0.53) ;
}

 

🪐 filter 미리 적용해보기 (http://www.cssfiltergenerator.com/)

 

반응형
저작자표시 비영리