컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

테이블 구조 정의하기 테이블 구조를 사용하다보면 합계나 요약 내용을 표시하게 된다. 이런 테이블의 경우 제목부분과 본문, 요약 부분은 구조적으로 나누는 것이 관리가 편하다. 이렇게 나눌 경우 CSS를 적용하기도 용이하고 관리적인 측면에서도 한 눈에 테이블을 볼 수 있다. 구분 학교 수 학생 수 교원 수 초등학교 17 12,800 70 중학교 15 11,400 100 고등학교 16 13,700 100 합계 48 37,100 270 위와 같은 표는 아래와 같이 코드를 작성해서 만들어줄 수 있다. 구분 학교수 학생수 교원수 초등학교 17 12,000 70 중학교 15 11,400 100 고등학교 16 13,700 100 합계 48 37,100 270 태그 위 표를 기준으로 보면 첫 행 [구분, 학교수, 학생수..

colspan과 rowspan 테이블을 이용하다보면 가끔 테이블 셀을 합칠 일이 생긴다. 그럴 때면 과 으로 나눠진다. 은 세로줄을 나타내고, 은 가로줄을 나타낸다. 하지만 span에서 은 가로 방향으로 셀을 합쳐주고 은 세로 방향으로 셀을 합친다. 과 모두 전체 테이블 칸수보다 더 많은 칸을 쓸 수 없다. 예를 들어 테이블 가로 세로 3칸짜리 테이블에서 과 에게는 3까지 줄 수 있다. 그 이상의 숫자는 주어져도 동작을 하지 않는다. 태그 - 가로방향 셀 병합 대형 마트 목록 이마트 롯데마트 홈플러스 대형마트 목록 이마트 롯데마트 홈플러스 태그를 쓰면 가로 방향으로 셀을 병합할 수 있다. 이때 의 최대 범위는 3이다. 태그 - 세로 방향 셀 병합 마트 목록 이마트 롯데마트 홈플러스 빅마트 이마트 트레이더..

테이블 웹 문서에서 자료를 정리할 때 자주 사용하는 요소가 바로 행과 열로 이뤄진 테이블이다. 행은 가로 줄을 열은 세로 열을 지칭한다. 열 (column) 열 (column) 열 (column) 열 (column) 행 (row) 1행 2열 1행 3열 1행 4열 1행 5열 행 (row) 2행 2열 2행 3열 2행 4열 2행 5열 행 (row) 3행 2열 3행 3열 3행 4열 3행 5열 행 (row) 4행 2열 4행 3열 4행 4열 4행 5열 테이블 만들기 ~ ~ ~ ~ ~ ~ 테이블은 태그를 쓰고 그 안에 행(가로줄)을 나타내는 을 쓰고 그 안에 또 를 통해 그 안에 내용을 적어준다. 그러면 가로줄을 기준으로 하는 테이블이 완성된다. 제목 쓰기 ~ ~ ~ ~ ~ ~ 테이블에서 제목 부분은 보통 강조해주거..

목록만들기 HTML에서 목록 다양한 리스트가 존재한다. 우선 가장 많이 쓰이는 두 가지가 있다. ◎ unordered list(순서가 없는 목록) 항목1 항목2 항목3 항목을 나열하되 순서가 없는 경우 이를 이용한다. ◎ ordered list(순서가 있는 목록) 항목1 항목2 항목2 항목을 나열하는데 순서가 필요한 경우 이를 이용한다. 목록에 속성 주기 ◎ type 속성 항목1 // A. 항목1 출력 항목2 항목2 태그는 목록의순서가 있기 때문에 각 항목 앞에 1,2...같은 숫자가 붙는다. 태그에는 위와 같이 'type'이란 속성을 줘서 이 숫자들을 다른 종류로 바꿀 수 있다. 속성값 설명 1 숫자(기본값) a 영문 소문자 A 영문 대문자 i 로마숫자 소문자 I 로마숫자 대문자 ◎ start 속성 항..

인라인 레벨 텍스트 태그 과 태그 - 굵게 표시하기 굵게 의미까지 강조되는 텍스트 굵게 표시하는 텍스트 과 태그 모두 텍스트를 굵게 강조해준다. 둘의 차이는 은 의미상으로도 의미가 있는 경우 사용해준다. 는 그저 텍스트 자체를 굵게하고 싶을 때 쓴다. 과 과 태그 - 이탤릭체로 표시하기 흐름상 특정 부분 강조시 em 관용구, 기술적 용어 등을 사용시 i , 모두 비스듬히 이탤릭체로 표시할 때 사용한다. 태그는 문장의 흐름상 특정 부분을 강조하고 싶을 때 사용한다. 는 꿈, 생각, 기술적 용어, 관용어 등 표시할 때 사용한다. 태그 - 인용 내용 표시하기 인라인 레벨의 인용문 태그는 와 같이 인용문을 쓰는 태그다. 하지만 는 블록레벨 단위의 인용문을 쓸 때 사용한다. 는 인라인 레벨 단위의 인용문을 쓸 때..

블록 레벨의 텍스트 태그 태그 - 제목 표시하기 제목입니다 제목입니다 제목입니다 태그 안에서 글의 제목을 표시할 때 써준다. 태그는 제목을 뜻하는 'heading'의 줄임말인 h와 숫자(1~6)를 사용해 ~까지 표현한다. 태그 - 단락 만들기 단락입니다 'p'는 'paragraph'의 줄임말로, 텍스트 단락을 만드는데 사용한다. 태그 - 줄 바꾸기 줄 바꾸기 예제입니다. 줄 바꾸기 예제입니다. 태그를 쓰면 줄바꿈이 된다. 태그 - 수평 줄 넣기 줄 바꾸기 예제입니다. 줄 바꾸기 예제입니다. 이 있는 줄에 긴 수평 줄을 넣는다. - 인용문 넣기 인용문 테스트입니다 인용문 테스트입니다. 이 부분은 들여쓰기가 됩니다. 인용문 테스트입니다 사이에 텍스트를 넣어주면 해당 텍스트는 들여쓰기가 되서 다른 텍스트와 구..

아래 코드는 HTML 문서의 가장 기본이 되는 형태다. 에디터에서 자동완성으로 불러오면 아래와 같은 형태의 형식이 마련된다. ◎ 현재 문서가 HTML5 언어로 작성된 문서라는 뜻. 과거에는 HTML 문서에 관한 다양한 내용을 적어줬는데 지금은 많이 간소화되었다. ◎ ~ HTML문서 가장 상위의 태그로서 웹 문서의 시작과 끝을 뜻한다. 그리고 웹 페에지 하나당 단 하나만 존재한다. 웹브라우저는 시작 태그인 을 만나면 종료 태그인 까지의 소스를 읽는다. 그리고 우리가 설정한 형식과 방법에 맞춰 브라우저에 표시함. 태그 안에 설정된 속성값인 'lang'는 문서에서 사용할 언어를 지정할 수 있다. 한국어는 'ko', 영어는 'en', 중국어는 'zh', 일본어는 'ja'다. ◎ 웹 브라우저가 웹 문서를 해석하기..

태그(Tag)란? 문서에 이미지와 텍스트를 표시하는 마크업을 하기 위해 사용하는 약속된 표기법을 태그(tag)라 한다. 태그의 구성 태그는 ''로 구분한다. 태그는 '' 사이에 명령어를 넣음으로서 각종 기능을 사용할 수 있다. 예를 들어서 은 'break'의 약자로 의미는 'line break' 즉 태그를 쓰면 강제 줄바꿈을 한다. 이 외에도 , , , 등 다양한 태그가 존재한다. 태그의 사용법 태그는 일반적인 태그와 빈 태그로 나뉜다. ◎ 일반적인 태그 여는 태그와 닫는 태그 한쌍으로 이뤄진다. 예를 들면 '~'처럼 써주면 된다. 웹브라우저는 여는 태그와 닫는 태그 사이를 태그의 적용 범위로 인식한다. 일반적인 태그는 쌍이므로 꼭 여는 태그와 닫는 태그를 잘 입력해줘야 한다. ◎ 빈 태그 일반적인 태그..