원더풀 프로젝트

#1 웹 페이지 구성 3 요소

HTML : 웹 페이지의 구조와 내용
CSS(cascading Style Sheet) : 웹 페이지의 모양.
Javascript : 웹 페에지의 행동 및 응용 프로그램. 사용자 인터페이스 처리

#2 태그 br,hr,h1-h6,title,p,pre

*코드

<html>
 <head>
 <title>br, h1-h6, pre</title>
 </head>
  <body>
  페이지에 타이틀을 다는 예제 입니다.<br>
  타이틀은 브라우저의 타이틀 바에 보여집니다.<br>
  <hr>
  <h1 title="h1태그로 작성하였습니다.">1장 홈페이지 만들기</h1>
  <h2>1절 HTML 언어</h2>
  <h3>1. 웹</h3>
  <h4>1.1. 인터넷</h4>
  <h5>1.1.1. 네트워크</h5>
  <h6>1.1.1.1. 통신</h6>
  <p>여러 개의 빈 칸은 하나로 취급되며, 
     엔터 키 역시 하나의 빈 칸으로 처리된다.
  </p>
  <pre>
      pre 태그를 사용하면
        사용자가 입력한
            그대로 출력됩니다.
  </pre>
<hr><hr><hr>
  </body>
</html>

*결과

#3 문자,기호, 심볼 표현, div,span

HTML5의 문자 : 유니코드 문자셋, UTF-8 코드 체계
예약어, 키보드로 입력이 어려운 기호들, 심볼 (ex) < : ⁢ or < / 빈칸 :   or

#블록 태그와 인라인 태그

태그 : 블록 태그와 인라인 태그로 구분
블록 태그
- 항상 새 라인에서 시작하여 출력
- 양 옆에 다른 콘텐츠를 배치하지 않고 한 라인 독점 사용
- 가장 많이 사용되는 블록 태그 : div / <p>, <h1>,<ul> ...
인라인 태그
- 블록 속에 삽입되어 블록의 일부로 출력
- 가장 많이 사용된 인라인 태그 : span / <strong>,<a>,<img>...

*코드

<html>
 <head>
   <title>문자 가로 심볼표현,div,span</title>
 </head>
 <body>
   <h3>기호넣기</h3>
<hr>
10 &divide; 2 = 5<br>
&radic;2 = 1.414<br>
2 &nbsp;&nbsp; &lt; &nbsp;&nbsp;&nbsp; 3 <br>
오늘 &quot;김광석&quot; 노래를 들었다.
<h3>사랑</h3>
<hr>
<div style="background-color:skyblue; padding:40px;">내가 사람의 방언과 천사의 말을 할지라도<br>
<span style="color:red;">사랑</span>이 없으면 아무것도 아니라.</div>
 </body>
</html>

*결과

'원.더.풀 프로젝트 > HTML,CSS' 카테고리의 다른 글

원더풀 프로젝트_CSS1 (0)	2020.03.21
원더풀 프로젝트_HTML 5 (0)	2020.03.14
원더풀 프로젝트_HTML 4 (0)	2020.02.24
원더풀 프로젝트_HTML 3(테이블 만들기/테이블 변형) (0)	2020.02.17
원더풀 프로젝트_HTML 2 (0)	2020.02.12