본문 바로가기

Programming/HTML+CSS

 (76)
2. 내용 입력하기(1) - 텍스트 입력 2 앞서 살펴본 텍스트 입력과 관련된 태그를 계속해서 살펴보도록 하겠습니다. 기억이 나지 않는다면, 다시 한번 체크해 둡시다. 2. 내용 입력하기(1) - 텍스트 입력 1 이제부터 본격적으로 html 웹 문서 내에 내용을 입력하는 과정을 살펴보겠습니다. 우선은, 가장 기본 중의 기본이라 할 수 있는 텍스트 입력에 대해 살펴볼 것입니다. 굳이 설명이 필요한 내용인 nozeroslope.tistory.com ○ - 인용문 어떤 콘텐츠를 작성할 때, 다른 출처에서 직접인용을 하여 표시하게 되는 경우가 있습니다. 예를 들어 따옴표나 별도의 박스 형태로 누군가의 발언이나 논문의 단락을 직접 표시하는 경우가 있겠죠. 여러 가지 이유로, 브라우저 상에서 특정 단락이나 영역이 '인용문이다'라고 인식할 수 있는 방법이 있습..
2. 내용 입력하기(1) - 텍스트 입력 1 이제부터 본격적으로 html 웹 문서 내에 내용을 입력하는 과정을 살펴보겠습니다. 우선은, 가장 기본 중의 기본이라 할 수 있는 텍스트 입력에 대해 살펴볼 것입니다. 굳이 설명이 필요한 내용인가? 싶기도 하겠지만, 잘 기억해두어야 하는 내용이며 티스토리를 포함한 각종 html 편집 툴, 마크다운 문서를 사용하는 경우에도 크게 도움이 됩니다. ○ 태그 - 제목 텍스트 태그 , ... 형태로 사용하는 태그는 'heading', 즉 제목을 위한 태그입니다. 1 ~ 6까지의 숫자를 사용하며 1이 가장 큰 제목의 형태입니다. 제목을 넣읍시다 크기의 차이가 느껴지십니까? 간단하게 넘어가 봅시다 HTML 삽입 미리보기할 수 없는 소스 ○ 와 태그 - 단락, 줄 바꿈 사실 여러 텍스트 편집기를 사용하시던 분들이라면 은..
1. HTML문서의 구조(2) - 시맨틱 태그 시맨틱(semantic) 태그는, 앞서 살펴본 필수 태그들과 마찬가지로 html 문서 구성에서 쉽게 찾아볼 수 있는 태그들입니다. 다만, 이를 시맨틱 태그로 따로 분류해 살펴보는 이유는 무엇일까요? 쉽게 말해 말 그대로, 이름만 보아도 그 의미를 유추할 수 있는 태그입니다. 하지만 단어의 의미론적인 정의를 차치하고서라도 굳이 시맨틱 태그를 써야 하는 이유는 아직 의문입니다. 사실, 그 이유는 간단하면서도 꽤나 추상적입니다. 결과적으로는 '구조화된 표준'에 가까운 문서의 구조를 정립해, 효율적인 개발과 사용을 꾀하기 위해서라고 볼 수 있죠. 예를 들어, 시맨틱 태그로 구분된 영역으로 작성된 html 문서를 보면 개발자 혹은 분석하는 주체는 해당 웹사이트의 구조를 손쉽게 파악할 수 있게 됩니다. 그럼 웹사이..
1. HTML문서의 구조(1) - 기본 태그 일단 HTML의 가장 기본적인 문서 형태를 보고, 최상위에 해당하는 주요 태그들에 대해 먼저 살펴보도록 하겠습니다. 간단하게 리뷰를 하는 형태이니 편한 마음으로 살펴보겠습니다. HTML 기본 테스트 문서입니다. 1번 항목 2번 항목 3번 항목 HTML 삽입 미리보기할 수 없는 소스 ○ 태그 해당 태그는 가장 기본 적인 문서의 유형(document type)을 선언하는 태그입니다. 해당 문서가 HTML5로 작성되었음을 선언하는 기본 태그입니다. ○ 태그 html 문서의 가장 기본적인 태그이며, html 파일의 시작과 끝을 정의합니다. 태그 사이에 모든 문서의 내용이 작성되는 것을 원칙으로 하며, 태그 뒤에는 아무 내용도 작성하지 않습니다. 단, 예제에 보면 형태로 html 태그가 시작되는 것을 볼 수 있습..

티스토리툴바