html태그 정리, css

 

 

 

 

HTML 태그 정리

 

<hn>태그 : 제목을 표시한다. <h1>~<h6>까지 사용 가능하며 텍스트의 크기와 굵기를 정할 수 있다.

 

<p>태그 : 본문의 문단, 단락을 작성할 때 사용한다.

 

<br>태그 : 줄바꿈을 의미한다.

 

<hr>태그 : 수평선을 의미한다.

 

<b>태그 :  텍스트 태그를 bold채로 표시함.

 

<strong>,<em>태그 : 텍스트 태그를 강조 할 때 사용함.

 

<q>,<blockquote>태그 : 인용한 내용을 표시할 때 사용함

 

<ul>,<li>태그 : 순서가 없는 목록을 만들 때 사용한다.

 

<ol>,<li>태그 : 순서가 있는 목록을 만들 때 사용한다.

 

<a> 태그는 하이퍼링크를 걸어주는 태그입니다.

 

<div> : 분할을 의미한다. HTML 요소를 논리적인 섹션으로 분할해 스타일을 지정할 때 사용한다.

 

<span> : 마찬가지로 분할을 의미한다. 일부 텍스트에 스타일을 적용할 때 사용한다. 

 

<table> 태그 : 테이블을 정의 할 때 사용한다.

 

border 속성 : 데이터를 쉽게 구분할 수 있도록 경계선을 추가해준다.

 

<tr> 태그 : 표의 행을 나타낸다. (행: 가로)

 

<td> 태그 : 표의 열을 나타내고, <tr>태그 아래 위치한다. (열: 세로)

 

rowspan  : 열을 정해준 만큼 병합 할 때 사용한다.

 

colspan  : 행을 정해준 만큼 병합 할 때 사용한다.

 

<caption> 태그 : 테이블에 제목을 붙일 때 사용한다.

 

<form>태그 : 웹 페이지 에서의 입력 양식

 

action : 입력한 데이터를 받아서 처리하는 서버의 주소를 입력하는 속성이다.

 

method : 데이터 전달 방식을 선택할 수 있는 속성이다.

 

<input> 태그 :  사용자가 데이터를 입력할 수 있도록 하는 입력 필드를 정의 할 때 사용한다.

 

type : input 요소가 나타낼 타입을 명시해준다.

 

<lable> 태그 : form 태그 양식에 이름을 붙여주는 태그이다. label 태그에 for 속성을 사용하여 input 태그에 id 속성을 입력

해 label 태그가 어떤 input 태그를 나타내는지 알려준다.

 

<select> 태그 : select 태그는 드롭다운 메뉴를 만들어 주는 태그이다.

 

(아래로 펼쳐지는 목록 상자

 

<option> 태그 : <select>태그의 내부 태그로 각 항목을 표시해주는 태그이다.

 

<fieldset> 태그 : 입력된 요소를 그룹화 하는데 사용한다.

 

<legend> 태그 : 그룹화된 그룹에 제목을 붙여주는데 사용한다.

 

이미지 태그

 

img 태그 : 이미지 객체를 삽입할 때 사용하는 태그

 

src : 이미지 경로를 지정해줌

 

오디오 태그

 

src 속성 : 오디오 파일 경로

 

controls 속성 : 오디오 컨트롤 패널 화면 표시

 

비디오 태그

 

src 속성: 비디오 파일 경로

 

controls 속성 : 비디오 컨트롤 패널 화면 표시

 

<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용한다.

 

<header> 태그 : 웹 페이지에 헤더 영역 부분 ( 웹 페이지 최상단 )

 

<nav> 태그 : 웹 페이지 내부의 다른 영역이나 외부를 연결하는 링크영역을 구분함

 

보통 헤더 영역의 메뉴나 목차로 쓰임

 

<aside> 태그 : 웹 페이지에 주된 내용이 아닌 추가 내용이나 별로 연관없는 내용을

작성할 때 사용

 

<footer> 태그 : 웹 페이지에 꼬리말을 구분할 때 사용.

 

<iframe> 태그는 현재 웹 페이지에 다른 문서를 삽입할 때 사용됨.

 

<iframe> 요소의 시작태그와 종료태그 사이에 <iframe> 요소를 지원하지 않는

브라우저를 위한 텍스트를 포함 시킬수 있음.

 

CSS

 

기본 선택자

1. 전체 선택자(모든 요소 선택)

2. 태그 선택자(주어진 이름을 가진 요소 선택)

3. 클래스 선택자(주어진 class를 가진 요소를 선택)

4. 아이디 선택자(주어진 id속성값을 가진 요소를 선택한다)

 

그룹 선택자 : 다양한 요소를 한꺼번에 선택할때 사용한다.

 

특성 선택자 : 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.

 

결합 선택자

1. 일치 결합자(동시에 만족하는 요소 선택)

2. 자 선택자(해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택한다)

 

의사 클래스 : 선택하고자하는 HTML요소의 특별한 상태를 명시할때 사용

 

css text-~ 태그

 

color : 글자 색 지정하기

 

text-decoration : 텍스트 줄 표시하기/없애기

1. none : 밑줄을 표시하지 않는다

2. underline : 밑줄을 표시한다

3. overline : 영역 위로 선을 그린다

4. line-through : 취소선을 그린다

 

text-transform : 텍스트 대소문자 변환하기

1. none : 변환 없음

2. capitalize : 시작하는 첫번째 글자를 대문자로 변환

3. uppercase : 모든 글자를 대문자로 변환

4. lowercase : 모든 글자를 소문자로 변환

5. full-width : 가능한 모든 문자를 전각 문자로 변환

 

text-shadow : 텍스트 그림자 효과

1. <가로거리> : 그림자의 가로거리. 오른쪽(+), 왼쪽(-)

2. <세로거리> : 그림자의 세로거리. 아래쪽(+) 위쪽(-)

3. <번짐정도> : 그림자의 번짐정도. 모든방향으로 퍼짐(+) 모든 방향으로 축소(-)

4. <색상> : 그림자 색상 지정. 공백으로 구분해서 여러가지 색상 지정 가능. 기본값은 현재 글자 색.

 

white-space : 공백 처리하기

1. normal : 여러 공백을 하나로 표시. 기본값.

2. nowrap : 여러 공백 하나로 표시. 줄 바꿈 없이 한 줄.