- table 태그
기본 구성
<table>
<thead>
<tr>
<th>섹션1</th>
<th>섹션2</th>
</tr>
</thead>
<tbody>
<tr>
<td>섹션3</td>
<td>섹션4</td>
</tr>
<tr>
<td>섹션4</td>
<td>섹션5</td>
</tr>
</tbody>
</table>
table태그는 표를 만들때 주로 사용하는 태그입니다
table 태그는 다른 태그들과는 다르게 thead 태그와 tbody태그로 나눠서 사용되고
표를 만드는 태그이기 때문에 정보를 집어넣기 위해 tr ,td ,th ,tb 태그를 사용합니다
아래 사진을 참고해주세요
사진을 보면 알겟지만 thead에는 표의 헤더를 넣어주고
아래 tbody에는 표해더에 맞게 정보를 넣어준다
살제 사용에는 굳이 thead와 tbody를 쓰지 않고 th와 td 만주로 사용한다
th는 표의 헤더로 지정해주고 td는 표에 넣어줄 데이터로 사용된다
- ul 태그(unordered list) , ol태그(ordered list) , li태그
기본 구성
<body>
<ul>
<li>안녕</li>
</ul>
<ol>
<li>하세요</li>
</ol>
</body>ul 태그와 , ol태그는 둘다 list를 만든다고 생각하면 편합니다
ul 태그는 순서가 없는 항목을 list로 만들때 사용합니다
ol 태그는 순서가 있는 항목을 list로 만들때 사용합니다
li 태그는 ul , ol 로 만든 list에 정보를 넣어주는 태그입니다
아래는 참고 사진입니다
ul과 ol의 스타일은 주로 none으로 설정하기 때문에 문법만 알아보고 넘어가겠습니다
<style>
ul {
list-style-type: circle;
}
ol {
list-style-type: none;
}
</style>
- margin , padding
4방향을 margin 10px 20px 30px 40px ; 로 한번에 적용할 수 있다
이런 경우 왼쪽부터 시계방향으로 적용된다
margin-top , margin-bottom 처럼
처음부터 따로 지정할 수 있는 속성도 있다
사용의 예시
<head>
[선택자] {
padding: 10px 20px;
margin: 10px;
}
</head>
- position
position 말그대로 요소를 배치할 때 사용하는 속성들을 말합니다
주로 사용되는 명령어로는 위 사진과 같이 있습니다
- position - sticky
<style>
#container2 {
border: 5px solid green;
position: sticky;
top: 0;
}
#container3 {
border: 5px solid blue;
}
</style>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</body>
top을 0으로 설정했기 때문에 div2가 화면의 맨위 끝에 닿으면
화면을 따라 같이 이동하는 모습이다
- position - relative
<style>
#container1 {
border: 5px solid red;
position: sticky;
}
#container2 {
border: 5px solid green;
position: relative;
bottom: 30px;
left: 30px;
}
</style>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</body>
div2를 아래에서 30px 위로 , 왼쪽에서 30px 오른쪽으로 옮긴 모습이다
- position - absolute
<style>
#container2 {
border: 5px solid green;
position: relative;
}
#child1 {
border: 2px dashed yellow;
background-color: violet;
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 50px;
}
</style>
<body>
<div id="container2">div2
<div id="child1">
child1
</div>
</div>
</body>
absolute은 특이하게 부모태그에 position : relative;가 없다면 relative를 찾아 태그를 이동한다
1번 사진.
child1의 부모 태그는 div2이고 div2에는 position : relative가 적용되어 있기 때문에
다른곳으로 넘어가지 않고 div2에서 위치를 찾아 이동한 모습이다
2번 사진.
div2의 relative를 주석처리 하고 실행한 모습이다
div1에도 relative는 없지만 body에 막혀 강제로 제일 위에있는 div1에서 absolute위치가 적용된 모습이다
- position - fixed
<style>
#container2 {
border: 5px solid green;
}
#container3 {
border: 5px solid blue;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</body>fixed의 실행 화면은 sticky와 매우 흡사하지만 기능은 다르다
sticky는 스크롤이 이동하면 브라우저의 끝에 걸려 움직이는 반면
fixed는 브라우저 화면을 기준으로 해당 위치에 고정으로 스크롤과 함께 움직이는 형태이다
- Float - 속성
float는 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
<style>
.float-container{
width: 320px;
border: 2px solid #09c;
}
.float-container img{
float: left;
margin: 5px;
padding: 5px;
border: 2px solid #90C;
}
</style>
</head>
<body>
<div class="float-container">
<img src="/images/attach/earth.jpg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
float를 left로 설정하였기 때문에
사진이 왼쪽에 붙고 자연스럽게 글이 사진으로부터
시작되는것을 알 수 있다
- Float - 응용
<style>
* {
box-sizing: border-box;
margin: 0px;
}
body {
height: 3000px;
}
#container1 {
border: 5px solid red;
}
#container2 {
border: 5px solid green;
}
#container3 {
border: 5px solid blue;
}
div {
width: 100px;
height: 100px;
float: left;
}
/* float 속성 해제 후 다시 적용할 때 */
.sec1::after {
content: "";
clear: both;
display: table;
}
</style>
<body>
<section class="sec1">
<div id="container1">div1</div>
<div id="container2">div2</div>
</section>
<section class="sec2">
<div id="container3">div3</div>
</section>
</body>
아직 정확하게 이해하지 못했음!
- Float - 저장용 메뉴 만들기
<!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>menu_made</title>
<style>
* {
margin: 0;
}
ul {
/* 기호 없애기 */
list-style-type: none;
/* 자식요소들에게 float가 적용되어 있을 때는 부모 높이가
사라지는 현상이 생김 이럴때는 아래와 같이 속성을 줌 */
overflow: hidden;
background-color: dodgerblue;
}
li {
/* li 요소를 한줄로 */
float: left;
}
li a {
/* 한줄에 표현도하고 블록요소 특징도 사용가능
블록 요소로 지정해야 높이 너비 지정 가능 */
display: inline-block;
padding: 15px 70px;
text-align: center;
/* a태그에 적용된 밑줄 없애기 */
text-decoration: none;
color: white;
}
li a:hover {
background-color: hotpink;
}
.active {
background-color: violet;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#" class="active">저는요</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact Me</a>
</li>
</ul>
</body>
</html>
