Programming Language/HTML&CSS
CSS (1)
나수비니
2023. 9. 13. 00:01
728x90
첫화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="login_section">
<h1>Welcome!</h1>
<p>
로그인하시려면, 이메일과 비밀번호를 입력해주세요.
</p>
<p>
<a href="join.html"> Sign in </a>
</p>
<form action="home.html" method="get">
<input type="email" placeholder="E-mail" maxlength="20" required/><br>
<input type="password" placeholder="Password" maxlenth="20" required/><br>
<input type="Password" placeholder="Password" maxlength="20" requred/><br>
<input type="submit" value="Login"/>
</form>
</section>
</body>
</html>
회원가입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="login_section">
<h1>Welcome</h1>
<p>
Create an Account.
</p>
<form action="index.html" method="get">
<input type="email" placeholder="E-mail" maxlenth="20" required/><br>
<input type="password" placeholder="Password" maxlenth="20" required/><br>
<input type="password" placeholder="Password Check" maxlenth="20" required/><br>
<input type="button" value="Check Availability"/>
<input type="submit" value="Sign in"/>
</form>
</section>
</body>
</html>
- <link href="style.css" rel="stylesheet" type="text/css">
- 중복이 싫다. (index/join)의 중복되는 css → #style.css로 별도의 파일로 정의 → link로 호출했다.
홈 화면
```html
<!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>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
*{color:#59545c; font-family: 'Black Han Sans', sans-serif;}
body{
background-color: #70b4eb;
}
header > nav > ul{
list-style-type: none; margin:3% 0;
padding:0;
text-align: center;
}
header > nav > ul >li{
display:inline-block;
margin:30px 40px;
}
header > nav > ul > li > a{
text-decoration: none;
font-weight: bolder;
font-size: 30px;
background-color: #ffffff;
padding: 12px 7px 7px 7px;
border: 6.5px solid #3a3b3d;
}
section{
background-color: #ffffff;
width:96%;
height: 600px;
margin-top: 3%;
border: 6.5px solid #3a3b3d;
margin-left: 1.3%;
}
section > div:not(#title){display: inline-block;}
section > #title > h1{
font-size: 40px;
font-weight: lighter;
text-align: center;
margin-bottom: 3%;
}
section ul{
margin-left: 20px;
}
section > ul > li{
list-style-type: none;
font-size: 30px;
}
#img_div{
padding-left: 3%;
margin-left: 3%;
}
#song{
position: absolute;
right:100px;
top:310px;
width:540px;
font-size: 20px;
line-height: 48px;
}
#music{
position: absolute;
top:220px;
width: 50px;
}
footer{
font-size: 30px;
height: 20px;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="music.html">Music</a>
</li>
<li>
<a href="likes.html">Likes</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
<section>
<div id="title">
<h1>About me</h1>
</div>
<div id="img_div">
<img src="ABCC.jpg" alt="The universe" />
</div>
<div>
<ul>
<li>Name: Su Been Jeon</li>
<li>Hobby: Listening to music</li>
<li>Favorite: Music</li>
<li>Contact: 010-3879-8250</li>
<li>E-mail: tnqls1831@gmail.com</li>
</ul>
</div>
<img src="no.1.gif" id="music">
<div id="song">
<h2>⭐Dear boy by Avicii</h2>
So bold and fine, I've known you for some time
Whole life changed while bones like yours and mine
Go dance in the woods and down we go, down, down
Oh boy, you're mine, do you remember old times?
Oh dear boy, I wanna follow you
You're a wild boy, I am a wild girl too
Oh dear boy, it's so hollow without you
In a world with everything but it won't do
Oh dear boy, I wanna follow you
You're a wild boy, I am a wild girl too
Oh dear boy, so shallow in the blue
It's our time for everything and I call you
Sweet love of mine, destruction ain't a crime
For those who find love as a game like you and I
Go dance in the waters of all the tears we have cried
Oh boy, we're fine, do you remember our time?
Oh dear boy, I wanna follow you
You're a wild boy, I am a wild girl too
Oh dear boy, it's so hollow without you
In a world with everything but it won't do
Oh dear boy, I wanna follow you
You're a wild boy, I am a wild girl too
Oh dear boy, so shallow in the blue
It's our time for everything and I call you
</div>
</section>
<footer>
@ copyright SUBEEN JEON 2023
</footer>
</body>
</html>
```🔺 문제점
1. 이미지와 노래 가사가 겹친다
정리
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
*{color:#59545c; font-family: 'Black Han Sans', sans-serif;}
body{
background-color: #70b4eb;
}- <style>: The section defines the CSS styles for the web page.
- @imprt url ~; : It imports the “Black Han Sans”font from Google Fonts.
- *{color~}: Sets default styles for all elements, including text color and font-family.
- body{backgound-color:~}: Sets the background color of the body to a light blue.
header > nav > ul{
list-style-type: none; margin:3% 0;
padding:0;
text-align: center;
}
- 웹페이지 헤더 내비게이션 스타일을 정의한다.
- list-style-type: none; 로 목록을 없앰.
- text-align:center; 마진과 패딩 설정으로 중앙정렬.
- This part defines the style for the header navigation. It applies styles to the ‘ul’ element within the header, removing list-style, setting margins and padding, and centering the text.
header > nav > ul >li{
display:inline-block;
margin:30px 40px;
}
- header > nav > ul >li ⇒ CSS 선택자
- header 요소 안에 → nav 요소가 있고, 그 안에 → ul 요소가 있으며. 그 안에 → li 요소가 있는 경우
- display:inline-block;
- ‘li’ 요소들에게 ‘display’ 속성을 ‘inline-block’으로 설정한다
- 요소들이 가로로 나란히 배치 되지만, 내용에 따라 너비가 자동으로 조절된다.
- margin:30px 40px;
- ‘li’ 요소들의 마진을 설정한다.
- ‘margin’은 요소 주위의 여백을 지정 (상하 30px, 좌우 40px)
header > nav > ul > li > a{
text-decoration: none;
font-weight: bolder;
font-size: 30px;
background-color: #ffffff;
padding: 12px 7px 7px 7px;
border: 6.5px solid #3a3b3d;
}
- text-decoration: none;
- ‘a’ 요소의 텍스트에 밑줄을 제거
- font-weight: bolder;
- ‘a’ 요소의 글골 굵기를 더 진한 굵기로 설정.
- font-size: 30px;
- ‘a’ 요소 글자 크기를 30px로 설정
- background-color: #ffffff;
- ‘a’ 요소의 배경색을 흰색으로 설정
- padding: 12px 7px 7px 7px;
- ‘a’ 요소의 안쪽 여백을 지정. 위,오른쪽,아래,왼쪽 순서로 적용
- border: 6.5px solid #3a3b3d;
- ‘a’ 요소 주위에 테두리를 생성. 6.5px 크기의 실선 테두리가 ‘#3a3b3d’ 색상으로 설정
section{
background-color: #ffffff;
width:96%;
height: 600px;
margin-top: 3%;
border: 6.5px solid #3a3b3d;
margin-left: 1.3%;
}
- width:96%;
- <selection> 요소의 너비를 부모 요소의 너비에 대한 백분율로 설정. 부모 요소의 96%를 사용하여 <section>의 너비를 조절.
- height:600px
- <section> 요소의 높이를 고정값인 600px로 설정
- margin-top: 3%;
- <section> 요소의 위쪽 여백을 부모 요소 높이의 3% 만큼 위쪽 여백을 추가
- border: 6.5px solid #3a3b3d;
- <section> 요소 주위에 테두리를 생성. 6.5px 크기의 실선 테두리가 #3a3b3d 색상으로 설정
- margin-left: 1.3%;
- <section> 요소의 왼쪽 여백을 부모 요소 너비의 1.3%만큼 왼쪽 여백을 추가
section > div:not(#title){display: inline-block;}
section > #title > h1{
font-size: 40px;
font-weight: lighter;
text-align: center;
margin-bottom: 3%;
}
section ul{
margin-left: 20px;
}
section > ul > li{
list-style-type: none;
font-size: 30px;
}
- section > div:not(#title){display: inline-block;}
- <section> 요소 내의 ‘div’ 요소 중, ‘id’가 title이 아닌 모든 div 요소에 display 속성을 inline-block으로 설정.
- <section> 내의 id=”title”인 ‘div’를 제외한 모든 ‘div’를 가로로 나란히 배치하도록 한다.
- section > #title > h1{ font-size: 40px; font-weight: lighter; text-align: center; margin-bottom: 3%;
- <section> 요소 내의 ‘id’=”title”인 div 아래에 있는 h1 요소에 스타일을 적용.
- font-size: 40px
- <h1> 요소의 글자 크기를 40px
- font-weight: lighter
- <h1> 요소의 글꼴 굵기를 가볍게 설정
- text-align: center;
- <h1> 요소의 텍스트를 가운데 정렬
- margin-bottom: 3;
- <h1> 요소의 하단 마진을 3%로 설정
- font-size: 40px
- <section> 요소 내의 ‘id’=”title”인 div 아래에 있는 h1 요소에 스타일을 적용.
#song{
position: absolute;
right:100px;
top:310px;
width:540px;
font-size: 20px;
line-height: 48px;
}
#music{
position: absolute;
top:220px;
width: 50px;
}
footer{
font-size: 30px;
height: 20px;
text-align: center;
margin-top: 50px;
}
- id=”song”인 요소에 스타일 적용
- position: absolute;
- “song” 요소의 위치를 절대 위치로 설정. 다른 요소에 영향을 주지않고 위치를 조절할 수 있다.
- right:100 px
- “song”요소를 오른쪽으로 100 px 이동
- top: 310 px
- “song”요소를 위쪽으로 310 px 이동
- width: 540 px
- “song”요소의 너비를 540 px로 설정
- position: absolute;