HTML & CSS & JavaScript/HTML (8) 썸네일형 리스트형 ★★ 입력 관련 태그 ★★ ▶ input 태그, form 태그input 태그- 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그text 관련 input 태그- type="text": 한 줄짜리 문자열(텍스트)을 입력할 수 있는 입력 상자: input 태그의 type 기본값으로 생략 가능: inline 형식(모든 input 태그는 inline) "> text 관련 input 태그의 공용 속성- size : 입력 상자의 크기- maxlength : 입력 받는 텍스트의 최대 길이- placeholder : 입력 상자에 작성될 내용을 설명아이디 : 비밀번호 : 비밀번호 : ">아이디 : 비밀번호 : type="password"- 비밀번호 입력 상자(입력되는 텍스트를 가려줌)비밀번호 : ">비밀번호 : type="url.. 하이퍼 링크 관련 태그 하이퍼 링크 관련 태그 : a (anchor) 태그- a 태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공 → 이 때, a 태그로 감싸진 문자열 == 하이퍼 링크a 태그를 이용한 하이퍼 링크 구현 글자 관련 태그 목록 관련 태그 네이버로 이동 이미지 클릭 시 페이지 이동">한 페이지 내에서 점프하기 고양이 1 고양이 2 고양이 3 고양이 1 목록으로 이동 고양이 2 목록으로 이동 고.. 이미지 관련 태그 img 태그- 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그- 속성1) src : 삽입할 이미지의 경로를 지정하는 속성 (파일경로, 웹 주소)2) width / height : 이미지의 크기를 지정하는 속성3) alt : 이미지를 설명하는 속성 → 이미지가 출력되지 않는 경우, 화면에 직접 표시(+ 웹 접근성 향상)src 속성 확인- 상대 경로 : 현재 위치를 기준으로 경로를 지정- .. : 상위 폴더- / : 하위, 아래, 안쪽, 안에width, height 속성을 이용한 크기 조절(고정 / 가변 크기)- 고정 크기 단위(px) : 화면의 크기 상관 없이 지정된 값의 크기를 갖는 단위 - 가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따.. ★★ 영역 관련 태그 ★★ 영역 관련 태그 실습을 위한 style 지정 영역을 나누는 형식(성질)1) block 형식: 공간을 수직 분할 → 수직으로 되어 있는 화면을 가로로 잘라서 여러 행을 만드는 것: 크기를 지정하는 width, height 속성 사용 가능ex) p / pre : 문단 나누기, h1 ~ h6 : 제목 영역 나누기, hr : 수평선을 넣어서 화면 나누기, div : 영역 나누기2) inline 형식: 공간을 수평 분할 → 수평으로 되어 있는 화면을 세로로 잘라서 여러 열(컬럼)을 만드는 것: 크기를 지정하는 width, height 속성을 사용할 수 없음ex) strong / b : 글자 굵게, em / i : 글자 기울기, mark : 글자에 배경색, span : 한 줄을 나누는 용도.. 표 관련 태그 ▶ 표 관련 태그table 태그: 웹 문서에서 자료 정리를 위해 주로 사용하는 태그: 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함: table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함tr 태그: Table Row의 약자로 한 행을 나타내는 태그td 태그: Table Data의 약자로 한 행의 한 컬럼( == 셀)을 나타내는 태그th 태그: Table Header의 약자로 컬럼명을 표시하는 용도의 태그: 기본 성질은 td 태그와 같으나, 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐caption 태그: 테이블의 제목이나 설명 내용을 추가하는 태그 웹 브라우저의 종류 .. 목록 관련 태그 ▶ 목록 관련 태그ul (Unordered List) 태그: 순서가 없는 목록을 작성하는 태그(영역)li (List Item) 태그: 목록에 들어가는 내용을 작성하는 태그 돈가스 햄버거 서브웨이 ol (Ordered List) 태그: 순서가 있는 목록을 작성하는 태그(영역)ol 태그의 type 속성- 기본값 : 1부터 1씩 증가하는 숫자- type = "a" → 영어 소문자 순서- type = "A" → 영어 대문자 순서- type = "i" → 로마숫자 소문자 순서- type = "I" → 로마숫자 대문자 순서+ 추가 속성- start = "5" → 순서가 5부터 시작- reversed → 순서를 반대로 .. 글자 관련 태그 ▶ 글자 관련 태그 ~ 태그- 제목을 입력할 때 사용하는 태그- 1 ~ 6까지 여섯 단계의 폰트 크기가 지정되어 있음※ 해당 태그는 시작부터 종료까지가 하나의 문단이 됨== 종료 이후 줄바꿈 발생함기본글자크기h1 태그 작성 내용h2 태그 작성 내용h3 태그 작성 내용h4 태그 작성 내용h5 태그 작성 내용h6 태그 작성 내용p, pre 태그- p 태그(Paragraph : 단락, 문단): 글을 작성하는 용도의 태그: 종료 시 줄바꿈p태그 1번p태그 2번p태그 3번 - pre 태그(Preformatted) : 글을 작성하는 용도의 태그 : 줄바꿈 : 시작, 종료 태그 사이에 작성된 문자열의 형식을 그대로 출력pre태그 1번pre태그 2번pre태그 3번▶ 글자 관련 기타 태그b.. HTML5 개요 ▶ 개발환경 설정1) VS Code 설치VS Code 홈페이지(https://code.visualstudio.com/) 접속하여사용자 컴퓨터에 적합한 OS를 선택해 다운로드2) 환경 설정좌측 하단 톱니바퀴 아이콘 → Settingsfont 입력 → Font 설정 변경theme 입력 → 테마 설정 변경mouse wheel zoom 입력 → 빈 칸에 체크 (해당 설정 사용 시 마우스 휠로 글자 크기 증/감 가능)3) 확장 기능 추가좌측 사이드바 마켓 플레이스 아이콘(좌측 상단에서 아래로 5번째 위치) 클릭 및 확장기능 추가Korean Language Pack for Visual Studio code : VS code 한글화Auto Rename Tag : 시작태그, 종료태그 동시 수정Quick HTML Pre.. 이전 1 다음