| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- img
- ::before
- JavaScript
- textarea
- 속성 선택자
- rowspan
- 전체 선택자
- Li
- JAVA 개발 환경 설정
- table
- ::first-line
- HTML정의
- BR
- select
- 한정수 강사님
- Ol
- tag
- option
- colspan
- Python
- :active
- Head
- ::first-letter
- !doctype html
- Border
- ul
- BODY
- Title
- Form
- 인라인 레벨 요소
- Today
- Total
개발 공부 기록하기
DAY 24. 가상 클래스 본문
1. 사용자 동작에 반응하는 가상 클래스
- :link 가상 클래스 선택자
사용자가 아직 방문하지 않은 링크 (즉, 클릭한 적 없는 하이퍼링크)에 스타일을 적용한다.
기본적으로 파란색 글자와 밑줄로 표시되는데, 이 스타일을 :link로 바꿀 수 있다.
(내가 만든) 예시 1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>:link 가상 클래스 선택자</title>
<style>
body {
font-size: 20px;
}
a:link {
color: #bada55;
}
</style>
</head>
<body>
<a href="https://developer.mozilla.org">MDN</a>
</body>
</html>↓
- :visited 가상 클래스 선택자
:link와는 반대로, 한 번 이상 방문한 링크에 스타일을 적용한다.
한 번 이상 방문한 링크는 보라색으로 바뀌는 것이 기본값인데,
그 스타일을 바꾸거나, 방문했든 안 했든 스타일이 달라지지 않게 할 때 :visited로 스타일을 지정한다.
(내가 만든) 예시 2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>:link 가상 클래스 선택자</title>
<style>
body {
font-size: 20px;
}
a:link {
color: #bada55;
}
a:visited {
color: #ffa6c9;
}
</style>
</head>
<body>
<a href="https://github.com/">Github</a>
</body>
</html>↓
- :hover 가상 클래스 선택자
웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다.
ex 1, 이미지 위로 마우스 포인터를 올렸을 때 다른 이미지로 바뀜
ex 2, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과 만듦.
(내가 만든) 예시 3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>:link 가상 클래스 선택자</title>
<style>
body {
font-size: 20px;
color: black;
}
a:visited {
font-size: 20px;
color: black;
}
a:hover {
background-color: #b4eeb4;
}
</style>
</head>
<body>
<a href="https://okky.kr/">OKKY</a>
</body>
</html>↓
- :active 가상 클래스 선택자
웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정한다.
단, 그 스타일은 마우스로 그 웹 요소를 꾹 누른 그 순간에만 나타나고 마우스를 떼면 사라진다.
(내가 만든) 예시 4.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>:link 가상 클래스 선택자</title>
<style>
body {
font-size: 20px;
color: black;
}
a:visited {
font-size: 20px;
color: black;
}
a:active {
background-color: #f9d70b;
}
</style>
</head>
<body>
<a href="https://careerly.co.kr/">커리어리</a>
</body>
</html>↓
- :focus 가상 클래스 선택자
웹 요소에 초점(실제로는 focusf오우끄스라는 용어를 더 많이 쓴다)이 맞춰졌을 때 스타일을 적용한다.
* 깨알 영어공부ㅋㅋ
focus 발음을 우리나라 사람들이 늘 하듯이 "포커스"라고 발음하면 원어민한텐 "fxxx us"라는 욕으로 들린다고 했다.. 올리버쌤이..ㅎㅎㅎ
그래서 Youtube 영상에서 알려주신 유사한 발음을 한국말로 붙여 써 봤다. (액센트는 'f오우'에, '끄스'는 들릴듯 말듯 작게)
- 출처: https://www.youtube.com/watch?v=27_GgeZaykA&t=633s
아무튼, 아래와 같을 때 사용한다.
ex 1, 텍스트 필드 안에 마우스 포인터를 올려놓을 때
ex 2, 웹 문서에서 Tab 을 눌러 입력 커서를 이동했을 때
(내가 만든) 예시 5.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>:link 가상 클래스 선택자</title>
<style>
input {
font-size: 20px;
color: black;
border: 1px solid #ccc;
padding: 5px 10px;
}
input:focus {
font-size: 20px;
background-color: #edc3d8;
}
</style>
</head>
<body>
<label for="label">입력칸</label>
<input type="text" id="label"/>
</body>
</html>↓
예제 1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>link 스타일</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.navi {
width: 960px;
height: 60px;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}
.navi ul {
list-style: none;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
float: left;
width: 150px;
padding: 10px;
}
.navi a:link, .navi a:visited {
display: block;
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none;
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color: #555;
color: #fff;
}
.navi a:active {
background-color: #b44;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
</body>
</html>↓
스타일을 지정할 때는
꼭! 반드시! Must!
:link → :visited → :hover → :active
순서로 스타일을 지정해야 한다.
(아니면 제대로 적용되지 않는다!)
★ 암기 방법: LoVe HAte
cf 1,
:focus의 순서는 크게 상관이 없음.
cf 2,
a: link (×)
a:link (○)
쌍점(콜론) 뒤로 띄어쓰기를 하면 스타일 적용이 안 되더라...ㅎㅎ
2. 요소 상태에 따른 가상 클래스
- :target 가상 클래스 선택자
웹 문서에서 다른 페이지(그게 같은 사이트에 있든, 다른 사이트에 있든 상관 ×)로 이동할 때는 '링크'를 이용하지만,
같은 웹 문서 안에서 다른 위치로 이동할 때는 *앵커anchor를 이용하게 되는데,
* 앵커: 기다란 페이지를 가진 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와주는 기능
이 때 :target을 사용하면 그 목적지가 되는 부분의 스타일을 적용할 수 있다.
예제 2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>link 스타일</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.navi {
width: 960px;
height: 60px;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}
.navi ul {
list-style: none;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
display: inline-block;
width: 150px;
padding: 10px;
}
.navi a:link, .navi a:visited {
font-size: 14px;
padding: 10px;
text-decoration: none;
}
.navi a:hover, .navi a:focus {
background-color: #555;
color: #fff;
}
.navi a:active {
background-color: #b44;
}
.contents {
margin: 30px auto;
width: 400px;
padding: 20px;
border: 1px solid #222;
border-radius: 5px;
}
#intro:target {
background-color: #0069e0;
color: #fff;
}
#room:target {
background-color: #ff9844;
}
#reservation:target {
background-color: #fff8dc;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<div id="intro" class="contents"></div>
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
</div>
<div id="room" class="contents">
<h2>객실 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
</div>
<div id="reservation" class="contents">
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor.</p>
</div>
</div>
</body>
</html>↓
- :enabled 가상 클래스 선택자 & :disabled 가상 클래스 선택자
웹 요소를 사용할 수 있는 상태일 때 :enabled를,
사용할 수 없는 상태일 때 :disabled를 사용해서 스타일을 지정할 수 있다.
ex, 회원가입할 때 회원 약관을 보여주는 화면에서 사용되는 <textarea>에 사용자가 뭔가를 입력할 수 없게 할 때
(내가 만든) 예시 6.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>:enabled & :disabled 예시 없어서 내가 만듦</title>
<style>
textarea {
border: 1px solid #999;
border-radius: 7px;
font-size: 15px;
display: block;
padding: 20px;
line-height: 2;
word-break: keep-all;
}
textarea:disabled {
background-color: #ccc;
}
</style>
</head>
<body>
<textarea rows="25" cols="120" disabled>
안녕하세요. 코딩에 관심을 갖게 된 지 얼마 되지 않은 코린이 태영입니다. 예전부터 막연하게 "언젠가는 프로그램을 내 손으로 만들어 보고 싶다"라고만 생각해 오다가, 마침 기회가 생겨서 혼자 독학을 시작하게 됐고, 공부할수록 코딩이 재미있다고 느껴졌어요! 제가 어릴 때부터 또래들과는 심히 다른 데서 흥미를 보였던 것들이 있어서, 아마 코딩도 그런 것들 중의 하나가 아닐까, 그저 처음이라서 재미를 느꼈던 게 아닐까, 과연 하던 일까지 그만두고 전향해도 되는 것일까 고민하고 방황하느라고 초반에는 공부 포스팅을 들쭉날쭉 올렸었습니다..ㅠㅠㅎㅎㅎ
다행히 두어 달만에 방황을 접고 완전히 뛰어들기로 결정했어요! 다니던 회사까지 그만두기로 하고 최근에 퇴사 의사를 밝혔는데, 속으로는 내심 두려운 마음이 없지는 않네요... 특히 부모님은 때려치우고 나와서 죽도 밥도 안 될까봐 걱정하시는 눈치예요. 장본인인 저까지 불확실한 미래가 두렵다는 모습을 드러낼 수 없어서 괜히 "지금 하고 있는 일인 대학교 내 작은 위원회 행정직보다 훨씬 더 크게 성공한 사람이 될 거다"라고 큰소리 땅땅 치면서 공부한다고 지금도 바깥에 나와있네요. 지금 하고 있는 일보다 훨씬 더 성공한 사람이 될 거라고요.
아아, 물론 그렇다고 지금 하는 일을 폄훼할 마음은 없습니다..!! 다만 저와는 성향이 맞지 않는 일인데도 '가슴을 울리는 일을 찾고 싶다'는 일념으로 꿋꿋하게 버텨오고 있었던 상황에서, 4년만에야 드디어 그런 일을 찾게 되어 기쁘기 그지없습니다ㅎㅎ
사실 저는 이번에 코딩을 시작하게 되면서 제 인생의 제2막을 시작하게 되는 것 같아서 기대되는 마음이 한가득입니다! 이번 참에 본가에서 독립을 하게 됐거든요!!! 제가 큰딸이기도 하고, 혼자서 자립하기에는 부족한 모습을 부모님께 많이 보여 드렸어서 영 안심을 못하시고 제 행동에 알게 모르게 제약을 많이 거셨던지라 저는 솔직히 해방감을 느끼고 있는데, 부모님은 서운함을 감추지 못하시네요..ㅎㅎㅎ
다 컸다고 뻗댔던 행동들이 정말 부모님께는 같잖아 보일 수 있었겠다는 걸 요새 들어서 실감하고 있어요. 하물며 제가 처음으로 살아가게 될 원룸? 오피스텔? (아직은 어디가 될지 모르니까) 하나 찾는 것도 쉬운 것이 없네요... 인터넷에서 어줍잖게 보고 추가한 조건들이 수십가지나 되다 보니, 슬쩍 찔러본 부동산들에서 1초만에 거절 답변이 와버려서 굉장히 멘붕 상태예요 하핳.. 이렇게 현실과 타협하는 방법을 하나씩 배워가는 중입니다..ㅠㅠㅠ
핑계라면 핑계겠지만, 자꾸 독립한다는 그 들뜨는 마음을 주체할 길이 없어서 부동산 매물을 찾아보는 취미(?)에 빠져버린 탓에 포스팅으로 공부하는 것이 계속해서 늦어지고만 있는 것 같아서 마음을 다시 다잡으려고 노력중입니다ㅜㅜ 느리더라도 꼭 꾸준히 와서 포스팅 하도록 노력할게요..!!! 점점 찾아와주시는 분들이 많이 있는 것 같아서 감사할 따름입니다!ㅎㅎㅎ
</textarea>
</body>
</html>↓
- :checked 가상 클래스 선택자
폼 안의 라디오 박스나 체크 박스를 선택하면 그 요소에 checked 속성이 추가된다.
이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked를 사용한다.
ex, 선택된 라디오 버튼의 레이블을 다른 스타일로 바꿀 때
예제 3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>회원 가입</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.navi {
width: 960px;
height: 60px;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}
.navi ul {
list-style: none;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
display: inline-block;
width: 150px;
padding: 10px;
}
.navi a:link, .navi a:visited {
font-size: 14px;
padding:10px;
text-decoration: none;
}
.navi a:hover, .navi a:focus {
background-color: #555;
color: #fff;
}
.navi a:active {
background-color: #b44;
}
#signup {
background: #fff;
border: 1px solid #222;
border-radius: 5px;
padding: : 20px;
width: 400px;
margin: 30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
width: 60px;
}
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type=radio]):hover {
border-color: #b44;
}
#signup input:checked + label {
color: #b44;
font-weight: bold;
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font: 16px 맑은고딕, 굴림, 돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup b {
float: left;
font-size: 13px;
width: 110px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="ps-1.html#intro">이용 안내</a></li>
<li><a href="ps-1.html#room">객실 소개</a></li>
<li><a href="ps-1.html#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<form id="signup">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" required>
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel">
</li>
</ul>
</fieldset>
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
</li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
<button type="submit"> 제출 </button>
</form>
</div>
</body>
</html>↓
- :not 가상 클래스 선택자
지목한 바로 그 요소를 제외한 나머지 요소들에 스타일을 적용할 때 사용한다.
그래서, 위의 예제 3에, text 폼과 tel 폼에 스타일을 적용하는 대신에
:not을 사용해서 라디오 버튼을 제외하고 나머지에 스타일을 적용하라고 명령어(?)를 씀으로써
코드를 좀 더 짧게 단축하는 효과가 있다.
3. 구조 가상 클래스
: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아서 스타일을 적용할 때 사용하는 가상 클래스 선택자.
- 특정 위치의 자식 요소 선택하기
보통 웹 문서에서 특정 요소에 스타일을 적용할 때는 class나 id 선택자를 사용한다.
BUT 스타일을 지정하고 싶은 그 요소가 몇 번째에 있는지를 따져서 스타일을 적용할 수도 있다.
| 종류 | 설명 |
|---|---|
| :only-child | 부모 요소 안에 자식 요소가 하나뿐일 때, 자식 요소를 선택 |
| A:only-type-of | 부모 요소 안에 하나밖에 없는 A 요소를 선택 |
| :first-child | 부모 요소 안에 있는 모든 요소 중, 첫 번째 자식 요소를 선택 |
| :last-child | 부모 요소 안에 있는 모든 요소 중, 마지막 자식 요소를 선택 |
| A:first-of-type | 부모 요소 안에 있는 A 요소 중에서 첫 번째 것을 선택 |
| A:last-of-type | 부모 요소 안에 있는 A 요소 중에서 마지막 것을 선택 |
| :nth-child(n) | 부모 요소 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택 |
| :nth-last-child(n) | 부모 요소 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택 |
| A:nth-of-type(n) | 부모 요소 안에 있는 A 요소 중에서 n번째 것을 선택 |
| A:nth-last-of-type(n) | 부모 요소 안에 있는 A 요소 중에서 끝에서 n번째 것을 선택 |
- 예제 4.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>가상 선택자_특정 위치의 자식 요소 선택하기</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.navi {
width: 960px;
height: 60px;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}
.navi ul {
list-style: none;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
display: inline-block;
width: 150px;
padding: 10px;
}
.navi a:link, .navi a:visited {
font-size: 14px;
padding:10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color: #555;
color: #fff;
}
.navi a:active {
background-color: #b44;
}
.contents {
margin: 30px auto;
width: 400px;
padding: 20px;
border: 1px solid #222;
border-radius: 5px;
}
.contents :nth-child(3) { /* .contents의 세 번째 자식 요소에 스타일 적용 */
background-color: #ff0; /* 배경색을 노란색으로 */
}
.contents p:nth-of-type(3) { /* .contents의 p 요소 중에서 세 번째에 스타일 적용 */
background-color: #00b900; /* 배경색을 초록색으로 */
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<div class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
<h2>객실 소개</h2>
<p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor.</p>
</div>
</div>
</body>
</html>↓
- 수식을 사용해 위치 지정하기
특정 위치의 자식 요소를 선택해서 스타일을 지정할 때 nth-~~~로 시작한 선택자들이 있다.
:nth-child(n)
:nth-last-child(n)
A:nth-of-type(n)
A:nth-last-of-type(n)
여기의 n 위치에 an+b처럼 수식을 쓸 수도 있다. (n ≥ 0)
이를 이용해서, 홀수 번째 요소에 스타일을 적용할 때 2n+1을 이용할 수 있고,
짝수 번째 요소에 스타일을 적용할 때 2n을 사용할 수 있다.
(영어 단어 odd홀수, even짝수을 이용해서 표현할 수도 있다.)
ex 1, 홀수를 표현할 때
div p:nth-child(odd)div p:nth-child(2n+1)
ex 2, 짝수를 표현할 때
div p:nth-child(even)div p:nth-child(2n)
수식을 쓸 수 있으니,
응용하게 되면,
2, 5, 8, 11... 과 같이 규칙성이 있는 순서의 요소에 스타일을 적용할 수도 있을 것이다.
div p:nth-child(3n+2)요렇게ㅎㅎ
예제 5.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>가상 선택자_특정 위치의 자식 요소 선택하기</title>
<style>
#container {
text-align: center;
color: #2b2b2b;
}
table, td, th {
border: 1px solid #ccc;
}
table {
width: 200px;
margin: 0 auto;
border-collapse: collapse;
}
td {
text-align: left;
padding: 10px;
padding-left: 20px;
}
table tr:nth-of-type(2n+1) {/* 홀수 번째 행에만 스타일 적용 */
background: lightgray;
color: black;
}
</style>
</head>
<body>
<div id="container">
<h1>웹 개발</h1>
<table>
<tr>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
<tr>
<td>Javascript</td>
</tr>
<tr>
<td>React</td>
</tr>
<tr>
<td>node.js</td>
</tr>
</table>
</div>
</body>
</html>↓
cf,
여기서 VSCode의 Emmet을 사용하는 Tip!
위의 예제 5에서처럼, <table> 안에 <tr>과 <td>가 반복되는 것을 단축키로 표현하고 싶다면?
① table>tr>td*5
② table>tr*5>td
중에서 하나가 정답이다!
'*5'의 위치만 달라졌을 뿐인데,
결과가 다르게 나오기 때문이다.
①
table>tr>td*5↓
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
②
table>tr*5>td↓
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
정답은 ②!!!
역시 단축키는 언제나 옳다...🤣🤣
책에 있는 실습!
먼젓번에 다뤘던 예제인
이 폼의 '제출' 버튼이 영 이상하다. 테두리까지 있고...
이것을 가상 클래스를 이용해 바꾸어 볼 예정이다.
#signup fieldset:last-of-type {
border: none;
margin-bottom: 0;
}CSS 파일(또는 html 파일의 <style>) 안에 위의 코드를 추가하고
다시 html 파일을 열어보면
제출 버튼이 있는 <fieldset>의 테두리가 사라지고 아래쪽 여백도 줄어들었다.
여기에,
제출 버튼에 마우스 포인터를 올렸을 때 효과가 바뀌게 하려면?
#signup button:hover {
background-color: #555;
color: #fff;
}역시 CSS 파일(아니면 html 파일의 <style>) 안에 위의 코드를 넣으면 된다.
참고로 background-color는 내 맘대로 책에서 지시한 색이 아닌 다른 색으로 바꿨다.
더해서,
:not을 사용해 CSS 파일을 단순화 해 보았다.
#signup input[type=text], #signup input[type=password], #signup input[type=tel], #signup input[type=email] { /* 속성 선택자 사용 */
border: 1px solid #ccc; /* 텍스트 필드 테두리 지정 */
border-radius: 3px; /* 텍스트 필드 모서리를 둥글게 지정 */
font-size: 13px; /* 텍스트 필드 안의 글자 크기 지정 */
padding: 5px; /* 텍스트 필드와 내용 사이의 패딩 지정 */
width: 200px; /* 텍스트 필드 너비 지정 */
}위의 코드가
#signup input:not([type=radio]) { /* :not 사용 */
border: 1px solid #ccc; /* 텍스트 필드 테두리 지정 */
border-radius: 3px; /* 텍스트 필드 모서리를 둥글게 지정 */
font-size: 13px; /* 텍스트 필드 안의 글자 크기 지정 */
padding: 5px; /* 텍스트 필드와 내용 사이의 패딩 지정 */
width: 200px; /* 텍스트 필드 너비 지정 */
}이렇게 단순해졌다.
결과는 어차피 같다.
'프밍 > CSS' 카테고리의 다른 글
| DAY 25. 단원 마무리 문제 풀기 (0) | 2022.12.03 |
|---|---|
| DAY 25. 가상 요소 (0) | 2022.12.03 |
| DAY 23. 속성 선택자 (1) | 2022.11.27 |
| DAY 23. 연결 선택자 (0) | 2022.11.27 |
| DAY 22. 단원 마무리 문제 풀기 (0) | 2022.11.23 |