Emma.log()

HTML 기본 구조 본문

Front-End/HTML&CSS

HTML 기본 구조

EverJunior Minjoo 2022. 3. 22. 08:22

⭕ 웹 표준 : 웹 사이트를 만들어야할때 지켜야하는 약속들을 정리한것 웹 표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수있다.

HTML 문서 기본 구조

받은 이미지 파일을 압축풀고 그폴더 채로 01밑으로 넣어준다

 

태그 : 태그는 소문자로 쓴다.

 

이미지를 html안에 넣으려면

<img>를 사용 — <body> 안에 넣어야한다.

<img alt="" src="images/watch.jpg">

images : 폴더명/ watch.jpg : 파일명

✔ alt부분에는 src부분에 기재된 파일을 찾지 못할때 표시해주는 설명을 써주면 된다.

SRC가 표시되지 못할때 ALT부분이 표시된다.

태그 : <h1>, <img ~, <p> 이런식으로 된것이 태그

이미지 태그(Tag) 쓸때 ctrl +shift +/ 하면 주석처리 웹페이지에서 자동으로 처리됨

<!-- 이미지 Tag-->

캐시버퍼에 남아있는것 ? 이건 무슨얘기지..

   💡 alt의 용도 ?? : src 의 지정된파일을 찾지 못할때 alt에 입력된 문장이 뜨는것 src다음에 는 파일이 저장된 폴더명/          파일명 으로 작성해준다.

반면 이미지를 넣을 때에 이미지가 저장된 위치가 html작성 폴더와 위치가 같다면 폴더명을 쓰지 않아도 된다.

<img alt="first" 	src="first.jpg">
<!--  반면 이렇게 파일의 위치가 html작성 폴더 위치가 같아야 first만 쳐도 나온다
폴더가 같을땐 폴더명을 안써도 된다 -->

헤더 :

<html>
<head>
<meta charset="UTF-8">
<title>기본 HTML </title>
</head>

헤더 부분은 인터넷의 머리 쪽에 표시된다

바디

	<body>
<h1>시간이란...</h1>
<!-- 이미지 Tag -->
<img alt="시계이미지" src="images/watch.jpg">
<!-- alt의 용도  -->
<p>내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라.</p>
</body>


http://www.w3.org/TR/html4/loose.dtd>](<http://www.w3.org/TR/html4/loose.dtd>)">

<!-- !DOCTYPE Transitional : 문서 타입을 설명해준다 -->

태그 종류

ol 테그는 type 리스트의 번호를 매길수 있게 하는데 번호를 1부터 a부터 A부터

start 를 적용하면 a부터의 세번째인 c부터 입력할 수 있게 해준다

그리고 type을 설정 안해도 ordered list (ol)은 기본적으로 1부터 시작한다.

start 를 적용하면 a부터의 세번째인 c부터 입력할 수 있게 해준다

그리고 type을 설정 안해도 ordered list (ol)은 기본적으로 1부터 시작한다.

<ol type="i">로 했을때 위처럼 결과 나오고 대문자 I로 넣으면 위에 i ii 가 대문자로 I II 이런식으로 나온다

Table 만들기

border 가테이블의 두께를 나타낸다

<table border="7"> <!-- border 가테이블의 두께를 나타낸다 -->
<tr>
<th>제목 셀</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<th>제목 셀</th>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
	</tr>

</table>

많이 사용하는 테그

<strong> - 중요한 내용이라서 강조해야 할 때

<b> - 단순히 굵게 표시할 때

<em> - 흐름상 특정 부분을 강조하고 싶을 때

<i> - 단순히 이탤릭체로 표시할 때

기본형 : <hn> 제목 </hn>

각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그

기본형 : <p> 텍스트 </p>

입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐

기본형 : <br> 줄을 바꿀 위치에 <br> 태그를 사용.

닫는 태그가 없음 전환. 수평 줄 생김 때 유용함

  • <!-- tr을 쓰면 한 줄을 말한다. 하나의 row -->
  • <!-- th는 테이블의 헤더 (제목을말함) -→
  • <!-- td 는 하나의 열 -→

 

저작자표시 (새창열림)

'Front-End > HTML&CSS' 카테고리의 다른 글

(js) 평점 별찍기  (0) 2022.12.12
(css) 글자수 넘어가면 말줄임표  (0) 2022.12.12
FORM 테그  (0) 2022.03.22
HTML/CSS iframe 불러오기  (0) 2022.03.22
웹링크 와 테이블추가  (0) 2022.03.22
'Front-End/HTML&CSS' Related Articles more