웹 & 프론트엔드 기본
오늘도 신명 나게 모바일 진단을 진행할 수 있었다. 중간중간 모르는 것이 많아서 속앓이는 했지마는 진단하는 자체에 기쁨이 있었다. 안 풀리면서도 풀리고 풀리면서도 안 풀리는 기이한 현상도 많이 볼 수 있었다. Nox를 통해 Android 진단을 진행하면서 프록시 도구를 사용하려고 Fiddler를 사용했었으며 패킷까지 받아오는 것은 성공하였다. 다만, 웹 접속 시 인증서 부분에서 무한 인증 추가하면서 번거로운 작업이 발생하여 조사해보니 Android 7 Version 이상은 인증서 오류 현상이 생긴다고 하여 인증서를 사용자에서 시스템으로 옮기는 작업까지 완료했음에도 불구 고치지는 못하였다는 슬픈 사실이다. 또한, Fiddler 외에도 Burp Suite 프록시도 연동해야 하는 상황이 있을 수 있기에 인증서 설치하고 패킷 들어오는 것까지 성공하면서 나름 뿌듯한 진단이었다. 중간중간 안 풀리는 것들은 진단 가이드를 참조하며 모르는 문구들 해석이 안 되는 부분이 많아서이며 처음 해보는 것도 있고 누구에게 배울 수도 없는 문제이기에 끙끙 앓았던 것 같다.
CSS
선택자 - 가상 클래스
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>Hello World!</div>
<input type="text">
</body>
</html>
가상 클래스 선택자 (Pseudo-Classes) HOVER
- 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
div:hover {
color: red;
}
가상 클래스 선택자 (Pseudo-Classes) ACTIVE
- 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
div:active {
color: red;
}
가상 클래스 선택자 (Pseudo-Classes) FOCUS
- 선택자 ABC 요소가 포커스 되면 선택
div:focus {
color: red;
}
input:focus {
background-color: orange;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>
</body>
</html>
가상 클래스 선택자 (Pseudo-Classes) FIRST CHILD
- 선택자 ABC가 형제 요소 중 첫째라면 선택
.fruits span:first-child {
color: red;
}
가상 클랙스 선택자 (Pseudo-Classes) LAST CHILD
- 선택자 ABC가 형제 요소 중 막내라면 선택
.fruits h3:last-child {
color: red;
}
가상 클래스 선택자 (Pseudo-Classes) NTH CHILD
- 선택자 ABC가 형제 요소 중 (n)째라면 선택
.fruits *:nth-child(2) {
color: red;
}
.fruits *:nth-child(2n) {
color: red;
}
.fruits *:nth-child(2n+1) {
color: red;
}
/* n은 0부터 시작! (Zero-Based Numbering) */
오늘은 선택자 가상 클래스에 대해서 학습해보는 시간을 가졌다. 하나 하나 테스트 해보면서 직접 눈으로 보다보니 많이 익숙해진 느낌이였다. 솔직히 자주 쓰던것은 mouse-over 태그였는데 즉, hover 그 외에는 사용할 일이 드물 것이다. 그래도 어떤 방향으로 구성되어졌는지 알게 되어서 신선하다. 매일 이렇게 새로운것을 배우고 습득하는것이 재밌기도 하고 비록 짧게 학습하는 부분이지만 숙제인듯 아닌 듯 꾸준히 진행하고 있다는 것이다.
85일 차는 여기서 마무리하고자 합니다.
패스트캠퍼스 링크 :https://bit.ly/37BpXi
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
'FastCampus > 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.' 카테고리의 다른 글
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 87일차 (0) | 2021.12.01 |
|---|---|
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 86일차 (0) | 2021.11.30 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 84일차 (0) | 2021.11.28 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 83일차 (0) | 2021.11.27 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 82일차 (0) | 2021.11.26 |
댓글