🍁HTML과 CSS의 차이
HTML은 특정 태그에 미리 정해져 있는 속성이 있다. 예로 들어 <body bgcolor="">는 사용할 수 있지만, <h1 bgcolor="">는 사용할 수 없다.
반면에 CSS는 모든 속성을 모든 태그에 적용 가능하며, 어떤 속성이든 선택자로 찾은 모든 태그에 적용 가능하다는 특징이 있다.
HTML과 CSS 오류
background-position: 50 50; /* 오류 */
background-position: 50px 50px;HTML과 CSS는 에러 메시지를 띄우지 않는다.
px를 지정해주지 않으면 잘못 사용한 것이지만, 에러 메시지가 발생하지 않으므로 조심하도록 한다.
🍁CSS 색상 표현법
1. Color Name: red, yellow, blue..
2. RGB Color(HEX-16진수): #FFFFFF
3. RGB Color(DEC-10진수): rgb(255,255,255)
4. RGBA Color(DEC-10진수): rgba(255, 255, 255, 1)
- a (alpha channel - 불투명도(0~1))
body {
background-color: yellow;
background-color: #FFOOOO;
background-color: rgb(255,255,255);
background-color: rgba(0, 255, 255, .1);
}CSS 색상을 표현하는 방식에는 ColorName, 16진수, 10진수, 그리고 alpha값을 사용하는 10진수가 있다.
⭐body 영역의 속성
body {
border:5px solid black;
background-color: yellow;
}위 background-color 속성은 body를 명시하고 있지만, 이는 사실 body 영역의 전체를 의미하는 게 아니다.
body 태그는 border에 나타난 부분(내용물)만을 의미한다.
그런데 왜 body로 서식을 지정했을 때 배경색이 모두 바뀌는 걸까? 그 이유는 body 이외의 누구의 땅도 아닌 부분을 채워 넣을 방법이 없기 때문이다.
그래서 모든 태그는 자기 영역에만 서식을 지정하는 게 맞지만, body 태그에만 한해서만 내용물 이외에 색상을 지정할 수 있게 되었다.
🍁CSS 이미지 표현법
body {
background-image: url();
}CSS는 url을 반드시 url() 소괄호 안에 넣어야 한다.
배경 이미지의 반복
body {
background-image: url(./../asset/images/cat01.jpg);
background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: no-repeat;
}
위 image 출력 방식은 타일 형태로 출력된다고 해서 타일 방식이라고 부른다.
repeat 속성으로 반복시킬 방향을 정하거나 반복을 안 할 수 있다.
배경 이미지의 위치
좌측 상단의 좌표값은 (0,0)이다.
오른쪽으로 갈수록 x값이 커지고, 아래로 갈수록 y값이 커진다.
절댓값으로 px값을, 상대값으로 % 값을 사용한다.
x축 중앙 정렬
body {
background-image: url(./../asset/images/cat01.jpg);
background-repeat: no-repeat;
background-position: 50% 0%;
}
x축 우측정렬
body {
background-image: url(./../asset/images/cat01.jpg);
background-repeat: no-repeat;
background-position: 100% 0%
}
y축 중앙정렬
body {
border:5px solid black;
background-image: url(./../asset/images/cat01.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
}
y축 중앙정렬을 하면 이미지가 body 태그에 작성된 내용물의 중간에 위치하게 된다.
화면 자체가 body영역이 아니라, body의 내용물 만큼 body 영역이라는 점을 기억하도록 하자.
x축 y축 중앙정렬
body {
border:5px solid black;
background-image: url(./../asset/images/cat01.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
}
수직과 수평
수직과 수평에 관한 열거형도 존재한다.
기본값은 left top이며, 중앙에 사진을 넣기 위해서는 center center로 해야 한다.
body {
border:5px solid black;
background-image: url(./../asset/images/cat01.jpg);
background-repeat: no-repeat;
background-position: center center;
}
scroll, fixed 속성
background-attachment: scroll;
background-attachment: fixed;
scroll 속성을 주면 이미지가 scroll에 붙어서 이동이 되게 할 수 있다.
fixed 속성을 주면 이미지가 해당 위치에 고정되게 할 수 있다.
🍁CSS 이미지 활용
CSS는 모든 속성을 모든 태그에 적용할 수 있다고 했다.
컨트롤에 이미지를 넣어보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#search {
background-image: url(../asset/images/hangame.png);
background-repeat: no-repeat;
background-position: center center;
}
#search:focus {
background-image: url();
}
#btn {
background-image: url(../asset/images/bullet10.png);
background-repeat: no-repeat;
background-position: 5px center;
}
/*
가상 클래스
:focus
객체가 활성화된 상태
*/
</style>
</head>
<body>
<h1>네이버</h1>
<div>
<input type="text" id="search">
<input type="button" id="btn" value=" 검색하기">
<button>
<img src="../asset/images/bullet07.png">
취소하기
</button>
</div>
<!-- <img src="../asset/images/hangame.png"> -->
</body>
</html>
가상 클래스
:focus
focus는 객체가 활성화된 상태를 의미한다.
