인터넷 vs 웹
인터넷: 디지털 기기들이 서로 연결된 국제 정보 통신망
웹: 인터넷을 활용한 서비스.
인터넷과 웹의 시작
- 1969년 현 인터넷의 시초인 아파넷이 개발됨,
- 우리나라는 1982년 인터넷을 처음 만듦,
- 팀 버너스 리: 1991년 최초로 앱을 개발. 1994년에 W3C 창설,
- 2014년 HTML5으로 표준 변경
웹 동작
- 웹: 요청과 응답 과정으로 구분됨,
- URL: 웹에서 어떤 대상을 구분하는 주소
- 서버: 응답하는 쪽 (웹 제공자) 클라이언트: 요청하는 쪽 (사용자)
웹 표준 기술
- HTML5 외 CSS3와 자바스크립트를 모두 포함.
- CSS: HTML 페이지에 스타일을 지정하는 스타일시트를 작성할 때 사용하는 언어
- 자바스크립트: HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어
HTML5 주요 기능
- 멀티미디어 기능, 그래픽 기능, 통신 기능, 장치 접근, 오프라인 및 저장소, 시맨틱, CSS3 스타일 시트, 웹의 성능 극대화 및 통합
HTML5 기본 용어 (요소 > 태그 > 속성)
- 요소: HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등)
- 태그: 요소를 만들 때 사용하는 작성 방법
- 속성: 태그에 추가 정보 또는 추가 설정 부여할 때 사용하는 것
- 주석: 코드 설명 기록
HTML5 페이지의 구조
- <html> 태그 속성: lang(웹 페이지의 사용 언어 정보를 제공)
- <head> 태그 속성: meta(웹 페이지에 추가 정보 전달), title, script, link, style, base(웹 페이지의 기본 경로 지정)
스마일시트 작성
- 내부 스타일: 스타일 시트가 짧은 경우 style 태그를 사용해 스타일 스타일시트를 직접 입력
- 외부 스타일: 스타일시트를 별도의 파일로 생성하고 link 태그의 href 속성을 사용해 불러옴
자바스크립트 작성
- 내부 자바스크립트: script 태그를 사용해 내부에 코드 작성
- 외부 자바스크립트: 경로를 입력해 HTML 페이지로 불러옴
오류와 검증
- 디버깅: 프로그램 오류를 잡는(수정하는) 행위
- 크롬에서 검사를 이용한 오류 확인: [Elements] 탭 : 현재 HTML 페이지의 계층 구조를 보여줌. 태그 스타일 파악, [Console] 탭 : 오류를 확인, 자바스크립트 코드 추가 입력
HTML5에서 지원하는 기본 태그 이해
글자 태그
- h1~h6: 제목 태그 생성
- p, br, hr: 본문 태그 생성
- b, i, small, sub, sup, ins, del: 글자 모양 태그 (내부에 제목 태그와 본문 태그 못 넣음)
- a: 앵커 태그
↳ href 속성
- 특정 웹 파일에 이동하기 : 속성 값을 상대 경로,, 절대 경로로 지정
- 웹 페이지 내부로 이동하기: 속성 값을 이동하고자 하는 내부 위치 “#id속성값”으로 표시
- 이메일 보내기: 속성 값을 “mailto:<이메일 주소>”설정
- 특수 문자 및 기호:  (공백), <(<), >(>), &(&)
목록 태그
- ul/ol, li: 순서가 없는/있는 목록 생성, 목록 요소 생성
테이블 태그
- table, tr, th, td: 표 생성
- thead: 제목으로 구성된 행. 표에서 한 번만 선언 가능
- tbody: 표의 본문에 해당하는 영역. 여러 번 선언 가능
- tfoot: 표를 요약하는 셀로 구성된 행. 표에서 한 번만 선언 가능. 태그 위치에 상관없이 언제나 하단에 표시됨
↳ 속성
- (table 속성) border : 포의 테두리 두께 지정
- (th, td 속성) coldspan: 셸의 너비 지정, rowspan: 셸의 높이 지정
미디어 태그
- img, audio, video: 이미지, 오디오, 비디오 삽입
↳ img 속성
- src: 이미지 경로 지정, alt: 이미지 없을 때 나오는 글자 지정, width: 너비 지정, height: 높이 지정
↳ audio, video 속성
- src: 경로 지정, preload: 준비 중 일 때 데이터를 모두 불러올지 여부 지정,
autoplay: 자동 재생 여부 지정, loop: 반복 여부 지정, controls: 재생 도구 출력 여부 지정
↳ video 속성
- width: 너비 지정, height: 높이 지정, poster: 로딩되는 동안 다른 이미지를 보여줌
- source: 브라우저 제약 없이 음악/비디오를 재생하기 위해 <source> 사용, 미디어 태그 내부에 입력
↳ 속성
- src: 경로 지정, type: 비디오 타입 지정 ex) type ="video/mp4"
HTML5 입력 양식 태그와 구조화 태그
입력 양식 태그: 사용자에게 정보를 입력받을 때 사용하는 태그로 입력 영역 생성 > 데이터 전달 방식 설정 > 입력 양식 설정 순으로 생성함
입력 영역 생성
- <form>태그: 영역 생성
- <form>태그는 action 속성 장소에 method속성의 방식으로 데이터를 전달
- action 속성: 데이터를 전달받는 서버의 URL 또는 IP 주소
- method 속성: 데이터를 전달하는 방식 ( get 방식- 주소에 데이터를 입력해서 전달, post 방식 - 주소 변경 없이 비밀스럽게 데이터 전달
입력 양식 생성
form 태그 : 입력 양식의 시작과 끝 표시
input 태그
↳ input 속성
- text: 글자 입력 양식 생성
- button: 버튼 생성
- checkbox: 체크 박스 생성
- file: 파일 입력 양식 생성
- hidden: 해당 내용 표시 안 함
- image: 이미지 형태 생성
- password: 비밀번호 입력 양식 생성
- radio: 라디오 버튼 생성
- reset: 초기화 버튼 생성
- submit: 제출 버튼 생성
textarea 태그
↳ textarea 속성
- cols/rows: cols는 너비를 지정하고, rows는 높이를 지정
select/ optgroup/ option 태그: 선택 양식 생성/ 옵션 그룹화/ 옵션 생성
filedset/ legend 태그: 입력 양식의 그룹 지정/ 입력 양식 그룹의 이름 지정
- 한 항목만 선택하기: <select> 태그만 사용, <optgroup>, <option> 태그를 함께 사용
- 여러 항목 선택하기: <select> 태그 + multiple 속성 사용
- 선택 옵션 묶기: <optgroup> 태그 사용
- 입력 양식 그룹 묶기: <fieldset> 태그 (안에 있는 모든 태그 묶음), <legend> 태그 사용 (그룹의 제목)
공간 분할 태그
- 블록 형식 분할 (div 태그)
- 인라인 형식 분할 (span 태그): 자신의 글자 크기만큼 영역 차지, 왼쪽에서 오른쪽으로 쌓임
블록 형식 분할 태그 인라인 형식 분할 태그
div 태그 span 태그
h1~ h6 태그 a 태그
p 태그 input 태그
목록 태그 글자 형식 태그
테이블 태그 입력 양식 태그
시맨틱 태그
header: 머리말
nav: 하이퍼링크들을 모아 둔 내비게이션
aside: 본문 흐름에 벗어나는 내용이나 팁
section: 문서의 장이나 절에 해당하는 내용
article: 본문과 독립적인 콘텐츠 영역
footer: 꼬리말(저자나 저작권 정보)
CSS 기초: 선택자와 단위
선택자: CSS3에서 특정 HTML 태그를 선택할 때 사용
1. 기본 선택자
- 전체 선택자 (*): HTML 페이지 내부의 태그를 모두 선택
- 태그 선택자 (태그): HTML 페이지 내부의 특정 태그를 모두 선택
- 아이디 선택자 (#아이디): 특정 id 속성이 있는 태그 선택, 웹 표준에 id 속성은 웹 페이지 내부에서 중복되면 안 된다는 규정이 있으므로 아이디 선택자는 특정 태그 하나를 선택할 때 사용
- 클래스 선택자 (.클래스): 특정 클래스가 있는 태그 선택
- 여러 선택자 적용: 선택자 사이에 쉼표를 넣어 여러 선택자를 입력하여 스타일 적용
2. 속성 선택자
형태 설명 사용 예시
선택자[속성] 속성을 가진 태그 선택 div[data-role]
선택자[속성 = 값] 속성의 속성 값이 값과 같은 태그 선택 input[type = text]
선택자[속성 ~= 값] 속성의 속성 값이 값(단어)을 포함하는 태그 선택 div[data-role ~= row]
선택자[속성 *= 값] 속성의 속성 값이 값을 포함하는 태그 선택 div[data-role *= row]
선택자[속성 |= 값] 속성의 속성 값이 값(단어)으로 시작하는 태그 선택 div[data-role |= row]
선택자[속성^= 값] 속성의 속성 값이 값으로 시작하는 태그 선택 div[data-role ^= row]
선택자[속성 $= 값] 속성의 속성 값이 값으로 끝나는 태그 선택 div[data-role $= 9]
3. 후손 선택자와 자손 선택자 (부모 > 자손 > 후손)
- 후손 선택자: 특정한 태그의 후손을 선택하여 스타일 적용 ex) div h1
후손 선택자를 여러 개 사용할 경우 기본 선택자를 적용하는 것처럼 반점만 적용하면 안 되고 부모 태그를 각각 써야 한다.
- 자손 선택자: 특정한 태그의 자손을 선택하여 스타일 적용 ex) div > h1
4. 상태 선택자: 입력 태그가 특정 상태 시 스타일 적용
- :checked: 체크 상태의 input 태그 선택
- :focus: 포커스를 맞춘 input 태그 선택
- :enabled: 사용 가능한 input 태그 선택
- :disabled: 사용 불가능한 input 태그 선택
5. 구조 선택자: 특정 위치에 있는 태그에 스타일 적용
- :first-child: 형제 관계에서 첫 번째로 등장하는 태그 선택
- :last-child: 형제 관계에서 마지막으로 등장하는 태그 선택
- :nth-child(수열): 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택
- :nth-last-child(수열): 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택
CSS 단위
- 키워드 단위: 키워드를 입력하면 해당하는 스타일이 자동으로 적용
- 크기 단위: %(백분율 단위), em(배수 단위), px(픽셀 단위)
- 색상 단위: RGB 색상, RGBA 색상, HEX 코드
- URL 단위: 글꼴이나 글꼴 파일을 불러올 때 사용
CSS3 속성
박스 속성
- margin 속성: 테두리와 다른 태그 사이의 테두리 바깥쪽 여백
- border 속성: 테두리
- padding 속성: 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용
- width 속성: 글자를 감싸는 영역의 가로 크기
- height 속성: 글자를 감싸는 영역의 세로 크기
• 전체 너비 = width + 2 ×(margin + border + padding)
• 전체 높이 = height + 2 ×(margin + border + padding)
박스 여백 조정
margin 또는 padding 사용
- 속성: <여백>
- 속성: <위아래 여백> <왼쪽 오른쪽 여백>
- 속성: <위쪽 여백> <오른쪽 여백> <아래쪽 여백> <외쪽 여백>
- 속성-<방향(top/right/bottom/left)>: <여백>
박스 테두리
- border <선 두께> <선 종류> <선 색상>
- border-width <선 두께>
- border-style <선 종류>
- border-color <선 색상>
- border-<방향(top/right/bottom/left)>-<속성(width/style/color)>: <속성 값>
둥근 테두리
- border-radius: <반지름>
- border-radius: <상좌, 하우 반지름> <상우, 하좌 반지름>
- border-radius: <상좌 반지름> <상우 반지름> <하좌 아래 반지름> <하우 반지름>
- border-<방향(top-left/top-right/bottom-left/bottom-right)-radius-: <반지름>
display 속성 (태그가 화면에 보이는 방식을 지정)
- none: 화면에 보이지 않음
- block 블록 박스 형식으로 지정 (한 줄 차지, width,height,margin,padding 속성이 모두 반영)
- inline: 인라인 박스 형식으로 지정(컨텐츠 크기만큼 차지, width와 height 속성 x, margin, padding속성은 좌우만 반영, 상하는 x)
- inline-block: 블록과 인라인의 중간 형태로 지정(줄 바꿈 없이 한 줄에 다른 태그들과 나란히 배치되지만 width, height, margin padding 속성은 반영)
배경 속성
- background-image: 배경 이미지 삽입
- bakground-size: 배경 이미지의 크기 지정
- background-repeat: 배경 이미지의 반복 형태 지정
- background-attachment: 배경 이미지의 부착 형태 지정
- background-position: 배경 이미지의 위치 지정
- background: 한 번에 모든 배경 속성 입력
배경 이미지
- 배경 이미지, 크기, 반복 형태, 위치, 색
글자 속성
속성 종류 설명
font-size: <크기 / 키워드> 글자 크기 지정
font-family: <‘글꼴 이름’> 글꼴 설정
font-family: <‘글꼴 이름’> <글꼴 종류> 글꼴 설정. 해당 글꼴이 없으면 다른 유사 글꼴 종류 사용
font-style: <키워드> 글자 기울기 유무 설정
font-weight: <키워드> 글자 두께 설정
text-align: <키워드> 글자 정열 방식 설정
line-height: <키워드> 글자가 들어가는 줄의 높이 지정
위치 속성
설정 방식 키워드 설명
상대 위치 좌표 static 왼쪽에서 오른쪽으로 위에서 아래로 순서대로 배치
relative 초기 위치에서 상하좌우로 이동
절대 위치 좌표 absolute 절대 위치 좌표 (기준점은 static 속성이 아닌 부모 태그)
fixed 화면 기준으로 절대 위치 좌표 설정
z-index 속성: 속성 값으로 숫자를 넣음. 숫자가 클수록 앞에 위치함
overflow 속성: 내용이 태그 크기를 벗어나 모두 보여 주기 힘들 때 어떻게 보여 줄지
지정, float 속성과 함께 자주 사용
- hidden: 영역을 벗어나는 부분 감춤
- scroll: 영역을 벗어나는 부분을 스크롤로 만듦
유동 속성
- 웹 브라우저 크기에 상관없이 공지 등을 일정한 위치에 고정할 때 적합
그림자 속성
속성 설명
text-shadow: <오른쪽> <아래> <흐림도> <색상> 글자에 그림자 생성
box-shadow: <오른쪽> <아래> <흐림도> <색상> 박스에 그림자 생성
그레이디언트 속성
- 두 가지 이상의 색상을 혼합하는 채색 가능
다양한 레이아웃의 구성과 기능
정렬 레이아웃
1. 수평 정렬 레이아웃: 좌우 태그들이 동일한 위치에 수평 정렬되어 있음
- 규칙: 자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden키워드를 적용
※ overflow 속성을 적용하지 않으면 item 다음 태그가 왼쪽에 붙음
2. 중앙 정렬 레이아웃
- 태그에 width 속성을 부여하고 margin 속성을 ‘0 auto'로 입력
3. One True 정렬 레이아웃
- ‘행을 독립적으로 생각’해서 공간을 나눈 것으로 국내 모든 포털 사이트의 메인 페이지 레이아웃.
3-1. 구성 방법
- 행 구성하기
- 열 구성하기
- 레이아웃 구성하기
▷ 중앙 정렬: 부모 태그에 width 속성을 부여하고 margin 속성을 ‘0 auto'로 입력
▷ 여러 열이 있는 행은 수평 정렬: 행 태그에 overflow 속성의 hidden을 적용, 열 태그에 적당한 너비를 입력하고 float 속성을 적용
요소 배치
1. 절대 위치를 사용한 요소 배치
- 부모 태그의 스타일 속성에 position: relative 적용. height 설정
- 자손 태그의 스타일 속성에 position: absolute 적용.
- 자손 태그의 방향 속성 설정
2. 요소를 중앙에 배치
- 중앙 정렬하는 div 태그 스타일 속성을 position: absolute로 지정
- left 속성과 top 속성을 모두 50%로 지정
- 중앙에 정렬하려는 div 태그의 margin-left 속성과 margin-top 속성에 음수 속성 값 입력(속성 값은 너비와 높이의 정확히 반이어야 함)
3. 요소를 고정 위치에 배치: 웹 페이지의 상하좌우에 붙어서 사용자를 따라다니는 요소
- position 스타일 속성에 fixed를 적용
- left 속성, top 속성, right 속성, bottom 속성에 값을 입력해 위치를 설정
- width 속성과 height 속성으로 크기를 설정
글자 생략
1. text-overflow 속성
속성 값
- ellipsis: 글자가 너비를 초과해서 생략되었다는 것을 표시로 나타냄
white-space 속성: 줄 바꿈, 들여 쓰기, 공백 등의 처리 방법 설정
속성 값
- normal: 공백 1개만 표시, 자동 줄 바꿈
- nowrap: 공백 1개만 표시, 줄 바꿈 X
- pre: 공백을 있는 그대로 표시, 줄바꿈 X (line break만 고려)
자료 출처: 윤인성, IT CookBook, HTML5 웹 프로그래밍 입문, 한빛아카데미(2019)
'대학교 2학년 1학기 > 웹프로그래밍' 카테고리의 다른 글
| jQuery 라이브러리 간단 정리 (0) | 2022.06.23 |
|---|---|
| 자바스크립트 기본 문법 정리 (0) | 2022.06.23 |
| HTML5 정리 (0) | 2022.04.04 |