오늘 배운 것
CSS
style
head태그 안에 style태그를 사용한다.
디자인할 태그를 선택하여 디자인한다.
CSS는 속성과 속성값으로 구성되어있다.
<style>
h1 {
color: red;
}
</style>
태그 안에 CSS 속성을 직접 넣을 수도 있다.
<h1 style="background-color: pink">Hello World</h1>위 방법들은 코드의 양이 많아지면 가독성이 떨어진다는 단점이 있다.
link
link태그로 html파일과 css파일을 연동할 수 있다.
<link rel="stylesheet" type="text/css" href="style.css">선택자
tag
h1 {
color: red;
}id
#test1 {
color: blue;
}
class
.test2 {
color: green;
}
타입 안의 속성값
input[type="text"] {
border: solid 10px red;
}우선순위는 style > id > class > tag 순서이다.
%
px이 아니라 %를 사용하면 고정값이 아니라 가변값을 바탕으로 공간에 대한 크기가 잡힌다.
div {
width:100%;
height:300%;
background-color: yellow;
}어려웠던 점
선택자의 우선순위가 헷갈렸다.
해결방법
영상을 반복해서 보고 여러번 직접 테스트를 해보니 이해가 되었다.
학습소감
본격적으로 CSS를 배우고 디자인을 해보니 웹프로그래밍이 더 재미있게 느껴졌다. 더 열심히 해야겠다.
Hello World