<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#nav {
width:800px;
margin:0 auto; /* 가운데 정렬 */
border:1px solid #cccccc;
overflow:hidden;
}
#nav div {
width:150px;
height:100px;
line-height:100px; /* height 랑 같게 하면 수직중앙 정렬됨*/
float:left;
text-align:center;
font-size:1.5em;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
margin:5px;
}
a {
text-decoration:none;
color:#282828;
}
</style>
</head>
<body>
<div id="nav">
<div><a href="#">menu1</a></div>
<div><a href="#">menu2</a></div>
<div><a href="#">menu3</a></div>
<div><a href="#">menu4</a></div>
<div><a href="#">menu5</a></div>
</div>
</body>
</html>
line-height 는 행간 사이즈 조절.
height : 300px 인데, line-height : 300px 로 주면 수직 가운데로 올 수 있다.
body 부분이다.
<body>
<div>
<p>HTML5, CSS3 Document</p>
<p>To. all member</p>
<p>html5, CSS3 study is very easy html5, CSS3 study is very easy html5, CSS3 study is very easy</p>
<p>From. SBA</p>
<hr />
<p><a href="http://sba.seoul.kr" target="_blank">서울산업진흥원</a></p>
</div>
</body>
a 태그↓
_blank : 새 창에서 열림
style 부분이다.
<style>
div {
width: 800px;
margin: 0 auto;
overflow: hidden; /**/
border: 1px solid #cccccc;
padding: 10px;
box-sizing: border-box; /* border 를 안쪽으로 줌 */
}
div p:nth-child(1){
height:100px;
line-height:100px;
text-decoration:underline;
text-align:center;
font-size:2em;
}
div p:nth-child(2){
font-size:1.2em;
}
div p:nth-child(4) {
font-size: 1.2em;
text-align: right;
}
div p:nth-child(6) { /* 왜 6이지 */
text-align: center;
font-size: 1.5em;
height:50px;
line-height:50px;
}
a {
text-decoration:none;
}
</style>
:nth-child 속성을 쓸 때 아마도 태그들을 다 포함하여 세는 것 같다.
position
position은 위치 값을 설정해주는 변수이다.
- position : absolute
노랑은 빨간색 안에 들어 있다.
absolute 속성은 말 그대로 절대적인 위치라는 뜻이다.
절대적인 위치는 누구를 기준으로 하냐가 중요하다.
강사님께서 설명하신 그림과 함께 보면,
빨강, 초록, 파랑, 노랑은 모두 브라우저 창을 기준으로 위치해 있다.
하지만 노랑 안 빨강은 노랑을 기준으로 하기 때문에 노랑으로부터 top, left 만큼 떨어져있다.
- position : fixed
fixed 속성으로 지정하면 마우스로 스크롤을 해도 네모가 움직이지 않는다. (=고정되어 있다고 생각하자!)
반면 absolute 속성은 스크롤을 하면 네모가 움직인다.
말로 하기 좀 복잡하지만 저 창을 빨, 초, 파 보일 때까지 줄이고 스크롤을 해보면..
빨강은 가만히 있는데 초록과 파랑은 움직이는 것을 볼 수 있다.
※ 메뉴바 구성할 때 빨강처럼 fixed 속성을 생각해봐야 겠다! 그리고 컨텐츠들은 absolute 한번 해봐야지
- position : static
static 은 디폴트 값이다. 즉, 우리가 position 을 선언하지 않을 때 적용되었던 속성이라고 생각하면 된다.
그래서 top과 left를 줘도 의미가 없다.
- position : relative
position: relative; 자체로는 특별한 의미가 없습니다.
딱히 어느 위치로 이동 하지는 않습니다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다.
**top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다.**
레드가 있고 옐로우가 있는데
옐로우 안에 그린과 블루가 있는 형태.
옐로우는 relative 속성을 가지고 있기 때문에 레드와 상관이 있다. 그래서 레드를 기준으로 top, left 만큼 떨어져 있다.
(사실 옐로우의 원래 위치는 레드 바로 밑에 위치하여야 하는데 relative 속성으로 저렇게 떨어지게 된 것이다.)
또한 그린과 블루도 relative 속성을 가지고 있기 때문에 저렇게 그림처럼 모습이 된다.
- position 속성 중 relative 와 absolute 혼합
원래 노란색이 표면으로 더 위에 올라와야 하지만 ..
z-index 값이 높을 수록 표면으로 상단에 위치하게 된다.
wrap 으로 감싼 안에 태그들(빨강, 노랑)에게 abolute 를 줄 때에는 -> wrap을 relative 로 주어야 한다.
그래야 top, left를 정확하게 줄 수 있다. 저 그림을 보면 빨강은 10, 10 만큼 잘 떨어져 있고 노랑은 50, 50만큼 잘 떨어져 있다. 만약 바깥 태그에 relative 가 없다면 브라우처 창을 기준으로 top, left 값을 계산하게 된다.
바깥쪽 태그는 relative 속성을 주어야 한다. 일단 외우는 것이 좋다!
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 가변형 그리드 (옛날 방식) (0) | 2021.09.27 |
|---|---|
| CSS - overflow hidden, flow , gradient 속성 (0) | 2021.09.21 |
| CSS - magin과 padding, box-sizing, background-image (0) | 2021.09.20 |
| CSS - 단위, url(), display 속성 (0) | 2021.09.20 |
| CSS - 문자 선택자, 링크 선택자, 부정 선택자 (0) | 2021.09.19 |