HTML, CSS 기초 : HTML 시작하기

HTML 태그의 구성요소

• HTML 태그 : 열린태그와 닫힌태그, 속성, 속성값으로 구분.
  <열린태그 속성= "속성값"> 콘텐츠 </닫힌태그>
  
  태그 : 입력된 정보의 성격
  속성 : 태그가 가진 역할
  속성값 : 태그가 어떤 역할을 수행할지 구체적인 명령을 내리는 역할
  콘텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물. 웹사이트의 텍스트 정보를 입력하거나 다른 HTML태그를 삽입.
  
  

HTML 문서의 기본구조

HTML문서의 기본구조

 

HTML 주요 태그

• <a> 태그 : a태그의 콘텐츠를 클릭하면 특정 영역이나 특정 페이지로 이동.
  
  -href 속성 : hypertext referrence의 약자로 연결할 주소를 저장할 때 사용. 텍스트를 선택하여 웹사이트로 이동하려면 a태그의 href속성의 속성값으로 URL주소를 입력하면된다. (URL주소가 정해지지 않았다면 #기호를 기본값으로 입력. ex)href="#")
  
  -target 속성 : 웹 사이트를 이동할 때 어떤 위치에서 열리게할 지 결정하는 요소. _blank속성값은 새 탭 또는 새 창을 띄워 페이지 이동, _self 속성값은 현재 탭페이지에서 페이지를 이동.
  
  -title : <a>태그를 클릭했을 때 이동하게 되는 페이지의 정보 입력. 웹 사이트의 텍스트에 마우스를 올리면 title의 속성의 속성값이 아래에 작게 나타난다.
  
  
• <img> 태그 : image의 약자로 그림을 삽입할 때 사용.
  
  -src 속성 : 이미지 파일 위치를 입력할 떄 사용. 속성값으로 이미지의 경로, 파일명, 확장자명을 입력
  
  -alt 속성 : alternative text의 약자. 브라우저가 이미지를 제대로 표시하지 못한 경우에 이미지 대신 텍스트를 대체해서 표시됨.

 

• <h1>~<h6> 태그 : 웹사이트의 제목이나 부제목. 뒤의 숫자는 중요도를 의미하며 중요도가 낮아질수록 글자 크기가 작게 출력됨.
  
  
• <p> 태그 : paragraph의 약자로 단락을 표현할 때 사용. 신문기사의 본문 영역에 해당.
  
  
• <ul> 태그 : unordered list(순서가 없는 목록)의 약자로 순서가 없는 목록을 만들때 사용. 목록 태그.
  
  
• <li> 태그 : list item의 약자로 ul태그의 각 항목을 나열할 떄 사용. 리스트 목록 태그. 공지사항, 카테고리, 메뉴 등을 표시할 떄 사용됨.

 

• <span> 태그 : 문단 안에 있는 특정 단어나 문장에 디자인을 지정할 떄 사용.
  ex) <p> 안녕, <span style = "color: blue;"> 김자바 </span><p>
  
  
• <mark> 태그 : 형광펜 효과. 특정 텍스트를 강조할 때 사용.

닫힌 태그가 없는 태그

• <br> 태그 : line break를 뜻하며 강제 줄바꿈을 할 때 사용.