빡공단 웹 개발 입문 강의를 들으며
Chapter04 웹 페이지 스타일 만들기
1.사이트에 색 입히기
color, background color 등등
1.html 문서의 head부분에 css 코드를 추가한다.
<head>
<style>
color: red;
background color: bule;
</style>
</head>- css 문서를 따로 만든 후 html 문서의 head 부분에 css 문서를 추가한다.
html 문서
<head>
<link href="css.css" rel="stylesheet">
</head>css 문서
div {
color: skyblue;
background-color: rgb(95, 46, 82);
}
span {
color: rgb(249, 128, 148);
background-color: rgb(24, 24, 24);
}2.배경과 테두리 입히기
border, outline 등등
1.html 문서의 head부분에 css 코드를 추가한다. (위와 동일한 방법)
2.css 문서를 따로 만든 후 html 문서의 head 부분에 css 문서를 추가한다.
html 문서
<head>
<link href="css2.css" rel="stylesheet">
</head>css문서
button {
border: none;
outline: none;
}
div {
border: dotted salmon 5px;
}
span {
border: dashed yellowgreen 3px;
}
input {
border: solid skyblue 8px;
border-radius: 10px;
}
2.사이트 글자 꾸미기
font-size, font-family(글씨체)
1.html 문서의 head부분에 css 코드를 추가한다. (위와 동일한 방법)
2.css 문서를 따로 만든 후 html 문서의 head 부분에 css 문서를 추가한다.
html 문서
<head>
<link href="fontcss.css" rel="stylesheet">
</head>css문서
div {
font-size: 50px;
font-family: 'Ansungtangmyun-Bold';
}
span {
font-size: 30px;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
}Tip!
1.Ctrl+space를 누르면 기본적으로 제공하는 폰트들이 뜨지만 원하는 글꼴을 '눈누'라는 사이트에서 가져올 수 있었다.
2.사이트에서 폰트를 가져올 때는 무료로 사용할 수 있는지 '라이선스 본문'을 꼭 읽어봐야한다.
3.vscode에서 글씨 크기를 지정하지 않으면 기본적으로 16px로 설정되어 있다.
3.원하는 요소만 선택하여 스타일 지정하기1
id, class
idclass.html 의 body 부분
<body>
<div id="id1">
2023-02-08
</div>
<div class="class1">
Tuesday
</div>
<div class="class1">
<div>
Change the style by selecting only the desired elements.
</div>
<span>
원하는 요소만 선택하여 스타일 지정
</span>
</div>
</body>idclass.css
#id1 {
color: black;
}
.class1 {
color: red;
}
.class1 div{
color: rgb(47, 153, 234);
}
.class1 span{
background-color: rgb(218, 252, 115);
}id는 #, class는 .을 앞에 사용한다.
class 뒤에는 원하는 요소를 입력하여 해당 요소만 변경이 가능하게 한다.
Tip! 하지만 너무 많은 id와 class를 사용하는 것은 오히려 복잡하기 때문에 적절한 사용이 필요하다.
3.원하는 요소만 선택하여 스타일 지정하기2
가상선택자 hover, focus 등
hover : 마우스를 올렸을 때 변함
focus : tab키를 눌렀을 때 해당 요소를 변하게함
- : 모든 요소
::before/after : 해당 요소의 뒤나 앞에 요소를 추가
button:hover {
border: soild rgb(124, 241, 140) 3px;
background-color: orange;
color: white;
}
input:focus {
border: soild rgb(90, 63, 225) 5px;
}
div::before {
background-color: orange;
content: "*";
}
0개의 댓글
