basic/HTML, CSS

day 21 - HTML

못지(Motji) 2021. 5. 24. 16:11

tool

▸ brackets.io

유용한 사이트

▸www.w3schools.com/

▸https://caniuse.com/

HTML

HyperText Markup Language : 웹에서 사용하는 웹문서

확장자명 : .html

웹표준 : 웹사이트를 만들때 지켜야하는 약속들을 정리한 것 / HTML5

W3C : 웹표준을 제정하는 단체

📌

일반문서 : ex) 엑셀 .xlsx 입력프로그램과 내용 확인 프로그램이 동일

웹문서 : 작성프로그램은 "웹편집기" 문서보는 프로그램은 "웹브라우저"로 서로 다름

 

태그

마크업할 때 사용하는 약속된 표기법

  • < 와 > 를 이용해 구분 ex) <html>, <head>
  • 태그는 소문자로 사용 (대소문 구분하지 않지만, html5 표준에서 권장)
  • 여는태그와 닫는 태그 정확히 작성
    ▹ 태그 : 쌍으로 이루어짐 Ex) <h1> ... </h1> <html> </html>
    ▹ 홑태그 : 하나의 태그로 이루어짐 ex) <img />, <br />
  •  들여쓰기
  • 태그는 속성과 함께 작성 가능
    ▹ <태그명 속성명="속성값" 속성명="속성값" ...>  </태그명>

HTML 문서 구조

  • <!doctype html> : 문서 유형을 지정하는 선언문
  • <html> : 웹 문서의 시작과 끝을 알려주는 태그
  • <head> : 브라우저에게 정보를 주는 태그
    화면에 보이지 않지만 브라우저가 알아야할 정보를 모두 <head>태그 안에 입력
    <title>, <meta>, <style>, <link> ....
  • <meta> : 문자인코딩 및 문서 키워드, 요약 정보
  • <title> : 웹브라우저 제목 표시줄 지정
  • <body> : 실제 브라우저에 표시될 내용

💡 주석처리 내용 <!-- 주석처리 내용 --> Ctrl + Shift + /

텍스트 관련 태그

  • <h1><h2> : h 태그 : 제목 표시하기 <h1> ~ <h6>
  • <p> : 단락 만들기
  • <span> : 줄바꿈 없이 영역 묶기

목록 태그

  • <ul>, <li> : 순서 없는 목록
  • <ol>, <li> : 순서 있는 목록
    ▹type 속성 : 목록앞에 숫자/영문/로마숫자 변경가능
      • 속성값 : 1 = 숫자(기본값) a = 영문소문자 A = 영문대문자 i = 로마숫자소문자 I = 로마숫자대문자
    ▹start 속성 : 중간번호부터 시작 가능
    ▹reversed 속성 : 항목 역순으로 순서 표시

표만드는 태그

표 : table 은 행(row)과 열(column)으로 이루어져 있다.

  • <table></table> : 테이블의 영역에 해당
  • <tr></tr> : 행을 지정
  • <td></td> : 셀(열)만들기
  • <th></th> : 제목 셀
  • 행/열 합치기 : 셀을 합치는것이므로 셀을 만드는 <td> 태그에서 이루어짐
    ▹ conlspan 속성 : 열 합치기 <td colspan="열의 개수">
    ▹ rowspan 속성 : 행 합치기 <td rowspan="행의 개수">

이미지 태그

💡 이미지 파일

• GIF : 색상수 256가지뿐, 파일크기 작음, 아이콘, 불릿 작은이미지에 주로 사용

• JPG : 사진

• PNG : 투명배경

💡 이미지 경로

✔ 내 컴퓨터의 이미지로 경로

• 상대 경로 : 현재 작업파일을 기준으로 이미지 파일의 위치 작성 (확장자 포함)

☑ 작업파일과 동일한 폴더내에 있을 경우 : 이미지 파일의 이름만 작성, 작업파일동일 한 폴더내의 하위 폴더 안에 있을경우 한단계 아래를 뜻하는 '/'를 사용하여 폴더명/파일명

☑ 작업파일의 상위폴더에 있을경우 :상위폴더를 지칭하는 '..'을 사용하여 ../파일명

• 절대 경로 : 파일이 컴퓨터내에 위치한 전체 주소를 작성

ex) D:\html\workspce\imhs\이미지명.jpg

✔  웹 상의 이미지로 경로

☑ 이미지 주소 복사해서 이미지경로에 넣기

  • <img /> : src 속성을 사용하여 이미지 파일 경로를 반드시 지정해줘야함
    src="이미지 경로"
    alt="이미지 설명글"

링크

태그

  • <a> : href 속성을 이용하여 다른 페이지로 넘어가게 만들기
    <a href="이동할 주소"> 텍스트 </a>
    <a href="이동할 주소"> 이미지 </a>

