HTML - 내용 : 웹브라우저를 통해서 사용자에게 보이는 웹 문서를 작성

CSS - 디자인 : 기존 HTML파일에 다양한 모양을 추가,변경하여 디자인을 표현 

Java Script - 기능 / 동적 제어 : 웹 문서에 움직임을 넣는 언어

 

 

 

 

HTML 샘플

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    
</body>
</html>
<!DOCTYPE html>
해당 문서는 html 문서라고 알려주는 부분
<html lang="ko">
lang : 언어코드 (en: 영어, ko: 한글) / 생략가능
<head> 주로 브라우저의 정보를 입력하는 곳
<meta> 메타 데이터 입력, 주로 <meta charset="UTF-8">처럼 입력
<title> 문서 제목 (탭에 뜨는 이름)
<body>
실제 화면에 출력되는 부분 (본문)

 

 

타이포그래피

제목 태그 (heading) h1~h6 <h1> 제목 내용 </h1>
h1이 메인제목이기 때문에 페이지당 1번 사용하도록 한다. 
문단 태그 (paragraph) <p> 문단 내용 </p>
폰트 두껍게 하는 태그 (bold, strong) <b> 내용 </b> / <strong> 내용 </strong>
기울임꼴(이태릭체) 태그 (italic, emphasis) <i> 내용 </i> / <em> 내용 </em>
밑줄 태그 (under line) <u> 내용 </u>
줄바꿈 태그 (break) <br>
띄어쓰기 (non-breaking space) &nbsp;
카피라이터 (copywriter) &copy;

 

 

문단 태그

<br> : 개행(줄바꿈) : 시작 태그, 끝 태그가 없어서 <br> 또는 <br/>로 사용할 수 있다.

<p> : 문단을 나눌때 사용된다. 문단을 정렬할 때 자주 사용된다.

- 속성 align : 문단 정렬 속성 - left, right, center

<hr> : 문단과 문단을 나눌 때 수평선을 그려준다.

- 속성

width : 수평선의 길이(px이나 %)을 정한다.

align : 정렬방식(left, right, center)를 정한다.

color : 수평선의 색상값을 정한다.

size : 수평선의 굵기(px)를 정한다.

 

 

 

목록 (list)  : <li> 태그 이용한다.

<ol> </ol> 순서가 있는 목록 (ordered list)
<ul> </ul> 순서가 없는 목록 (unordered list)

 

<ol>
  <li>1번 목록</li>
  <li>2번 목록</li>
</ol>

<ul>
   <li>첫번째</li>
   <li>두번째</li>
</ul>

위의 태그는 이렇게 구현된다. 

 

 

<ol> 순서가 있는 목록 (ordered list)
type= "1" 숫자(기본값) 1, 2, 3, 4....
"a" 영문 소문자 a, b, c, d.....
"A" 영문 대문자 A, B, C, D....
"I" 로마 숫자 대문자 (I, II ...)
"i" 로마 숫자 소문자 (i, ii ...)
start="5" 5부터 시작
<ul> 순서가 없는 목록 (unordered list)
 <ol start = "5" type="I">
        <li> 순번이 있는 목록 태그 항목 1 </li>
        <li> 순번이 있는 목록 태그 항목 2 </li>
        <li> 순번이 있는 목록 태그 항목 3 </li>
        <li> 순번이 있는 목록 태그 항목 4 </li>
        <li> 순번이 있는 목록 태그 항목 5 </li>

type = "I"로 로마자 순서가 표시되었다.

 

 

 

  <ul>
        <li>목록 태그 항목</li>
    <ul>
        <li>서브항목</li>
        <li>서브항목</li>
        <li>서브항목</li>
    </ul>
        <li>목록 태그 항목</li>
        <li>목록 태그 항목</li>
        <li>목록 태그 항목</li>
        <li>목록 태그 항목</li>
      </ul>

목록태그 안에 목록태그를 넣으면 서브 목록을 만들 수 있다.

서브항목안에 또 다시 목록 태그를 넣으면 서브의 서브목록을 만들 수 있다.

 

 

   <ol>
        <li>목록 태그 항목</li>
    <ol>
        <li>서브항목</li>
        <li>서브항목</li>
        <li>서브항목</li>
        <ol>
            <li>서브항목</li>
            <ol><li>서브-서브</li></ol>
        </ol>
        </ol>
      </ol>

ol으로 목록을 만들었다.

 

 

목록태그는 CSS에서 margin, padding 여백이 없으면 보이지 않는다.