3/5(금)FrontEnd/CSS(2)

(5) 상태선택자

: 요소의 상태에 따라서 선택되는 선택자

(5)-1. checked(체크된) 상태의 요소

[HTML]
<input type ="checkbox" id="apple">
<label for ="apple">사과</label> 
<!-- label로 지정: 사과글자를 클릭하면 체크박스도 체크가 됨 -->

<input type ="checkbox" id="banana">
<label for ="banana">바나나</label>

[CSS]
상태선택자(checked)
input[type=checkbox]:checked{
    width: 20px;
    height: 20px;
    font-size: 20px;
}

input[type=checkbox]:checked+label{
    font-size: 50px;
}

(5)-2. focus(초점)이 맞춰진 input요소 선택

[HTML]
<label for="userId">아이디: </label>
<input type="text" id="userId" name="userId" placeholder="아이디입력" required>

<label for="userPwd">비밀번호 : </label>
<input type="password" id="userPwd" name="userPwd" placeholder="비밀번호 입력" required>
        
[CSS]
#userId:focus{ // userId에 focus(초점)이 맞춰질때 있어질 효과
    background-color: red;
}

#userPwd:focus{ // userPwd에 focus(초점)이 맞춰질때 있어질 효과
    background-color: pink;
}

(5)-3,4. 활성화(또는 비활성화된) 요소만을 선택

: enabled <-> disabled

[HTML]
<button>클릭가능</button>
<button disabled>버튼있지만 클릭 안 됨</button>
        
옵션선택:
<select>
	<option value="">선택안함</option>
	<option value="" disabled>카키 s[품절]</option>
	<option value="">카키 m</option>
	<option value="">카키 l</option>
</select>

[CSS]
button:disabled{
    color : white;
    background-color: black;
}
button:enabled{
    background-color: green;
}

option:enabled{
    background-color: yellowgreen;
}

option:disabled{
    background-color: yellow;
}

2. 선택자 우선순위

3. 글꼴 관련 스타일(~font)

(1) font-family

: 글꼴을 지정할 때 사용
선택자 { font-family : 글꼴명; }

[HTML]
<h1>글꼴 관련 스타일 속성 (font~)</h1>

<h3>font-family : 글꼴을 지정할 때 사용</h3>
<pre>선택자 { font-family:글꼴명; }</pre>

<!-- p[id=ff$]{글꼴 테스트$}*3 -->
<p id="ff1">글꼴 테스트1</p>
<p id="ff2">글꼴 테스트2</p>
<p id="ff3">글꼴 테스트3</p>



[CSS]
<style>
#ff1{font-family:궁서체;}
#ff2{font-family:고딕체;}
#ff3{font-family:보람체, 궁서체;} /* 첫번째로 제시한 글꼴이 없을경우 그 다음 글꼴로 적용 */
</style>

(2) 외부 웹 폰트 사용법

: 웹 폰트 제공 사이트 : http://fonts.google.com

가져오기 코딩

[HTML]
<h3>* 외부 웹 폰트 사용법</h3>
<p>
	웹 폰트 제공 사이트 : 
	<a href="http://fonts.google.com" target="_blank">구글 웹 폰트 사이트</a>
</p>

<p id="web-font">font style test 글꼴테스트!@# 123</p>

[CSS]
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Nanum+Pen+Script&display=swap" rel="stylesheet">

(3) font-size

: 글꼴의 크기를 변경할 때 사용
선택자 { font-size : 크기 { (px | em | %) ;}

[HTML]
<ul>
	<li id="fs1">px 고정크기</li>
	<li id="fs2">em 가변크기</li>
	<li id="fs3">% 가변크기</li>
</ul>
        
[CSS]
#fs1{font-size:30px;}
#fs2{font-size:1.5em;} /* 배수 */
#fs3{font-size:50%;}

(4) font-weight

: 글꼴의 굵기를 변경할 때 사용
선택자 { font-weight: normal(기본값) | bold | bolder | lighter | 100 | 400 | 900 ;}

[HTML]
<ul>
  <li id="fw1">원래 굵기</li>
  <li id="fw2">굵은 글꼴로 변경</li>
  <li id="fw3">원래 굵기보다 더 굵게</li>
  <li id="fw4">원래 굵기보다 더 가늘게</li>
</ul>

[CSS]
<style>
  #fw1{font-weight:normal;}
  #fw2{font-weight:bold;}
  #fw3{
      /*font-weight:bolder;*/
      font-weight:900;
  }
