카카오 클라우드 스쿨 수료 기념.. 강의를 들으며 적어둔 내용을 다시 기록해보려고 한다.
| 기간 | 230509 - 230512 |
| 배운 내용 | HTML, CSS |
1. 태그
시멘틱 태그 : <header>, <article>과 같은 태그. 보여지는 모습에선 차이 없고, html 사용하는 쪽에 정보 전달용
테이블 태그 : table 태그 안에 tr, td, th를 넣어 표를 만듦. 테이블은 table로, 행은 tr로, 셀은 td로 표시
2.표 생성
colspan = 칼럼을 몇 개 쓸 건지. n열 합쳐서 나옴
rowspan = 로우를 몇 개 쓸건지. n행 합쳐서 나옴
실습 : 다음과 같은 표 만들어보기
구현 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="400" height="200">
<tbody>
<tr><td rowspan="4" bgcolor="skyblue" valign=top>일</td></tr>
<tr><td colspan="3" bgcolor="pink">이</td></tr>
<tr><td colspan="2" bgcolor="pink">삼</td><td rowspan="3" bgcolor="skyblue" valign=bottom>사</td></tr>
<tr><td>오</td><td>육</td></tr>
<tr><td colspan="3" bgcolor="pink">칠</td></tr>
</tbody>
</table>
</body>
</html>
3. 속성 선택자
, 둘 다 선택
공백 자손들
> 손자 말고 자식들만
+ 형제들 중 바로 다음에 있는 거 (br도 형제로 포함)
a ~ b a이후 나오는 모든 형제
|a a 또는 a-로 시작하는
^=a a로 시작하는
$=a a로 끝나는
4. p 와 span
p 사용하면 블록이라 자동 줄 바꿈
줄 바꾸기 싫으면 span
실습 : tab menu 구현
구현 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: sans-serif;
font-size: 0.75em;
color: #333;
}
.tab-box{
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 520px;
}
ul{
list-style-type: none;
height: 27px;
}
li{
float: left;
width: 100px;
height: 22px;
border: 1px solid #999;
background-color: #ccc;
margin-right: 2px;
text-align: center;
padding-top: 3px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tab-view{
width: 520px;
border: 1px solid #595959;
margin-top: 1px;
text-align: center;
line-height: 200px;
}
.tab-box li:hover{
background-color: orange;
}
</style>
</head>
<body>
<div class="tab-box">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
<div class="tab-view">탭뷰입니다.</div>
</div>
</body>
</html>'클라우드 스쿨 > 강의 정리' 카테고리의 다른 글
| 6주차 - JAVA (0) | 2023.11.22 |
|---|---|
| 5주차 - React (0) | 2023.11.21 |
| 4주차 - Node.js (0) | 2023.11.20 |
| 3주차 - AWS, Node.js (0) | 2023.11.19 |
| 2주차 - CSS, JavaScript (0) | 2023.11.17 |