Web/HTML

[HTML] 테이블(table)

1. 테이블 - 문서에 표를 작성할 때 사용 - 주요 속성 rowspan : 수직방향으로 셀 병합 colspan : 수평방향으로 셀 병합 - 테이블 주요 구성 태그 : 행 정의, th와 td만 자식요소로 포함 : 제목 셀 정의 : 데이터 셀 정의 : 테이블의 머리글 : 테이블의 본문 : 테이블의 바닥글 : 테이블 제목 : 테이블 열 정의 : 테이블의 열 그룹화 ​ ​ ​ 01. 기본 테이블 만들기 컬럼1 컬럼2 1 2 3 4 02. 주요 태그 사용해서 만들기 테이블 제목 컬럼 1 컬럼 2 컬럼 3 1 2 3 4 5 6 7 8 9 footer1 footer2 footer3 03. 테이블 셀 병합하기 컬럼1컬럼2컬럼3컬럼4 1 2 3 4 6 7 9

[HTML] 리스트(list)

1. 리스트(list) 기본 목록 구성 - 주로 메뉴 작성시 사용 ​ : 비 순차적 목록 나열 : 순차적 목록 나열 : 목록의 내용 ​ , , 는 주로 이미지를 입력하고 그에 대한 설명을 입력하는 것 등에 사용됨 : 목록을 시작하고 end 태그로 끝냄 (목록의 범위, 영역) : 타이틀 목록 작성 : 목록에 대한 설명 ​ ​ 목록 순차적 목록 학원 가는 순서 기상 씻기 양치하기 머리감기 세수하기 머리말리기 옷갈아입기 출발 버스정류장가기 버스타고 지하철역 가기 지하철타고 역삼역까지 가기 역삼역에서 학원까지 걸어가기 학원도착 집 가는 순서 학원에서 역삼역까지 간다 역삼역에서 답십리역까지 간다 답십리역에서 집까지 가는법 버스타기 자전거타기 킥보드타기 걸어가기 택시타기 정의형 목록 제목 내용 QClass 강의시간..

[HTML] 링크(link <a>)

1. 링크 - 텍스트나 이미지 등을 통해 다른 페이지로 정보 연결 - 인라인 요소(인라인 요소와 텍스트를 포함) - 주요 속성 href : 링크의 주소 지정 title : 링크의 설명 표시 target : 링크된 문서를 어떤 창에서 오픈할 것인지 지정 a tag naver 1번 2번 3번 1번 2번 3번 naver를 누르면 실제 네이버로 넘어가고 1번, 2번, 3번은 누르면 해당 페이지 아래로 이동합니다!

[HTML] 텍스트(text), 이미지(img)

1. 텍스트 표현 요소 : 텍스트 진하게 : 텍스트 진하게 : 텍스트 기울임 : 텍스트 기울임 : 작은 텍스트 표시, 코멘트 등 : 아래 첨자 : 윗 첨자 : 내용 추가 : 내용 삭제 ​ ​ ​ 2. 이미지 - 주요 속성 alt : 이미지를 설명하는 내용 지정. 이미지가 보이지 않을 경우, 이미지 설명 텍스트 width : 이미지의 가로 크기 지정 height : 이미지의 세로 크기 지정 src : 이미지 경로 지정 ​ ​ ​ 이미지의 경로를 지정해 줄때 해당 경로에 반드시 이미지가 있어야 출력됩니다! TEXT 진하게() 진하게() 기울임() 기울임() 작은 텍스트 표시, 코멘트() 윗 첨자() 아래 첨자() 내용 추가 () 내용 삭..

[HTML] 구분선(hr), 인용문(quotation)

1. 구분선(Horizontal line) - 블록요소이지만, 빈 요소이기에 종료 태그가 없음 - css 대신 내용 구분할 때 주로 사용 ​ ​ 2. 인용문(Quotation) - 다른 사이트에서 인용한 일부를 지정 - 블록요소인 p요소를 사용합니다. - cite 속성 : 인용문의 출처 / cite 요소 : 작품의 제목 ​ - 짧은 인용문 지정 - 텍스트나 인라인 요소 포함 ​ ​ blockquote 드래곤라자라는 소설에서, 내가 좋아하는 말이 있습니다. 드래곤 라자 나는 단수가 아니다. q 드래곤라자라는 소설에서, 내가 좋아하는 말이 있습니다. 나는 단수가 아니다.

