텍스트(Text) 입력
-
웹 사이트에서는 텍스트로 정보를 쉽게 전달할 수 있다.
- 신문, 블로그, 쇼핑몰 상세 페이지 등...
-
텍스트는 UTF-8문자 세트와 같은 컴퓨터 코드로 정의되는 글자를 뜻한다.
글 제목 : <h1> ~ <h6> 태그
- HTML문서에서는 글 제목을 표현하기 위해
<h1> ~ <h6>까지의
태그가 제공된다. 숫자가 커질수록 제목 크기는 작아진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글 제목 만들기</title>
</head>
<body>
<h1>제목 태그</h1>
<h2>제목 태그</h2>
<h3>제목 태그</h3>
<h4>제목 태그</h4>
<h5>제목 태그</h5>
<h6>제목 태그</h6>
</body>
</html>
CSS를 이용하여 글자 크기, 색상 변경하기
- CSS : 지금은
웹 페이지를 꾸미는 데 사용하는 것이라고만 알아두자.
style="font-size: 50px;"
- style속성 : CSS를 정의할 때 사용한다.
- font-size: 50px : 글자 크기를 50픽셀로 정의한다.
style="color: red;"
- color: red : 글자 색상 빨간색으로 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글 제목 만들기</title>
</head>
<body>
<h1 style="font-size: 50px;">제목 태그</h1>
<h3 style="color: red;">제목 태그</h3>
</body>
</html>
단락 : <p> 태그
- 웹 페이지에서 텍스트 단락을 입력할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>단락 만들기</title>
</head>
<body>
<h2 style="color: green;">수박(watermelon)</h2>
<!--웹 편집기에서 줄을 변경해도 웹 페이지에서는 한 줄로 표시됨-->
<p>수박(watermelon) 또는 서과(西瓜)는 쌍떡잎식물 박목 박과에 속하는 덩굴성 한해살이풀이며,
학명은 Citrullus lanatus. 전 세계에서 두 번째로 가장 많이 재배되는 과일이다.</p>
<p>대표적인 여름 제철 채소 또는 과일로 여름을 상징하는 이미지가 있다.</p>
<p>한 마디로 여름 과일의 대명사. 하지만, 들기가 무겁고, 자르기가 훨씬 힘든 과일이다.</p>
</body>
</html>
줄 바꿈 : <br> 태그
<br>태그로 원하는 위치에서 줄 바꿈을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>줄 바꿈 적용하기</title>
</head>
<body>
<h3>줄 바꿈 적용 전</h3>
<p>1. HTML
2. CSS
3. 자바스크립트
</p><br>
<h3>줄 바꿈 적용 후</h3>
<p>1. HTML<br>2. CSS<br>3. 자바스크립트</p>
</body>
</html>
참고
- Do it! HTML+CSS+자바스크립트 웹 표준의 정석
- HTML/CSS 입문
