HTML은 내용, CSS는 스타일이라고 보시면 됩니다.
<!doctype html> : html5 웹 표준을 표준 명령으로 해석하겠다는 말. 시작할 때에 씀. 쓰지 않은 경우 명령 해석이 안 될 수 있음.
<html lang="언어"> : html 시작하는 머리 태그 (doctype을 제외한 모든 코드는 <html>과 </html> 사이에 들어간다)
lang: 이 페이지의 언어 속성. 한글=ko, 영어=en 등 각 나라 이름의 앞 2글자.
<head> : 헤드 시작. 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보 입력.
<meta charset="utf-8"> : 문자 인코딩 설정. 코드는 주로 utf-8을 사용한다.
<title> 내용 적기 </title> : 탭 이름
</head> : 헤드 닫기
<body> : 몸통글(바디). 문서의 내용이 들어감
<h1> 내용 적기(머리글) </h1> : head. 머리글 내용. h1, h2 이런 식으로 크기를 조절할 수 있다. 숫자는 1~6까지
<p> 내용적기(문단) </p> : paragraph. 문단 내용. 문단마다 <p>를 써서 열고 </p>를 써서 닫아줘야 한다.
<strong> 내용적기 </strong> : <strong> 이나 <b>는 bold. 글자를 굵게 표현해줌. 시작부분과 끝 부분에 위치.
<b> 내용적기 </b>
<em> 내용적기 </em> : <em> 이나 <i>는 Italic. 글자를 기울여줌. 마찬가지로 원하는 글자 부위 시작과 끝 부분에 위치.
<i> 내용적기 </i>
<mark> 내용적기 </mark> : 형광펜. 마찬가지로 원하는 글자 부위 시작과 끝 부분에 위치.
<br> : <br>의 경우 ENTER 쳐서 글을 내려주는 효과를 준다. 내용 사이에 들어가도 되고 별도로 사용해도 된다.
<hr> : horizontal. 구분선
<blockquote> 내용적기(문단) </blockquote> : 문단 앞에 공백. tab키를 누른 효과를 낼 수 있다. 여러개 쓰면 여러번 tab한 효과를 낼 수 있지만 결국엔 다 닫아줘야 한다.
<img src="사진 경로"> : image source. 이미지 삽입. 확장자 이름까지 적어주어야 합니다.(jpg, png 등)
<img src="사진경로" alt="사진 내용"> : alternative. 이미지가 깨져서 안 보이는 경우에 나타나는 글귀. 시각장애인에게 전달하기 위한 내용.
</body> : 몸통글 닫기
</html> : 페이지 끝났다는 표시
특수기호 표현 (무조건 &으로 시작하여 ;로 끝남)
< = <
> = >
띄어쓰기 (1개) = (no-break space. 띄어쓰기 여러개 해도 반영이 안 되기에.)
특수기호 참고 사이트
Entity Code - A Clear and Quick Reference to HTML Entities Codes
About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done web
entitycode.com
Example 1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>서울특별시</title>
</head>
<body>
<img src="C:\Users\403-11\Desktop\새 폴더\20190618\!html-ex\images\symbol.gif" alt="서울시 로고">
<h1>서울특별시</h1>
<p> <b>서울의 지향 이미지 : 역사와 활력의 인간도시</b>
<p/>
<p> <em>휘장은 한글 ‘서울’을 서울의 산, 해, 한강으로 나타내면서
<br> 전체적으로는 신명나는 사람의 모습을 형상화한 것으로
<br> 인간 중심도시를 지향하는 서울을 상징합니다.
</em>
</p>
<p> 자연 - 인간 - 도시의 맥락 속에서
<br> 녹색 산은 환경사랑, 청색 한강은 역사와 활력,
<br> 가운데 해는 미래의 비전과 희망을 함축하고,
<br> 이 세가지 요소를 붓터치로 자연스럽게 연결하여
<br> 서울의 이미지와 사람의 활력을 친근하게 느낄 수 있도록 하였습니다.
</p>
</body>
</html>
Example 2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 제주 </title>
</head>
<body>
<h1> 제주 이색 여행지 </h1>
<h2> 야외 텐트를 닮은 건축물 <b><em>"테쉬폰"</b></em> </h2>
<p> 아일랜드 출신 <strong>임피제 신부</strong>가 1954년 제주에 오면서 모장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. </p>
<p> 제주에서 점차 다른 지방으로 보급됐지만 현재 <b>제주</b>에만 건축물이 남아있는데,
<br> 국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다. </p>
<hr>
<blockquote>
성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다. 이시돌 목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)
</blockquote>
<br>
<br>
<h2> 제주 이색 여행지 - 이중섭 거리</h2>
<blockquote>
<p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
<p><em>'아트마켓'</em> 이라고도 부르는데, 문화예술체험이나 공연관람을 할 수도 있고
<br>작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>
</blockquote>
<br>
<br>
<hr>
<br>
<h1><mark> 웹 접근성</mark></h1>
<p>
웹의 창시자인
<q>팀 버너스 리(Tim Berners-Lee)</q>
의 웹의 힘은 보편성에 있다.<br>
<b>"장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다"</b>
라는 말로 웹접근성을 설명한다.
</p>
</body>
</html>
'html+CSS+JS > html+CSS' 카테고리의 다른 글
| [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) (0) | 2019.06.19 |
|---|---|
| [html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id) (1) | 2019.06.18 |
| [html/기초] 이미지 관리 (img src, figure, figcaption) (0) | 2019.06.18 |
| [html/기초] 표만들기 (table, tr, th, td, caption, colgroup) (0) | 2019.06.17 |
| [html/기초] 항목나열 (0) | 2019.06.17 |
