본문 바로가기

Web/HTML9

08. HTML의 디스플레이 1. inline - block 인라인(inline) - content의 크기 만큼남 자리를 차지하는 요소 - 텍스트, img, span 등 - 텍스트의 특징을 가지고 있음 블록(block) - 라인을 모두 차지하는 요소 - p, h, ul, li, div 등 - 면의 특징을 가지고 있음 span 태그 - 인라인 (inline) 특징을 가지고 있음 - 글자 단위로 영역 설정 - 웹 문서에서 특정 부분을 그룹화하거나 스타일을 적용하기 위해 사용됨 - 주로 텍스트 스타일링 또는 스크립트와 함께 특정 텍스트 또는 요소를 감싸기 위해 사용됨 div 태그 - 블럭 (block) 특징을 가지고 있음 - 면 단위로 영역이 설정 - 웹 문서의 구획을 나누거나 요소를 그룹화하기 위해 사용됨 - 주로 CSS 스타일링이나 .. 2024. 4. 5.
07. 폼태그 1. 품 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음 - 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 기본형식 서버에 데이터를 전송하는 방법 예시) 네이버 주소 /search.naver --> 파일명 ? where 뒤에는 전달할 데이터 & query 뒤에는 날씨 url get : url에 데이터를 포함하여 전달하는 방법 (속도가 빠름 / 하이퍼링크 or 클릭으로 전송) post : 데이터를 body에 포함하여 전달하는 방법 (속도가 느림 / 폼태그에 입력된 것들을 전송) 2. Input 태그 - text: 문자를 입력받는 글상자 - password: 비밀번호를 입력받는 글상자 - radio: 여러 개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버.. 2024. 4. 5.
06. 아이프레임 태그 1. 아이프레임 태그 - inline frame의 약자 - 웹사이트 안에 또 다른 웹사이트를 설립 기본 형태 스타일 넣기 아이프레임 안에 html 가져오기 책갈피 예제(아이프레임) 클릭 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 아이프레임 안에 책갈피.html 화면이 띄워짐 아이프레임 안에 주소창 가져오기 코리아 IT 아카데미 클릭 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 하이퍼링크를 바꿨기 때문에 바뀐 사이트로 아이프레임이 뜸 2024. 4. 4.
05. 테이블 태그 1. 테이블 태그 여러 종류의 테이블을 보기 좋게 정리하여 보여주는 표를 작성 기본형식 셀1 셀2 셀3 셀1 셀2 셀3 셀1 셀2 셀3 로 시작하고 로 끝냄 로 행을 생성, 로 셀을 생성 는 셀의 제목, 제목을 가운데 정렬, 굵은 글씨 셀 모양이 보이지 않음 첫번째 셀 border, witdh 속성주면 셀모양이 보임 첫번째 셀 행 3 열 2 테이블 만들기 첫번째 셀두번째 셀 세번째 셀네번째 셀 다섯번째 셀여섯번째 셀 colspan 태그 - 행 합치기 첫번째 셀 세번째 셀네번째 셀 다섯번째 셀여섯번째 셀 rowspan 태그 - 열 합치기 첫번째 셀두번째 셀 세번째 셀네번째 셀 여섯번째 셀 열과 행을 합친 표 만들어보기 셀1 셀2셀3셀4 셀5 셀6 colgroup 태그, caption 태그 수강생 리스트 이.. 2024. 4. 4.
04. 호스팅 서비스, 책갈피 1. 호스팅 서비스 닷홈 이용하기 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스 링크 : https://www.dothome.co.kr/ 웹호스팅 > 무료 호스팅 신청하기 클릭 정보 입력 완료 상세보기선택 본인 도메인 연결하기 * 닷홈 무료 호스팅 주의사항 - 첫페이지는 항상 index.html (소문자) - html 디렉토리에 저장해야 함 FTP(File Transfer Protocol) - 클라이언트와 서버간의 파일 전송 프로토콜 - 주로 대량의 파일을 전송할 떄 사용 - 기본포트 : 21 FileZila 이용하기 링크: https://filezilla-project.org/ 클라이언트 다운로드 무료다운로드 선택 (decline) 선택 설치완료 파일 > 사이트 관리자 새사이.. 2024. 4. 4.
03. 이미지 태그, 하이퍼링크 1. 이미지 종류 비트맵 이미지 - 픽셀들이 모여 만들어진 정보의 집합 - 레스터 이미지라고 부름 - 픽셀 단위로 화면에 랜더링 - 그림판, 포토샵 등 툴로 편집 - bmp, jpg(jpeg), gif, png, webp.... 벡터 이미지 - 수학적 정보의 형태들이 만들어내는 결과물 - 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음 - 확대, 축소를 해도 이미지가 깨지지 않음 - 일러스트 같은 툴로 편집 jpg(jpeg) - 압축률이 훌륭하여 사진이나 예술분야에 많이 사용 - 가장 널리 쓰인는 이미지 포멧 - 손실 압축(복사할 수록 알고리즘이 망가짐) - 표현색상(24 비트, 약 16000a만 색상)이 뛰어나 고해상도 표시장치에 적합 gif - 이미지 파일 내에 이미지 및 문자열 .. 2024. 4. 3.
02. HTML 속성 1. 속성 태그를 보완하는 역할 HTML 속성 전체 DOCTYPE html> Document DOCTYPE html> : 선언문, HTML5를 나타냄 - 속성: 태그를 보완하는 역할, 작은 따옴표 또는 큰 따옴표를 사용 - html 문서 리더기의 언어를 설정 (en: 영어, ko: 한국어) 언어셋을 설정 (예) euc-kr--->2byte UTF-8----> 3 byte 모바일 환경설정 모바일 환경 해상도 설정 (예) 1920 x 1200 , 3120 x 1440 viewport : 해상도를 다르게 띄워줌 witdh =device-width : 가로폭을 보기좋은 것으로 선택 initial-scale=1.0 : 줌 불가능 Meta 태그 HTML 문서에 대한 정보를 정의할 때 사용 사이에 적용 name, c.. 2024. 4. 3.
01. HTML의 개념, 특징, 태그 1. HTML의 개념 ​ HTML (HyperText Markup Language) 웹페이지를 만들기 위해 사용되는 표준 마크업 언어 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있는 문장) 기능을 가진 문서를 만드는 언어 웹 페이지는 HTML 문서라고도 불리며 HTML 태그들로 구성 (F12키를 눌러서 확인 가능) 마크업 언어(Markup Language) 문서나 데이터 구조를 정의하고 표시하기 위해 사용되는 언어. 태그(Tag)라고 불리는 특정한 구문을 사용하여 문서의 요소를 표시 (프로그래밍X) (ex) 마크다운 HTML의 특징 HTML 문서는 확장명을 .html로 저장 대소문자를 구별하지 않음 문서를 작성할 수 있는 에디터라면 HTML 문서를 작성할 수 있음 띄어쓰기, 불바꿈을 구별하.. 2024. 4. 3.
00. Web 1. Web (World Wide Web) 인터넷 상에서 정보를 공유하고 문서를 표시하기 위한 시스템 네트워크 (Network) 컴퓨터나 기타 장치들이 상호 연결되어 데이터를 주고 받을 수 있는 구조 인터넷 (Internet) 전 세계적으로 연결된 컴퓨터 네트워크들의 집합체 IP (Internet Protocol) 컴퓨터 네트워크에서 사용되는 주요 프로토콜 중 하나, 데이터를 보내는데 사용되며 컴퓨터나 기기가 인터넷에 연결되어 있는 한 모든 기기에 IP주소가 할당됨 IPv4 : 32비트 주소 체계. xxx.xxx.xxx.xxx 형식으로 표현 (예: 192.0.0.1과 같이 네 개의 0~255까지의 숫자로 구성) IPv6 : 128비트 주소 체계. x:x:x:x:x:x:x:x와 같이 16진수 표현 192... 2024. 4. 3.

티스토리툴바