반응형
인프런에서 '파이널 코딩테스트' 강의가 괜찮아보여서, 배운 것도 복습할 겸 2주간 격리 기간에도 할 일을 만들 겸 하고 듣고 있다. 간만에 리액트를 쓰지 않고 순수하게 html로만 파일을 작성하는게 낯설기도 했는데, 그중에서 헷갈렸던 것과 새롭게 알게된 것들을 정리한다.
CSS, HTML 정리
<li>태그 옆에 <li>태그가 있을 때만 마진을 주고 싶다
li+li {
margin-left: 60px;
}
<dl> tag 는 설명 목록을 나타낸다. <dt> - title 과 dd - description를 자식 요소로 취할 수 있다. <dl> > <div>를 자식으로 취할 수 있으며 <span> 은 자식으로 취하는 것이 바람직하지 않다.
태그의 특정 클래스를 가진 요소에만 CSS 를 적용하고 싶을 때,
div[class^="hello"] {
font-size: 20px;
}
특정 너비를 초과할 경우, 말줄임표를 표기하고 싶을 때,
.sl-ellipsis {
display:block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}
두 줄을 넘어갈 경우, 말줄임표를 표기하고 싶을 때,
.multi-ellipsis{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
자주 쓰는 색깔이나 크기 등등을 변수로 지정하고 싶을 때,
:root {
--grey6: #f2f2f2;
}
.mov-body {
color: var(--grey6);
}
style.css을 html에 적용하고 싶을 때, <head>tag에 넣어야 한다.
<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>
<!-- font CSS -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;900&family=Roboto:wght@500;700;900&display=swap');
</style>
<!-- style CSS -->
<link rel="stylesheet" href="./src/style/reset.css">
<link rel="stylesheet" href="./src/style/style.css">
<!-- icon CSS -->
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
</head>
반응형
'2. 우당탕탕 개발자 > 2-1. 공부기록' 카테고리의 다른 글
| 2021.08.28 TIL(뮤직플레이어 앱 만들기) (0) | 2021.08.29 |
|---|---|
| 2021.08.24 TIL (CSS, 좌표 정렬 알고리즘 3) (0) | 2021.08.24 |
| 2021.8.21 TIL (정렬 3가지 알고리즘 문제) (0) | 2021.08.21 |
| 2021.8.14 TIL(선택 정렬, 버블 정렬) (0) | 2021.08.14 |
| 2021.8.13 TIL (stack, queue 를 이용한 알고리즘 3) (0) | 2021.08.13 |
댓글