vscode를 쓰면서 유용하게 썻던 스니펫 기록 📝
스니펫 셋팅에 대한 설명은 이전 글을 참고해주시면 됩니다
https://velog.io/@seungmimi/VScode-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0
1. HTML_선언
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
</html>2. HTML_임시 이미지 삽입
*Placehold.it: 임시이미지를 url형식으로 삽입 할 수 있는 서비스
*Placehold.it: 임시이미지를 url형식으로 표시 할 수 있는 서비스
<img src="http://placehold.it/200x150" alt="">
<!--
<img src="http://placehold.it/가로x세로/색깔 지정" alt="">
-->3. CSS_말줄임 처리
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;4. CSS_말줄임 처리(2줄이상)
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;5. CSS_아이콘
마크업을 할 때 아이콘 같은 경우는 태그에 배경으로 아이콘 이미지를 지정하는 식으로 작업을 하는데, 위 처럼 처리 하기 위한 사전 셋팅이다
.icon {
vertical-align:middle;
display:inline-flex;
background-size:contain;
background-repeat:no-repeat;
}
.icon::before {
display:inline-block;
content:'';
vertical-align:middle;
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
/*실제 아이콘 스타일 지정*/
.icon_name{
width: ;
height: ;
background-image:url('');
}
frontend 개발을 공부하고 있습니다