> link
tag a, attribute href - 이동할 페이지 주소 작성
1. 링크를 새로운 탭으로 열게 하려면, attribute 로 target="_blank" 작성
<a href="https://www.daum.net" target="_blank">다음</a>2. vscode 내에 저장한 다른 파일로 이동하려면 attribute href 값으로 해당 파일명 작성
<a href "25font.html">폰트연습</a>3. 이미지를 클릭하여 다른 페이지로 이동하려면 a element 의 content 로 img tag 작성
(↓이미지는 vscode 에 저장되어있으며 img tag 의 src 값으로 경로와 파일명 작성, 같은 폴더에 위치한 경우 경로 작성 불필요)
<a href="https://www.naver.com"><img src"../html/01intro/rabbit.jpg"></a>4. 밑줄 없는 링크를 작성하려면 attribute 로 style="text-decoration:none;" 작성
<a style="text-decoration:none;" href="https://www.google.com">밑줄없는링크</a>
> pseudo class
가상 클래스 (직접 attribute 로 작성하지 않아도 됨)
selector 에 colon (:) 으로 연결하여 작성 → selector:pseudoclass { }
가상 class 이지만 우선순위를 따질 때 class 를 하나 작성한 것으로 침
element 의 특정 상태를 나타냄
1. link - 기본 상태, 방문한 적 없는 링크 (파란색)
2. visited - 방문한 적 있는 링크 (보라색)
3. hover - element(링크) 에 마우스를 올렸을 때
4. active - element(링크) 를 클릭하고 있을 때 (빨간색)
*방문기록 - 인터넷 사용기록 삭제 하면 방문한 적 없는 상태로 초기화 됨 (혹은 ctrl+shift+n 시크릿 모드로 접속)
<head>
<style>
#text1:link{
color:yellow;
}
#text2:link{
color:yellow;
}
#text2:visited{
color:skyblue;
}
#text2:active{
color:black;
}
#text2:hover{
color:darkblue;
background-color:darkgrey;
}
</style>
</head>
<body>
<a id="text1" href="https://www.naver.com">네이버</a>
<a id="text2" href="https://duck.com">덕덕고</a>
</body><head>
<style>
div{
box-sizing:border-box;
background-color:ivory;
width:200px;
height:100px;
margin:10px;
text-align:center;
}
div:hover{
border:5px solid yellow;
background-color:black;
color:white;
}
</style>
</head>
<body>
<div>this</div>
<div>is</div>
<div>the</div>
<div>text</div>
</body>
https://www.w3schools.com/css/css_pseudo_classes.asp
CSS Pseudo-classes
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
> combinator
1. child selector (>)
selector1>selector2 : selector1 의 자식요소인 selector2 만 선택 (자손X, 자식만)
<head>
<style>
p{
color:blue;
}
div>p{
text-decoration:underline;
}
body>p{
font-size:32px;
}
#div1>p{
text-decoration:line-through;
}
</style>
</head>
<body>
<div id="div1">
<p>this is the first text.</p>
</div>
<div id="div2">
<p>this is the second text.</p>
</div>
<p>this is the third text.</p>
<p>this is the fourth text.</p>
</body>2. descendant selector (space)
selector1 selector2 : selector1 의 자손요소인 selector2 만 선택 (자식 포함 모든 자손)
<head>
<style>
p{
color:blue;
}
div p{
text-decoration:underline;
}
body p{
font-size:32px;
}
#div1 p{
text-decoration:line-through;
}
</style>
</head>
<body>
<div id="div1">
<p>this is the first text.</p>
</div>
<div id="div2">
<p>this is the second text.</p>
</div>
<p>this is the third text.</p>
<p>this is the fourth text.</p>
</body>3. adjacent sibling selector (+)
selector1 + selector2 : selector1 바로 다음에 오는, 형제관계에 있는 selector2 만 선택
<head>
<style>
#div1+p{
color:blue;
}
</style>
</head>
<body>
<div id="div1">this is the div1.</div>
<p>this is the first p element.</p>
<p>this is the second p element.</p>
<p>this is the third p element.</p>
</body>* CSS property - display
none : 선택된 element 가 페이지에 표시되지 않음
<style>
p{
display:none;
}
</style>
* 예제
<head>
<style>
p{
display:none;
}
div:hover+p{
display:block;
}
</style>
</head>
<body>
<div>this is the first div.</div>
<p>this is the first p element.</p>
<div>this is the second div.</div>
<p>this is the second p element.</p>
</body>
-> p element 는 각각의 div 위에 마우스 커서를 올리면 표시됨
* https://flukeout.github.io/ 에서 css selector 연습 (모르는 문제는 검색)
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
* <tag /> = <tag> </tag> (빈 요소)
19. bento:first-of-type 혹은 bento:nth-last-child(3)
bento:nth-last-child(3)
→ bento (element selector) 이면서(and, 교집합) :nth-last-child(3) (pseudo class selector, 뒤에서 세번째)
20. apple:first-of-type
21. plate:nth-of-type(even)
27. [for]
'course 2021 > HTML\CSS\JS' 카테고리의 다른 글
| day08 - flexbox (0) | 2021.11.03 |
|---|---|
| day07 - list, table (0) | 2021.10.28 |
| day05 - font (0) | 2021.10.22 |
| day04 - box model (0) | 2021.10.20 |
| day03 - CSS, selector, combinator (0) | 2021.10.16 |
