HTML

HTML(기본)

소리소리솔소리 2022. 9. 30. 15:37

*HTML

-HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소

-웹 콘텐츠의 의미와 구조를 정의할 때 사용

-<태그이름></태그이름> HTML은 보통 시작 태그와 종료 태그로 구성

-<img><br><hr>등과 같이 종료 태그 없이 시작 태그만 가지는 빈 태그도 존재하는데

리액트를 사용하는 경우 <img /> 형태로 닫힘 태그로 표시

-태그는 소문자 권장

-시작 태그로 시작하면 종료 태그로 종료

-확장자는 html

-문자의 공백은 몇개를 입력 하던 한개만 인식하므로 공백을 추가하기 위해서는 특수기호   이용

 

 

기본 구성

<html>

<head>

문서의 정보를 나타내고 화면에 보이지 않는다.

요즘은 검색 관련 내용이나 SNS에 표시되어야 할 정보 등도 여기에 meta 태그로 표시 한다.

</head>

<body>

실제적으로 보여지는 부분

</body>

</html>

 

 

글자와 상자

-글자는 inline 특성

-상자는 block 특성을 가짐

-이미지를 제외하고는 대부분 글자와 상자로 구성되어 있음

-각 요소에 대한 화면에 출력되는 특성은 CSS에서 담당 함.

-inline 특성을 가진 대표적인 요소는 **<span>**이며, 글자안에는 상자를 넣을 수 없음

-block 특성을 가진 대표적인 요소는 **<div>**이며 수직으로 쌓이고 가로 너비가 최대화 되는 특성을 가짐.

 

 

HTML의 핵심 요소

<div> : 특별한 의미가 없는 구분을 위한 요소 (division)

<h1> : 1 ~ 6까지 지정 가능하며 제목을 의미,CSS를 초기화 하면 값이 없어지고 각 크기는 브라우저에 정의한 값을 따라 감.

<p> : 문장을 구분하기 위한 태그 (paragraph), 블럭 요소

<img> : 이미지를 표시하기 위한 인라인 요소, 필수 속성인 src=””, alt”” 반드시 지정 해야 함.

<ul> : 정렬되지 않은 목록을 표시, 보통 불릿 형태로 표시(CSS초기화 하면 형식 없어짐), 하위 요소로 **<li>**를 가진다.

<ol> : 순서가 있는 목록을 표시

<a href> : 하이퍼링크 기능 제공, target=”_blank” 새탭에서 열림

<span> : 특별한 의미가 없이 구분을 위한 요소. CSS에서 span태그로 묶어 컬러 등을 변결 할 때 많이 사용

<br/> : 줄 바꿈

<input> : 인라인 요소 이면서 블럭 요소의 특성을 가짐, 수평으로 쌓이는 특징을 가짐, 사용자가 데이터를 입력하는 요소, vlaue 속성은 미리 입력창에 입력되어 있는 값을 의미, placeholder 속성은 힌트 속성, **disabled**는 비활성화, type=“checkbox” 속성은 **<label>**과 함께 사용 됨.

 

 

주석

주석은 실행결과에는 표시되지 않지만, 코드에 어떤 설명 등을 남기고자 할 때 사용

<!-- 주석 내용 -->

단, 주석을 사용하면 웹 브라우저에는 아무것도 표시되니 않지만, 웹 브라우저의 소스 보기로 볼 수 있으므로

보안상 중요한 내용을 넣으면 안된다.

 

 

체크박스 사용 하기

<div>
  <input type="checkbox" id="scales" name="scales" checked>
  <label for="scales">Scales</label>
</div>

 

 

표(table) 만들기

-테이블 사용 하기

<table> : 표 요소, 행과 열의 집합, <tr> 행을 의미 <td> 열을 의미 d는 데이터라는 의미

<table border="1">
	<th>테이블</th>
	<th>만들기</th>
	<tr><!-- 첫번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 첫번째 줄 끝 -->
	<tr><!-- 두번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 두번째 줄 끝 -->
    </table>

 

caption 태그

표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정

표 제목은 caption 태그로 지정하므로 표를 만들 때는 반드시 caption 태그를 사용

<table>
	<caption>표 제목</caption>
</table>

 

tr 태그

tr(table row)태그는 표에서 행을 생성

행을 여러 개 만들고 싶다면 tr 태그를 여러 번 사용하면 된다.

 

th, td 태그

th(table header)태그와 td(table data) 태그는 표에서 열을 생성 할 때 사용

 

블록(block)타입의 요소

-display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지

-<p>, <div>, <h>, <ul>, <ol>, <form>

 

인라인(inline) 타입의 요소

-display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다.

-요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지

-<span>, <a>, <img>