단단히

HTML의 기본코드, 요소 본문

HTML,CSS/개념 정리

HTML의 기본코드, 요소

이게아닌데 2022. 7. 5. 14:49

 

<!DOCTYPE html>
<html lang="ko">
 <head>
	<meta charset="utf-8">
	<title>Untitled</title>
 </head>
 <body>
 	html 코드 작성 구간
 </body>
</html>

위와 같은 코드는 기본적으로 꼭 들어있는 코드다.

 

HTML의 코드는 '요소(Element)'라고 한다.

요소는 <시작태그> 내용 </종료태그>로 이뤄져 있다.

<h1>오늘은 html을 배운 날이다.</h1>

HTML은 문서의 내용을 구성한다. CSS는 HTML로 만든 문서의 내용에 디자인적 요소를 넣는 것이다.

예를 들어 내용의 배치, 형태, 색상, 크기 등에 관해 적용한다.

JavaScript는 HTML과 CSS로 만든 내용과 디자인에 기능을 적용할 수 있다.

JQuery는 JavaScript를 편리하게 사용하기 위해서 사용한다.

 

[기본 요소들]

 

- <hn> 요소

제목을 표현할 때 사용하는 요소이다. 크기에 따라 <h1> ~ <h6>으로 이루어져 있다.

body부분에 들어가는 가장 첫 제목은 <h1>...  </h1>으로 사용하는 게 원칙이다.

>>크기를 바꾸고 싶다면 CSS로 크기를 조절한다.

<h1>제목입니다</h1>
<h2>제목입니다</h2>
<h3>제목입니다</h3>
<h4>제목입니다</h4>
<h5>제목입니다</h5>
<h6>제목입니다</h6>

 

- <P> 요소

문단을 표현하는 요소이다.

<p>문단입니다</p>

 

-<a> 요소

이동할 페이지를 지정하는 요소이다. 앵커, Link 요소이다.

<a>이 글에 링크가 걸립니다</a>

<a href="https://www.naver.com">네이버로 이동</a>

이동할 페이지가 없다면 # 기호를 표기한다.

 

-<button> 요소

버튼을 만들어주는 요소이다.

<button> 버튼입니다 </button>

 

- <br>

HTML은 줄 바꿈이나 여러 칸의 띄어쓰기가 적용되지 않는다. 1칸의 띄어쓰기만 자동 적용된다.

띄어쓰기를 하고 싶은 만큼 &nbsp;를 반복해서 쓰면 된다. 

줄을 바꾸고 싶을 경우에는 <br> 태그를 사용하면 된다.

 

- <img>

인라인 요소이다. img요소를 사용하여 이미지를 출력할 수 있다.

<img src="URL" alt="이미지 대체 문구" width="폭" height="높이">

**경로 설정 방법**

부모폴더                                  .../파일명

동일폴더                                     파일명

자식폴더                               폴더명/파일명

인터넷 경로는 인터넷 주소를 기재한다.

 

alt는 이미지를 대체하는 문구인데, 음성으로 이미지를 읽을때 설명되는 문구이다.

[요소의 속성]

모든 요소는 속성을 가질 수 있으며 필요한 만큼 사용할 수 있다.

<!--형식-->
<시작태그 속성1="속성값" 속성2="속성값">내용</종료태그>
  • 개별 속성 : 특정 요소에만 사용할 수 있다.
  • 전역 속성 : 모든 요소에 사용할 수 있다.

개별 속성

더보기

 

<a href="URL"> 클릭하면 네이버로 </a>

<button type="bytton">클릭</button>

 

*URL(Uniform Resource Locator, 유니폼 리소스 로케이터)은 경로(인터넷 경로, 로컬 경로)가 있다.

전역 속성

더보기

 

<a id="test1" class="test1" href="#">클릭하면 다음으로 </a>

<button id="test2" class="test1" type="button"> 클릭</button>

 

*속성은 순서와 무관하다.

*개별 속성이라도 다른 요소에서 동일한 이름을 갖는 것들이 있다.

참고) 전역 속성인 id는 같은 속성 값을 사용할 수 없다.(ex) class..

         영어와 숫자, 특수기호(-,_)의 조합으로 사용한다.

 

 

'HTML,CSS > 개념 정리' 카테고리의 다른 글

Box Model [ contents / padding / border / margin ]  (0) 2022.07.23
HTML 기본 코드  (0) 2022.07.21
Visual Studio Code 환경 설정  (0) 2022.07.18
visual studio code 설치  (0) 2022.07.15
HTML의 기초  (0) 2022.07.03
'HTML,CSS/개념 정리' Related Articles more
Comments