본문 바로가기

프로그램 강좌

[html03]CSS가 뭔데? 텍스트 꾸며보기


html을 장식하려면 css가 필요해

저번에 헤드, 바디 공부하셨었죠? 이번엔 좀더 결과를 눈으로 바로 확인할 수 있는 방법을 알려드릴까 해요. css가 뭔지 헷갈리시겠지만 우선 아래 실습을 같이 따라해보실게요.

 

글자 꾸미기

1.VSCODE 실행 

2.새문서 만들기(Ctrl+N) 

3.03_text_css.html로 파일 저장 

4.문서 내에 html:5 입력(메모장이라면 아래 코드 복사)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


5.body태그 안에 div 태그 입력하고, 안에 Hello라고 입력

<body>
    <div>Hello</div>
</body>

아직까진 기존에 배우던거랑 다를게 없죠?


6.이제 꾸며보겠습니다. 앞부분 div 태그안에 style="color:red" 무슨뜻인지는 이따가 설명 드릴게요.

<body>
    <div style="color:red">Hello</div>
</body>


7.IE나 크롬 브라우져에서 이 파일을 실행시켜 보세요. 빨간색 Hello가 보이나요? 

8.div 태그 아랫줄에 한줄 더 입력해보겠습니다.

<body>
    <div style="color:red">Hello</div>
    <div style="color:blue">Html코딩 시간이예요.</div>
</body>


9.파란색 html 코딩 시간이예요. 가 보이나요? 눈치 빠른 분들은 아시겠지만 색상을 넣어줄땐 color라는 명령어를 써주면 되요. 신기한가요? 아니면 너무 쉽나요? 

10.영문일땐 잘 몰랐는데 한글을 쓰니까 굴림체로 나오네요. 보기 안좋죠? 

11.맑은 고딕 폰트로 바꿔볼게요. 2번째줄 div 안에 font-family를 입력해주세요.

<body>
    <div style="color:red">Hello</div>
    <div style="font-family:'Malgun Gothic';color:blue">Html코딩 시간이예요.</div>
</body>
  1. 첫번째 태그에는 bg를 쓰고 싶어요. 이럴땐...
<body>
    <div style="background:red;color:white">Hello</div>
    <div style="font-family:'Malgun Gothic';color:blue">Html코딩 시간이예요.</div>
</body>

너무 쉽게 바꼈죠?


컴퓨터가 이해할 만한 언어로 바꿔줬을 뿐이예요. 외국어 배울때랑 똑같죠? 

물론 저는 하도 쓰다보니 외우고 있지만 절대 외울 필요는 없습니다.


좀 더 해보면 좋은 기능

폰트자간 - letter-spacing: -1 (포토샵이라면 자간 -60% 정도의 효과가 -1이예요.)

폰트굵기 - font-weight: bold; (200, 400, 600...) 

가운데정렬 / 우측정렬 - text-align: center / text-align: right

줄간격 - line-height: 1.6 (현재 텍스트 크기의 1.6배 만큼 줄간격을 확대)


끝까지 긴글 읽어주셔서 감사드리고 다음 강좌에서 뵐게요.


2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?

2019/07/08 - [프로그램 강좌] - [html02]html = head + body

2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!

2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2

2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)


728x90