1. position, opacitoy
- position: fixed: web page 스클로을 내려도 계속 유지할 수 있도록 해주는 것. 고정 위치는 초기 설정되었던 div를 기준으로 한다.
- 가장 위에 차지한다.
- opacity: 투명도
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home - my first website</title>
<style>
body {
height: 1000vh;
margin: 20px;
}
div {
/* position: fixed; 이거는 web page 스크롤을 내려도 계속 유지할 수 있도록 해주는 것 */
width: 300px;
height: 300px;
color: white;
background-color: teal;
}
#different {
top: 5px;
left: 200px;
/* top, left, right, bottom 을 수정하면 이동하게 되어있다. block이든 margin이든 신경안씀 */
position: fixed;
/* position: fixed; 이거는 web page 스크롤을 내려도 계속 유지할 수 있도록 해주는 것
이때 div의 위치는 초기 그려져있던 곳을 기준으로 함 */
background-color: wheat;
width: 350px;
}
</style>
</head>
<body>
<div></div>
<div id="different"></div>
</body>
</html>
<!-- position이라는 것은 layout과는 달리 약간씩 이동할 때 사용하는 것
fixed는 고정시키는 것-->
- position
- static(defalut)
- relative : 적용할 때 현 위치에서 좌우 상하 이동
- absolute : position: relative가 되어있는 부모 중 가장 가까운 부모를 기준으로 이동, 만약 부모중 position relative가 없으면 body가 position relative이다.
- fixed
- most important : postition-absolute 1) use a lot 2) mistake - that need postition-relative parent!!
# element를 더 세부적으로 해주는 pseudo Selectors before we learned 1) just name
ex) body 2) id ex) #idname 3) class ex) .classname pseudo Selectors : 처음이나
끝에 것만 선택한다든가 span 다음에 오는 class를 선택한다던가 복잡한 것을 할 때
사용
1. positon: static (default)
2. position: fixed
- element가 처음 생성된 자리에 고정.
3. position: relative;
- element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다.
4. position: absolute;
가장 가까운 relative 부모를 기준으로 이동
position:relative; 를 해주면 부모가 된다.
없으면 body.
position을 적용시 margin 바깥쪽으로 position이 자리 잡는다.
-> position 적용된 div의 바로 상위 div(body)포함해서 그거 기준으로 top, bottom, left, right 위치를 이동할 수 있다.
#different {
top: 50px;
position: fixed;
background-color: wheat;
}
- pseudo selector
span:nth-child(2),
span:nth-child(even),
span:nth-child(2n + 1) {
background-color: teal;
}
/* span에서 원하는 것만 고를 때 nth-child; n번째 애들중 을 사용.
추가적으로 짝수 child를 다 바꿀 때 even을 사용 홀수는 odd */
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
<!-- 배운 내용 -->
<!-- first, end, nth, even(2n), odd(2n+1), n을 이용하면 몇배수 든 다 가능하다 -->
<!-- 요약
1) p span : parent child
2) p + span : child next to child
3) p > span : parent and direct child
4) p ~ span : child to child, no need to only next -->
input[placeholder~="name"] {
/* in here, ~ : means in placeholder which have name all of that active */
background-color: black;
}
: 이용
<!-- # state -->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>home - my first website</title>
<style>
button:active {
background-color: tomato;
/*active: click 시 색깔이 변화하는 것 */
}
button:hover {
background-color: teal;
/* hoverover: mouse가 대상 위에만 있어도 색이 변하는 것 */
}
button:focus {
background-color: grey;
/* focus: keyboard로 tap 할 때 색이 변함 */
}
input:focus {
background-color: grey;
/* focus: keyboard로 tap 할 때 색이 변함 */
}
a:visited {
color: red;
/* visted: link에서만 작동을 하고 방문한 site가 원하는 color로 적용됨 */
}
a:hover {
color: teal;
}
a:focus {
color: turquoise;
}
form {
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding: 20px;
}
form:focus-within {
border-color: seagreen;
/* focus-within: focused된 자식을 가진 부모 엘리먼트에 적용되는 것
해석: form에서 안에 있는 애들을 (=within) focus를 할 때 부모의 무엇인가(ex)border-color)를 변화시켜줘라 */
}
/* 반대 예시 */
form:hover input:focus {
background-color: sienna;
/* form:hover input: 이 조건은 form이 hover 되어있고 그 안에 input이라는 것이 존재할 때 적용 되는 것
form:hover input: focus: 위에 내용에 input이 focused 된 것 */
}
</style>
</head>
<body>
<button>hello</button>
<input type="text" />
<input type="text" />
<a href="http://apple.com">Go to apple</a>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
</form>
</body>
</html>