안녕하세요, 깨비도입니다.
저번 HTML에 이어 이번에는 CSS를 설명해보겠습니다.
1. CSS란?
CSS는 HTML을 꾸며주는 요소들을 말합니다.
아무변화 없는 화면구성은 보는 이에게도, 만드는 이에게도 지루하기만 하죠.
글씨색부터, 글씨체와 크기, 백그라운드 색상과 이미지 크기를 조절하는 등의
모든 디자인적인 요소는 CSS에서 관할합니다.
2. CSS 태그 분석
css는 html을 통해 관리하는데요.
html의 <head>태그 안에서 <style>태그를 생성하여 원하는 디자인을 넣을 수 있습니다.
그 중에서도 <h1>태그와 <p>태그를 바꾸려면
원하는 태그명을 입력하고 뒤에 중괄호{}를 입력해주면 됩니다.
만약 태그별로 분류하지 않고 <body>태그를 통째로 바꿔주고 싶다면 body{}를 입력하면 되겠죠?
그러나 여기서 문제점이 하나 있습니다.
<p>태그는 총 4개인데 어떻게 하나하나 구분할 수 있을까요?
바로 id와 class를 지정하여 개별적으로 선택할 수 있다는 것입니다.
<p id="red">이건 빨간색으로</p>
<p id="blue">이건 파란색으로</p>
<p class="big">이건 큰 글씨로</p>
<p class="small">이건 작은 글씨로</p>위 두 개의 태그에는 id, 밑 두 개의 태그에는 class를 주었습니다.
크게 구분하면, class 안에 id가 있다고 생각하면 쉽습니다.
id는 태그 하나에만 주는 고유번호라고 생각하면 되고, class는 여러개의 태그에 줄 수 있는 단체번호라고 생각하면 됩니다.
<style> 태그 안에서 id는 id 이름 앞에 #을, class는 class 이름 앞에 .을 붙여주면 됩니다.그외의 지정해주지 않은 일반 태그는 앞서 설명한 것과 같이 아무것도 붙이지 않고 태그명만 쓰면 됩니다.
이렇게 필요에 따라 id, class를 지정해주면 css 스타일을 넣을 준비가 끝난 것입니다.
3. CSS 태그 종류
글씨색과 글씨 크기
그럼 우선 글자를 빨간색과 파란색을 주어 구분하고 큰 글씨와 작은 글씨로 사이즈를 조절해보겠습니다.
id 값을 red로 준 <p> 태그를 빨간색으로 바꿔볼텐데요.
<style>
#red{
color : red;
}
</style>
이렇게 명령어 color와, 원하는 색상명을 적은 뒤 세미콜론(;)까지 입력해주면 됩니다.
일반적으로 문장을 작성할 때 끝마침을 온점(.)으로 표시하죠?
css와 java script에서는 세미콜론(;)이 끝마침을 의미합니다.
이 세미콜론으로 코드가 실행되냐, 되지 않느냐로 곯머리를 앓기 때문에 잊지 말고 꼭 넣어주세요.
저는 빨간색 글씨만 보면 눈이 너무 아파서 배경색을 검정색으로 지정하고 싶어져서,
<style>
#red{
color : red;
background-color : black;
}
</style>
이렇게 배경색까지 지정해주었습니다.
짜잔. 배경색이 바뀌었죠?
밑에 파란색 글씨도 손 쉽게 같은 방식으로 바꾸어보겠습니다.
<style>
#red{
color : red;
background-color : black;
}
#blue{
color : blue;
}
</style>
이번에는 폰트사이즈를 바꾸어보겠습니다.
우리가 출력할 때의 단위는 mm, cm, m 등의 단위를 사용하지만 컴퓨터를 이용하여 작업할 때는 px(픽셀) 단위를 더 많이 사용하게 됩니다.
때문에 css에서도 px 단위를 더 많이 사용하는데요.
<style>
#red{
color : red;
background-color : black;
}
#blue{
color : blue;
}
.big{
font-size : 50px;
}
.small{
font-size : 10px;
}
</style>
확연히 달라진 크기를 볼 수 있습니다.
가운데 정렬
보다보니 왼쪽정렬되어있는 것이 정말 불편합니다.
이번에는 가운데 정렬을 해보도록 하겠습니다.
텍스트를 정렬할 수 있는 명령어는 text-align입니다.
정렬할 수 있는 다양한 방법이 자동완성으로 나왔고, 저는 가운데 정렬을 할 것이기 때문에 center를 선택하였습니다.
손쉽게 가운데로 모았습니다!
이미지 크기 조절
이번엔 이미지를 넣어볼건데요.
크기가 지나치게 커 크기 조절이 요구되는군요.
이번에도 이미지에 클래스를 지정하여 조절해보겠습니다.
<head>
.image{
width: 300px; height: 500px;
}
</head>
<body>
<img class='image'src="../imge/컵코스터.jpg" alt="">
</body>
클래스이름은 image이구요. 임의로 가로는 300px, 세로는 500px로 주어봤습니다.
이미지가 비율이 맞지 않고 제가 조절한 값 그대로 줄어들어 심하게 일그러진 것을 볼 수 있습니다.
하지만 이미지 크기를 조절할 때마다 매번 이렇게 하나하나 맞춰가면 힘들겠죠.
이럴 때는 가로 또는 세로 값만 지정하여 비율을 망가뜨리지 않고 그대로 줄일 수 있습니다.
<head>
.image{
width: auto; height: auto;
max-width: 500px;
}
</head>
<body>
<img class='image'src="../imge/컵코스터.jpg" alt="">
</body>
가로세로 값은 auto로 알아서 조절되고, 저는 max가로(또는 세로) 값만 지정해주면 편리하게 이미지 크기를 줄일 수 있습니다.
margin, border, padding
아무 웹페이지에서 오른쪽 클릭을 하고 검사를 눌러보시면 탭이 생기면서 이러한 이미지가 나옵니다.
margin은 오브젝트(태그)의 외부면적,
border은 오브젝트의 외곽선,
padding은 오브젝트의 내부면적을 말합니다.
이를 이용하여 오브젝트를 원하는 위치에 배열하거나, 테두리 값을 줄 수도 있습니다.
우선은 border을 이용하여 <h1> 태그에 테두리를 줘보도록 하겠습니다.
border의 선은 실선이기 때문에 solid, px값은 원하는 만큼, 색상 또한 원하는 색상으로 주면 됩니다.
이렇게 <h1> 태그에 테두리가 생긴 것이 보이시죠?
이번엔 margin 값으로 <body> 태그 전체를 아래로 내려보도록 하겠습니다.
margin 전체 값이 아닌, 위에서 아래로 내리기만 할 것이기 때문에 margin-top을 이용하여 100px만 내렸습니다.
이렇게 margin, border, padding 값을 주는 시도를 해보며 원하는 위치에 태그를 배치할 수 있습니다.
font-family와 font-face
마지막으로 글씨체를 바꿔보겠습니다.
구글에서 제공하는 웹폰트들은 모두 상업적, 개인적으로 이용이 가능하기 때문에 html 태그에 넣기가 아주 용이합니다.
Google Fonts : fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
해당 링크로 들어가면 무료로 사용가능한 구글 폰트들이 나오는데요.
여기서 원하는 폰트를 골라 사용해보도록 합시다.
저는 나눔명조를 사용해보겠습니다.
폰트를 누르면
다양한 스타일이 나오고 이 중에서 원하는 스타일을 고르면 됩니다.
오른쪽에 +Select this style을 누르고
@import를 누릅니다.
먼저 맨 밑에 있는 CSSrules to specify families에서 font-family를 통째로 복사해옵니다.
나눔명조만 복사하면 되구요. 저는 노토산스를 사용한 이력이 있어서 밑에 같이 뜨네요.
이를 VSC에 가져와서,
<body> 태그 안에 붙여넣습니다.
저는 body 태그의 모든 글자를 나눔명조로 통일하기 위해서 이렇게 쓴 것이구요. 한 문장씩 바꿔서 하고 싶다면 해당 태그, id, class에 붙여넣기 해주면 됩니다.
두 번째로는 font-family를 복사해왔던 바로 위에 칸에서 <style> 태그 안에 쓰여있는 @import~를 복사해서
중괄호{} 밖에 붙여넣기 해줍니다.
그럼 이렇게 나눔명조로 바뀌는 것을 확인할 수 있습니다!
해당 폰트가 없어도 구글 웹에서 제공하고 있기 때문에 내 컴퓨터, 혹은 다른 사용자의 컴퓨터에서도 깨지지 않고 잘 보이게 되죠.
(코드에는 noto sans로 나와있네요... 제가 사용한 것은 나눔명조입니다!)
4. CSS 분리하기
css를 다루다보면 html 페이지가 정말 길어지는 것이 보일텐데요.
보기에도 비효율적이기 때문에 css 파일을 따로 분리해보겠습니다.
VSC에서 새로운 파일을 생성하는데, 이번에는 (파일명).css로 해보겠습니다.
후에, html <head> 태그 안에 생성해놓은 <style>태그의 내용을 모두 복사하여, css 파일로 붙여넣기 하면 됩니다.
그럼 html에 남아있는 <style>태그는 모두 지워준 뒤
<link> 태그를 생성해주면 됩니다. (뒤에 부가적으로 쓰여있는 rel이나 href는 자동완성으로 생깁니다.)
마지막으로 href에 css파일 링크를 걸어주면 완성.
만들어둔 웹사이트를 새로고침하여 정상적으로 작동하는지까지 확인해주면 무사히 마무리한 것입니다.
다음에는 Java Script 로 찾아뵙겠습니다.
'Web Development > Front-end' 카테고리의 다른 글
| [Error, React-Hook] props.history가 없어요! (useHistory) (0) | 2021.03.26 |
|---|---|
| Reset CSS File (0) | 2020.11.13 |
| [Javascript] 곱등이게임 (0) | 2020.10.31 |
| [Zerocho-14] EventListener(keyup&down) & 증감연산자(전위형/후위형) & Blocking / Non-Blocking & 이벤트루프 (0) | 2020.10.30 |
| [Javascript] 계산기만들기 (0) | 2020.10.30 |
