HTML -> HyperText MarkUp Language 화면에 요소를 그리는 부분
CSS -> Cascading Style Sheets 요소를 꾸미는 용도
javaScript
jQuery -> javaScript 라이브러리로 좀 더 편하고 간단하게..
HTML의 기본 구성 요소
- 태그 : 웹 페이지를 구성하는 텍스트, 이미지, 버튼 등의 다양한 요소를 정의 (형식 : <태그명>)
- 속성 : 태그에 어떤 의미나 기능을 보충하는 역할을 함 (형식 : <태그명 속성="속성값">))
- 문법 :
콘텐츠 O -> 콘텐츠 앞뒤를 태그로 감싸는 형태
콘텐츠 X -> 시작 태그만 사용. 빈 태그(empty tag) - 주석 : 실행결과에 표시되지 않음. 설명 남기고 싶을 때 사용
형식 : <!-- 주석 -->html의 구성
- html, head, body
- body에는 웹 브라우저에 노출되는 내용을 작성한다
블록 요소와 인라인 요소
- 블록 요소 (block element)
: 웹 브라우저의 공간 유무와 상관없이 사용할 때마다 줄 바꿈되는 태그(ex. div, h1, p) - 인라인 요소 (inline element)
: 공간이 부족할 때만 줄 바꿈되는 태그 (ex. a, span)
*html을 작성할 때 줄바꿈과 들여쓰기는 강제되는 규칙은 아니지만 가독성을 높일 수 있다
hn 태그
: 주제나 제목 성격의 텍스트를 작성할 때 사용
h1..
h2..
h3..
h4..
h5..
h6..
p 태그
: 텍스트로 문장 또는 단락을 구성할 때 사용
이것은 p태그로 둘러싸인 하나의 문장이다
br 태그
: 텍스트를 줄 바꿈할 때 사용
같은 태그
안에서
줄
바꿈
blockquote, q 태그
: 문단 단위의 인용문을 작성할 때, 문장 단위의 짧은 인용문을 작성할 때 사용
소크라테스(그리스어: Σωκράτης, Socrates, 기원전 470년 경 – 기원전 399년 5월 7일)는 고대 그리스의 철학자이다. 기원전 469년 고대 그리스 아테네에서 태어나 일생을 철학의 제 문제에 관한 토론으로 일관한 서양 철학에서 첫번째 인물로 평가되고 있다.너 자신을 알라
ins와 del 태그
: 추가할 텍스트와 삭제할 텍스트를 표시할 때 사용
원가 36000원20000원으로 세일
sub와 sup 태그
: 아래 첨자와 위 첨자를 표시할 때 사용
물의 원소 기호는 H2O입니다
42은 16입니다
div와 span
- div : 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
- span : 인라인 요소를 그룹으로 묶을 때 사용
ul, ol, li
- ul(unordered list) : 순서 없는 목록 작성할 때
- ol(ordered list) : 순서가 있는 목록 작성할 때
- ul, ol 태그 안에는 li 태그 사용
<p>내가 좋아하는 음식</p>
<ul>
<li>치킨</li>
<li>피자</li>
<li>소떡소떡</li>
</ul>
<p>라면 끓이는 방법</p>
<ol>
<li>냄비에 물을 받는다</li>
<li>물을 끓으면 스프를 넣는다</li>
<li>면을 넣고 적당히 익힌다</li>
</ol>dl, dt, dd 태그
: 정의형 목록을 만들고 목록 내용을 구성할 때 dt(설명), dd(내용) 태그 사용
푸드코드 메뉴
분식 떡볶이 한식 비빔밥 중식 짬뽕a 태그
: 링크 생성할 때 사용
형식 : <a *href="대상 경로" target="링크 연결 방식" title="링크 설명">누르면 링크로 이동합니다</a>
*: 필수 속성- target 속성 종류
- _blank : 새 창에서 링크 열림
- _self : 내 창에서 링크 열림
- _parent : 현재 프레임의 부모 프레임에서 오픈함.
- _top : 현재 윈도우 전체에서 오픈함.
img 태그
: 이미지를 삽입할 때 사용
형식 : <img *src="이미지 경로" *alt="이미지 설명">
*: 필수 속성: 이미지 링크는 a 태그 안에 img 태그 사용
strong과 bold, em과 i
: 각각 텍스트의 의미를 강조하는 태그인데, 전자는 굵게 후자는 기울여서 표현한다.
: strong > bold / em > i 의미론적으로 더 강조됨
form 태그
형식 : <form action="서버 url" method="get 또는 post"></form>- action 속성 : 전송할 서버의 url 주소
- method 속성 : 송신방식 get or post
- form 안의 태그에서 사용할 수 있는 추가 속성 : disabled(비활성화), readOnly(읽기전용), maxLength(글자수의 제한), checked(selected), placeholder
input 태그
형식 : <input type="종류" name="이름" value="초깃값">- type 속성
checkbox : 여러 버튼 중 여러개 선택 가능
radio : 여러 버튼 중 하나만 선택할 수 있게
text : 텍스트
url : 링크
date : 날짜
range : 범위
submit : 폼 제출
reset : 폼 안에 있는 input 리셋
tel : 전화번호
number : 숫자
password : 비밀번호
label 태그
: 폼 요소에 이름을 붙일 때 사용
: 라벨 글씨 누르면 input에 포커스 가는 기능 O
1.
<label>비밀 번호 : <input type="password" /></label>
2.
<label for="inputPwd">비밀 번호 : </label>
<input type="password" id="inputPwd" />fieldset과 legend
: 관련있는 폼 요소끼리 그룹 짓고, 그룹 지은 요소에 이름을 붙일 때 사용
오늘의 메뉴 튀김우동비빔면과 삼겹살
볶음쌀국수
textarea 태그
select, optgroup, option
: 콤보 박스 구성, option으로 목록 채워넣고 그룹짓고 싶은 option들은 optgroup안에 넣어주기
: size - 화면에 노출되는 항목 개수, multiple - 여러 항목 동시 선택, selected - 기본값
button 태그
형식 : <button type="종류">버튼 내용</button> 