HTML layout & CSS 기초(1)
- HTML layout (Semetic tag)
- CSS 특성과 선택자 (Selector)
- 자식/하위/동위 선택자 (Inherit)
- 속성 선택자 (Attribute)
- Board 만들기
- 예제: 방명록 만들기
출처: W3C school (https://www.w3schools.com/)
<body>
<!-- header -->
<div>
<h1>MY HOMPAGE</h1>
</div>
<hr>
<!-- body -->
<div>
<div>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
</div>
<div>
<h3>B</h3>
<h3>O</h3>
<h3>D</h3>
<h3>Y</h3>
<h3>2</h3>
</div>
</div>
<hr>
<!-- footer -->
<div>
<p>SEOUL</p>
</div>
</body>
<body>
<!-- header -->
<header>
<h1>MY HOMPAGE</h1>
</header>
<hr>
<!-- body -->
<section>
<nav> <!-- 보통 메뉴-->
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
</nav>
<article> <!-- 보통 본문 -->
<h3>B</h3>
<h3>O</h3>
<h3>D</h3>
<h3>Y</h3>
<h3>2</h3>
</article>
</section>
<hr>
<!-- footer-->
<footer>
<p>SEOUL</p>
</footer>
</body>
<style>
span{ /*span tag를 대상으로 하는 selector*/
color: blue; /*색, 크기, 글씨굵기를 바꿔주는 style*/
font-size: 30px;
font-weight: bold;
}
</style>
<style>
*{font-size:20px} /* 모든 데이터들에 적용 */
div{color: blue;} /* div tag에 적용 */
.one{font-weight: bold;} /*one class에 적용*/
#two{font-family: 궁서체;} /*two id에 적용*/
</style>
<style>
#one > .menu{color: green;} /*one id의 자식(바로 아래)인 menu를 선택*/
#one .menu{color: green;} /*one id의 아래에 있는 menu를 선택 (몇 번째 인지 상관없다)*/
</style>
<style>
#content > .title ~ div{ /*일반 동위 selector */
font-size: 20px;
color: blue;
}
#content > .title + div{ /*인접 동위 selector*/
font-size: 9px;
color: yellow;
}
</style>
<style>
/*
selector[attr]{key:value}; : attr 속성명이 있는 태그를 선택
selector[attr = "value"]{key:value}; : attr 속성 값과 value가 일치하는 태그 선택
selector[attr $= "value"]{key:value}; : attr 속성 값과 value에 대항하는 문자로 끝나는 태그를 선택
selector[attr ^= "value"]{key:value}; : attr 속성 값과 value에 해당하는 문자로 시작하는 태그를 선택
selector[attr *= "value"]{key:value}; : attr 속성 값과 value에 해당하는 문자가 포함하는 태그를 선택
*/
input[type]{
color: orange;
}
img[alt]{
color: red;
}
input[type="text"]{ /* type이 text인 input */
font-size: 30px;
}
span[id ^= "complex"]{ /* complex로 시작하는 id */
color: blue;
}
span[id $="text1"]{ /* 끝이 text1로 끝나는 id*/
font-size: 30px;
}
span[id *= "text"]{ /* text를 포함하는 id */
background-color: yellow;
}
</style>
속성 selector 는 좀 더 써봐야 익숙해질 것 같다 ㅠㅠ
<style>
.myBorderStyle{
border-top-style: solid; /*border: solid 5px red; 와 동일*/
border-top-width: 5px;
border-top-color: red;
border-right-style: dotted; /*top right 이런 식으로 부분마다 설정할 수도 있음*/
border-right-width: 1px;
border-right-color: blue;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: black;
border-left-style: dashed;
border-left-width: 5px;
border-left-color: red;
width: 150px;
height: 100px;
text-align: center; /*text 가로 중앙 정렬*/
line-height: 100px; /*세로 중앙 정렬*/
}
</style>
.formStyle{
border: solid 0px red;
width: 410px;
height: 155px;
margin: 10px auto;
/*margin: top-right-bottom-left 순서
margin: top,bottom-right,left (2개 썻을 시)
margin: top-right,left-bottom*/
}
.title{
border: solid 0px blue;
width: 400px;
height: 30px;
text-align: center;
line-height: 30px;
}
.content{
border: solid 0px green;
width: 400px;
height: 90px;
margin-top: 2px;
text-align: center;
}
<!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>방명록</title>
<link rel="stylesheet" href="./12.Guest.css">
</head>
<body>
<form action="#" method="get" class="formStyle">
<div class="title">
<label>이름</label>
<input type="text" name= "irum" size="12">
<label>비밀번호</label>
<input type="password" name="pwd" size="12">
</div>
<div class="content">
<textarea rows="5" cols="53" name="msg"></textarea>
</div>
<div class="title" style="text-align: right;">
<input type="submit" value="확인">
<input type="reset" value="취소">
</div>
</form>
</body>
</html>