안녕하세요 코딩초밥입니다 ㅇㅅㅇ
학습을할떄 기초가 탄탄해야 높이 쌓을수있는법이죠?
html의 기본를 알아봅시당. 파이팅 😍
-참고
html은 에러가나도 그 글이 제대로 보이지않을뿐 에러가 나지않습니다.
그게 큰 장점이자 단점이라고할수있습니다
잘나오지않는다면 코드를 다시한번 봐주시길바랍니당
텍스트 표시
텍스트는 특별한 태그없이도 <body>..</body> 안에서 표현할수있습니다
<!DOCTYPE html>
<html>
<body>
안녕하세요?
이렇게 코드를 쓴다고 하여도
결과는 띄워쓰기가 되지않습니다.
</body>
</html>
해딩 요소 <h1~h6>
글을쓰는데도 굵게 써서 헤드라인처럼쓰고싶을떄가있죠???
<!DOCTYPE html>
<html>
<body>
<h1>이것이 heading 1 입니다.</h1>
<h2>이것이 heading 2 입니다.</h2>
<h3>이것이 heading 3 입니다.</h3>
<h4>이것이 heading 4 입니다.</h4>
<h5>이것이 heading 5 입니다.</h5>
<h6>이것이 heading 6 입니다.</h6>
</body>
</html>
단락 <p>
이렇게 단락을 나눠서 줄을바꿀수있습니다 그러나 중간에 줄 바꾸는데 그냥바뀌는게 아닌
한줄 띄워져있는게 보여지시나용? 이게 단락 바꾸면서 생기는 줄들입니다.
<!DOCTYPE html>
<html>
<body>
<p>이것이 하나의 단락입니다.</p>
<p>이것이 하나의 단락입니다.</p>
<p>이것이 하나의 단락입니다.</p>
</body>
</html>
줄바꾸기 브레이크<br>
<!DOCTYPE html>
<html>
<body>
<p>여기는 <br>br태그를 사용하여 <br>줄을 바꾸었습니다.
</p>
</body>
</html>
<br>은 empty element 의 종류중하나입니다
empty element: endtag/가없습니다. </br>써도 되고 안써도됩니다
프리하게쓴다<pre>
<br>을 쓰지않고 그냥 쓰는데로 넣을수도있습니다. 바로 <pre>입니다.
<!DOCTYPE html>
<html>
<body>
<pre>
아주 먼 옛날 바닷가 어느 왕국에
애나벨리라는 이름을 가진
한 소녀가 살고 있었지요.
그 소녀는 날 사랑했었지요.
</pre>
</body>
</html>
<pre>는 엔터로 띄워쓰는데로 띄울수있습니다. 그러나 잘쓰지는않습니다.
들여쓰기와 모양이 쓰지않는모양이라 많이 쓰지는않는것같습니다
수평선<hr>
수평선을 넣을수있습니다.
<!DOCTYPE html>
<html>
<body>
이것이 수평선입니다.
<hr />
수평선이었습니다.
</body>
</html>
리스트 <ol>,<ul>,<dl>
<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
<ol>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ol>
<dl>
<dt>에스프레소</dt>
<dd>- 커피의 기본, 커피의 원액이다.</dd>
<dt>아메리카노</dt>
<dd>- 에스프레소에 물을 넣은 것</dd>
<dt>카페라떼</dt>
<dd>- 커피에 우유를 섞은 것</dd>
</dl>
특수문자 종류(일부)
:한칸을띄우지않고 바로 띄웁니다.라는뜻입니다
Entity 문자라고 읽으며 구글링하면 엄청난 양의 정보가 나옵니다
특수문자를 사용하려면 이런것이있습니다.
이 문자가 왜 쓰여야하냐면 <>는 태그문에도 쓰이기때문에
컴퓨터는 햇갈립니다. 고로 이런 특수문자는 따로 코드를 써주셔야합니다
요소종류.(일부)
<STRONG><EM>을 쓰면 텍스트모양은 같으나 제3자가 검색을할경우
저 글들이 검색할때 주요 키워드로 작용해서 더욱 검색을 용이하게합니다
명령어에는 Block과 Inline 요소들이있습니다
이 차이점은 뭐냐면 한줄을 다먹는것과 아니면 그영역만 먹는다는 뜻으로
android개발자님들에게 간단히 설명하자면
width 가 match냐 wrap이냐 차이라고 이해하시면 빠릅니다.
BLOCK -WIDTH-MATHCH
<EX>P,H,PRE,HR,UI,LI,DI,Table,Div
INLINE- WIDTH- WRAP
<EX>STRONG,EM,CODE,A,IMG,Input,TextArea,Audio,Video,Ifram
Empty element: endtag</>가없는요소입니다.
다끝나셨으면 오늘 하루의 endtag를 찍어봅시당 😎
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| 반응형 웹디자인. (5) | 2021.05.03 |
|---|---|
| CSS의혁명,FLEX (0) | 2021.05.02 |
| HTML에 대한 이해 (1) | 2021.04.30 |
| CSS_CSS에 대한 이해 (0) | 2021.04.30 |
| CSS_선택자의종류 (0) | 2021.04.28 |
댓글