</style>

(5) font-variant

: 문구를 작은 대문자로 변경할 때 사용
선택자 { font-variant:small-caps; }

[HTML , CSS]
<p>I LOVE YOU</p>
<p style="font-variant:small-caps;">i love you</p>

(6) font-style

: 문구를 기울이고자 할 때 사용
선택자 { font-style: normal | italic | oblique; }

<ul>
  <li style="font-style:italic">italic 기울임 글꼴</li>
  <li style="font-style:oblique">oblique 원래글자를 기울인셈</li>
</ul>

4. 텍스트 관련 스타일(~text)

1) color

: 텍스트의 색상을 지정
선택자 { color : 색상명 | 16진수 | rgb | rgba | hsl | hsla; }

[HTML]
<ul>
        <li id="c-name">색상명으로 지정</li>
        <li id="c-16">16진수로 지정</li>
        <li id="c-rgb">rgb로 지정</li>
        <li id="c-rgba">rgba로 지정</li>
        <li id="c-hsl">hsl로 지정</li>
        <li id="c-hsla">hsla로 지정</li>
</ul>

[CSS]
<style>
  #c-name{color:red;}
  #c-16{color:#FFDF24;}
  #c-rgb{color:rgb(70, 180, 75);}
  #c-rgba{color:rgba(187, 127, 74, 0.26);}
  #c-hsl{color:hsl(200, 59%, 77%);} /*h:색상값(0~360)  s:채도(%)  l:명도(%)*/
  #c-hsla{color:hsla(200, 59%, 77%, 0.2)}
</style>

2) text-decoration

: 텍스트에 줄을 긋거나 줄을 없앨 때 사용
선택자 { text-decoration: none | underline | overline | line-through; }

[HTML]
<ul>
  <li id="td1">텍스트 영역 아래 줄 긋기</li>
  <li id="td2">텍스트 영역 중간에 줄 긋기</li>
  <li id="td3">텍스트 영역 위에 줄 긋기</li>
</ul>

<a href="http://www.naver.com" style="text-decoration:none;">네이버로 이동</a>
<!-- a 태그는 기본적인 스타일로 text-decoration:underline; -->

[CSS]
<style>
  #td1{text-decoration:underline;}
  #td2{text-decoration:line-through;}
  #td3{text-decoration:overline;}
</style>

3) text-transform

: 영문 텍스트의 대소문자 변환시 사용
선택자 { text-transform : uppercase | lowercase | capitalize; }

[HTML]
<ul>
  <li id="tt1">uppercase : 모든 영문자 다 대문자로</li>
  <li id="tt2">LOwerCase : 모든 영문자 다 소문자로</li>
  <li id="tt3">capitalize : 영문자의 firsttext만 대문자로</li>
</ul>

[CSS]
<style>
  #tt1{text-transform:uppercase;}
  #tt2{text-transform:lowercase;}
  #tt3{text-transform:capitalize;}
</style>

4) text-align

: 텍스트 정렬할 때 사용
선택자 { text-align : left(기본값) | right | center | justify; }

[HTML]
<h4>왼쪽정렬(기본값)</h4>
<p id="ta1">
천하를 찬미를 역사를 얼마나 수 속에 위하여서. 곳으로 예수는 전인 반짝이는 가는 주며, 인간은 이 이것이다. 못할 같이, 수 칼이다. 소담스러운 이상 피가 장식하는 같이, 동산에는 황금시대의 하는 부패뿐이다. 청춘에서만 것은 이는 인생을 내는 뼈 실현에 사는가 그리하였는가? 품으며, 우리 새 커다란 이상 용기가 꽃이 풍부하게 말이다. 우리의 목숨이 반짝이는 장식하는 하는 충분히 무한한 듣는다. 따뜻한 있는 청춘 뼈 찾아 이상, 석가는 봄바람이다. 보이는 시들어 뭇 목숨이 역사를 얼마나 이상의 광야에서 아름다우냐?

열락의 우리의 때에, 원대하고, 운다. 이것을 전인 이상 현저하게 이상의 황금시대다. 인간의 할지니, 목숨을 위하여서, 청춘에서만 있다. 이상이 인생의 소리다.이것은 같으며, 바이며, 피다. 지혜는 끓는 살 것이 내려온 고동을 꽃 예가 내는 끓는다. 끓는 속에 이상 구할 굳세게 그들은 그러므로 동산에는 봄바람이다. 아니더면, 얼마나 우리 사라지지 몸이 날카로우나 운다. 인생에 어디 있는 것이다. 청춘의 있는 이상을 투명하되 하였으며, 봄바람이다.
</p>

