반응형
nth-child(), first-letter, first-line, selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상클래스선택자 - 문자 블록 </title>
<style>
#wrap{
border: solid 0px red;
width: 800px;
margin: 0px auto;
}
#header{
border: solid 0px blue;
border-bottom: solid 2px #ccc;
width: 800px;
}
#content{
border: solid 0px blue;
width: 800px;
}
#content > p:nth-child(2)::first-letter, p:nth-child(3)::first-letter{
font-size: 32px;
}
#content > p:nth-child(2)::first-line, p:nth-child(3)::first-line{
color: blue;
font-weight: bold;
}
#content > p:nth-child(1)::selection{
background-color: olive;
color: red;
}
#footer{
border: solid 0px blue;
}
#footer > ul{
border: solid 0px #ccc;
height: 100px;
}
#footer li{
list-style-type: none;
float: left;
margin: 3px;
}
#footer img{
width: 200px;
height: 90px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>설립개요</h1>
</div>
<div id="content">
<p>
중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술,
경영, 인력등의 종합지원체계를 구축함으로써 중소기업의 경쟁력 제고를 위해 설립된
진흥원은 종소기업의 자생력을 키우고 안정적인 경영여건을 조성하기 위하여 끊임없이 노력하고 있습니다.
</p>
<p>
2014년 4월 9일 <br/> 진흥원 사명변경 6월3일 판교 이전
</p>
<p>
2013년 1월 12일 <br/> 다누리 시민청 개관 5월 9일 꿈꾸는 청년가게 명동점 개관 5월 10일 큐비드 광화문 개관
6월 21일 다누리 강남점 개관 7월 20일 서울크리에티브랩 개관 6월27일 다누리 성북점 개관
</p>
</div>
<div id="footer">
<ul>
<li><img src="https://www.easy-me.com/assets/readme/cartoon.png"></li>
<li><img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" ></li>
</ul>
</div>
</div>
</body>
</html>
focus, disabled, enabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상클래스선택자 - 마우스 </title>
<style>
#sub{
border: 2px solid red;
width: 700px;
height: 100px;
}
#sub li{
list-style-type: none;
font-size: 32px;
color: orange;
font-weight: bold;
float: left;
margin: 10px;
}
#sub li:hover{
color: blue;
font-size: 64px;
cursor: pointer;
}
#form_style{
clear: both;
border: 2px solid blue;
width: 700px;
height: 100px;
margin-top: 5px;
}
#form_style label{
margin-right: 30px;
}
#form_style input{
margin-bottom: 10px;
}
#form_style input:focus{
background-color: yellow;
}
#form_style input:disabled{
background-color: yellow;
}
#form_style input:enabled{
color: blue;
}
</style>
</head>
<body>
<div id="sub">
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
<li>포도</li>
<li>오렌지</li>
</ul>
</div>
<div id="form_style">
<form action="#" method="get">
<label>이름</label>
<input type="text" name="name"/><br/>
<label>아이디</label>
<input type="text" name="id" value="chs" disabled="disabled"/><br/>
<label>비밀번호</label>
<input type="password" name="pwd" value="123" enabled="enabled"/><br/>
</form>
</div>
</body>
</html>반응형
'HTML | CSS' 카테고리의 다른 글
| 왕왕중요한 Box Layout을 완벽하게 이해해보자~! | overflow: hidden; / float: left; (0) | 2023.06.05 |
|---|---|
| 가상클래스(필터)선택자 ::after, ::before | 가변길이 em, rem, % (0) | 2023.06.05 |
| 선긋기(link,hover,visited) | margin, padding | 방명록 만들기 (0) | 2023.06.02 |
| 태그, css, id, class 선택자 | 부모자식(상속) | 속성 선택자 (0) | 2023.06.01 |
| 입력태그<input> | <form> 회원가입폼 만들기 | 시맨틱을 이용해 layout 만들기 (0) | 2023.05.31 |
