고정 헤더 영역
상세 컨텐츠
본문
국비를 다니면서 예 복습 겸 글을 작성한다.
보통 요약해서 작성을 하려고 한다. 그게 찾아보기 훨씬 편하다
지금부터 시작하겠다.
html에는 태그 와 속성이라는 것이 존재한다
먼저 태그는 <p> 123 </p>처럼 <p> = 열리는 태그 / </p> = 닫히는 태그 가 있다.
열리는 태그가 있으면 반드시 닫히는 태그도 있어야 한다.
그러나 항상 예외도 존재한다. 스스로 닫히는 태그도 있다.
ex) <br> = 스스로 닫히는 태그
스스로 닫히는 태그들 같은 경우는 따로 열고 닫을 필요 없이 한 번에 입력하면 된다.
다음은 속성이다.
먼저 예시부터 보자 ex) <img src="img/money.jpg" alt="돈">
위 예시는 img 태그의 속성인 src를 이용한 것이다.
해석은 img 태그의 속성인 src= img 폴더에 있는 money.jpg를 불러와라 못 불러올 시 '돈'이라고 표시하라 다.
(src 속성의 뜻은 경로이다.)
쉽게 말하면 src는 파일이 들어있는 위치를 입력해 주는 것이다.
다음은 html의 뼈대를 보자.
<!DOCTYPE html>
<head>
</head>
<body>
</body>
↑ 위 코드가 기본 뼈대이다.
순차적으로 해석을해보자.
<!DOCTYPE html> =html5를 쓸 것이라고 선언하는 것과 같다. (html에서 무조건 맨 처음 선언한다.)
<head>
</head> = 보통 머리라고도 표현한다.
주로 사용되는 태그들은 <title></title> = 웹페이지 이름 설정(크롬 같은 경우 맨 위에 표시되는 탭 제목과 같다.)
<meta charset="utf-8"> = 페이지 인코딩을 하는 것이다. 보통 utf-8로 선언한다. 그래야 한글이 안 깨진다.
<style>
</style> = <body> 에 있는 값을 바꿀수 있다. (속성 변환이라 표현할지 값변환이라 표현할지 애매하다.)
예시로는 <style>
h1 {color:(콜론) red;(세미콜론)}
</style> = h1의 글자색을 빨간색으로 바꿔라 이다.
다음 은 <body>
</body> 를 알아보자. 주로 몸이라고 표현한다.
주로 사용되는 태그는 <h1> </h1> = h는 헤드라인의 줄인 말이다. 숫자가 클수록 글자 크기는 작아진다.( h1과 h5가 선언됐다고 가정하에 글자 크기는 h1이 크다)
<p> </p> = 문단을 나타낸다. 아무리 길게 입력해도 스페이스바는 인식하나 줄바꿈은 일어나지 않는다.
<br> = 줄 바꾸기를 해준다, ( 엔터를 치는 것과 동일하다.)
<ht> = 문단 나누기를 해준다. (실행하면 중간에 선이 생긴다.)
예문: <body>
<p> 123123123 123 2 3 4 5
123123123123</p>
<hr>
</body>
↑<hr>을 <br> 로도 바꿔보자.
<pre> </pre> = 입력형태 그대로 출력해 준다. (<br>을 안 써도 <br>을 입력한 것처럼 나온다.)
예문: <body>
<pre> 123123123 123 2 3 4 5
123123123123</pre>
</body>
↑결과값을 확인해보자.
//최대한 내가 배운 것을 기억나는 대로 적었으며 또한 인터넷을 찾아가며 작성한 것이므로 틀린 내용이 있을 수도 있다.
만약 틀린 내용이 있다면 댓글로 남겨주시면 굉장히 고마울 것 같다.//
'개발 > Html 및 CSS' 카테고리의 다른 글
| Html 과 CSS 태그 및 속성 - 5 (0) | 2021.04.20 |
|---|---|
| Html 과 CSS 태그 및 속성 - 4 (0) | 2021.04.19 |
| Html 과 CSS 태그 및 속성 - 3 (0) | 2021.04.16 |
| Html 과 CSS 태그 및 속성 - 2 (0) | 2021.04.15 |
