이너스타일 (Inner style)
- 직접 태그안에 스타일 써서 (인라인 스타일)
재사용성이 떨어지지만, 우선순위가 제일 높다.
- 중복 스타일 태그 만들어서 (이너스타일) , 주로 위에 위치한다
- 외부css파일로 만드는 방법
재사용성이 높다
스타일 규칙 우선순위
: 최종 아래쪽에 적혀있는 스타일이 반영이된다! (Inline Style 에우선순위가 가 높음)
(숙제) Selector에 대한 개념 정리하기
id속성 class속성 name속성
id속성: 태그 식별 목적/ id 속성 값은 절대 중복되면 안된다!
class 속성:
name 속성: 사용자가 입력한 값을 서버로 전달(전송)할 때 필요한 이름
사이트 추천
(과제) 사이트 들어가서 오늘 배운거 정리하기
W3Schools Online Web Tutorials
W3Schools Online Web Tutorials
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
(html 에는 데이터가 들어있고, css는 그걸 어떻게 (표현)보여줄까를 나타낸다)
부모-자식, 상위-하위 태그
먼저열린태그: 상위태그, 부모태그
나중에 열린 태크: 하위태그 , 자식태그
elment node
: body/ h2/ p...
text node
: descendant selector ...
(본홍색)
div p {
background-color: yellow;
}
(초록색)
div>p {
background-color: yellow;
}
(파랑색)
div+p {
background-color: yellow;
}
(검은색)
div~p {
background-color: yellow;
}
[코드공유]
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: hotpink;
}
/* mouse over link */
a:hover {
color: pink;
}
/* selected link */
a:active {
color: blue;
}
#b{
background-color:pink;
}
#b:hover{
color: white;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p id="b"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
[코드공유]
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:1px solid;
}
h3, h1 {
display: none;
background-color: pink;
padding: 20px;
color: white;
}
h2 {color: hotpink;}
div:hover h3 {
/*display: block;*/
display: inline;
}
div:hover h1 {
display: block;
}
</style>
</head>
<body>
<h2> 마우스를 움직여보세요</h2>
<div>여기YO!
<h3>대머리 깎아라</h3>
<h1>뭘봐요</h1>
</div>
</body>
</html>
[코드공유]
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: red;
}
p b{
border: 1px solid;
color: white;
}
p b:hover{
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> <b>임쥰</b>. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> <b>정겨</b></p>
</body>
</html>
[코드공유]
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
p:first-child i:hover{
color: red;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<div>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>
</body>
</html>
[과제] CSS selectors 정리하기
'JAVA 수업 > 웹(WEB) 수업 기록' 카테고리의 다른 글
| 0704 과제 (2) | 2023.07.04 |
|---|---|
| 0703 수업 내용 (0) | 2023.07.03 |
| 0628 수업내용 (2) | 2023.06.28 |
| 0627 수업 내용 (2) | 2023.06.27 |
| 0626 수업 내용 (6) | 2023.06.26 |
