HTML (29) 썸네일형 리스트형 2. 내용 입력하기(4) - 이미지 삽입 이번 시간에는 html 문서에 이미지를 삽입하는 태그에 대해 살펴보겠습니다. 사실, 일반적인 커뮤니티 게시판이나 댓글을 달 때 많이 써본 분들도 있어서 익숙하겠지만, 세부적인 속성 값과 적용 방식에 대해서 다시 한번 제대로 배워본다는 느낌으로 편하게 살펴보시기 바랍니다. ○ 태그와 대표 속성 값 일단 기본적으로 이미지를 html 문서에 삽입하기 위해서는 태그를 사용합니다. 종료 태그 없이, 단독으로 사용하게 되죠. 하지만 대부분의 경우 태그만 단독으로 사용하는 경우는 없습니다. 바로 src라는 속성을 부여하게 됩니다. 이 src는 이미지의 경로를 의미합니다. 위에서 상대 경로로 경로 작성 속성 예시를 적어두었는데, 말 그대로 해당 태그가 작성되는 html 파일 경로를 기준으로 상대 경로를 작성해야 하기 .. 2. 내용 입력하기(3) - 표 생성하기 3 지금까지는 주로 html에서 테이블을 생성하고 내용을 작성한 다음, 셀을 합치는 기능까지 살펴보았습니다. 오늘은 CSS 레벨이 아닌 html 태그 레벨에서 스타일을 지정할 수 있는 태그를 살펴보려고 합니다. 바로 열을 중심으로 스타일을 묶어서 지정할 수 있는 과 태그입니다. ○ 열 단위의 스타일 적용 태그 - , 우선 특정 열을 기준으로 스타일을 일괄적으로 지정할 수 있는 태그는 과 입니다. 이 태그를 사용하려면 약간의 조건과 적용 구조를 알아두어야 합니다. 기본적으로 과 태그를 작성하는 위치는 바로 다음입니다. 즉, 태그로 표를 선언하고 제목을 지정한 다음 본격적으로 표의 내용(row를 정의하는) 태그가 작성되기 전에 작성해야 합니다. 즉, 표의 기본 생성 이전에 미리 전제 조건을 선언해 주는 것이라고.. 2. 내용 입력하기(3) - 표 생성하기 1 이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수만 입력해서 자유롭게 표를 만들어왔을 것입니다. 하지만 html로 표를 생성하는 방법은 생각보다 까다롭게 느껴질 것입니다. 하지만 목록 리스트 생성과 마찬가지로, 표 작성 방법은 다양한 방식으로 CSS와 함께 사용되면서 중요한 역할을 하기 때문에, 귀찮게 느껴지더라도 꼭 배워야 할 내용임을 기억해야 합니다. 우선 가장 기본적으로 알아야 할 것은 당연히 행(row)과 열(column)의 개념입니다. 가로(행)와 세로(열)가 만나서 생기는 하나의 데이터 영역은 셀(cell)이라고 칭하게 됩니다. 앞으로 표를 다루는 데 있어.. 2. 내용 입력하기(1) - 텍스트 입력 1 이제부터 본격적으로 html 웹 문서 내에 내용을 입력하는 과정을 살펴보겠습니다. 우선은, 가장 기본 중의 기본이라 할 수 있는 텍스트 입력에 대해 살펴볼 것입니다. 굳이 설명이 필요한 내용인가? 싶기도 하겠지만, 잘 기억해두어야 하는 내용이며 티스토리를 포함한 각종 html 편집 툴, 마크다운 문서를 사용하는 경우에도 크게 도움이 됩니다. ○ 태그 - 제목 텍스트 태그 , ... 형태로 사용하는 태그는 'heading', 즉 제목을 위한 태그입니다. 1 ~ 6까지의 숫자를 사용하며 1이 가장 큰 제목의 형태입니다. 제목을 넣읍시다 크기의 차이가 느껴지십니까? 간단하게 넘어가 봅시다 HTML 삽입 미리보기할 수 없는 소스 ○ 와 태그 - 단락, 줄 바꿈 사실 여러 텍스트 편집기를 사용하시던 분들이라면 은.. 1. HTML문서의 구조(2) - 시맨틱 태그 시맨틱(semantic) 태그는, 앞서 살펴본 필수 태그들과 마찬가지로 html 문서 구성에서 쉽게 찾아볼 수 있는 태그들입니다. 다만, 이를 시맨틱 태그로 따로 분류해 살펴보는 이유는 무엇일까요? 쉽게 말해 말 그대로, 이름만 보아도 그 의미를 유추할 수 있는 태그입니다. 하지만 단어의 의미론적인 정의를 차치하고서라도 굳이 시맨틱 태그를 써야 하는 이유는 아직 의문입니다. 사실, 그 이유는 간단하면서도 꽤나 추상적입니다. 결과적으로는 '구조화된 표준'에 가까운 문서의 구조를 정립해, 효율적인 개발과 사용을 꾀하기 위해서라고 볼 수 있죠. 예를 들어, 시맨틱 태그로 구분된 영역으로 작성된 html 문서를 보면 개발자 혹은 분석하는 주체는 해당 웹사이트의 구조를 손쉽게 파악할 수 있게 됩니다. 그럼 웹사이.. 이전 1 2 3 4 다음
