*기초 html
-html test
https://code.sololearn.com/28/#html
*<p> 단락
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph. </p>
<p>This is <br /> a line break </p>
</body>
</html>
-<br/>은 single line을 나눌 때 쓴다
*text formatting
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is regular text </p>
<p><b> bold text </b></p>
<p><big> big text </big></p>
<p><i> italic text </i></p>
<p><small> small text </small></p>
<p><strong> strong text </strong>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
</body>
</html>
*heading
-<h1>~ <h6>
-<hr/> ; 수평선 (horizontal line)
*comment
<!-- comment ~~~ (*Y#&*( -->
*attribute: start tag 뒤에 사용됨. name="value"형식으로
-align; 위치를 나타냄
<p align="center">
This text is aligned to center
</p>
-width/height="50px" or =50% 다양하게 사용
<p align="center">
This is a text.
<hr width="50%" align="left" />
</p>
*<img> tag: <img src="image.jpg" />로 쓰임
-alt="" 라고 image location을 지정해줘야함. (""인 경우는 현재 폴더)
<body>
<img src="tree.jpg" alt="" />
</body>
-resizing; height, width를 픽셀이나 퍼센테지로 리사이징 가능
<body>
<img src="tree.jpg" height="150px" width="150px" alt="" />
<!-- or -->
<img src="tree.jpg" height="50%" width="50%" alt="" />
</body>
-이미지 border; border='1px' 형식으로 사용 가능
<img src="tree.jpg" height="150px" width="150px" border="1px" alt="" />
*Link; <a>태그
-target="_blank"; 새창 열기
<a href="http://www.sololearn.com" target="_blank">
Learn Playing
</a>
*리스트; ol, ul
-ol; ordered list, 순서가 있음
<body>
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
</body>
-ul; unordered list, 순서 없음
*table; table 태그로 사용, <tr>(table row) + <td> (table data)
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
-table border; 테두리 사용 가능
-table colspan (병합?), align, bgcolor 다 사용 가능
<table border="2">
<tr>
<td>Red</td>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td><br />Yellow</td>
<td colspan="2"><br />Orange</td>
</tr>
</table>
*type of elements: block / inline (? 무슨 차이지)
-block(블록 요소): 새로운 라인에서 시작됨,
모든 인라인 요소는 블럭 요소 안에 있어야함,
p, h1, ul, li, div 등...
-인라인 요소: 블럭 요소, 다른 인라인 요소 안에서만 쓰일 수 있음
a, strong, em, span 등...
(출처: http://html5tutorial.github.io/docs/Block_and_inline_element.html)
*color: 0-9, A-F 총 16가지 value를 가지고 조합
#000000 ~ #FFFFFF 까지
'frontend > html & css' 카테고리의 다른 글
| 마크다운 언어 문법 (0) | 2017.01.11 |
|---|---|
| 수정된 css, js 파일이 적용이 안될 때 (2) | 2016.12.31 |
| 서버 제어하기 (0) | 2016.12.23 |
| 티스토리 url 링크 추가하기 (0) | 2016.12.20 |
| 웹프로그래밍 기초 시작 (0) | 2016.12.11 |