[중간고사 대비 정리자료]
HTML=HyperTextMarkupLanguage . 마크업 언어임. 확장자는 .html 또는 .htm이다.
마크업 언어란? 문서의 구조와 정보를 분류할 수 있도록 문서에 추가하는 정보 혹은 행위를 의미.
크롬에서 HTML문서 재실행 하는 단축키: F5
소스 코드란 컴퓨터 프로그램을 사람이 읽을 수 있는 언어로 작성한 글.
<!DOCTYPE html>: 현재 문서에서 사용하는 버전인 html5를 정의함.(!!필수)
<html>과 </html>: html문서의 시작과 끝을 알린다.
<head>와 </head>: CSS와 자바스크립트 소스 등을 입력함. 웹브라우저 화면에서는 보이지않음.
<meta charset=’utf-8’>: 메타 태그는 포괄적인 내용을 기재. 문서 내용, 키워드, 작성자, 사용할 문자셋 등. Utf-8 문자셋을 사용한다고 웹 브라우저에 알리는 것이다. Charset이 잘못 생성되면 글자가 깨질 수도 있음.
<title>과 </title>: 웹 브라우저 상단 탭에 나타나는 문서의 제목.
<body>와 </body>: 웹 브라우저 메인 화면에 들어가는 텍스트, 이미지, 비디오 등의 모든 내용이 여기 들어감.
웹 브라우저 종류: 구글의 크롬, 마이크로소프트의 인터넷 익스플로러, 모질라 재단의 파이어폭스, 오페라소프트웨어의 오페라, 애플의 사파리.
<h1></h1>가 제일 제목이 큼. <h6>이 제일 글자 작음
<p></p>태그: 단락을 나눔.
<b></b>태그: 글씨를 굵게 함. b태그 말고도 CSS로도 글자 두껍게 만들 수 있음.
스페이스와 엔터로는 공백 표현 못함.
:공백 삽입. 하나당 하나의 공백
<br>: 줄바꿈
" : 쌍따옴표
& : &.엠퍼센드
순서가 없는 <ul>,<li>태그를 이용한 목록:<ul>과 </ul>로 목록에 들어갈 항목을 감싸줌.
그뒤에 <li>태그로 목록의 개별 항목을 작성함.
순서가 있는 <ol>,<li>태그를 이용한 목록: 사용법은 동일. 하지만 순서가 있음.
설명 글 다는 법: <!—과 --> 로 설명을 추가할 수 있음. 웹 브라우저는 이 부분을 해석하지 않음.
<img>태그: 웹 페이지에 이미지를 삽입할 때 씀. 단독으로도 쓰지만 src속성과 함께 사용함. Src는 source를 의미. 이미지 파일의 이름과 경로를 알려줌. src속성에 파일 이름만 지정할 경우에는 jpg과 html문서가 같은 폴더 안에 존재해야 함.
./img/dog.jpg: 에서 점(.)은 현재 폴더를 의미. 슬래시는 폴더를 구분해주는 기호. 여기서 ./는 생략 가능함.
웹에서 사용되는 이미지 파일: JPG, PNG, GIF, SVG
<img>태그의 속성: width속성은 이미지 가로 크기 설정, height속성은 세로 크기 지정. width속성만 지정하고 height 속성을 지정하지 않으면 원본 이미지의 가로세로 비율을 고려하여 width값에 맞추어 자동으로 높이가 설정됨. Title은 이미지 위에 마우스 올렸을 때 나타나는 이미지 설명 글임.
오디오 삽입하기!
- <audio src=’~~’>: 삽입되는 오디오 파일의 이름. 경로 포함
- Controls: 플레이어를 화면에 표시
- Autoplay: 자동 시작
- Loop: 무한 반복
MP3,OGG,WAV 다 지원하는 건 크롬밖에 없음.
비디오 삽입하기!
- Src: 삽입되는 비디오 파일의 이름. 경로 포함
- Controls: 플레이어를 화면에 표시
- Autoplay: 비디오의 자동 시작
- Loop: 비디오의 무한 반복 재생
- Width : 비디오 화면의 너비
- Height: 비디오 화면의 높이
링크: 글자나 이미지에 해당 웹 페이지를 연결하는 걸 링크라고 함.
<a>태그는 링크를 걸어주는 역할을 함. <a>태그의 속성 href속성에는 클릭했을 때 이동할 주소를 적어준다. <target>속성의 속성값은 _blank로 지정, 웹 브라우저의 새로운 탭에서 링크가 열림.
<table></table>태그: 표를 만드려면 표에 넣으려는 내용을 테이블로 감쌈.
<tr></tr>태그: 하나의 행을 의미함
<th></th>태그: 각 열의 제목을 의미함
<td></td>태그: 열 제목을 나타내는 첫 번째 행의 셀을 제외한 각각의 셀을 표현할 때 사용함.
rowspan속성: 행을 합치는 데 사용. 두 개의 셀을 합치려면 rowspan속성값을 2로 하면 됨
colspan속성: 열을 합치는 데 사용. 두 개의 열을 합치려면 colspan속성을 2로하면 됨.
텍스트 입력 창 à <input type=’text’>
비밀번호 입력 창à <input type=’password’>
라디오 버튼à <input type=’radio’>
체크 버튼à <input type=’checkbox’>
파일선택창à <input type=’file’>
선택 박스à <select>태그에 <option>태그들로 선택지 만들기
다중 입력 창à <textarea>태그. rows속성: 행을 지정하는 속성. 속성값이 5이면 다섯 줄 입력할 수 있는 크기로 지정. cols속성: 한 줄에 입력 가능한 글자 수, 너비를 의미. 한글은 한 글자가 영문자 두 자리를 차지함…
버튼à <button>태그
target = "_blank"(새 탭에서 열기)
target = "_self"(기본값, 현재 탭에서 열기)
target = "_parent"(상위 탭에서 열기)
target = "_top"(최상위 탭에서 열기)
target = "프레임이름"(프레임이름에 해당하는 이름을 가진 탭에서 열기)
<iframe src = "???">(???에 해당하는 페이지를 현재 페이지 안에서 추가로 표시)
<pre>(개발자가 입력한 형식 그대로 표시)
CSS란? Cascading style sheets의 약어. html태그를 보조하여 웹 페이지를 꾸미는 역할.
<head>안에 위치하며 <style></style>로 둘러싸여 본문을 꾸며줌. CSS설정은 바디 태그로 둘러싸인 부분에 적용됨
(선택자) { 속성 : 속성값 ;}
선택자: CSS를 적용할 영역을 선택할 때 사용함.
CSS명령: 속성과 값으로 구분. 속성과 값의 구분은 콜론:, CSS명령의 끝은 세미콜론;
font-family속성: 속성값은 글꼴로, 글자에 한글 또는 영문의 글꼴을 지정
font-size속성: 12px등,,, 글자의 크기를 지정
color: red나#444444 등,,,, 글자의 색상을 지정한다
line-height: 150%등,., 문단의 줄 간격을 지정
font-weight: bold, normal등,,, 글자의 두께를 두껍게 또는 일반 굵기로 지정
text-decoration: underline,,글자에 밑줄 그리기
text-shadow: 2px 2px 10px #888888.. 글자에 그림자 만들기, 각각 오른쪽 그림자 길이, 아래쪽 그림자 길이, 흐린 정도, 그림자 색상 지정.
List-style-type의 속성값
- none 속성값: 목록의 글머리를 표시하지 않음
- square 속성값: 목록의 글머리를 정사각형 형태로 표시
- disc 속성값: 목록의 글머리를 동그라미 점으로 표시
- circle 속성값: 목록의 글머리를 빈 동그라미로 표시
'2024-소프트웨어과 1학년 > HTML+CSS 웹 프로그래밍' 카테고리의 다른 글
| 비주얼스튜디오코드/VSC 설치 및 실행 (2) | 2024.09.09 |
|---|