라라리라
2023.08.11 / CSS4 - 코딩 23 일차 본문
0400_css적용방법.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<link rel="stylesheet" href="00_test.css">
<style>
/*
# CSS 스타일 적용방법 3가지
(1) style 내부
(2) 인라인
(3) link 외부
*/
h1 {
color: yellow;
}
</style>
</head>
<body>
<h1>Hello, CSS</h1>
</body>
</html>
Hello, CSS
0401_내부스타일1.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
#test1{
text-decoration: none
}
#test2{
text-decoration: underline
}
#test3{
text-decoration: overline
}
#test4{
text-decoration: line-through
}
</style>
</head>
<body>
<h1>text-decoration 속성1</h1>
<p id="test1">none</p>
<p id="test2">underline</p>
<p id="test3">overline</p>
<p id="test4">line through</p>
<!-- 간단한 속성은 아래와 같이 한줄로 표현도 가능하다. -->
<h1>text-decoration 속성2</h1>
<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>
<p style="text-decoration:line-through">line through</p>
</body>
</html>
text-decoration 속성1
none
underline
overline
line through
text-decoration 속성2
none
underline
overline
line through
0402_내부스타일2.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<div style="height:20px; background-color:yellow"></div>
<div style="height:20px; background-color:green"></div>
<div style="height:20px; background-color:purple"></div>
</body>
</html>
0403_내부스타일3.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<div style="border: 3px solid red;">
<h2>사자</h2>
사자는 아프리카에 살며 강한 다리와 턱, <div style="color: red;">긴 송곳니</div> 를 지니고 있다.
</div>
<!--
div 태그는 아무 기능도 없지만 자동 줄 바꿈이된다.
그래서 내용 중간에 간단하게 스타일을 주고싶을때는 span을 사용해야한다.
-->
<div style="border: 3px solid blue;">
<h2>사자</h2>
사자는 아프리카에 살며 강한 다리와 턱, <span style="color: red;">긴 송곳니</span>를 지니고 있다.
</div>
</body>
</html>
사자
사자는 아프리카에 살며 강한 다리와 턱,긴 송곳니
를 지니고 있다.
사자
사자는 아프리카에 살며 강한 다리와 턱, 긴 송곳니를 지니고 있다.
0405_form1.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
#container {
width: 520px;
border: 1px solid black;
padding: 20px 40px;
margin: 0 auto;
}
ul {
list-style-type: none;
}
li {
line-height: 30px;
}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li>
이름
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
연락처
<input type="text" id="snum">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label>
<input type="radio" name="field" > 웹 퍼블리싱
</label>
</li>
<li>
<label>
<input type="radio" name="field" > 웹 애플리케이션 개발
</label>
</li>
<li>
<label>
<input type="radio" name="field" > 개발 환경 개선
</label>
</li>
</ul>
<h4>지원 동기</h4>
<label>
<textarea cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
</div>
</form>
</div>
</body>
</html>
프런트엔드 개발자 지원서
HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.
0406_form2.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
h1 {
width: 100%;
height: 50px;
margin: 0;
line-height: 50px;
text-align: center;
background: #026553;
color: white;
}
form {
width: 370px;
padding: 20px;
margin: 0 auto;
}
input {
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>가입 신청서</h1>
<form>
<input id="full-name" type="text" placeholder="이름">
<input id="email" type="email" placeholder="이메일 주소">
<input id="passwoard" type="password" placeholder="비밀번호">
<br>
<input type="submit" value="가입하기">
</form>
</body>
</html>
가입 신청서
'코딩 > 2023 HTML & CSS' 카테고리의 다른 글
| 2023.08.13 / 미니 프로젝트 - 코딩25일차 (0) | 2023.08.13 |
|---|---|
| 2023.08.12 / 미니 프로젝트 - 코딩24일차 (0) | 2023.08.13 |
| 2023.08.10 / CSS3 - 코딩 22 일차 (0) | 2023.08.10 |
| 2023.08.09 / CSS2 - 코딩 21 일차 (0) | 2023.08.09 |
| 2023.07.21 / HTML 4- 코딩 2 일차 (0) | 2023.07.21 |
'코딩/2023 HTML & CSS' Related Articles
more
