HTML (Hyper Text Markup Language)
- HTML의 가장 큰 특징 두가지
-하이퍼텍스트 : 현재문서에서 다른문서로 즉시 넘어가는기능
-마크업 : 어딘가에 Mark, 표시해두는것
- Internet 국제 정보 통신 네트워크 망
FTP
WWW 웹, 정보 공유 공간
E-mail
웹 ( 1. HTML 뻐대 2. CSS디자인 3. Javascript 기능)
구성요소
<p(시작태그)>Content(내용) </p(끝태그)> -> 전체를 Element (요소)
-해당요소에 추가적인 내용을 담고 싶을때 시작태그 안에 넣는다. 속성(attribute)=값(value) 로 이루어져있다. < p align ="center"> 내용(content) < /p>
VSC 에서 사용할 때
-확장팩에서 live server 설치 > 실행을 위해 설치해주기--->문서실행할때 alt L O 또는 마우스오른쪽 open with live server 클릭
-주석작성 ctrl /
-사용자지정 단축키 설정 가능
-파일생성하고 마지막에 확장자 꼭 써주기 .html
-첫 행에 ! + enter => 기본 구조나옴
-head : 문서의 부가적 정보 컨텐츠 정보변경할때
ㄴcharset : 인코딩 방식 지정
ㄴtitle 태그 : 문서의 이름(tab) 변경가능
ㄴbody : 웹에 공유되는 정보
-빨간색으로 된 태그들은 html5에서 지원하지않는다
개행태그
< br> 홑태그(끝태그가없음)
꺽쇠없이 br*n 엔터하면 n만큼 복사되어나옴
제목태그
-제목태그 h: 1~6까지 나타냄 (글자크기 차이)
< h1 >내용입력< /h1 >
< h2 >내용< /h2 >
< h3>내용< /h3 >
< h4>내용< /h4 >
< h5>내용< /h5 >
< h6>내용< /h6 >
본문태그
< p> < /p>
< b> < /b> 볼드체
< i> < /i> 이탤릭 기울임꼴
강조태그 strong태그와 em태그는 다른글자와 구별됨 + 중요한 내용을 강조할때~!
< P>내이름은 ,, < strong>안알랴줌< /strong>기울임 꼴< /P>
< P>내이름은 ,, < em>안알랴줌< /em>기울임 꼴< /P>
내이름은 안알랴줌
< p>내이름은 < strong>안알랴줌< /strong>< /p>단락구분태그
< hr> 단락을 구분함 가로에 선긋는태그
취소선태그
< p>여기는 < s>취소선태그 < /s> 입니다 < /p>
< p> 여기는 < u>밑줄선 < /u> 입니다 < /p>
< img > 태그
-
src : 이미지 경로
alt : 이미지 설명 나타냄 (경로가 잘못되었을때 부가설명)
< img src="http:// 어떠한 웹사이트 경로.jpg">
< img src="../폴더/이미지파일.jpg width=200px"> -
절대경로 : 어떤페이지나 파일의 고유한 경로
외부이미지가 삭제되면 사용할수없다. 그래서보통 상대경로 씀! -
상대경로 : 특정위치를 기준으로 파일 찾는것-내부자료연결할때
-상위 기준 : ../ 현재 내 위치 기준 상위 폴더 차근차근 나가서 해당파일을 찾아감 < img src="../폴더/이미지파일.jpg">
-현재 기준 : ./ 현재 내 위치 기준 바로 가는것 (생략가능) < img src="이미지파일.jpg">
-루트 기준 : 나로부터 가장 밖의 최상위폴더로 나감, 즉 가장바깥 파일이 맨처음나옴 ex) < img src="/img/폴더/이미지파일.jpg" >
< a > < /a > 앵커 태그: 하이퍼텍스트 기능을 가진 태그
-
< a href = "여기는 싸이트 주소 들어갈곳" > 텍스트입력 < /a > : 텍스트를 누르면 주소로 연결이 된다! 텍스트입력공간에 사진을 넣으면 사진을 누를수있고 이동! 사진 경로 지정 주의!!
-
< a href="#bottom(네임값)" > 맨 아래 이동 < /a >
< a name="bottom(네임값)" >맨 아래< /a > : #네임값이 저장된 텍스트를 누르면 해당하는 곳으로 이동함. 인덱스와 비슷,, 네임값(특정위치로 이동할수있도록 이름지정) ---> '맨 아래'라는 글자가 위치한 곳으로 이동하게됨
눌러보세효 -
다른페이지의 name값 찾아가기 --> 현재페이지에서 다른페이지의 name값 찾아가기 : href="상대경로#name값"
< a href="다른페이지.html#bottom">맨아래가기(클릭되어지는곳) < /a>
< a href="다른페이지.html#middle">중간으로가기< /a>
목록태그
- < li > < /li >은 ul과 ol 같이 사용됨!
- < ul> 번호 없는 목록(unordered list)
-ul 속성 : type="circle, square, non, disc"
< ul type="square"> 목록 머리글
< li >< /li >
< /ul>- *엔드림 공공즈*
- 런쥔
- 제노
- 해찬
- 재민
- < ol> 번호 있는 목록(ordered list)
-ol 속성 : type="(A,a,로마숫자(I,i)")
-start = "숫자" :시작할숫자지정
-reversed 키워드는 내림차순- *엔드림 공공즈 나이 내림차순*
- 런쥔
- 제노
- 해찬
- 재민
details태그 : 숨길내용을작성하는태그
< details>
< summary>숨길내용에 대한 제목 < /summary>
숨길내용 작성하는 공간
< /details>
- 최차애 목록
- 황런쥔
- 이제노
- 박지성
테이블태그
< table> < /table> 테이블생성
< thead> < /thead> 열 제목 자동 가운데정렬
< tbody> < /tbody> 표의 나머지부분
< tr> 행 부분
< td> 열 부분 < /td>
< /tr> 행 끝태그
width ="" 너비
heigh ="" 높이
align = "right,left,center" 등 정렬방식
행 병합 열 병합시 행 열 구분 주의해야됨
| 분야 | 언어 | 난이도 | 비고 |
|---|---|---|---|
| Web | HTML | 하 | |
| Web | CSS | 중하 | |
| Bigdata | Python | 하 |
< table>
< caption> 표의 제목< /caption>
< thead> 열 머리글(제목) : 자동 가운데 정렬
< tr>
< th>분야< /th>
< th>언어< /th>
< th>난이도< /th>
< th>비고< /th>
< /tr>
< /thead>
< tbody>
< tr> 하나의 행
< td>Web< /td>
< td>HTML< /td>
< td>하< /td>
< td rowspan="2">< /td> //행 병합
< /tr>
< tr>
< td>Web< /td>
< td>CSS< /td>
< td>중하< /td>
< /tr>
< tr>
< td>Bigdata< /td>
< td>Python< /td>
< td colspan="2">하< /td> //셀(열)병합
< /tr>
< /tbody>
< /table>form 태그
-데이터를 전송할때 사용하는 태그
-< form action=""> < /form> 입력데이터의 전달위치
입력을 받는 < input> 태그 (홑태그)
-
type="text" 데이터를 입력할 수 있는 태그
-name 속성: (필수)사용자가 입력한 값을 구분하기위해 지정
-value : 기본값지정
-placeholder : 미리보기 텍스트지정
아이디입력 :
이름입력 :
아이디입력 : < input type="text" name="id" value="기본값">
이름입력 : < input type="text" name="name" placeholder="이름을입력하세요"> -
type = "password" : 입력값이 보이지않게 *** 형태
네임 지정해주기
비밀번호입력 :
비밀번호입력 : < input type="password" name="pw"> -
type ="checkbox" 체크박스
-여러개 선택가능
치킨
파스타
피자
---문법 :
치킨< input type="checkbox" name="food" value="chichen">
파스타< input type="checkbox" name="food" value="pasta">
피자< input type="checkbox" name="food" value="pizza"> -
type="radio"
한개만 선택가능 / name이 같은 그룹일때만
여성
남성
여성
남성
여성< input type="radio" name="gender" value="female">
남성< input type="radio" name="gender" value="male">
여성< input type="radio" name="sex" value="male">
남성< input type="radio" name="sex" value="male">
네임 그룹이 다르게 지정되면 이와같이 두개가 선택되니 주의! -
파일선택
< input type="file" name="img"> -
색깔 선택
< input type="color" name="color"> -
숫자 선택
< input type="number" name="age"> -
날짜 선택
< input type="date" name="birthday">
< select>< /select> 목록태그
-option value 와 짝꿍
-name, value는 인덱스처럼 가지고 있고 값을 기억 / 사용자가 입력한 값을 DB에 저장해야됨
-value : 넘길 값 지정
목록 제목 텍스트 < select name="mail"> 가지고있을 이름이 mail
< option value="naver"> naver < /option> 옵션의 밸류 값(넘길 값)
< option value="google"> google < /option>
< option value="daum"> daum < /option>
< /select> 목록 끝태그
메일 선택 :
naver
google
daum
메일 선택 : < select name="mail">
< option value="naver"> naver < /option>
< option value="google"> google < /option>
< option value="daum"> daum < /option>
< /select>
< textarea>< /textarea> 게시글작성: 길게 작성할 수 있는 공간
< textarea name="board" cols="30" rows="10" style="resize: none;">< /textarea>
-cols : 열의 크기 (가로)/ rows:행의길이(세로)
reset: input요소의 모든 값을 초기화
< input type="reset" value="다 지우기">submit : input요소의 모든 값을 전송할 때 누르는 버튼
< input type="submit" value="회원가입">