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>
- 첫번째 태그에는 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 (문법설명이니 스킵해도 됨)
'프로그램 강좌' 카테고리의 다른 글
| [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.13 |
|---|---|
| [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.11 |
| [html02]html = head + body (0) | 2019.07.08 |
| [html01]코딩은 누구나 할 수 있다? (0) | 2019.06.22 |
| [ES6]Arrow function (화살표 함수) (0) | 2019.04.17 |
