★자주 사용하는 기초태그 모음★

< 친구한테 배운거>

posision:fixed; [메뉴박스 고정하고 싶을때]

line-height : 150%; [글자간격]width: calc(100% - 150px); [비율에서 고정값 빼기]

 

<폰트어썸>

<script src="https://kit.fontawesome.com/f1e32eaf40.js" crossorigin="anonymous"></script>

 

< CSS 노멀라이징 >

*{
  margin:0;
}
html, body {
  height:100%;
}

<배경3종세트>

background-image: url("#"); [배경 이미지]
background-size: cover; 
background-position: center;

<정렬4종세트>

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

 <이미지 사이즈 맞추기>

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
}

 

<이미지에 그림자 주기>

img:hover{
    box-shadow:0 10px 10px rgba(0,0,0,0.3),
    0 14px 28px rgba(0,0,0,0.3);
}

 

box-sizing:border-box; [박스사이징]

 

 

div, section, article, nav [엘리먼트]

 

color : rgba(255,0,0,0.5); [글자색 변경]

background-color : red; [배경색 변경]

 

font-weight : bold; [폰트 변경]

font-size : 10rem; [글자크기 변경]

letter-spacing : 10px [글자자간 변경]

 

dispaly : inline-block; [글자화, 블럭화]

width : 500px; [너비] 

height : 500px; [높이]

border : 10px solid red; [테두리 만들기]

 

<a href = "#" target="_blank"> </a> [링크걸기]

 

div : hover [커서를 올렸을때 변화]
transition : width 1s; [변하는 속도]
&nbsp; [띄어쓰기, 공백문자]
text-decoration : none; [글자효과]
text-align : center; [글자 정렬]

object-fit:cover; [이미지 비율맞춤]
vertical-align:  top; [위로 정렬]
padding : 10px; [패딩(안) 넣기] (top, bottom, left, right)
margin : 10px; [마진(밖) 넣기]
div: nth-last-child(3) [순서정하기]
div: nth-of-type(3) [같은 타입중 순서정하기]

 

 

 

<JS>

console.clear(); [지운다]

console.log(1); [기록을 남김]