예습/웹표준 수업(22.2.28 ~ 22.4.25)
내일배움카드(재직자) 웹표준 수업 / 3월18일 (금) 7회차
밀김
2022. 3. 18. 19:00
728x90
8. 가상클래스(링크) 선택자: a:동작{속성:속성값;}
*동작
▶a:link = 링크된 글자를 보고만 있을때 스타일 (text-decoration속성으로 링크 누르기전에 밑줄뜨는거 없앨수도 있다)
▶a:visited = 링크된 글자를 클릭했을때 스타일
▶a:hover = 링크된 글자에 마우스를 올렸을때 스타일
▶a:active = 링크된 글자가 활성화 됐을때 스타일(올렸다가 치웠을때)
▶a:focus(키보드의 동작을 의미한다) = 키보드 tap키로 링크를 선택했을때 스타일
적용:<a href="주소">
▶똑같은 html 태그를 꾸며줄때는 작성된 스타일 순서의 영향을 받음
(맨 밑에 있는 명령이 가장 우선의 명령이 됨,단!!!!"동일한"태그를 꾸밀때만임)
<style type="text/css">
a:hover{font-weight: bolder; color: chartreuse;}
a:link{color:black; text-decoration:none;}
</style>
</head>
<body>
<ul>
<li><a href="https://www.youtube.com/" target="_balnk">유튜브</a></li>
<li><a href="https://cafe.daum.net/subdued20club" target="_balnk">여시</a></li>
<li><a href="https://www.naver.com/" target="_balnk">네이버</a></li>
</ul>
</body>
9. 수도클래스(순서세부조건) : html태그:순서지정{속성:속성값;}
*순서지정
▶ li:first-child=첫번째 요소
▶ li:last-child=마지막 요소
▶ li:nth-child(3)=세번째 요소 (괄호안에 순서 숫자 넣으면, 순서 아무거나 지정가능)
▶ li:first-letter=첫번째 글자만 꾸밈
▶ li:first-line=첫번째 줄 글자만 꾸밈
▶ li:befor=첫번째 요소 앞에 가상의 요소 삽입
▶ li:after=마지막 요소 뒤에 가상의 요소 삽입
① :first-child(가상클래스) – class를 지정하지 않아도 첫번째 자식요소를 선택하여 제어할 수 있습니다.
☞예시 실습
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild
② ::first-letter(가상요소) – li내의 첫번째 글자를 감싸고 있는 요소가 없어도 있는 것과 같이 제어해줄 수 있습니다.
☞가상 보충설명 https://homzzang.com/b/css-24
*실습*
<style type="text/css">
div:nth-child(2){background-color: aqua;}
.second:first-line{color: burlywood;} > 복합구역,줄이라 클래스값으로 적용해줌
</style>
</head>
<body>
<div id="wrap">
<div class="first">
첫번째 구역입니당 <br>
순서를 입력하세요.
</div>
<div class="second">
두번째 구역입니다 <br>
본문을 입력하쌔용
</div>
<div clss="thrid">
세번째 구엽입니도 <br>
회사명을 입력하씨오
</div>
</div>
</body>
10.종속 선택자(타입,아이디,클래스의 결합된 형태)
# = id
. = calss
*실습*
<style type="text/css">
li.st{color:red} ▶굳이 li 안붙여도 적용됨!!!!!!!!!!
li#nd{font-style: italic;}
</style>
</head>
<body>
<ol>
<li id="st">첫번째</li>
<li id="nd">두번째</li>
<li id="rd">세번째</li>
<li id="th">세번째</li>
</ol>
<ul>
<li class="st">첫번째</li>
<li class="nd">두번째</li>
<li class="rd">세번째</li>
<li class="th">세번째</li>
</ul>
</body>
11.하위 선택자(띄어쓰기로 태그 구분):A태그 B태그 C태그{속성:속성값;}
ex)"box" 클래스 요소 내부에 list 요소에만 파란글자
*실습*
<style type="text/css">
.box li a{font-weight: bolder;}
ul li:nth-child(2){font-style: italic;}
</style>
</head>
<body>
<ol calss="box">
<li id="st">첫번째</li>
<li id="nd"><a href="#">두번째</a></li>
<li id="rd"><a href="#">세번째</a></li>
<li id="th">세번째</li>
</ol>
<ul>
<li class="st">첫번째</li>
<li class="nd">두번째</li>
<li class="rd">세번째</li>
<li class="th">세번째</li>
</ul>
</body>
하위선택자
▼ #content p { color : red;} RuleSet은 태그 id 값이 content의 후손 요소에 해당하는 태그들 중에서 p 태그의 color 속성값을 red로 설정하라는 의미로 해석이 됩니다.
이런식으로 태그를 써야함!!! #content에 값을 적용하는게 아닌 그 하위에 있는 p에게 먹여주는..
12.그룹 선택자(이름은 다르지만 같은 스타일을 적용할때) : 태그, 태그, 아이디 {속성:속성값;}
<style type="text/css">
h1,h3,#nd{font-weight: bold; color: blue;}
</style>
*html 주석 */ ex) */ 주석주석 */
*n번째 = nth
*html의 calss와 id값에서 숫자만 있거나 숫자로 시작하는 이름은 사용이 안된다.
*css를 별도의 파일로 만들고 연동하는법*
1.새문서 만들기 ct+n
2.저장하기 ct+s !!!확장자가 꼭 css여야한다!!!
3.html 문서의 <head>영역안에 css 문서 연결
4.css문서에서 꾸밀 내용 만들기
728x90