오늘 내가 배운 것
1. CSS 선택자
~ 결합자
부모가 같은 형제 태그를 선택할 수 있다.
input[type=”checkbox”] {}
input 태그에서 타입이 체크박스인 요소를 선택
2. HTML
HTML에서 클래스를 2개 적용시키기
2가지 클래스 사이에 띄어쓰기를 사용한다.
ex) class=”aa bb”
html - table 엘리먼트
행과 열로 이루어진 표를 만든다.
<tr> 1줄(행)
<td> or <th> 1칸(열)
th : 머리글 기본적으로 굵고, 가운데 정렬되어있다. (제일 위에 각 칸에 종류를 만들 때 사용)
border-collapse: collapse;
테두리를 겹치게 한다.
border: 1px 테두리를 그리면 겹치는 부분이 2px 되는 것을 방지한다.
3. !imprtant
!imprtant
CSS에서 가장 우선순위를 주기 위한 방법
(필살기…남발하지 말자! )
p {
color: red !important;
}
4. box-shadow
box-shadow
블럭의 그림자를 만드는 속성
box-shadow : 1, 2, 3, 4, 5, 6 ;
속성 값
- x축 위치 조절
2.y축 위치 조절
3.blur
4. 그림자 크기
5. 그림자 색상
6. 안쪽 그림자
더보기
HTML + style 태그를 이용한 CSS
<!DOCTYPE html>
<html lang="en">
<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>board</title>
<style>
*{
margin: 50px;
padding: 50px;
}
ul,li {
list-style: none;
}
table{
width: 800px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-collapse: collapse;
}
table th {
padding: 14px 21px;
background: #ececec;
color: #666;
font-size: 12px;
border-top: 2px solid #333; /*웹 대표색 써도 될듯.*/
border-bottom: 1px solid #ddd;
/* 자주 쓰이는 색상코드
#efefef
#eeeeee
#ececec
#cccccc
#dddddd
#333333
#666666
#999999
*/
}
table td {
text-align: center;
padding: 14px 21px;
border-bottom: 1px solid #ddd;
color: #666;
}
tr:hover {
background: #eee;
cursor: pointer;
}
.subject {
width: 45%;
text-align: left;
}
.paging {
padding: 20px 0;
width: 800px;
}
.paging> ul{
display: flex;
justify-content: center;
align-items: center;
}
.paging > ul > li {
padding: 5px ;
box-sizing: border-box;
border: 1px solid #dfdfdf;
background: #efefef;
border-radius: 13px;
font-size: 12px;
margin: 10px;
}
.paging > ul > li:hover{
background: #333;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
<tr>
<td>1</td>
<td class="subject">hi</td>
<td>swkd082</td>
<td>2022-10-26</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td class="subject">hello</td>
<td>dnnz144</td>
<td>2022-10-26</td>
<td>0</td>
</tr>
<tr>
<td>3</td>
<td class="subject">안녕</td>
<td>kim113</td>
<td>2022-10-26</td>
<td>1234</td>
</tr>
</table>
<div class="paging">
<ul>
<li>prev</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>next</li>
</ul>
</div>
</body>
</html>
더보기
HTML
<!DOCTYPE html>
<html lang="en">
<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>pop up</title>
<link rel="stylesheet" href="./221026/public/css/popup.css">
</head>
<body>
<div id="layer">
<div id="content">
<h2>로그인</h2>
</div>
</div>
<div id="wrap">
<div id="header">
<h1>
logo
</h1>
<ul>
<li>menu</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
}
#layer{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(0,0,5,0.3);
}
#layer > #content{
position: relative;
width: 600px;
height: 500px;
box-shadow: 10px 10px 10px 2px #000;
background: #fff;
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221028 JavaScript(JS) - 자바스크립트의 특징 /자바스크립트 변수와 상수 / 자바스크립트 기본 연산자와 데이터 타입 / 자바스크립트 변수명 표기법 (0) | 2022.10.28 |
|---|---|
| 221027 로그인 팝업 만들기 - form태그 / CSS-before, after / 반응형 웹 만들기 - 미디어쿼리 (0) | 2022.10.27 |
| 221025 HTML/CSS 를 이용한 애니메이션 효과-학원 홈페이지 클론코딩 (0) | 2022.10.25 |
| 221022 네이버 회원가입 클론코딩 (0) | 2022.10.23 |
| 221021 CSS와 네이버 클론코딩 (0) | 2022.10.21 |
댓글