3일차부터 CSS를 배우기 시작했다.
헤드 안에서
<style>을 열고
적용하고싶은 태그를 쓴다음 {글자색, 배경색 }
h1 {
color: blue;
}
p {
color: tomato;
}
클래스를 선택하고싶다면 .클래스명
.p1{
color: blueviolet;
}
아이디를 선택하고싶다면 #아이디명
#good-color{
color: aquamarine;
}
기본속성을 선택하고싶다면 (속성은 태그 내 빨간글씨)
input[type=text] {
background-color: gold;
}
다음은 문자열 속성 선택자인데 이건 속성선택자에서 특정속성값으로 시작되는 태그를 선택할 수 있다.
이 태그의 경우 name 태그에 모든 Test 글자 색을 바꾼다 (^=)
[name^=Test] {
color : yellowgreen
}
또 다르게 속성값이 특정값으로 끝나는 태그를 선택할 수 있다
c1으로 끝나는 값의 bg를 변경 ($=)
[class$=c1] {
background-color: violet;
}
다음으로 이건 잘 안쓰인다고 한다 속성값이 class로 시작하고 -를 포함하는 태그 선택
shift+\ (|=)
[class|=class] {
background-color: red;
}
띄어쓰기로 구분되어 있는 값 중 특정값을 포함하는 태그를 선택
ex)name=Test 1, name=Test 2 (~)
[name~=Test] {
background-color: aqua;
}
속성값이 포함된 태그 선택, 검색하는 기능
class의 속성값에 p를 검색 (*=)
[class*=p]{
background-color: rgb(255, 251, 129);
}
자손 선택자.. > 부모 자손은 부모>자손 으로 선택
div의 자손 h2 를 선택
후손 선택자 태그안에 태그안의 태그를 선택
div의 후손 li를 선택
CSS (Cascaing Style sheets)
CSS의 우선순위는 body쪽에서 태그안의 속성값으로 style을 적용하는게 더 높다.
body쪽에서 style을 적용하는 방식을 인라인 스타일 방식이라고 한다.
동위 선택자 h5~p의 bg를 바꾸면 자손3 자손4 자손6의 bg가 바뀐다
<div>
<h4>자손1</h4>
<h5>자손2</h5>
<p>자손3</p>
<p>자손4</p>
<h5>자손5</h5>
<p>자손6</p>
</div>
일반구조 선택자
- :first-child, 첫번째 요소, 하나만 있는 요소 선택
- :last-child, 마지막 요소, 하나만 있는 요소 선택
- :last-of-child, 해당 요소의 마지막
- :nth-child(), 짝수번째, 홀수번째, 특정요소 선택
- :nth-last-child(), 뒤부터 카운트하며 nth-child와 동일
- :only-child, 해당 태그 내 한가지만 있을 때
- :only-of-type, 해당 태그 내 한가지만 있는 요소 선택
사용상 주의점 : 형제,자매 요소들이 같은 태그일 때 가능
아직도 이게 너무 햇갈린다
id가div-test1의 태그인 첫번째 p 태그 선택
#div-test1 p:first-child {
color: blue;
background-color: yellow;
}
아이디 div-test1 안에 마지막 p 태그 선택
#div-test1 p:last-child {
color: aquamarine;
background-color: black;
}
아이디 div-test1 안에 3번째 p 태그 선택
#div-test1 p:nth-child(3) {
color: blueviolet;
background-color: cyan;
}
<div>
<div id="div-test1">
<p>테스트1-1입니다</p>
<p>테스트1-2입니다</p>
<p>테스트1-3입니다</p>
<p>테스트1-4입니다</p>
<p>테스트1-5입니다</p>
</div>
</div>
<form action="목적지" method="get">
<fieldset>
<legend>회원 정보</legend>
이름 : <input type="text"> <br>
Id : <input type="text"> <br>
이메일 : <input type="email"> <br>
취미 : <input type="checkbox">독서
<input type="checkbox">코딩
<input type="checkbox">수영
<small>(상태선택자)</small> <br>
<select>
<option disabled>자바</option>
<option>오라클</option>
<option>JDBC</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
<small>(속성선택자)</small> <br>
<a href="http:://gdu.co.kr">구디아카데미</a>
<small>(링크선택자)</small> <br>
<input type="submit" value="제출">
<input type="reset" value="취소">
</fieldset>
</form>
div로 로그인 폼 만드는코드를 코드 쓰다가 글이 날아가서 복붙함 css코드
div {
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
.login {
width: 400px;
height: 250px;
float: left;
}
.id-pw {
width: 70%;
height: 80%;
float: left;
}
.id {
width: 100%;
height: 50%;
float: left;
}
.pw {
width: 100%;
height: 50%;
float: left;
}
.btn {
width: 30%;
height: 80%;
float: left;
}
.info {
width: 100%;
height: 20%;
float: left;
}
html코드
