Simple Is Best

1. HTML 기본 골격 및 필수 태그와 속성 본문

HTML & CSS

1. HTML 기본 골격 및 필수 태그와 속성

데이터미널 2021. 7. 2. 11:02

HMTL 기본 골격 

<head> : 본문에 보이지 않는 내용 (여러가지 설정) 

<body> : 사이트를 구성하는 실제로 보이는 내용

<html> 
  <head>
  
  </head>
  <body>
  
  </body>
</html>

 

필수 태그 모음

 

태그 구성 요소

  • 1. 태그 명 
  • 2. 속성 명 : 해당 태그에 적용할 속성, 태그별로 속성이 정해져 있다. 
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="">링크</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol>

1. <p> : paragragh, 본문 내용 작성

2. <h1> ~ <h5> : heading, 제목을 작성할 때 사용하는 태그 (h1: Big Size, h5: Small Size)

3. <img> : 이미지 사용 태그 ☞ 속성 : src='이미지 위치 경로'

4. <a> : anchor, 닻, 글자 클릭했을 때 지정 사이트 이동 ☞ 속성 : href='이동할 사이트 URL'

5. <button> : 버튼 생성 태그 

6. <ul> : unordered list, 순서 없는 리스트 생성

7. <ol> : ordered list, 순서 있는 리스트 생성

☞ <ul>과 <ol>은 자식 태그로 <li> 태그를 가진다. 

 

응용

Q1. 이미지를 클릭했을 때, 지정된 URL로 이동하려면? 

<a href="#"><img src="./이미지파일/apple.jfif"></a>

a태그 내에 img태그를 작성하면 된다.

 

Q2. 문장 내의 일부 단어를 클릭했을 때, 지정된 URL로 이동하려면?

<p>안녕하세요 <a href="#">해당 페이지</a>로 이동</p>

특정 단어를 a태그로 감싼다. 

Q2

 

'HTML & CSS' 카테고리의 다른 글

6. 레이아웃 방법 - 2. display : inline-block  (0) 2021.07.02
5. 레이아웃 방법 - 1. float  (0) 2021.07.02
4. div 태그  (0) 2021.07.02
3. CSS 파일에서 스타일링  (0) 2021.07.02
2. style = "스타일 명령"  (0) 2021.07.02
'HTML & CSS' Related Articles more