FE_Log

프로필사진

FE_Log

JunO3O

검색

분류 전체보기 (50)

태그 목록

입력 양식 display 속성 중앙 레이아웃 css 글자태그 공간 분할 태그 선택자 아이디 선택자 Udemy 위치 속성 html 유동 속성 one true 레이아웃 the web developer bootcamp 글자 생략 반응 선택자 상태 선택자 배경 속성 글자 속성 수평 레이아웃 박스 속성 그레이디언트 구조 선택자 요소 배치 목록태그 CSS 단위 속성 선택자 vscode 후손 선택자 자손 선택자

즐겨찾기

Copyright © Design Maker - vlo.

FE_Log

공간 분할 태그

댓글수 · 2023.03.21

기본 공간 분할 태그 div / span # 공간 분할 태그 ㅁ div 태그는 공간을 블록 형식으로 분할합니다. ㅁ span 태그는 공간을 인라인 형식으로 분할합니다. # 공간을 블록 형식으로 분할하기 ㅁ div 태그를 사용해 공간을 분할하면 각 태그가 한 행을 모두 차지합니다. 이를 블록 형식이라고 합니다. div 태그1 - 블록 형식으로 공간을 분할합니다.(1) div 태그2 - 블록 형식으로 공간을 분할합니다.(2) div 태그3 - 블록 형식으로 공간을 분할합니다.(3) div 태그4 - 블록 형식으로 공간을 분할합니다.(4) div 태그5 - 블록 형식으로 공간을 분할합니다.(5) # 공간을 인라인 형식으로 분할하기 ㅁ span 태그를 이용하면 각 태그는 자신의 글자 크기만큼 영역을 차지하며, ..

입력 양식 종류

댓글수 1 · 2023.03.21

입력 양식 태그 태그 속성 설명 form 보이지 않음 입력 양식의 시작과 끝 표시 input text 글자 입략 양식 생성 button 버튼 생성 checkbox 체크 박스 생성 file 파일 입력 양식 생성 hidden 해당 내용 표시 안함 image 이미지 형태 생성 password 비밀번호 입력 양식 생성 radio 라디오 버튼 생성 reset 초기화 버튼 생성 submit 제출 버튼 생성 textarea cols / rows 여러 행의 글자 입력 양식 생성, cols는 너비를 지정하고, rows는 높이를 지정 select optgroup option - 선택 양식 생성 옵션 그룹화 옵션 생성 fieldset legend - 입력 양식의 그룹 지정 입력 양식 그룹의 이름 지정 # 라디오 버튼 선택 ..

입력 양식 태그

댓글수 · 2023.03.21

입력 양식 태그 ㅁ 입력 양식은 사용자에게 정보를 입력받을 때 필요한 요소입니다. ㅁ 회원 가입 또는 검색창에 자주 사용합니다. # 입력 양식 개요 ㅁ 입력 양식은 form 태그로 영역을 생성하고, 내부에 input 태그를 넣어 만듭니다. # form 태그의 속성 ㅁ 입력 양식에 데이터를 입력하고 제출(submit) 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달합니다. ㅁ 이때 방식과 장소는 속성으로 지정하는데, form 태그는 method 속성의 방식으로 action 속성 장소에 데이터를 전달합니다. GET ? POST ? : get과 post는 HTTP 프로토콜을 이용해서 무언가를 전달할 때 사용하는 방식입니다. # get 방식 (get 방식) ㅁ get 방식은 아래와 같은 화면에 'ap..

미디어 태그

댓글수 · 2023.03.21

미디어 태그 # img, audio, video 태그 ㅁ 이미지, 오디오, 비디오 등 멀티미디어를 넣는 방법으로 미디어 태그를 사용한다. ㅁ img 태그는 이미지를 삽입할 때 사용하는 태그입니다. ㅁ audio 태그는 음악을 삽입할 때 사용하는 태그입니다. ㅁ video 태그는 비디오를 삽입할 때 사용하는 태그입니다. ㅁ img 태그는 내용물을 가질 수 없는 태그이지만, audio 태그와 video 태그는 내용물을 가질 수 있는 태그입니다. 태그 속성 설명 img 태그 src 이미지의 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 이미지의 너비 지정 height 이미지의 높이 지정 audio, video 태그 src 음악, 비디오 파일의 경로 지정 preload 음악, 비디오를 준비 중..