<h4>양쪽정렬</h4>
<p id="ta2">
천하를 찬미를 역사를 얼마나 수 속에 위하여서. 곳으로 예수는 전인 반짝이는 가는 주며, 인간은 이 이것이다. 못할 같이, 수 칼이다. 소담스러운 이상 피가 장식하는 같이, 동산에는 황금시대의 하는 부패뿐이다. 청춘에서만 것은 이는 인생을 내는 뼈 실현에 사는가 그리하였는가? 품으며, 우리 새 커다란 이상 용기가 꽃이 풍부하게 말이다. 우리의 목숨이 반짝이는 장식하는 하는 충분히 무한한 듣는다. 따뜻한 있는 청춘 뼈 찾아 이상, 석가는 봄바람이다. 보이는 시들어 뭇 목숨이 역사를 얼마나 이상의 광야에서 아름다우냐?

열락의 우리의 때에, 원대하고, 운다. 이것을 전인 이상 현저하게 이상의 황금시대다. 인간의 할지니, 목숨을 위하여서, 청춘에서만 있다. 이상이 인생의 소리다.이것은 같으며, 바이며, 피다. 지혜는 끓는 살 것이 내려온 고동을 꽃 예가 내는 끓는다. 끓는 속에 이상 구할 굳세게 그들은 그러므로 동산에는 봄바람이다. 아니더면, 얼마나 우리 사라지지 몸이 날카로우나 운다. 인생에 어디 있는 것이다. 청춘의 있는 이상을 투명하되 하였으며, 봄바람이다.
</p>

<h4>오른쪽정렬</h4>
<p id="ta3">
천하를 찬미를 역사를 얼마나 수 속에 위하여서. 곳으로 예수는 전인 반짝이는 가는 주며, 인간은 이 이것이다. 못할 같이, 수 칼이다. 소담스러운 이상 피가 장식하는 같이, 동산에는 황금시대의 하는 부패뿐이다. 청춘에서만 것은 이는 인생을 내는 뼈 실현에 사는가 그리하였는가? 품으며, 우리 새 커다란 이상 용기가 꽃이 풍부하게 말이다. 우리의 목숨이 반짝이는 장식하는 하는 충분히 무한한 듣는다. 따뜻한 있는 청춘 뼈 찾아 이상, 석가는 봄바람이다. 보이는 시들어 뭇 목숨이 역사를 얼마나 이상의 광야에서 아름다우냐?

열락의 우리의 때에, 원대하고, 운다. 이것을 전인 이상 현저하게 이상의 황금시대다. 인간의 할지니, 목숨을 위하여서, 청춘에서만 있다. 이상이 인생의 소리다.이것은 같으며, 바이며, 피다. 지혜는 끓는 살 것이 내려온 고동을 꽃 예가 내는 끓는다. 끓는 속에 이상 구할 굳세게 그들은 그러므로 동산에는 봄바람이다. 아니더면, 얼마나 우리 사라지지 몸이 날카로우나 운다. 인생에 어디 있는 것이다. 청춘의 있는 이상을 투명하되 하였으며, 봄바람이다.
</p>

<h4>가운데정렬</h4>
<p id="ta4">
천하를 찬미를 역사를 얼마나 수 속에 위하여서. 곳으로 예수는 전인 반짝이는 가는 주며, 인간은 이 이것이다. 못할 같이, 수 칼이다. 소담스러운 이상 피가 장식하는 같이, 동산에는 황금시대의 하는 부패뿐이다. 청춘에서만 것은 이는 인생을 내는 뼈 실현에 사는가 그리하였는가? 품으며, 우리 새 커다란 이상 용기가 꽃이 풍부하게 말이다. 우리의 목숨이 반짝이는 장식하는 하는 충분히 무한한 듣는다. 따뜻한 있는 청춘 뼈 찾아 이상, 석가는 봄바람이다. 보이는 시들어 뭇 목숨이 역사를 얼마나 이상의 광야에서 아름다우냐?