[HTML] 제목, 단락, 주소

1. 제목태그 : ~ (총 6개) - 문서 내부의 컨텐츠 제목을 정의 - 순서에 맞게 작성 - css로 임의의 크기 지정 가능 - h1은 한 문서에 한번만 지정하는 것을 권장 ​ ​ 2. 단락(paragraph) - 블록 요소 (다른 블록 요소 포함 불가) ​ - 문단 간격 정의 태그. 개행요소. 빈 요소(종료 태그x) ​ ​ 3. 주소 : - 연락처 정보 나타내는 요소 - 블록요소 (다른 블록요소 포함 불가) 단, DTD가 'transitional'인 경우 포함 가능 ​ ​ 제목 글자 크기 지정 하는 태그 p 요소는 단락을 정의 div요소는 영역을 정의 인라인 요소와 텍스트 요소를 포함할 수 있는 블록요소이지만, 또 다른 블록요소를 포함할 수는 없다. 연락처 : 010-1234-5678 ​

[HTML] 블록(block) 요소 & 인라인(inline) 요소

우선 태그를 알아보기 전에 HTML문법의 규칙을 알아보겠습니다. 1. 요소를 정확하게 매칭 2. 요소, 속성 이름은 소문자 3. 요소는 항상 닫아야 한다 (일부 단일 태그 존재 ex ) ... 등 4. 특수문자를 쓸 때는 Entity Name(code) 으로 사용 ​ ​ 1. 블록 요소, 인라인 요소 유형 특징 블록 요소 - 줄 바꿈 - 블록 요소 안에 텍스트와 인라인 요소 포함 가능 - 블록 요소 안에 블록 요소 포함 가능(일부 불가) 인라인 요소 - 줄 바꿈X - 인라인 요소 안에 텍스트와 인라인 요소 포 함 가능 - 인라인 요소 안에 블록 요소 포함 불가 ​ ​ 블록요소, 인라인요소 블록요소 줄바꿈 블록 요소 안에 텍스트, 인라인요소 포함 가능 블록 요소 안에 블록요소 포함 인라인요소 줄바꿈 인라인..

[HTML] HTML의 구조

HTML이란? HTML은 HyperText Markup Language의 앞 글자를 딴 이름으로 온라인 상의 문서(page)를 만들기 위한 구조화 된 언어입니다. 위의 그림을 보면 Client가 Server에 요청(request) 하면 HTTP(통신 규약)에 의해 HTML 문서를, 정해진 모양으로 응답(response)합니다. 클라이언트는 웹브라우저를 의미하는데 우리가 컴퓨터에서 브라우저를 켜서 네이버가 나오는 것처럼 브라우저가 서버에 요청을하여 서버가 응답하면 요청한 화면이 나오게 됩니다. ​ HTML5를 위해 어떤 툴을 사용해야 할까요?? 가장 먼저 notepad(메모장)이 있습니다. 메모장에 코딩을 하고 저장할때 확장자명을 htm 또는 html로 저장해주면 됩니다. 하지만 메모장은 들여쓰기나 자동완..

[HTML] sementic(시멘틱)

1. grouping 새로운 구조 : 제목과 부제목을 묶어주는 요소. 최상위 제목만 outline 된다. : 의미가 같은 내용들을 그룹화 * , , , 을 묶을 때나, 독립된 영역을 만들 때도 사용 제목 메뉴1 메뉴2 메뉴3 메뉴4 내용1 내용2 copyright © all rights reserved qclass ....

[HTML] grouping - <div>, <span>

1. grouping grouping이란 여러 요소를 그룹화 하는 것을 의미합니다. 그루핑은 css적용시 많이 사용합니다. ​ : 블록 요소 : 인라인 요소 ​ 제목 메뉴1 메뉴2 메뉴3 메뉴4 내용1 내용2 copyright © all rioght reserved qclass .... 영역은 css입니다. 페이지를 보기 편하게 하기 위해 적용하였습니다.