테이블 태그

댓글수 · 2023.03.21

테이블 태그 ㅁ 표를 만들 때는 테이블 태그를 사용합니다. 테이블 태그는 아래와 같습니다. 태그 설명 table 표 삽입 tr 표에 행(table row) 삽입 th 표의 제목 셀(table heading) 생성 td 표의 일반 셀(table data) 생성 # 표 만들기 ㅁ table 태그를 사용하여 표를 만듭니다. # 표에 셀 추가하기 ㅁ table 요소를 만드는 tr 태그, th 태그, td 태그를 추가하여 표를 만듭니다. 월 화 수 목 금 점심 삼겹살 제육 한식 짬뽕 냉면 저녁 육개장 돈까스 치킨 생선구이 감자탕 # 테이블 태그의 속성 ㅁ th 태그와 td 태그는 colspan 속성과 rowspan 속성을 사용해 표에서 차지하는 영역을 조절할 수 있습니다. ㅁ colspan 속성을 사용하면 영역이..

댓글수 · 2023.03.21

목록 태그 ㅁ 현재 많은 웹 사이트에서는 아래와 같이 네비게이션 메뉴를 만들고 있습니다. ㅁ 이때 목록 태그를 사용하여 네비게이션 메뉴를 만들 수 있습니다. ㅁ 네비게이션 메뉴를 만들 때 아래와 같은 목록 태그를 사용합니다. 태그 설명 ul 순서가 없는 목록(unordered list) 생성 ol 순서가 있는 목록(ordered list) 생성 li 목록 요소(list item) 생성 # 순서가 없는(ul) 기본 목록 만들기(li) ㅁ 순서가 없는 목록을 만들기 위해서는 태그를 사용해야 하며, 목록 요소들을 만들기 위해서는 태그가 필요하다. 사 과 바나나 오렌지 # 순서가 있는(ol) 목록 만들기(li) ㅁ 순서가 있는 목록을 만들기 위해서는 태그를 사용해야 하며, 목록 요소를 만들기 위해서는 태그가 필..

댓글수 · 2023.03.21

자주 사용하는 태그들 # 앵커 태그 ㅁ HTML에서 가장 중요한 글자는 H를 의미하는 하이퍼텍스트입니다. 하이퍼텍스트는 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서를 의미합니다. HTML 페이지가 조직화된 문서 형태가 될 수 있는 이유는 태그 덕분입니다. ㅁ a 태그는 anchor를 의미하며, 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용합니다. ㅁ a 태그만 사용해서는 어떤 웹 페이지로 이동할지 웹 브라우저에 알려줄 수 없기 때문에 href 속성을 같이 사용합니다. ㅁ href 속성은 hyper reference를 의미하고, href 속성은 웹 페이지나 파일의 위치를 나타내는 경로를 입력합니다. ┌ 경로를 입력하기 위해 href 속성을 사용 네이버 ㄴ 이동할..

댓글수 1 · 2023.03.21

글자 태그 # 제목과 본문 글자 태그 ㅁ 제목 글자 태그에서 h는 heading(제목)을 의미합니다. ㅁ 본물 글자를 입력할 때는 p, br, hr 태그를 사용합니다. ㅁ p 태그에서 p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미합니다. 태그 설명 제목 글자 h1 첫 번째로 큰 제목 글자 생성 h2 두 번째로 큰 제목 글자 생성 h3 세 번째로 큰 제목 글자 생성 h4 네 번째로 큰 제목 글자 생성 h5 다섯 번쨰로 큰 제목 글자 생성 h6 여섯 번째로 큰 제목 글자 생성 본문 글자 p 본문 문단 생성 br 줄 바꿈 hr 수평 줄 삽입 # 제목 글자 태그 ㅁ 제목 글자 태그에서는 h1이 가장 큰 제목 태그이고, h6이 가장 작은 제목 ..

1 2 3 4 5 6 7

티스토리툴바