프론트엔드 3일차 CSS(메뉴 예제, background속성, 다단 예제, 테이블 관련 속성, 텍스트 수직 정렬, 테이블 관련 속성, 테이블 예제)
2024. 1. 15. 17:09ㆍ프론트엔드
1. 메뉴 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6_메뉴예제</title>
</head>
<style>
*{margin: 0; padding: 0;}
.menu{border: 2px solid red; list-style: none;}
.menu::after{clear: both; content: ''; display: block;}
.menu-item{float: left;height: 50px; width: 33.33%; box-sizing: border-box;}
.menu-item+.menu-item{border-left: 2px solid red;}
.menu-link{
display: block;
height: 100%;
font-size: 20px;
text-align: center;
line-height: 50px;
color: black;
text-decoration: none;
}
.menu-link:hover{
color: red;
}
</style>
<body>
<nav>
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link">메뉴1</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">메뉴2</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">메뉴3</a>
</li>
</ul>
</nav>
</body>
</html>2. background 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background 관련 속성</title>
<style>
[class^=box]{width: 300px; height: 300px; padding: 50px;}
.box1{
height: 300px; width: 300px;
border: 20px solid transparent;
padding: 50px;
background-color: yellow;
background-clip: border-box;
}
.box2{
border: 1px solid black;
background-image: url(https://cdn.imweb.me/upload/S201910012ff964777e0e3/62f9a36ea3cea.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: 0px 0px;
background-origin: content-box;
background-attachment: scroll;
background-image: url(https://cdn.imweb.me/upload/S201910012ff964777e0e3/62f9a36ea3cea.jpg)
no-repeat fixed 0 0 content-box contain;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>3. 다단 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다단 속성 예제</title>
<style>
.container{
/* column-count: 2; */
column-width: 600px;
/* 단 사이의 여백을 지정 */
column-gap: 100px;
/* 다단 사이의 효과를 주기 위한 속성 */
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 3px;
}
/* 단 합치기 */
.column-span{
column-span: all ;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
긴 글 아무거나 abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abcabc abc abc abc abc abc abc abc abc abc abc abcabc abc abc abc abc abc abc abc
</div>
<div class="item">동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
2
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
3
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
4
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세</div>
<div class="item column-span">
비행기를 타고 아프리카 사막을 여행하고 있던 조종사가 비행기 고장으로 사막에 불시착을 하게 된다. 아무도 없을 것 같던 사막에서 생사를 고민하던 중 우연히 한 소년을 만나게 된다. 조종사는 이 소년과 대화하던 중 그가 다른 별에서 왔다는 것을 알게 되었다. 어린왕자는 B612라는 작은 혹성에서 살았는데 우연히 만난 장미에게 사랑을 느끼지만 장미는 어린왕자에게 상처만 줄 뿐이었다. 그때 어린왕자를 찾아온 사업가를 통해 다른 별의 이야기를 전해 듣고 더 큰 세상을 알면 장미의 행동을 이해할 수 있으리란 생각을 하며 여행을 결심한다.
어린왕자는 여러 별을 여행하며 사람들은 만나지만 모두 이해할 수 없는 생각과 행동을 할 뿐이라고 생각한다.
자신의 권위가 무엇보다 중요했던 어느 왕,
자기를 칭찬하는 말 이외에는 들으려 하지 않는 허영심 많은 사람이 살고 있는 별
술 마시는 것이 부끄럽지만 그것을 잊기 위해 다시 술을 마신다는 술꾼이 사는 별.
하늘에 보이는 5억 개의 별이 모두 자기 것이라 주장하는 과대망상증 상인이 있는 별
그리고 별이 작아서 그럴 필요가 없는데도 계속 1분마다 불을 켜고 끄는 이상한 사람이 사는 별
지리학자지만 한 번도 산과 강을 본 적이 없다는 지리학자의 별을 방문하게 된다.
그리고 지구에서 만난 수많은 꽃과 여우!! 이를 통해 세상에는 같은 장미가 있지만 어린 왕자가 아끼며 돌보던 장미는 이 세상이 하나밖에 없음을 여우를 통해 깨닫고 자기의 별로 돌아갈 것을 결심한다.
비행기 수리를 끝낸 조종사는 자신과 함께 가자고 권하지만 어린왕자는 가시 4개로 자신을 보호하려는 꽃이 너무 안쓰러워서 그를 돌봐주러 가야겠다고 말하며 뱀의 독을 이용하여 지구를 떠나게 된다. 죽게 된다. 시간이 흘러 6년 후 하늘의 수많은 별들을 볼 때마다 어린왕자가 어딘가에 살고 있으리라는 희망을 품는다.
어린왕자 명대사
1. 세상에서 가장 어려운 일은 사람이 사람의 마음을 얻는 일이다.
2. 넌 네가 길들인 것에 대해 언제까지나 책임을 져야 하는 거야.
3. 사막이 아름다운 건 어디엔가 오아시스를 감추고 있기 때문이야.
4. 누군가에게 길들여진다는 것은 눈물을 흘릴 일이 생긴다는 것인지도 모른다.
5. 다른 사람에게는 결코 열어주지 않는 문을 당신에게만 열어주는 사람이 있다면 그 사람이야 말고 당신의 진정한 친구이다.
6. 가장 중요한 건 눈에 보이지 않아
7. 너의 장미꽃이 그토록 소중하게 된 것은 네가 그 꽃을 위해 공들인 시간 때문이야.
8. 내가 좋아하는 사람이 나를 좋아해 주는 건 기적이야
9. 조금 좋아하는 것은 절대 사랑일 수 없다. 너무 쉽게 사랑한다고 하지 마. 사랑한다는 말은 진실을 위해 아껴야 해.
10. 어른들은 누구나 처음에는 어린이였다. 하지만 그것을 기억하는 어른은 별로 없다.
11. 만약 네가 오후 4시에 온다면, 나는 3시부터 행복해질 것이다.
</div>
</div>
</body>
</html>4. 테이블 관련 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 관련 속성</title>
<style>
/*
caption-side
- 캡션 위치 선택
border-collapse
- td태그에 테두리를 지정하면 각각 테두리가 생겨 테두리 사이에 공백이 생기는데
합쳐서 하나로 표시할지 두개로 표시할지 결정하는 속성
*/
/*
border-spacing
- border-collapse가 seperate일 때, 테두리 사이에 여백의크기를 지정하는 속성
table-laout
- 요소의 내용이 길어지는 경우 요소의 크기가 내용에 비례해서 커지게 할건지 말건지 정하는 속성
- fixed이면 내용이 길어져도 크기가 고정
*/
table{
caption-side: bottom;
width: 100%; border: 1px solid black;
/* 테두리가 합쳐지는 속성 */
border-collapse: separate;
border-spacing: 20px 10px;
vertical-align: bottom;
table-layout: fixed;
}
td, th{
border: 1px solid black;
}
tr>th:first-of-type{
width: 40px;
}
tr>td:nth-of-type(2){white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>
</head>
<body>
<table>
<caption>게시글</caption>
<tr>
<th class="num">번호</th>
<th>제목</th>
<th>조회수</th>
</tr>
<tr>
<td>2</td>
<td>게시판 가입 인사 게시판 가입 인사 게시판 가입 인사 게시판 가입 인사 </td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>공지사항</td>
<td>10</td>
</tr>
</table>
</body>
</html>5. 텍스트 수직정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 수직 정렬 예제</title>
</head>
<style>
.box{border: 1px solid black;}
.box>img{vertical-align: top;}
.box{border: 1px solid black;}
.text{vertical-align: top;}
</style>
<body>
<div class="box">
<img src="https://cdn.imweb.me/upload/S201910012ff964777e0e3/62f9a36ea3cea.jpg">
</div>
<div class="box1">
<img src="https://cdn.imweb.me/upload/S201910012ff964777e0e3/62f9a36ea3cea.jpg">
<span class="text">안녕하세요</span>
</div>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 4일차 CSS(애니메이션 속성, opacity, overflow, 회원가입, 구조) (0) | 2024.01.18 |
|---|---|
| 프론트엔드 3일차 CSS(그라데이션 예제, transform 속성, transition예제) (0) | 2024.01.15 |
| 프론트엔드 2일차 CSS(테두리 관련 속성, 박스 그림자, 여백, position, visivility, z-index, float) (1) | 2024.01.15 |
| 프론트엔드 2일차 CSS(문단 관련 속성, 말줄임, 목록 관련 속성, 크기 속성, display) (1) | 2024.01.15 |
| 프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성) (0) | 2024.01.15 |