시나브로

> 서버와 클라이언트 서버 : 정보를 제공하는 호스트. 클라이언트 : 정보를 받아 이용하는 사용자. 클라이언트(사용자)가 요청하면, 서버는 그에 대한 응답으로 정보를 제공함. ex. 티스토리 홈페이지 주소 입력(요청) → 티스토리 웹페이지 제공(응답) → 웹브라우저에서 티스토리 홈페이지 오픈 완료! 클라이언트가 요청하는 것에 따라 응답이 달라질 수 있음. ex. 로그인할 때 / 비밀번호를 올바르게 입력하면 로그인 가능 or 비밀번호를 잘못 입력하면, 로그인 불가능. > form 태그 클라이언트가 입력한 데이터를 서버로 보내기 위해 사용하는 태그. 입력 요소(ex. input, select, textarea)를 감싸며, 입력값을 서버로 제출(submit)함. form의 입력값을 제출하기 위해 input 태..

> select 태그 여러 선택지를 포함하는 선택 메뉴를 나타내는 태그. option 태그와 함께 사용해야 함. name 속성을 추가하여 구별할 수 있음. > option 태그 선택 메뉴 안에 포함되는 내용(옵션)을 표시하는 태그. value 속성(실제 처리될 값)을 지정할 수 있음. ex. + multiple 속성을 추가한 경우 > Ctrl 키를 누른 상태로 클릭하면 중복 선택이 가능함. > textarea 태그 여러 줄의 일반 텍스트를 입력할 수 있는 요소를 만드는 태그. name 속성을 추가하여 구별할 수 있음. rows 속성으로 행의 개수를 제한할 수 있음. cols 속성으로 대략적인 열의 개수를 제한할 수 있음. ex. + 오른쪽 아래 삼각형을 누르면 칸 크기 조정 가능.

> input 태그 값을 입력받을 수 있는 대화형 컨트롤을 만드는 단일 태그. 기본적으로 인라인 요소이며, type 속성과 함께 사용함. > type 속성 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라짐. 값이 달라짐에 따라 함께 적용하는 추가 속성도 달라짐. 기본값은 text이며, 종류는 20여 가지 정도됨. > name 속성 name 속성을 추가하여 input 요소를 구별할 수 있음. 각각의 input 요소에 대한 식별자 역할. ex. > nickname 항목에는 '꾸준히_노력하기', title 항목에는 '시나브로'가 입력된 상태. 'text'가 type 속성의 기본값이기 때문에 작성하지 않아도 결과는 동일함. > type 속성 예시 > text 예시 ▲ 내용 작성 전 ▲ 내용 작성 후 ..

> 목록 태그 순서가 없는 목록과 순서가 있는 목록으로 구분함. ul 태그 vs ol 태그 > ul 태그 순서가 없는 목록을 작성할 때 사용하는 태그. Unordered List 태그 > ol 태그 순서가 있는 목록을 작성할 때 사용하는 태그. Ordered List 태그 > li 태그 목록에 들어가는 각각의 항목을 작성할 때 사용하는 태그. li 태그를 감싸는 태그가 무엇인지에 따라 기호가 다르게 나타남. > 목록 태그 예시 + ul 태그, ol 태그, li 태그 모두 블록 레벨 요소를 만드는 태그 > 따라서 인라인 텍스트 태그를 추가할 수 있음.

> a 태그 페이지를 다른 위치로 이동시킬 수 있는 링크를 만들기 위해 사용하는 태그. 인라인 요소이며, 콘텐츠는 주로 링크의 목적지를 나타냄. 여러 속성을 같이 사용함. (예) href 속성, target 속성 > href 속성 링크를 통해 이동하고자 하는 url을 입력함. 다른 페이지, 전화번호, 이메일 주소, 그 외 다른 url도 연결할 수 있음. 텍스트가 아닌 이미지 등 다른 콘텐츠로 링크를 거는 것도 가능함. 전화를 걸거나 이메일 보내기, 컴퓨터에 있는 다른 html 문서를 여는 것도 지정 가능. ex. > target 속성 새로운 문서가 열릴 때의 옵션을 지정할 수 있음. "_self" : 현재 탭에서 열기(기본값) "_blank" : 새 탭에서 열기 ex. > 현재 탭에서 열기로 지정한 결과..

> 컨테이너 태그 여러 가지 요소를 묶어 편하게 관리하기 위해 사용하는 태그. 콘텐츠나 레이아웃에는 어떠한 영향도 주지 않음. 콘텐츠 내용을 구분하거나 공통적인 스타일을 적용하고자 할 때 사용함. 웹 브라우저의 개발자 도구(F12)에서 확인 가능. > div 태그 블록 레벨 컨테이너 태그. ex. > span 태그 인라인 컨테이너 태그. ex. > 전역 속성 모든 html 태그에서 공통으로 사용할 수 있는 속성. 전역 속성(Global attributes). (예) id, class, style, title > id 속성 요소에 고유한 이름을 부여하는 식별자 역할 속성. 태그명이 같은 요소들을 식별하기 위해 사용함. 태그당 하나씩만 지정해야 함. > class 속성 요소를 그룹 별로 묶을 수 있는 식별자..

태그는 블록 레벨 요소를 만드는 태그와 인라인 요소를 만드는 태그로 구분할 수 있음. 두 요소의 차이는 웹 브라우저의 개발자 도구(F12)에서 각 태그에 마우스 커서를 올려 놓으면 확인 가능. > 블록 레벨 요소 자신이 속한 영역의 너비를 모두 차지하여 블록을 형성함. (예) p 태그, h 태그 ex. 블록 안에 블록을 넣으면, 블록 안에 층이 생김. ex. > 인라인 요소 자신에게 필요한 만큼의 공간만 차지함. (예) strong 태그, em 태그, mark 태그 ex. > strong 태그 콘텐츠를 굵게 표시하는 태그. ex. > em 태그 콘텐츠를 기울여 표시하는 태그. ex. > mark 태그 콘텐츠에 형광펜 표시를 추가하는 태그. ex.

> p 태그 문단 요소(paragraph)를 나타내는 텍스트 태그. 하나의 p 태그는 하나의 문단을 표현함. 문단과 문단 사이에 공백이 존재함. ex. > h 태그 제목 요소(headline)를 나타내는 태그. h1 ~ h6 까지 존재함. 글자 크기는 h1이 가장 크고, h6이 가장 작음. ex. > hr 태그 수평선을 표시하는 단일 태그. ex. > br 태그 줄바꿈 태그. 단일 태그. ex. > 공백(띄어쓰기)을 두 번 이상 표시할 때 사용함. &ㅜㅠ네; -> 한글로 바꿔서 치면 울면서 대답하는 사람 같아짐ㅎ ex.

> 태그 콘텐츠의 시작과 끝을 표시함. ex. 콘텐츠 적는 곳 > 단일 태그 시작과 끝을 구분하지 않음. ex. or > 속성 선택사항! 시작 태그 내부에 정의함. 개수 제한 없음! ex. 내용 적는 곳 > 주석 사람에게만 보이는 것. ex. > HTML 기본 구조 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그. UTF-8 방식은 영문과 한글을 모두 사용하기에 좋음. 문자 인코딩이란? 한글을 표시하기 위해 문자 세트를 지정하는 작업.