아래 포스팅은 언제든지 수정, 비공개, 삭제가 될 수 있습니다.
백업용. 공지에 있는 링크들을 참조하였음.
<head></head>
<body></body>
는 누르면 열립니다..! ♥
<!doctype html>
<html>
<head>
/* title 요소*/
/* title 요소는 문서 내에 한 번만 사용되고, 검색 엔진이 확인함 */
<title> 문서의 제목 </title>
/* meat 요소 */
/* <meta 속성="속성값" /> */
/* 아래 두 줄은 필수적인 것들 */
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
/* 현재 페이지에 대한 설명, 주로 검색 엔진이 확인함 */
<meta name="description" content="소개 내용" />
/* 페이지에 대한 주요 키워드들을 담고 있음, 주로 엔진이 확인 */
<meta name="keywords" content="키워드들의 나열" />
/* 검색엔진이 수집을 할지 안할지에 대한 유무 결정 */
/* 만약 검색에 노출되고 싶다면 noindex를 index로, nofollow를 follow로 고칠것*/
<meta name="robots" content="noindex, nofollow" />
/* link 요소 */
/* 주로 CSS를 연결할 때 사용함. 그외에도 사용하긴 한다. */
/* type과 rel을 적어주는 이유는 link의 쓰임새를 CSS에 국한하기 위해서 */
/* rel은 relationship의 줄임말이다 */
/* <link href="css의 이름" type="text/css" rel="stylesheet"/> */
<link href="first.css" type="text/css" rel="stylesheet"/>
/* style 요소 */
/* html 안에 css요소를 넣어 그대로 사용하는 방법. 간단할 때만! */
<style type="text/css">
body{
color:#333;
}
</style>
/* script 요소 */
/* 외부 js파일을 연걸할 때 사용함. body 안에 들어가도 괜찮음.*/
/* html 안에 js요소를 넣어 직접 사용할 수도 있다. style 요소 처럼 */
<script type="text/javascript" src="abc.js"> </script> /* 또는 */
<script type="text/javascript">
//script text
</script>
</head>
<body>
/* 대부분의 요소는 같은 형태의 다른 요소를 안에 포함할 수 있다.
(블록 요소 안에 블록 요소, 인라인 요소 안에 인라인 요소) */
/* 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다. */
/* 하지만, 인라인 요소는 블록 요소를 포함 할 수 없다.*/
/* 블록 요소 */
/* 줄바꿈이 일어남! */
<h1> 제목을 결정하는 블록 요소 </h1>
<p> 문단을 결정하는 p요소. </p>
<div> div 역시 블록 형태. </div>
<hr> 요소는 선을 긋는 요소. <hr />
<!-- 선을 긋는 요소는 주로 CSS에서 border-bottom: 1px soild #(colorcode) 를 사용함 -->
/* headline 요소 */
<h1> 대 제목 </h1>
<h2> 소 제목 </h2>
<h3> 하위 제목 </h3>
/* p요소 */
/*paragraph*/
<p> 문단은 문장이 모여서 하나의 중심 생각을 나타내는 덩어리이다. </p>
<p> 문단 </p>
/* 목록 요소 */
/* ol 요소 (older list) */
/* ol 요소 안에 li(list 의 줄임) 요소로 항목을 표시 */
/* ol 요소 안에는 li요소만 올 수 있음. 단, li 요소 안에는 다른 요소들 가능. 심지어 ol요소도 안에 중첩될 수 있다.*/
/* ol 요소의 순서는 1부터 시작하나, 속성값을 줘서 바꿀 수 있다. start 속성을 주면 해당하는 숫자부터 시작 */
<ol start="40">
<li><p>단락</p></li> <!-- 40. 단락 -->
<li>항목</li> <!--41. 항목 -->
</ol>
/* 또한 reversed 속성을 주면 역순으로 시작된다. */
<ol reversed="reversed">
<li><p>단락</p></li> <!-- 2. 단락 -->
<li>항목</li> <!--1. 항목 -->
</ol>
/* ul 요소 (unordered list) */
/* ol 요소처럼 li요소만 들어올 수 있다. */
/* ol 요소에서 썼던 start요소와 reversed 요소는 쓸 수 없다.*/
<ul>
<li>항목</li>
<li>항목</li>
</ul>
/* dl 요소 (description list) */
/* 개념과, 정의로 이루어진 목록. 개념은 dt요소로 정의는 dd요소로 작성하며, 다음과 같이 작성함 */
/* dd는 dt에 대한 정의값 */
/* dl은 dt와 dd 요소만을 자식으로 둘 수 있다.*/
/* dt는 인라인 요소이며, dd는 블럭 요소임. 때문에 dt 안에 dd 요소를 넣으면 안됨. */
/* 단, dt와 dd 밑에는 다른 속성들이 와도 괜찮다. */
/* dl 태그 안의 dt 밑에 바로 dd가 쓰임! */
<dl>
<dt>한글</dt>
<dd>우리나라 글자의 이름. 1445년에 훈민정음이라는 이름으로 반포되었다.</dd>
</dl>
/* div 요소 */
/* 레이아웃 잡는 용도로 많이 쓰기 때문에 많이 중첩됨.*/
/* 아무 의미 없는 요소다. */
<div>
<p>안녕하세요. <span>반갑습니다.</span></p>
</div>
<!-- span요소는 인라인요소이므로 span 안에 div 요소를 쓰지 않도록 한다 -->
/* 인라인 요소 */
/* a, img, strong, span, br 요소 */
/* 줄바꿈이 일어나지 않음 */
<strong> 이 요소는 강조하는 strong 요소(bold)입니다. 객관적. </strong>
<em> 이 요소는 강조하는 italic이 나오는 em 요소입니다. 주관적. </em> <!-- 단위 em과 다름 -->
<a href="url" 링크가 있는 a 요소 역시 인라인 형태입니다. </a>
<sapn> 이것은 span 요소입니다. 아무 의미 없는 요소. </sapn>
<p> 아무도 그에게 수심을 일러준 일이 없기에 <br /> <!-- <br /> 요소는 줄바꿈을 위함 -->
흰 나비는 도무지 바다가 무섭지 않다 <br /> </p>
<img src="image.jpg" alt="이미지의 묘사 내용" />
/* img 요소 */
/* src과 alt요소는 필수 속성 */
/* alt 속성은 alternate(대체하다)의 의미. 엑박 떴을 때 뜨는 문구 */
/* alt 속성은 툴팁이 보이기도 하나, 오류임. 툴팁을 원한다면 title 속성을 쓸 것. */
<img src="smile-dog.jpg" alt="웃고 있는 개의 모습" height="400" width="300" />
/*height 랑 width 는 이미지의 기본 크기를 명시하는 속성*/
/* a요소 */
/* 두가지가 있음. 하나는 링크로써의 기능이고, 다른 하나는 앵커(돛)로써 링크의 타깃이 되는 기능 */
/* 페이지 내부에서 이동도 가능 */
/* 돛으로써의 기능은 현재 id요소가 대체하고 있음. */
/* id 요소 */
/* 아래 두개는 같다. id는 body 내의 모든 요소에 쓸 수 있기 때문에. */
<h2><a id="history">역사</a></h2>
<h2 id="history">역사</h2>
/* 단, 한 페이지의 html 문서 안에서 id는 단 한개만 존재해야 함 */
/*아래는 wrong*/
<h2 id="chapter">역사</h2>
<h2 id="chapter">마크업</h2>
/*아래가 맞다*/
<h2 id="chapter-1">역사</h2>
<h2 id="chapter-2">마크업</h2>
/* span 요소 */
/* 아무 의미 없는 요소다. */
/* 주로 class속성을 div과 같이 쓴다*/
<!--class 속성은 원하는 이름을 넣고 css에서 그 class 이름을 선택자로 사용함-->
/*class 속성은 id속성과 같이 모든 요소에 사용이 가능하고, id와 사용이 비슷함 */
<style type="text/css">
/* !--style 요소는 css를 html에서 그대로 사용할 수 있게 하는 요소 */
.hello{ /* hello의 컬러를 레드로 설정한 거임 */
color:red;
}
</style>
<sapn class="hello"> 안녕하세요.</sapn>
/* 안녕하세요를 hello라는 값으로 결정지은 것. hello가 안녕하세요의 이름임. */
/* class와 id의 차이!!!!!!!!!! */
<!-- class는 페이지에서 한 번 선언 가능. ex) main-menu를 선언하면 그 페이지에서 더는 main-menu 선언이 불가능하다. 하지만, 클래스는 여러 번 사용이 가능하다. -->
/* class 속성은 대체로 css로 스타일을 줄 때 사용함 */
/* 중복된 값에 같은 CSS를 적용할 때 */
<div class="chapter" id="chapter1-1">
<h2>1장 서막 </h2>
<p>서막을 알리는 소리... </p>
</div>
<div class="chapter" id="chapter1-2">
<h2>2장 사건</h2>
<p>사건이 터졌다!...</p>
</div>
<div class="chapter" id="chapter1-3">
<h2>3장 종료</h2>
<p>끝.</p>
</div>
</body>
</html>
'코딩' 카테고리의 다른 글
티스토리 스킨용 CSS (0) | 2018.08.25 |
---|---|
Notice (0) | 2018.08.25 |