DOTY
CSS_3 (Position, Pseudo-Classes_1) 본문
이번에도 CSS!
Position
위치를 어떤 식으로 정할지 설정해준다. 예를 들어서, 고정시킬 수도 있도 유동적으로 변하게 할 수도 있다.
Position의 기능중 몇가지를 알아보자.
1. Fixed
이건 단어 뜻 그대로 고정하는 것이다. 스크롤을 내려도 요소는 고정되어 있는데 참고할 것은 가장 처음 위치에서 변하지 않는다는 점이다.
위와 같은 경우에는 top: 200px; 를 추가해줬다. 즉, 가장 위에서 200px만큼 떨어진 상태에서 fixed 된것이다.
2. static
처음에 설정된 위치를 가리킨다.
3. relative
원래 위치에서 본인이 조금만 위치를 변경하고 싶은 경우에 쓰인다.
top, left, right, bottom 모두 설정이 가능하다.
div {
position: relative;
top: 10px;
left: -10px;
// 등등
}위의 코드는 원래 위치에서 위에서 10px만큼 떨어지고, 왼쪽에서 10px만큼 더 붙는다. ( 마이너스 값은 반대로 움직인다고 생각하면 편할듯!! )
4. absolute
이건 조금 특이한데 우선 relative처럼 상하좌우 전부 조절할 수 있다. 그런데, 기준점은 relative한 부모다. 계속해서 올라가다가 relative한 부모가 나오면 그 부모가 기준이 되어서 설정이 된다.
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>#child {
position: absolute;
top: 10px;
// 뭔가 써있음..!!!
}여기서 id가 child인 div의 부모는 id가 parent인 div다. 그런데 이 div는 relative설정이 안되어 있다. 따라서 id가 parent인 div의 부모인 body로 넘어가서 body의 기준으로 id가 child인 div의 위치가 정해진다.
그런데!!! 만약 다음과 같이 설정된다면 달라진다.
#parent {
position: relative;
// 뭔가 써있음..!!
}
#child {
position: absolute;
top: 10px;
// 뭔가 써있음..!!!
}div가 relative로 설정 된다면 child의 기준은 id가 parent인 div가 된다.
( relative한 부모를 찾는데 만약 전부 실패한다면 기준은 body가 된다!!)
right: 0px;
요런 느~낌?!
Pseudo-class
요건 유연하게 원하는 것 만 쏙쏙 고를 수 있게 해준다.... 랄까...?
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
의사 클래스
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 ��
developer.mozilla.org
요런 느낌이랄까? id도 정해주지 않았는데 이렇게 된다..!!!!
div {
width: 100px;
height: 100px;
background-color: violet;
}
div:last-child {
background-color: tomato;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>위처럼 코드를 짠다면, 왼쪽처럼 마지막에만 tomato 색으로 변한다... 뀼!
div:last-child 대신에 div:nth-child(5)를 써도 똑같이 나온다. nth-child(n)은 n번째 child를 변화시킨다는 뜻이다. 그런데 n에는 공식을 써도 상관 없다. 다음과 같이 말이다.
span {
font: 50px bold;
color: pink;
background-color: skyblue;
}
span:nth-child(2n) {
font: 50px bold;
color: green;
background-color: tomato;
}<body>
<span>개굴</span>
// '개굴'이 총 8개
</body>2n, 말 그대로 짝수번째 개굴만 바뀐다. 2n 뿐만 아니라, 3n, 5n+3 등등 전부 가능하다. odd, even을 넣으면 홀수 짝수번째 개굴만 변하기도 하다. n에 모든 0포함 자연수들을 넣는다.
더 있지만 글이 길어질 것 같아서 요기 까~쥐
나중에 찾아보기가 어렵기 때문이쥐
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
후딱 끝내버려야징 히히
'WEB > HTML & CSS' 카테고리의 다른 글
| CSS_5 (States, Psudo Elements) (0) | 2020.10.06 |
|---|---|
| CSS_4(Combinator, Pseudo-Classes_2) (0) | 2020.10.06 |
| CSS_2 (Border, Flex, Class) (0) | 2020.10.06 |
| CSS (Cascading Style Sheets) (0) | 2020.10.06 |
| head (Invisiable tags) (0) | 2020.10.06 |
