Fixed
position fixed를 이용하면 스크롤해도 항상 제자리에 머무른다.
처음 만들어진 자리에 고정 되어있다. 하지만 top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게되어 원래 위치가 무시된다.
positon fixed를 이용하면 가장 위의 레이어에 위치하게 된다.
Relative Absolute
- position: static (default) - 박스를 처음 위치한 곳에 두는 것
- position: fixed - 처음에 위치한 자리에서 화면의 스크롤에 상관없이 고정되는 것, top,bottom, left, right 속성을 줘서 고정된 위치 이동시킬 수 있음. 단 이동이 되면 가장 위의 새 레이어에 놓이게됨
- position : relative - 박스가 처음 위치한 곳을 기준으로 이동,
top,bottom, left, right 속성을 주면 첫 위치를 기준으로 이동됨- position : absolute - 가장 가까운 부모 엘리먼트에 position:relative를 추가한다면, 그 부모 기준으로 top,bottom,left,right이동하고/ 아닐시엔 body 기준으로 이동된다
-> absolute, relative 가장 중요
Pseudo Selectors 1
pseudo selectors: 좀 더 세부적으로 element를 선택해주는 것.
현재 알고 있는 세가지 element 선택방법
1. tag {}
2. .class {}
3. #id {}
pseudo selector(: + first-child/last-child/nth-child)
: 먼저 여러개의 div를 만들고, 맨 밑에 있는 div만 배경색을 다르게 하고 싶으면 div: last-child {background-color: red} 이런 식으로 씀. last child는 리스트에 있는 div들 중 마지막에 있는 것을 의미. first-child도 있음.
: 여러개의 span을 만들고, 원하는 span에만 배경색 집어넣는다고 했을 때도 사용가능. nth-child라고 쓰고 바로 뒤 괄호 안에 적용되길 원하는 span의 순서를 쓰는 것. nth-child(2), nth-child(4)...
: 여러개 span의 배경색이 번갈아서 나타나길 원할 때는 nth-child로 숫자를 다 쓰는게 아니라 nth-child(even) 이라고 쓰면 짝수번 째의 span에만 적용. 반대인 odd(홀수)도 가능.
: 2n이라고 쓰면 even이랑 똑같이 적용. 2n+1은 odd랑 똑같이 적용. n을 사용하는게 아주 유용함.
ex) 5n, n+5, 3n+1 등.
id나 class를 따로 만드는것보다 이렇게 지정하는게 훨씬 좋은 방법이다.
왜냐하면 css에서만 선택을 하면 되므로 html코드를 고칠 필요가 없기 때문이다 !
Combinators
- parentselector childrenselector {property...}
=> 부모 선택자 안의 모든 해당 자식 선택자를 선택하는 방법 ex) div span{}- parentselector > childrenselector {...}
=> 부모 선택자의 바로 밑의 자식 선택자를 선택하는 방법 ex) div > span{}- parentselector + brotherselector
=> 부모 선택자의 다음에 있는 형제 선택자를 선택하는 방법 ex) div + span{}
Pseudo selectors 2
Attribute selectors(속성 선택자)
tag[attribute = "value"] : 속성의 값이 "value"인 모든 tag 적용
tag[attribute ~= "value"] : 앞뒤에 공백이 있는 상태에서 "value" 값을 포함한 모든 tag 적용
tag[attribute *= "value"] : 앞뒤 공백 상관없이 "value" 값을 포함한 모든 tag 적용
tag: required {} required 속성을 가지고 있는 모든 tag 적용
tag: optional {} required 속성이 없는, 즉 optional 속성을 가지는 모든 tag 적용
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 500px;
height: 500px;
background-color: wheat;
position: relative;
}
#green2 {
position: fixed;
background-color: teal;
opacity: 0.2;
}
#different {
background-color: wheat;
}
.green {
background-color: teal;
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 100px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
p span {
color: white;
}
p ~ span {
text-decoration: underline;
}
input {
border: 1px solid slateblue;
}
input:required {
border: 1px solid tomato;
}
input[placeholder~="Name"] {
background-color: brown;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>I'm Woohyun King <span>inside</span></p>
<address>hi</address>
<span>hello</span>
<form>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Second Name" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
</html>