< 친구한테 배운거>
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; [변하는 속도]
[띄어쓰기, 공백문자]
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); [기록을 남김]
'기초코드' 카테고리의 다른 글
| ★기본 CSS노말라이즈★ (0) | 2022.10.21 |
|---|---|
| 인라인 그리드, 이미지 박스 (0) | 2022.10.21 |
| 메뉴박스 노말라이즈 (0) | 2022.10.20 |
| 주석표 (0) | 2022.10.19 |
| 부트스트랩 시작템플릿(JQuery 포함) (0) | 2022.10.19 |