2021. 11. 15. (월) 코코아 클론 - CSS_03
2021. 11. 15. 08:55ㆍNomadCoders/코코아 클론 챌린지
728x90
반응형
# 학습 전 나의 상태
코코아 클론 챌린지 2주차가 시작되었다. 동시에 바닐라 JS 챌린지 1주차도 시작이다!
기초를 다시 잡고 싶어 시작한 챌린지들이다. 거기에 코드스테이츠에서 진행하는 커뮤니티 스테이츠 개발클럽 활동을 하면서 모던 JS(https://ko.javascript.info/)의 내용도 함께 보고 있다.
왜 처음 시작했을 땐 이 모던 JS를 참고하지 않았을까..? 하는 후회? 아쉬움? 같은 것이 든다.
그치만 이렇게라도 다시 시작하고 있으니까! 긍정긍정긍정!! 나도 취업할 수 있고, 잘 할 수 있다~ !!
# 오늘의 학습 내용
position
- 레이아웃보다 위치를 아주 조금 옮기고 싶을 때 사용
- fixed: 하면 맨 앞 레이어로 이동하고 계속 그 자리에 위차한다.
- top, bottom, left, right 중 하나라도 입력이 되면 맨 앞 레이어가 이동하게 되고 그 자리에 고정된다.
- static: 레이아웃이 박스를 처음 위치하는 곳에 두는 것
- relative: 조금씩 오른쪽, 왼쪽으로 옮기고 싶을 때 사용한다. top, bottom, left, right 통해 이동한다.
- absolute
- 가장 가까운 relative 부모를 기준으로 이동
- 만약 바로 위에 부모 엘리먼트에 relative 가 없다면 body 를 기준으로 움직인다.
pseudo selectors
- 좀 더 세부적으로 엘리먼트를 선택하는 것
- 태그의 이름만 쓰기
- .을 쓰고 클래스 이름을 쓰거나
- #을 쓰고 아아디 이름을 쓰거나
/* div의 여러 요소 중 첫번째 요소를 선택하고 싶을 때 */ div:first-child { background-color: red; } /* div의 여러 요소 중 마지막 요소를 선택하고 싶을 때 */ div:last-child { background-color: blue; } /* 짝수를 변경하고 싶을 때 */ div:nth-child(even) { background-color: blue; } /* 홀수를 변경하고 싶을 때 */ div:nth-child(odd) { background-color: blue; } /* 특정 위치(세 번째)부터 변경하고 싶을 때 */ div:nth-child(2n + 1) { background-color: blue; }
combinators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home - My first website.</title>
<style>
/* span전체 태그 글자 색 변경 */
span {
color: tomato;
}
/* div의 자식 엘리먼트인 span에만 언더라인 적용하기 */
/* div span{} 이 방법을 사용하면 p태그 안에 span에도 적용된다. '>' 사용해서 자식 엘리먼트 선택 */
div > span {
text-decoration: underline;
}
/* p 태그 안에 span 태그 글자 색 변경 => 부모 엘리런트 자식 엘리먼트 {} */
p span {
color: blue;
}
/* p태그의 형제인 span에 css적용하기, '+'는 다음을 의미한다. */
p + span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
안녕하세요 ~ <span>방가방가</span>
</p>
<span>bye</span>
</div>
</body>
</html>만약 p 태그의 형제 엘리먼트 span에 적용하려고 하는데 p과 span 사이에 다른 태그가 들어 있다면 '+' 를 사용할 수 없다.
이땐 '~' 로 해야한다.
과제
# 학습을 마치며
css 작업을 해보면서 정말 궁금했던 position에 대한 이해가 어느정도 되었다.
이전에 프로젝트에서 애니메이션 효과를 위해 position을 주는 바람에 반응형에서 엉망이 되었던 것이 떠오른다.
이 학습이 끝나면 하기로 했던 마이페이지 리팩토링을 및 리모델링을 다시 해봐야겠다.
728x90
반응형
'NomadCoders > 코코아 클론 챌린지' 카테고리의 다른 글
| 2021. 11. 16. (화) 코코아 클론 - CSS_05 (0) | 2021.11.17 |
|---|---|
| 2021. 11. 16. (화) 코코아 클론 - CSS_04 (0) | 2021.11.17 |
| 2021. 11. 13. (토) 코코아 클론 - CSS_02 (0) | 2021.11.13 |
| 2021. 11. 12. (금) 코코아 클론 - CSS_01 (0) | 2021.11.13 |
| 2021. 11. 11. (목) 코코아 클론 - HTML (0) | 2021.11.12 |