Brackets.Release.1.8
이거 받기
GettingStarted -> 들어가서
D:\web_workspace_html\HTML\WebContent
이거 경로로 하면 된다.
그럼 test1.html이라는 파일이 추가되어있다.
그럼 얘를 누르면 코드가 나온다.
얘의 장점은 뭐냐면 우측에 번개모양이있는데 실시간 미리보기이다.
실시간으로 바로바로 반영이 된다.
윈도우키 +왼쪽오른쪽 하면절반으로 간다.
거꾸로 하기
alt+ctrl+위아래
@ 글자 태그
## h 태그 ##
-> 제목을 입력할 때 사용하는 태그, 폰트의 크기가 태그에 따라 정해져 있음, h 태그 뒤 숫자로 크기를 구분함
작성법
<h?> 제목내용 </h?>
h1 : 첫번째로 큰 제목
h2 : 두번째로 큰 제목
h3 : 세번째로 큰 제목
h4 : 네번째로 큰 제목
h5 : 다섯번째로 큰 제목
h6 : 여섯번째로 큰 제목
## br 태그 ##
-> 문장을 줄 바꾸기(개행) 할 때 사용
## hr 태그 ##
-> 페이지에 가로로 밑줄을 만들어 줄 때 사용
## p 태그 ##
-> 한 개의 단락을 만들 때 사용
-> 자동으로 문장 줄 개행 후 한 줄 공백을 만들어 줌
# pre 태그 ##
-> 입력한 그대로 출력 할 때 사용
-> 띄어쓰기, 들여쓰기 줄 바꿈이 입력된 그대로 출력 됨
# strong 태그 또는 b 태그 ##
-> 문장에서 문자를 강조하여 굵게 표시할 경우에 사용
## em 또는 i 태그 ##
-> 문자에 기울임을 주는 태그
## blockquote 태그 ##
-> 다른 블로그나 사이트의 글을 인용할 경우 사용
-> 자동 들여쓰기가 되어 다른 텍스트와 구별할 수 있음
## q 태그 ##
-> 다른 블로그나 사이트의 글을 인용할 경우 사용
-> 인용 문구에 " " 표시가 됨
## mark 태그 ##
-> 배경 부분이 노랑색이 되며 형광펜 표시가 된듯 출력
@ 그 외
<u></u> 밑줄 / <hr>은 페이지 전체에 수평으로 줄을 표시하지만 <u>는 해당 범위에만 수평줄을 표시
<small></small> 원 문자보다 작은 글씨로 표시부가 정보 표현시 자주 사용
<sub></sub> 아래 첨자
<sup></sup> 윗 첨자
<s></s> 취소선
<addr></addr> 약자표시와 함께 마우스가 문자에 있으면 출력 (ToolTip)
<code></code> 코드 로써 동작시키지 말고 텍스트로써 보여주어라 (일반적으로 pre 태그에 작성)
<kbd></kbd> 키보드 입력이나 음성명령 같은 사용자 입력내용
-> 실제로는 일반 문자열과 큰 차이는 없으나 추후 웹 접근성에 용이 함
<cite></cite> 웹 문서나 포스트에서 참고할때 사용 , 이텔릭으로 표시(브라우저마다 상이)
-> 기울임과 큰 차이는 없음 (다만 나중에 참조 사이트 명시 했는지 찾아볼 수 있음)
w3schools 여기 들어가서 공부하기
-> 웹에 사용하는 표준을 알려주는 사이트이다.
정답소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자 태그 목록 태그 연습문제</title>
</head>
<body>
<h2>자바 FRAMEWORK 기반 웹 응용SW 개발자 양성과정</h2>
<h3>담당 강사 : <u>노민수</u></h3>
<p>이메일 : <i>tksemfhr@naver.com</i></p>
<hr><hr>
<h2> 이번주 식단 </h2>
<ul>
<li> 월요일 <i>식단</i>
<ul>
<li><b>돈까스</b></li>
<li>참치찌개</li>
<li><i><mark>계란말이</mark></i></li>
<li>김치</li>
</ul>
</li>
</ul>
<ul>
<li> 화요일 <i>식단</i>
<ol start="5">
<li><b>닭다리튀김</b></li>
<li>김치찌개</li>
<li><u>오므라이스</u></li>
<li><s>냉면</s> -> <mark>떡볶이</mark></li>
</ol>
</li>
</ul>
<ul>
<li> 수요일 <i>식단</i>
<ol type="i">
<li><b><u>수제햄버거</u></b></li>
<li>우유</li>
<li><u>스프</u></li>
<li>단무지<sub><u><mark>2개</mark></u></sub></li>
</ol>
</li>
</ul>
<ul>
<li> 목요일 <i>식단</i>
<ol type="A">
<li><b>삼겹살<sup><mark>특식</mark></sup></b></li>
<li>상추</li>
<li>부침개</li>
<li><i>무국</i></li>
</ol>
</li>
</ul>
<ul>
<li> 금요일 <i>식단</i>
<ol type="a" reversed="reversed">
<li><b><mark>치즈피자</mark></b></li>
<li><i>피클</i></li>
<li>콜라</li>
<li>스파게티</li>
</ol>
</li>
</ul>
<hr>
<blockquote> 일하지 않는자 먹지도 말라<br>
<pre> <i><b> - 김생민 - </b></i></pre>
</blockquote>
<cite> 식단출처 : kh 정보 교육원 (http://iei.or.kr)</cite>
</body>
</html>
'IT일반과목 > HTML5+CSS3' 카테고리의 다른 글
| 20180907 멀티미디어태그 (이미지의 부분마다 경로지정하기) (0) | 2018.09.07 |
|---|---|
| 20180907 학원수업 영역태그, 이미지삽입 등 (0) | 2018.09.07 |
| 20180905 학원수업 과제1 (0) | 2018.09.06 |
| 20180905 학원수업 HTML개요,헤드,글자태그 (0) | 2018.09.06 |
| 20180903 HTML5 (0) | 2018.09.03 |
