속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float
# font-size: 0.9em
소수점으로 들어가면 글씨 크기를 작게 할 수 있다(:
# 속성 선택자
: 말그대로 속성을 선택하는 것!
# id를 붙여서 쓰는 사람도 있고,
속성 선택자를 쓰는 경우도 있는데
기호에 따라서~
but, input태그가 100개인경우, 전화번호에 있는 색상만 바꾸고 싶다?
물론 기호에 따라 방법이 다르겠지만,
일일이 class명 주지 않아도 이미 있는 속성을 선택하는게 빠르기에
속성 선택자를 쓰는게 낫다.
# 선택자에서도 속성을 선택할 때에는
type=""
type=''
type=
외따옴표든 쌍따옴표든 안넣든, 상관없다.
# 속성선택자는 동일한 속성이 많이 있을때 활용하기 괜찮은 선택자다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_속성 선택자의 활용</title>
<style>
input[type="password"]{
color:purple;
}
{type="tel"]{
color:red;
}
[type="submit"]~input{
color:red;
font-size:2em;
background-color: rgba(211,50,150,0.5);
}
input[type="submit"]+input{
border:none;
opacity: 0.5;
}
</style>
</head>
<body>
<form action="#">
이름: <input type="text"> <br>
아이디: <input type="text"> <br>
비밀번호: <input type="password"> <br>
전화번호: <input type="tel"> <br>
<input type="submit" value="전송">
<input type="button" value="클릭">
<input type="reset">
<button>꾸욱~ 눌러주세요</button>
</form>
</body>
</html>
# 후손 및 자손 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_자식과 후손 선택자</title>
<style>
*{margin:0;
padding:0;}
ul li, ol li{
list-style: none;
}
div#main h1{
color:#ED3FAB;
}
div#main>h1{
color:#FF5AAE;
}
#main{
width: 80%;
border: 1ps solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main">
<h1>Melody</h1>
<ul>
<li>artist</li>
<li>illustrator</li>
<li>graphic designer</li>
<li>web designer</li>
<li>writer</li>
</ul>
<div id="who">
<ol>
<li>amazing</li>
<li>crazy</li>
<li>lovely</li>
</ol>
<h1>from the Lord</h1>
</div>
</div>
</body>
</html>
# 동위선택자(별표 백개~)
: 동등한 위치에 있는 형제관계!
# 태그의 동등한 위치를 판단하여 css속성을 설정할 수 있다.
h3: 근접선택자라고 해서,
h3+div
: 내 바로 뒤에 나오는 선택자 하나만 선택하겠다.
하지만 h3 나는 포함하지 않겠다.
h3~div
: h3 바로 뒤에 div선택자들을 선택하겠다.
# 그런데, 동위선택자는 보통 div보다 li에서 많이 쓴다(:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_동위선택자</title>
<style>
*{margin:0;
padding:0;}
ul li, ol li{
list-style: none;
}
div#main h1{
color:#ED3FAB;
}
div#main>h1{
color:#FF5AAE;
}
#main{
width: 80%;
border: 1ps solid red;
margin: 0 auto;
}
#illust~li{
color:#37C5AD;
font-size:2em;
font-weight: bold;
}
#illust+li{
border:3px dashed orange;
}
#super~li {
color:#DB7575;
font-size: 30px;
font-weight: bold;
}
ol+h1{
border: 3px dotted aquq;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<h1>Melody</h1>
<ul>
<li>artist</li>
<li id="illust">illustrator</li>
<li>graphic designer</li>
<li>web designer</li>
<li>writer</li>
</ul>
<div id="who">
<ol>
<li id="super">amazing</li>
<li>crazy</li>
<li>lovely</li>
</ol>
<h1>from the Lord</h1>
</div>
</div>
</body>
</html>
Float (1)
*자식이 float속성을 가지면 부모는 무조건 overflow:hidden 처리한다.
*자식의 width, height값을 주고 부모가 자식을 딱 맞게 감싸주고 싶을 때, 자식요소에 box-sizing:border-box를 주자! -> 그러면 선 두께가 width값에 포함된다(:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_박스모델링을 활용한 레이아웃</title>
<style>
*{margin:0;
padding:0;}
ul li{
border:1px solid blue;
width: 100px;
height: 100px;
float: left;
box-sizing: border-box;
}
ul{
border: 5px solid orange;
overflow: hidden;
width:300px;
height:100px;
}
#blue{
background-color: lightblue;
}
#blue+li{
background-color: pink;
}
ol li{
border: 5px solid red;
width: 100px;
height: 100px;
float: left;
text-align: center;
list-style: none;
line-height: 100px;
padding: 10px;
}
ol{
border: 5px solid blue;
overflow: hidden;
height: 130px;
width: 390px;
}
</style>
</head>
<body>
<h1>사탄의 인형 평점:<span>7.6</span></h1>
<p>관람객 평가</p>
<ul>
<li>처키도 이제 세월을 못 속이는 구나, 많이 늙었네..</li>
<li id="blue">처키가 블루투스 기능으로 모든 전자제품 제어가 가능해졌네. </li>
<li>토이스토리 긴장하자 처키가 돌아왔다</li>
</ul>
<ol>
<li>택배1</li>
<li>택배2</li>
<li>택배3</li>
</ol>
<mark>자식이 float속성을 가지면 부모는 무조건 overflow:hidden처리한다!</mark>
<mark>자식의 width, height값을 주고 부모가 자식을 딱 맞게 감싸주려면 자식요소에
box-sizing:border-box를 주면 선 두께가 width값에 포함된다.
</mark>
</body>
</html>
Float(2)
*clear:both -> 나는 float의 영향을 받지 않겠습니다아~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_float속성</title>
<style>
*{margin:0;
padding:0;}
p{
font-style: 1.1em;
}
img{
float: left;
margin-right: 30px;
}
h1{
clear:both;
}
</style>
</head>
<body>
<img src="img/miki_01.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. doloribus accusantium perferendis impedit
qui tempore voluptas excepturi aut consequatur aliquid, facere quod
Reprehenderit, doloremque, nam. Tenetur quibusdam dignissimos quis amet officia velit
voluptates provident placeat consequuntur impedit perspiciatis quaerat quisquam, doloremque
dolore mollitia qut quidem voluptatum odio, sed eaque at, dolorum nisi qui molestiae
similique. Numquam fuga sed nesciunt provident cumque, quae nemo incidunt odio
aliquid.</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed commodi libero asperiores
distinctio, dignissimos aliquid maxime quod deleniti unde expedita!</h1>
</body>
</html>
Float (3)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_float속성을 활용한 레이아웃</title>
<style>
*{margin:0;
padding:0;}
ul li, ol li{
list-style: none;
}
ul{
overflow:hidden;
border: 3px solid green;
width: 480px;
}
ul li{
border: 5px solid blue;
width: 120px;
height: 120px;
float: left;
text-align: center;
line-height: 120px
padding: 20px;
box-sizing: border-box;
}
ol{
border: 5px solid red;
overflow: hidden;
width: 510px;
float: right;
}
ol li{
border: 5px solid red;
width: 150px;
height: 150px;
float: right;
text-align: center;
font-size: 0.5em;
line-height: 50px;
padding: 20px;
box-sizing: border-box;
margin: 10px;
}
div{
border:5px solid orange;
width: 30px;
height: 30px;
}
span{
background-color: red;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<h1>정상의 두 그룹: 당신의 선택은?</h1>
<mark>
<h3><mark>자식 요소를 감싸는 부모요소의 width값은 자식요소의 border와 padding,
margin을 모두포함하지 않는다!!!!</mark></h3>
<span>단, 자식요소에게 box-sizing:border-box로 설정하면 자식의 border값과 padding값을
포함하여 width값이 된다.</span>
</mark>
<h2>BTS</h2>
<ul>
<li>뷔</li>
<li>지민</li>
<li>RM</li>
<li>진</li>
</ul>
<h2>엑소</h2>
<ol>
<li>수호</li>
<li>디오</li>
<li>첸</li>
</ol>
<div>box1</div>
<div class="clear">box2</div>
<div>box3</div>
</body>
</html>
반응형
'IT' 카테고리의 다른 글
| 레이아웃 연습하기 / Z 레이아웃 (0) | 2022.06.28 |
|---|---|
| float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습 (0) | 2022.06.27 |
| CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학) (0) | 2022.06.25 |
| Coding study : CSS / margin:0 auto; (0) | 2022.06.24 |
| CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자 (0) | 2022.06.24 |