CSS :
HTML로 작성한 문서에 스타일과 디자인을 입혀주는 기능을 제공하는 언어!
기본적인 구조:
-선택자 : HTML에서 어떤 태그 (부분)에 디자인 기능을 적용할지 잡아오는 기능.
-속성 : 어떤 디자인 기능을 쓸 것인가?
-속성값 : 디자인 기능 중 구체적으로 어떤 것을 수행할지 명령. 꼭 뒤에 (;) 입력해야 함.
h2 { # 선택자
font-size: 1.5em; # 속성과 속성값
margin-top: 10px;
margin-bottom: 0px;
}
CSS를 적용하는 방법!
CSS를 HTML에 적용하는 방법은 크게 세가지 정도가 있다~!
- 인라인 스타일 : HTML 태그 안에 인라인 속성으로 넣어주는 방법
- 이터널 스타일 : HTML에서 <style> 태그 이용해서 적용시켜 주는 방법
- 익스터널 스타일 : CSS파일을 만들고 HTML에 <link> 태그로 불러오는 방법 (웹표준)
주로 3번 방법이 HTML, CSS 각각의 문서를 보관하고 수정하고 가독성이 좋은 이유로 잘 쓰인다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 연동 방법</title>
<style> #<style>태그를 이용해서 css기능 적용
h1 {color:red;}
</style>
<link rel="stylesheet" href="index.css"> #<link>태그를 이용해서 css파일 호출 후 적용
</head>
<body>
<h1 style="color:blue;">Hello world</h1> #style속성을 이용해서 인라인 형식으로 적
</body>
</html>
👍CSS의 우선순위! (Cascading)
cascading의 뜻과 같이 위에서 아래로 쏟아지는 이라는 철학적인 내용을 담고 있다! 이 말을 즉슨 순서가 매우 중요하다는 뜻!!! CSS에서는 명령문마다 가지고 있는 적용순서(힘)가 다르다!
- 단순히 같은 선택자를 지정했다하면, 가장 나중에 오는 속성값의 우선순위가 높다!
p { color : red;}
p { color : blue;}
p { color : yellow;} # 이 경우 마지막에 온 yellow 값이 적용!
- 구체척으로 적은 선택자가 우선순위를 가진다!
header p {color : red;}
p {color : blue;}
#이 경우 부모태그 header와 자식태그 p가 구체적으로 호출된 선택자의 속성값인 red값이 적용
- 선택자의 우선순위(힘,레벨)는 style> id> class> tag 순이다!
<h2 style="color:yellow" id="color" class="color">color</h2>
#color{color:red;}
.color{color:blue;}
h2 {color:black;}
이 경우 css에 적용된 기능을 버리고 style 속성이 우선순위를 가져서 yellow 속성값이 적용된다!
CSS의 주요 속성!!! (너무 많아서 필요할때 마다 찾아 쓰자)
https://developer.mozilla.org/ko/docs/Web/CSS
⭐박스 모델!!!
위와 같이 총 4개의 영역으로 구성된다. 제일 안쪽부터 content, padding, border, margin이다.
CSS의 움직이는 속성!
- Transform 속성 : 움직임, 회전, 크기조절 등을 변화시켜 주는 속성이다!
- rotate()
- scale()
- skew()
- transform 속성 방법으로는 대표적으로 다음 등이 있다! 필요에 따라서 구글링 하자.
#ex
transform:rotate(45deg);
transform:scale(2,3);
transform:translate(100px,200px);
transform:skew(10deg,20deg);
- Transition 속성: 변화하는 과정을 보여주는 속성이다! (지속시간과, 부드럽게 등)
- transition
- transition-delay
- transition-duration : 항상 delay 속성보다 먼저 와야 한다!
- transition-property
- transition-timing-function
- .class: hover{ }
- transition 속성 방법으로는 대표적으로 다음 등이 있다!
#ex
.transition {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function:linear;
transition-delay:1s;
}
.transition:hover{
width:300px;
}
- Animation 속성 ****: Flash 혹은 JavaScript 없이 애니메이션 효과를 주는 속성이다!
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation
- animation 속성 방법으로는 대표적으로 다음 등이 있다!
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6;
animation-direction: alternate;
}
@keyframes changeWidth {
from{
width:300px;
}
to{
width:600px;
}
}
animation 코드를 한 줄로 정리할 수 있다.
.animation{
animation: changeWidth 3s linear 1s 6 alternate;
}
반응형 웹사이트를 위한 미디어쿼리!!!
기기마다 다른 화면 사이즈에 따라 웹사이트의 보여주는 부분의 기능들을 따로 설정할 수 있다!!!
pc뿐만 아니라 모바일 태블릿에서 반응형, 적응형 웹사이트를 구현한다.
주의!) ❗항상 html코드에서 meta 코드를 넣어주고 사용해야 한다!!! ❗
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#ex
.media {
width: 500px;
height: 500px;
background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
.media{
width: 300px;
height: 300px;
background-color: yellow;
border: solid 10px blue;
}
}