일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 소트라테스익스프레스
- daily
- 2챕터독서
- 일상
- MySQL
- final변수
- 종단관심사
- 자기계발
- InteliJ
- 평가용
- 횡단관심사
- diario
- 권한부여
- 생크림활용기
- 스프링
- onlyfullgroupby
- 데일리
- requestparameter
- 복습!
- 데이터베이스생성
- 책추천
- 데이로그
- 테이블생성
- 도전로그
- 요청파라미터
- tㅐ
- 노스마트폰챌린지
- JSP
- 내장객체영역
- 첫줄
- Today
- Total
Emma.log()
HTML 기본 구조 본문
⭕ 웹 표준 : 웹 사이트를 만들어야할때 지켜야하는 약속들을 정리한것 웹 표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수있다.
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 |