속성

  • href : 링크주소
  • target : 링크한 내용이 표시될 위치
    새창 : _blank
    현재창 : _self(기본값)
  • downliad : 링크한 내용을 다운로드 함

앵커

폼 관련 태그

아이디와 비번 입력, 로그인 버튼, 회원 가입창 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 모두 폼from이라 한다.

✔ form 태그

<form 속성="속성값"...> 여러 폼 요소 태그 </from>

 

✔ from 태그 속성

  • method : 사용자가 입력한 내용들을 서버쪽으로 어떤방식으로 넘겨줄지 지정
    ▹get : 주소표시줄에 사용자가 입력한 내용이 그대로 드러남
    ▹post : 입력내용이 드러나지 않고 길이 제한 받지 않음
  • name : 폼에 이름 붙여주기
  • action : form 태그 안의 내용들을 처리해줄 서버상의 주소(프로그램) 지정 
  • target : action 속성에 지정한 스크립트 파일을 현재창이 아닌 다른 위치에 열 수 있도록 지정 가능한 속성
  • autocomplete : 자동완성기능

✔ class와 id 속성

  • class="" : 이름부여, 같은 속성값을 가진 태그들을 그룹으로 묶어 처리할때 주로 사용
    클래스 속성값은 여러개 부여 가능하고 띄어쓰기 구분으로 지정
  • id="" : class 속성보다 우선순위가 높은 선택자
    속성값은 한태그에 유일한 값만 허용 (중복X)

✔ input 태그

홑 태그로 폼에서 사용자가 입력하는 부분을 만들 때 사용

한줄 텍스트 입력, 체크박스, 로그인 버튼 등 여러 타입 존재

☑ input 태그의 type 속성이 속성값

  • text : 한줄짜리 텍스트 입력 상자
  • hidden : 화면상에는 보이지 않지만 서버로 데이터 전송할때 숨겨서 전송가능
  • password : 비밀번호 입력란. (. *로 대치됨 > 브라우저나 운영체제에 따라 다름)
  • radio : 하나의 항목만 선택할 수 있음 Ex) 남여 항목있을때 하나 선택하면 다른하나는 선택체크 해제됨
  • checkbox : 두개 이상의 여러가지 선택 가능
  • color : 색상 선택 상자
  • date.month,week : 날짜 선택 (브라우저별로 가능한지 체크하고 사용하기)
  • time, datetime, datetime-local : 시간선택
  • reset : 입력된 모든 정보 지우기. value 속성값이 버튼의 표시글이 됨
  • submit : 사용자가 폼에 입력한 정보를 서버로 전송. 
  • image : 이미지 버튼 넣기. str="이미지 경로"
  • buttom : 버튼
  • file : 파일 첨부 (추가 지정해줘야되는 속성들이 있음.... 추후)

☑ input 태그의 다른 속성

  • autofocus : 입력란에 커서 지정
  • placeholder : 입력 박스에 기입할 내용 힌트 표시하기
  • maxlength : 최대 입력가능한 글자수 설정
  • readonly : 읽기전용
  • required : 필수 기입 필드 지정
  • min, max, step
  • size, minklength, maxlengthtt

select

옵션중에 선택하는 드롭다운 목록

✔ 태그

<select name="값">
<option value="값">내용 1</option> // 값지정 안해주면 텍스트가 넘어감
<option>내용 1</option>
<option>내용 1</option>
....
</select>

✔ option 속성

  • value : 옵션을 선택했을 때 서버로 넘겨질 값 지정
  • selected : 미리 선택, 화면에 표시될때 기본적으로 선택되어 있는 옵션 지정

✔ optgroup 태그

항목들을 그룹으로 묶어야 할경우 사용

textarea

여러줄 입력가능한 텍스트 영역

태그

<textarea>내용</textarea>

속성

  • cols : 텍스트의 가로 너비 지정
  • rows : 텍스트의 세로 높이 지정

button

버튼태그 <input type="button" value="버튼이름">과 동일한 버튼으로 사용가능

차이점은 화면 낭독기

CSS 활용에 편리

태그 : <button>버튼이름</button>

  • type 속성
    submit : 폼을 서버로 전송
    reset : 입력내용 초기화
    button : 버튼 형태만 만들고 자체 기능X
  • onclick 속성
    버튼 클릭시 이벤트 등록 ( 이벤트 등록 코드는 javascript)

progress

작업의 진행상태를 나타내는 등의 막대 그래프 같은 태그

태그 : <progress value="값" ...></progress>

속성

  • value : 부동소수점으로 표현(실수) 0.0 ~ 1.0 기본세팅. max 지정 0~max
  • max : 완료 기준