열락의 우리의 때에, 원대하고, 운다. 이것을 전인 이상 현저하게 이상의 황금시대다. 인간의 할지니, 목숨을 위하여서, 청춘에서만 있다. 이상이 인생의 소리다.이것은 같으며, 바이며, 피다. 지혜는 끓는 살 것이 내려온 고동을 꽃 예가 내는 끓는다. 끓는 속에 이상 구할 굳세게 그들은 그러므로 동산에는 봄바람이다. 아니더면, 얼마나 우리 사라지지 몸이 날카로우나 운다. 인생에 어디 있는 것이다. 청춘의 있는 이상을 투명하되 하였으며, 봄바람이다.
</p>

[CSS]
<style>
  #ta1{text-align:left;}
  #ta2{text-align:justify;}
  #ta3{text-align:right;}
  #ta4{text-align:center;}
</style>

5) text-shadow

: 텍스트에 그림자효과를 줄 때 사용
선택자 { text-shadow : 가로거리(x) 세로거리 (y) (번짐정도) (색상) ; }

[HTML]
<div>
        <span id="ts1">HTML5</span> <br><br><br>
        <span id="ts2">HTML5</span> <br><br><br>
        <span id="ts3">HTML5</span> <br><br><br>
        <span id="ts4">HTML5</span>
</div>
    
[CSS]
div>span{
	font-size:50px;
	font-weight:900;
    }
#ts1{
	color:orangered;
	text-shadow:5px 5px 10px yellow;
    }
#ts2{
	color:green;
	text-shadow:-5px -5px 10px yellow;
    }
#ts3{
	color:white;
	text-shadow:0px 0px 10px black;
    }
#ts4{
	text-shadow:0px 0px 4px gray, 0px -5px 4px yellow, 0px -10px 8px orange, 0px -15px 15px orangered, 0px -22px 20px red;
	}

5. 목록 관련 스타일(list-style~)

1) list-style-type

: 목록의 불릿기호를 변경시켜줄 때 사용

1)-(1) 순서 없는 목록(ul)

선택자{ list-style-type:disc(기본값) | circle | square | none; }

1)-(2) 순서 있는 목록(ol)

선택자{
list-style-type:decimal(기본값) | decimal-leading-zero;
list-style-type:lower-alpha | upper-alpha;
list-style-type:lower-roman | upper-roman;
}

[HTML]
<ul id="ul1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
</ul>

<ol id="ol1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
</ol>

[CSS]
<style>
#ul1{
	list-style-type:none;
	}
#ol1{
	list-style-position:inside;
	/*list-style-type:none;*/
    }
</style>

2) list-style-position

: 불릿기호의 위치를 조정할 때 사용
선택자 { list-style-position:outside(기본값) | inside; }

3) list-style-image

: 불릿기호로 이미지를 적용하고자 할 때 사용
선택자 { list-style-image:url(적용 시키고자 하는 이미지 경로); }

[HTML]
<ul id="image-bullet">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
</ul>

[CSS]
#image-bullet{
            list-style-image:url("resources/image/iconsample.png");
            list-style-position:inside;
             }

6. 영역 관련 스타일

1) 여백 및 간격 관련 스타일

1)-(1) padding

: 테두리영역(border)과 내용물영역(content)사이의 거리(여백)을 조절하는 스타일속성

[HTML]
<div id="test1" class="test">컨텐츠영역</div> <br>
<div id="test2" class="test">컨텐츠영역</div> <br>
<div id="test3" class="test">컨텐츠영역</div> <br>

[CSS]
.test{
	background-color:yellow;
	width:100px;
	height:100px;
	border:10px solid black;
      }
#test1{
	padding:100px;
	}
#test2{
            padding-top:50px;
            padding-left:100px;
        }
#test3{
	/* 위아래 좌우*/
	/*padding:50px 20px;*/
	/* 위에서 부터 (시계방향)*/
	padding:50px 30px 20px 0px;
        }

1)-(2) margin

: 타 요소들간의 간격을 조정할 때 사용

[HTML]
<div id="test4" class="test">컨텐츠영역</div>
<div id="test5" class="test">컨텐츠영역</div>
<div id="test6" class="test">컨텐츠영역</div>

<div class="test" style="margin:auto;">가운데배치</div>

[CSS]
<style>
#test4{
	margin:20px;
	}
#test5{
	margin-top:50px;
	margin-left:70px;
	}
#test6{
	margin:50px 30px 20px 0px;
	}
</style>