안녕하세요 산와머니 입니다.
부끄럽게도 오랜만에 인사드리네요.
그동안 영상만 보고 정리할 엄두가 안났던 CSS 파트!
오늘 7~9일차 빡공일지를 정리해보려합니다.
1) 7강 CSS 색상 입히는 법
1-1) 내부 css + 글자색과 배경색 바꾸는 법
head태그 안에 style태그를 지정하여 내부에 CSS를 입힐 수 있습니다. 주로 글자색과 배경색에 변화를 주고 싶을 때 사용하는 데, 글자색은 color : red ; 배경색은 background-color : red ; 이런 식으로 적용합니다.
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<style>
div{
color : red;
}
span{
background-color: red;
}
</style>
</head>
<body>
<div>
div
</div>
<span>
span
</span>
</body>
</html><결과>
1-2) 외부 css 연동시키는 방법
head에 style태그 대신에 link 태그를 이용해 외부 css시트를 연결합니다. 그리고 연결한 css에 디자인을 적용시킵니다. 그럼 동일한 결과가 나오는 것을 보실 수 있습니다.
<html 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<div>
div
</div>
<span>
span
</span>
</body>
</html>
<css 코드>
div {
color: red;
}
span {
background-color: red;
}<결과>
2) 8강 배경과 테두리 입히는 방법
button과 input 태그에서 테두리가 생기는 것을 볼 수 있었습니다. 이와 같은 테두리에도 변화를 주고 싶을 때 사용할 수 있는 css 요소가 있습니다.
2-1) button 태그의 선에 변화를 주는 방법
button의 모양은 border라는 속성을 통해 변화를 줄 수 있습니다.
<html 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<button>버튼</button>
<input>
</body>
</html><결과>
위와 같은 결과를 4가지 디자인으로 바꿔보도록 하겠습니다.
- solid : 일반 선
- dashed : 대쉬모양
- dotted : 점 모양
- none : 아무 선도 없음
<html 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<button class="button1">버튼1</button>
<button class="button2">버튼2</button>
<button class="button3">버튼3</button>
<button class="button4">버튼4</button>
<input>
</body>
</html>
<css 코드>
.button1 {
border: solid red 4px;
}
.button2 {
border: dashed red 4px;
}
.button3 {
border: dotted red 4px;
}
.button4 {
border: none;
}
<결과>
2-2) input 태그의 선에 변화를 주는 방법
이러한 input 태그에도 마찬가지로 선에 변화를 줄 수 있는데요. 먼저, 위에서 배운 border을 통해 변화를 준다면 이렇게 됩니다.
<html 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<button class="button1">버튼1</button>
<input>
</body>
</html><css 코드>
input {
border: dotted blue 4px;
}
<결과>
결과를 보면 마우스로 클릭하기 전에는 원하는 모습으로 잘 나오지만, 클릭했을 경우 원치않는 영역이 잡히는 것을 보실 수 있습니다. 이런 경우 위의 html에서 css에 outline 요소를 추가하면 해결이 됩니다.
<css 코드>
input {
border: dotted blue 4px;
outline: none;
}<결과>
2-3) border를 원형으로 바꾸는 방법
많은 분들이 border을 원형으로 만들어 부드러운 이미지를 나타내고 싶어하시는데요. 그럴 땐 css에 border-radius 속성을 추가해주시면 됩니다.
<css 코드>
input {
border: dotted blue 4px;
outline: none;
border-radius: 100px;
}<결과>
3) 9강 글자/폰트 변경하는 방법
하나의 웹페이지는 폰트의 크기/스타일에 따라 분위기가 좌우된다고 보아도 과언이 아닙니다.
3-1) 폰트 사이즈 바꾸는 방법
폰트 사이즈는 브라우저가 기본적으로 16px로 정해둡니다. 하지만 좀 더 강조하고 싶을 때나 하고 싶지 않을 때 크기를 확대하고, 축소시키는 등의 작업이 필요하죠. 그럴 경우엔 font-size라는 속성을 이용합니다.
<html 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<div>
안녕
</div>
<span>
나는 산와머니라고 해!
</span>
</body>
</html>
<css 코드>
div {
font-size: 5px;
}
span {
font-size: 100px;
}
<결과>
3-2) 폰트 스타일 바꾸는 방법
폰트 스타일은 font-family 속성을 이용해 변경시킬 수 있습니다. 해당 속성에는 웹폰트라는 요소들이 함께 쓰이면 좋은데요. 웹폰트는 폰트를 다운 받지 않고도 링크 하나로 간단하게 적용시킬 수 있는 스타일을 말합니다. 예를 들면 저는 주로 웹을 만들 때 눈누 사이트에서 폰트를 가져다 사용하고 있습니다.
눈누 - 상업용 무료한글폰트 사이트
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
noonnu.cc
눈누라는 사이트에 들어가 마음에 드는 폰트를 선택한 후 <웹폰트로 사용>하기 부분에 코드를 긁어서 css 코드 맨 위에다가 추가해주면 됩니다.
<html 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<div>
안녕
</div>
<span>
나는 산와머니라고 해!
</span>
</body>
</html>
<css 코드>
@font-face {
font-family: "IM_Hyemin-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
div {
font-size: 5px;
}
span {
font-size: 100px;
font-family: "IM_Hyemin-Bold";
}다음과 같이 css 맨 위에 폰트 경로를 붙여 넣고, 적용하고 싶은 영역에 font-family : '폰트명'; 을 넣어주면 끝납니다!
<결과>
간혹 font-family : '폰트명1', '폰트명2' .... ; 같이 여러 개의 폰트를 쓰는 경우가 있는데, 이런 경우는 앞에 폰트가 없을 경우 다음 폰트를 적용해라와 같은 의미로 보시면 됩니다.
4) 출석 인증
그동안 인증했던 내역들로 대처합니다 *^^*
14일차 빡공 일지까지 열심히 정리해야겠네요 ㅎㅎ...
오늘 빡공 일기 끝!
다음 일기에서 만나요~
'대외활동 > 빡공단 12기 (HTML, CSS)' 카테고리의 다른 글
| CSS의 모든 것 2탄 선택자 총 집합 : id / class / 가상선택자(hover / focus / before / after) 사용법 (2) | 2021.07.16 |
|---|---|
| HTML 미디어 태그 : img / vedio (0) | 2021.07.05 |
| HTML 인라인과 블록 (0) | 2021.07.04 |
| HTML 텍스트 설정 : 텍스트크기 / input / button (0) | 2021.07.03 |
| HTML 기본 구조 : p태그 / h태그 / Live Server (0) | 2021.07.02 |
