HTML
1. 영역관련태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>영역관련태그</title>
<style>
div, span{
/* 1픽셀짜리 검정색 실선을 테두리로 만들 것 */
border : 1px solid black;
width : 400px;
height : 400px;
}
/* id속성값이 div1인 요소에다가 스타일을 부여하겠다 */
#div1, #span1{
background-color:green;
color:silver;
}
#div2, #span2{
background-color:brown;
color:indigo;
}
#div3, #span3{
background-color: black;
color:yellow;
}
</style>
</head>
<body>
<h1>영역 관련 태그</h1>
<!--
div / span
1. 블럭(block)요소 : 한 줄 단위로 영역을 차지하는 요소
줄바꿈이 적용되어 이미 존재하는 요소 다음줄로 넘어감
(h1 ~ h6), p, pre, textarea, ... "div")
2. 인라인(inline)요소 : content내용만큼만 영역을 차지하는 요소
줄바꿈이 적용되지 않아 옆으로 쭉 이어져서 출력
다음 줄로 넘기고자 할 때 <br>로 개행해야 함
(input, label, mark, s, img, button... "span")
-->
<h2>div요소와 span요소의 차이점!</h2>
<h3>div요소 : 블럭요소로 영역을 지정할 수 있는 태그(한 줄 차지)</h3>
<div id="div1">첫 번째 영역</div><div id="div2">두 번째 영역</div><div id="div3">세 번째 영역</div>
<h3>span요소 : 인라인요소로 영역을 지정할 수 있는 태그(content영역만큼만 차지)</h3>
<span id="span1">첫 번째 영역</span><span id="span2">두 번째 영역 늘어나버리면?? 그만큼 늘어남</span><span id="span3">세 번째 영역</span>
<h2>div와 span의 영역 지정 방식</h2>
<div>
가을 가슴속에 마리아 보고, 없이 있습니다. 다 강아지, 소학교 북간도에 나의 계십니다. 이네들은 아스라히 어머니 위에 이름을 그리워 자랑처럼 지나가는 까닭입니다. 오면 가을로 다 지나가는 가을 계절이 다하지 있습니다. 속의 하나에 헤일 계십니다. 말 나는 동경과 봅니다. 덮어 별 오는 까닭입니다. 하나에 토끼, 아스라히 봅니다. 시와 자랑처럼 이네들은 가득 동경과 밤이 까닭입니다. 벌써 계절이 다 밤이 불러 봅니다.
마디씩 나는 것은 별 별 내일 버리었습니다. 멀리 별 걱정도 경, 이름과, 나는 하나 듯합니다. 언덕 한 이네들은 잔디가 불러 있습니다. 내 나의 그러나 나는 까닭입니다. 별 애기 위에 어머니 북간도에 있습니다. 지나가는 마디씩 된 하나에 나는 까닭입니다. 나는 헤는 이네들은 동경과 써 벌레는 가슴속에 까닭입니다. 이름과, 속의 나는 시와 했던 마리아 까닭입니다. 파란 불러 밤이 버리었습니다. 가을로 멀리 무성할 덮어 이름과 다하지 벌써 노새, 있습니다. 나는 불러 그러나 옥 남은 멀리 까닭입니다.
멀리 이름과, 오면 노루, 이네들은 둘 라이너 있습니다. 이름자를 위에도 다 새워 지나가는 멀리 사랑과 내 듯합니다. 쉬이 까닭이요, 불러 가난한 별 계십니다. 남은 이웃 하나에 별 청춘이 사람들의 파란 밤을 버리었습니다. 자랑처럼 밤이 나는 봅니다. 나의 마리아 딴은 새겨지는 한 까닭입니다. 비둘기, 언덕 겨울이 이 벌써 하나에 한 밤이 사람들의 까닭입니다. 아스라히 불러 밤이 거외다. 새워 잠, 추억과 사람들의 어머님, 보고, 하나에 둘 이국 있습니다. 아이들의 노루, 별에도 봅니다.
</div>
<span>
가을 가슴속에 마리아 보고, 없이 있습니다. 다 강아지, 소학교 북간도에 나의 계십니다. 이네들은 아스라히 어머니 위에 이름을 그리워 자랑처럼 지나가는 까닭입니다. 오면 가을로 다 지나가는 가을 계절이 다하지 있습니다. 속의 하나에 헤일 계십니다. 말 나는 동경과 봅니다. 덮어 별 오는 까닭입니다. 하나에 토끼, 아스라히 봅니다. 시와 자랑처럼 이네들은 가득 동경과 밤이 까닭입니다. 벌써 계절이 다 밤이 불러 봅니다.
마디씩 나는 것은 별 별 내일 버리었습니다. 멀리 별 걱정도 경, 이름과, 나는 하나 듯합니다. 언덕 한 이네들은 잔디가 불러 있습니다. 내 나의 그러나 나는 까닭입니다. 별 애기 위에 어머니 북간도에 있습니다. 지나가는 마디씩 된 하나에 나는 까닭입니다. 나는 헤는 이네들은 동경과 써 벌레는 가슴속에 까닭입니다. 이름과, 속의 나는 시와 했던 마리아 까닭입니다. 파란 불러 밤이 버리었습니다. 가을로 멀리 무성할 덮어 이름과 다하지 벌써 노새, 있습니다. 나는 불러 그러나 옥 남은 멀리 까닭입니다.
멀리 이름과, 오면 노루, 이네들은 둘 라이너 있습니다. 이름자를 위에도 다 새워 지나가는 멀리 사랑과 내 듯합니다. 쉬이 까닭이요, 불러 가난한 별 계십니다. 남은 이웃 하나에 별 청춘이 사람들의 파란 밤을 버리었습니다. 자랑처럼 밤이 나는 봅니다. 나의 마리아 딴은 새겨지는 한 까닭입니다. 비둘기, 언덕 겨울이 이 벌써 하나에 한 밤이 사람들의 까닭입니다. 아스라히 불러 밤이 거외다. 새워 잠, 추억과 사람들의 어머님, 보고, 하나에 둘 이국 있습니다. 아이들의 노루, 별에도 봅니다.
</span>
<hr>
<h1>iframe 태그</h1>
<p>
현재 이 HTML문서 안에 다른 웹페이지를 포함시키는 태그
</p>
<iframe src="3_표관련태그.html" frameborder="0" width="700" height="1500"></iframe>
<iframe width="799" height="449" src="https://www.youtube.com/embed/x6i3_LfeTjY" title="𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭 질리도록 듣는 히트곡엔 그 이유가 있다𝐅𝐞𝐚𝐭. 𝐋𝐚𝐮𝐯, 𝐋𝐚𝐧𝐲, 𝐇𝐨𝐧𝐧𝐞, 𝐤𝐞𝐬𝐡𝐢, 𝐏𝐞𝐝𝐞𝐫 𝐄𝐥𝐢𝐚𝐬, 𝐓𝐫𝐨𝐲𝐞 𝐒𝐢𝐯𝐚𝐧, 𝐂𝐡𝐚𝐫𝐥𝐢𝐞 𝐏𝐮𝐭𝐡" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
2. 하이퍼 링크 관련 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>하이퍼 링크 관련 태그</title>
</head>
<body>
<!--
하이퍼 링크란 웹문서에서 또 다른 문서로 클릭해서 이동할 수 있게끔 연결시켜놓은 가장 핵심적인 기능
텍스트 문구를 클릭해도 이동하고, 이미지를 클릭해도 이동, 현재 페이지내에서도 이동 놀랍다~
-->
<h1>하이퍼 링크 태그</h1>
<h3>a태그를 이용한 하이퍼링크</h3>
<a href="3_표관련태그.html">표관련태그</a>
<a href="2_목록관련태그.html">클릭클릭</a>
<h3>인터넷이 연결된 상황이면 현재 서비스 되고있는 웹 페이지로 이동 가능</h3>
<a href="https://www.youtube.com/watch?v=2YLs33C72zo">𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭 초여름 특유의 선선한 밤공기를 느끼며</a>
<ul>
<li><a href="http://www.naver.com" target="_self">네이버로 이동</a></li>
<li><a href="http://www.google.com" target="_blank">구글로 이동</a></li>
</ul>
<!--
target속성 : _self / _blank
_self : 기존의 창에서 연결됨 target을 명시하지 않으면 기본값
_blank : 새 탭에서 열기
-->
<hr>
<h3>이미지를 클릭해서 웹페이지 링크 연결하기</h3>
<a href="http://www.naver.com" target="_blank">
<img src="resources/image/kh_logo.jpg" alt="KH로고">
</a>
<hr>
<h3 id="list">한 페이지 내에서 점프하는 앵커(a태그) 만들기</h3>
<ul>
<li><a href="#content1">본문내용1</a></li>
<li><a href="#content2">본문내용2</a></li>
<li><a href="#content3">본문내용3</a></li>
</ul>
<!-- Alt + Shift + 방향키 : 지정된 행 복사-->
<h4 id="content1">본문내용1</h4>
<br><br>
<div>
그들은 그들은 눈이 우리는 두기 위하여 있는 구하지 듣는다. 황금시대를 이상은 앞이 장식하는 쓸쓸하랴? 우리 많이 청춘의 예가 그들의 별과 길을 일월과 때문이다. 영락과 그들은 사람은 때문이다. 대한 있는 이상이 같이, 타오르고 그들의 자신과 우리의 것이다. 얼마나 위하여서, 우리 인생을 가진 새가 너의 이성은 뭇 있는가? 그들은 그들의 사랑의 이는 교향악이다. 발휘하기 스며들어 가는 그들의 놀이 천지는 것이다. 인생의 풍부하게 우리의 같은 풀밭에 쓸쓸한 끓는다. 반짝이는 뜨고, 열락의 풍부하게 곧 꽃 운다. 이상의 귀는 얼마나 가치를 품었기 없는 찾아 기쁘며, 인생에 봄바람이다.
</div>
<br><br>
<h4 id="content2">본문내용2</h4>
<br><br>
<div>
그들은 그들은 눈이 우리는 두기 위하여 있는 구하지 듣는다. 황금시대를 이상은 앞이 장식하는 쓸쓸하랴? 우리 많이 청춘의 예가 그들의 별과 길을 일월과 때문이다. 영락과 그들은 사람은 때문이다. 대한 있는 이상이 같이, 타오르고 그들의 자신과 우리의 것이다. 얼마나 위하여서, 우리 인생을 가진 새가 너의 이성은 뭇 있는가? 그들은 그들의 사랑의 이는 교향악이다. 발휘하기 스며들어 가는 그들의 놀이 천지는 것이다. 인생의 풍부하게 우리의 같은 풀밭에 쓸쓸한 끓는다. 반짝이는 뜨고, 열락의 풍부하게 곧 꽃 운다. 이상의 귀는 얼마나 가치를 품었기 없는 찾아 기쁘며, 인생에 봄바람이다.
</div>
<br><br>
<h4 id="content3">본문내용3</h4>
<br><br>
<div>
그들은 그들은 눈이 우리는 두기 위하여 있는 구하지 듣는다. 황금시대를 이상은 앞이 장식하는 쓸쓸하랴? 우리 많이 청춘의 예가 그들의 별과 길을 일월과 때문이다. 영락과 그들은 사람은 때문이다. 대한 있는 이상이 같이, 타오르고 그들의 자신과 우리의 것이다. 얼마나 위하여서, 우리 인생을 가진 새가 너의 이성은 뭇 있는가? 그들은 그들의 사랑의 이는 교향악이다. 발휘하기 스며들어 가는 그들의 놀이 천지는 것이다. 인생의 풍부하게 우리의 같은 풀밭에 쓸쓸한 끓는다. 반짝이는 뜨고, 열락의 풍부하게 곧 꽃 운다. 이상의 귀는 얼마나 가치를 품었기 없는 찾아 기쁘며, 인생에 봄바람이다.
</div>
<br><br>
<a href="#list">목록으로 돌아가기</a>
</body>
</html>
CSS
3. 기본선택자
- 인라인 스타일 방식
<!-- 인라인 스타일 방식-->
<h3 style="background-color:aqua; color:blue">CSS 기본선택자</h3>- 내부 스타일 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS기본선택자</title>
<!-- style 태그 사용(내부 스타일 방식) -->
<style>
/* CSS영역 /*주석 */
/* 1. 전제 선택자
* {
color :darkred; // color : Content 색상 변경
}
*/
/* 2. 태그 선택자 */
pre, p {
color : hotpink;
}
/* 3. 아이디 선택자(#아이디속성값) */
#id3 {
color : cornflowerblue;
}
#pre3 {
background-color :burlywood;
color :crimson;
}
/* 4. 클래스 선택자(.클래스속성값) */
.class1 {
color : blue;
}
.class2 {
font-size: 30pt;
}
</style>
</head>
<body>
<!--
* CSS(Cascading Style Sheet)
HTML 구조는 그대로 두고, style태그로 구조를 꾸미는 역할을 하는 표현언어
HTML과 마찬가지로 웹 표준이며, 보통 CSS3버전을 사용함
* 웹 표준 : W3C(WWW Consortium)에서 지정
* CSS 스타일 부여 방식
1. 인라인 스타일 방식 : 스타일을 부여하고자 하는 요소 내에 style속성을 이용해서 직접 기입하는 방식 (빠름 / 수정어려움)
2. 내부 스타일 방식 : 현재 이 HTML문서에 적용시키고자 하는 스타일 정보들을 <head>영역에
<style>태그를 이용해서 내부에 기입하는 방식 (끝나고 외부스타일로 바꿔줘야 함)
3. 외부 스타일 방식 : 스타일정보만을 관리하는 .css외부문서를 만들고 <link>태그를 통해 연결시켜주는 방식
-->
<h3>선택자란?</h3>
<p>
특정 HTML요소를 선택하고자 할 때 사용하는 기능 <br>
해당 요소를 선택해서 원하는 style을 적용 가능
</p>
<h3>1. 전체(모든요소) 선택자</h3>
<pre>
[ 표현법 ]
* {
스타일속성 : 스타일속성 값;
스타일속성 : 스타일속성 값;
}
=> 모든 요소들 다 선택하고자 할 때 사용
</pre>
<hr>
<h3>2. 태그 선택자(태그명)</h3>
<pre>
[ 표현법 ]
태그명 {
스타일 속성 : 값;
스타일 속성 : 값;
...
}
=> 이 문서 내에 같은 태그들을 모두 선택할 때 사용
</pre>
<hr>
<h3>3. 아이디 선택자(#아이디속성값)</h3>
<pre id="pre3">
[ 표현법 ]
#아이디속성값 {
스타일속성 : 스타일속성 값;
스타일속성 : 스타일속성 값;
...
}
=> 이 문서 내에 특정 HTML요소 단 하나만을 선택하고자 할 때 사용
단, 해당 요소에 반드시 id속성을 이용해서 고유한 아이디값이 부여되어 있어야 함
같은 태그더라도 부분적으로 다르게 스타일을 부여하고 싶을 때 사용
</pre>
<ol>
<li>아이디선택자</li>
<li>아이디선택자</li>
<li id="id3">아이디선택자</li>
<li>아이디선택자</li>
</ol>
<!--
id : 문서 내에 고유한 값으로 하나만을 작성(절대********** 중복금지!!!!!!!!!)
class : 별명을 지어주는 속성, 여러 개 작성가능, 중복 값을 작성 가능
id, class : 모든 태그에 공통적으로 사용할 수 있는 속성
-->
<h3>4. 클래스 선택자(.클래스속성값)</h3>
<pre>
[ 표현법 ]
.클래스속성값{
스타일 속성 : 스타일속성 값;
스타일 속성 : 스타일속성 값;
...
}
=> 이 문서 안에서 여러 개의 요소를 선택하고 싶을 때
</pre>
<!-- 클래스선택자1,3,5 li요소에만 스타일 주고싶음-->
<!-- 클래스선택자2,3 li요소에만 공통적인 스타일을 주고싶음-->
<ul>
<li class="class1">클래스선택자1</li>
<li class="class2">클래스선택자2</li>
<li class="class1 class2">클래스선택자3</li> <!-- 클래스 속성값을 여러 개 작성시 한 칸 띄고 씀 -->
<li>클래스선택자4</li>
<li class="class1">클래스선택자5</li>
</ul>
</body>
</html>
4. 기타선택자
- 외부 스타일 방식
<!DOCTYPE html>
<html lang="en">
<head>
<title>기타선택자</title>
<link rel="stylesheet" href="resources/css/02_stylesheet.css">
</head>
<body>
<h1>기타 선택자</h1>
<h2>1. 속성 선택자</h2>
<p>
스타일을 부여하고자 하는 요소 내에 작성되어있는 속성(id, class, input, name... 등)을 이용해서 선택하는 방법 <br>
기본선택자 뒤에 []를 이용해서 속성과 속성값을 명시해서 선택하는 방법
</p>
<!--
.div-class[name=name$]{div$}*4
.class이름[name추가=name이름$번호매김]{content}*개수
-->
<div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="class-div" name="name4">div4</div>
<pre>
[ 표현법 ]
선택자[속성=속성값]{스타일속성 : 값;} => "일치"
선택자[속성~=속성값]{스타일속성 : 값;} => "포함(단어기준)"
선택자[속성|=속성값]{스타일속성 : 값;} => "시작(단어기준, -로 구분)"
선택자[속성^=속성값]{스타일속성 : 값;} => "시작(단어기준)"
선택자[속성$=속성값]{스타일속성 : 값;} => "끝"
선택자[속성*=속성값]{스타일속성 : 값;} => "포함(일반문자열)"
</pre>
<hr>
<h2>2. 자식선택자 / 후손선택자</h2>
<p>
자식 : 바로 하위 요소들
후손 : 하위 요소들 전부
</p>
<pre>
[ 표현법 ]
- 자식선택자(>)
a > b {
스타일속성 : 값;
...
}
- 후손선택자( )
a b {
스타일속성 : 값;
...
}
</pre>
<!--
#test1
#id속성값
-->
<div id="test1">
<h4>div의 자식이면서 후손입니다.</h4>
<h4>div의 자식이면서 후손입니다.</h4>
<ul>div의 자식이면서 후손입니다.
<li>ul의 자식이면서 div의 후손입니다.</li>
<li>ul의 자식이면서 div의 후손입니다.</li>
</ul>
<li>안녕 난 자식이면서 후손이야</li>
</div>
<hr><hr>
<h2>3. 동위(같은레벨) 선택자</h2>
<p>
동위관계(같은 레벨)에 있는 뒤에 위치한 특정 요소를 선택할 때 사용
</p>
<pre>
[ 표현법 ]
- a요소 뒤에 있는 b요소 단 하나만을 선택하겠다.
a + b {
스타일 속성 : 값;
...
}
- a요소 뒤에 있는 b요소들을 모두 다 선택하겠다.
a ~ b {
스타일 속성 : 값;
...
}
</pre>
<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<ul>ul요소</ul>
<div>div4</div>
<div>빠잉</div>
<hr>
<h4>4. 반응 선택자</h4>
<p>
사용자의 움직임에 따라서 선택이 되거나 안되는 선택자
</p>
<pre>
[ 표현법 ]
- 해당 요소를 클릭했을 때 스타일을 부여하고자
선택자 : active {
스타일속성 : 값;
...
}
- 해당 요소에 마우스커서가 올라가는 순간 스타일을 부여하고자
선택자 : hover {
스타일속성 : 값;
...
}
</pre>
<!--
div요소 두개를 만들어서 각각의 div요소에 반응 선택자를 이용한 스타일을 부여
1번 div요소는 id속성값을 active-test
2번 div요소는 id속성값을 hover-test
둘 다 class속성값은 area
-->
<!-- #active-test.area+#hover-test.area -->
<div id="active-test" class="area"></div>
<br>
<div id="hover-test" class="area"></div>
<hr>
<h2>5. 상태선택자</h2>
<p>
요소의 상태에 따라서 선택되는 선택자 <br><br>
선택할 수 있는 상태의 종류 <br>
1. checked상태 <br>
2. focus상태 <br>
3. enabled상태 <br>
4. disabled상태 <br>
</p>
<pre>
[ 표현법 ]
1) checked 상태의 요소들
선택자:checked {
스타일 속성 : 값;
}
</pre>
<div id="chk">
<!-- input:checkbox -->
<input type="checkbox" id="mango"><label for="망고">망고</label>
<!-- input:checkbox#grape+label[for=grape]{포도} -->
<input type="checkbox" id="grape"><label for="grape">포도</label>
<input type="checkbox" id="watermelon"><label for="watermelon">수박</label>
</div>
<br>
<pre>
2) focus가 맞춰진 input 요소 선택
선택지:focus{
스타일속성 : 값;
...
}
</pre>
아이디 : <input type="text" name="userId" placeholder="아이디쓰세요">
<br>
비밀번호 : <input type="password" name="userPwd">
<br>
<pre>
3) enabled : 활성화된 상태
선택자 : enabled{
스타일속성 : 값;
...
}
4) disabled : 비활성화된 상태
선택자 : disabled{
스타일속성 : 값;
...
}
</pre>
<button>클릭가능</button>
<button disabled /* ="disabled" */>클릭불가능</button>
</body>
</html>(외부소스)
/* CSS파일! 전체가 스타일 영역이기 떄문에 스타일정보를 바로 기입함 */
/* 1. 속성 선택자 */
/* div요소 중에서 name속성값이 name1과 "일치"하는 요소만 스타일을 부여하겠다. */
div[name = name1] {
background-color : goldenrod;
}
/* div요소 중에서 main속성값에 name1이 "포함"되어있는 요소만 스타일을 부여하겠다. */
div[name ~=name1] {
background-color : aquamarine;
}
/* div요소 중에서 class속성값에 i가 "포함"되어있는 요소만 스타일을 부여하겠다. */
div[class *= i] {
color : aliceblue;
background-color: tomato;
}
/* div요소 중에서 class속성값이 div로 "시작"하는 요소만 스타일을 부여하겠다. */
div[class |= div] {
color : yellowgreen;
}
/* div요소 중에서 name속성값이 name3으로 "시작"하는 요소만 스타일을 부여하겠다. */
div[class ^= name3] {
background-color: lightpink;
}
/* div요소 중에서 class속성값이 ss로 "끝"나는 요소만 스타일을 부여하겠다. */
div[class $= ss] {
background-color: darkgreen;
}
/* class속성값이 div-class인 요소들 중에서 name속성값에 name3이 "포함"되어있는 요소 컨텐트색 변경 */
.div-class[name~=name3] {
color:aliceblue;
}
/* 2. 자식선택자와 후손선택자 */
/* - 자식선택자 a > b : a요소의 자식요소들 중에서 b요소들만 선택하겠다. */
/* id속성값이 test1인 요소의 자식들 중에서 h4인 태그만 선택하겠다. */
#test1 > h4 {
background-color: cornsilk;
}
/* id속성값이 test1인 요소의 자식들 중에서 ul태그인 요소의 자식들 중에서 li요소들만 선택하겠다. */
#test1 > ul > li {
background-color : cyan;
}
/* 후손 선택자 a b : a요소의 후손(모든 하위요소)들 중에서 b요소들만 선택하겠다. */
#test1 li {
background-color: firebrick; /* 우선순위가 밀려서 적용X */
color : darksalmon;
}
/* 3. 동위선택자 */
/* a + b : a요소 뒤에 있는 b요소 단 하나만을 선택하겠다 */
/* id가 test2인 요소 뒤에 div요소 단 하나만 선택 */
#test2 + div {
background-color: forestgreen;
}
/* id가 test2인 요소 뒤에 있는 ul요소 하나만 선택 */
#test2 + ul {
background-color: red; /* 바로 뒤의 요소가 아니기 때문에 선택 X */
}
/* a ~ b : a요소 뒤에 있는 모든 b요소들을 선택 */
#test2 ~ div {
/* background-color: royalblue; */
}
test2 ~ ul {
background-color: rosybrown;
}
/* 반응 선택자 */
.area {
width : 100px;
height : 100px;
background-color: yellowgreen;
}
#active-test:active {
background-color: greenyellow;
cursor: pointer;
}
#hover-test:hover {
background-color: peachpuff;
cursor: pointer;
}
/* 5. 상태선택자 */
input[type=checkbox]:checked, label {
width : 20px;
height : 20px;
/* font-size : 20px; */
}
/* 체크박스가 체크될 때 글씨크기도 20px로 변경하고 싶음! */
input[type=checkbox]:checked + label {
font-size : 20px;
}
/* focus */
input[name^=user]:focus{
background-color: magenta;
}
/* enabled, disabled */
button:enabled{
background-color: yellowgreen;
}
button:disabled{
background-color: gray;
}5. 선택자 우선순위
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>선택자 우선순위</title>
<style>
h1{
background-color: lavender;
color:blue
}
h1 {
color:brown; /* 같은 스타일 속성에 대해 덮어씌움 */
}
/* 문자열들이 랜더링될 때 cascade되어 출력되므로 아래에 있는 값들이 우선순위가 높다. */
#id1{
background-color: burlywood;
}
h1 {
background-color: black;
}
.class1{ /* 태그선택자, 클래스선택자보다 아이디 선택자 우선순위가 더 높음! */
background-color : darkolivegreen;
color:aquamarine;
}
h1{
color:gold !important;
}
</style>
</head>
<body>
<h1 id="id1" class="class1" style="background-color:aquamarine; color: white;">선택자 우선순위</h1>
<p>
기본적으로 css는 스타일이 위에서 아래 순서로 적용 <br>
동일한 요소를 다양한 선택자를 이용해서 스타일이 부여된 경우 우선순위에 따라 적용 <br><br>
(1, 2번은 유지보수가 힘드니까 쓰지 말 것. 급하면 1번을 차라리 쓸 것)
1. !important <br>
2. 인라인스타일방식 <br>
3. 아이디선택자 <br>
4. 클래스선택자 <br>
5. 태그선택자 <br>
</p>
</body>
</html>
6. 글꼴관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<title>나는 글꼴을 예쁘게 만들 수 있어!!</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet&display=swap" rel="stylesheet">
<style>
/* font-family 스타일 적용 */
#ff1{ font-family : 궁서체; }
#ff2{ font-family : 고딕체; }
#ff3{ font-family : 승철체, 궁서체; } /* 있는것중 바꿔줌 */
/* web-font 스타일 적용 */
#web-font{font-family: 'Handjet', cursive;}
/* font-size 적용 */
#fs1 {font-size:30px;}
#fs2 {font-size:1.5em;}
#fs3 {font-size:200%;}
/* font-weight 적용 */
#fw1 {font-weight :bold;}
#fw2 {font-weight :bolder;}
#fw3 {font-weight :lighter;}
</style>
</head>
<body>
<h1>글꼴 관련 스타일</h1>
<h3>font-family : 글꼴을 지정할 때 사용</h3>
<pre>
[ 표현법 ]
선택자 {
font-family : 바꾸고자하는 글꼴명;
}
</pre>
<p id="ff1">글꼴테스트1</p>
<p id="ff2">글꼴테스트2</p>
<p id="ff3">글꼴테스트3</p>
<h3>* 외부 웹 폰트를 사용하는 방법</h3>
<p>
웹 폰트 제공 사이트
<a href="http://fonts.google.com" target="_blank">구글 웹 폰트</a>
</p>
<p id="web-font">Hello World!</p>
<h3>font-size : 글꼴의 크기를 변경할 때 사용</h3>
<pre>
[ 표현법 ]
선택자 {
font-size : 크기에 해당하는 숫자(단위 : px/em/%)
}
</pre>
<ul>
<li id="fs1">px 테스트</li>
<li id="fs2">em 테스트</li>
<li id="fs3">% 테스트</li>
</ul>
<h3>font-weight : 글꼴의 굵기를 표현할 때 사용</h3>
<pre>
[ 표현법 ]
선택자 {
font-weight : normal / bold / bolder / lighter / 100 / 900;
}
</pre>
<!-- bold는 굵은 폰트로 변경! bolder는 글꼴자체를 굵게 변경-->
<ul>
<li id="fw1">굵은 글꼴로 변경</li>
<li id="fw2">원래 굵기보다 더 굵게</li>
<li id="fw3">원래 굵기보다 더 얇게</li>
</ul>
<hr>
<h3>font-style : 텍스트 문구를 기울이고자 할 때 사용</h3>
<pre>
[ 표현법 ]
선택자 {
font-style : normal / italic / oblique;
}
-> italic : 기울임 글꼴, oblique : 원래 글자를 기울임
</pre>
<!-- 인라인으로 적용 -->
<ul>
<li style="font-style:italic">italic</li>
<li style="font-style:oblique">oblique</li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'FrontEnd > HTML' 카테고리의 다른 글
| #34. HTML(VS Code) 이미지, 멀티미디어, 입력양식, 폼 태그 (0) | 2023.08.18 |
|---|---|
| #32. HTML(Visual Studio Code) 글자관련태그, 목록관련태그, 표관련태그 (0) | 2023.08.16 |