본문 바로가기

Programming/HTML+CSS

 (76)
3. 입력 양식 작성(1) - 기본 form 태그 웹 상에서, 특정 값을 입력하여 서버나 DB로 값을 보내 처리하는 등의 동작을 위해서는 여러 가지 입력 폼(form)을 사용하게 됩니다. 아마 html에 조금 익숙하신 분들이라면 태그를 가장 먼저 떠올리실 분들이 많을 텐데, 일단 여기서는 간단하게 기본 폼 태그인 에 대해서 살펴보면서 기본적인 내용을 먼저 익히도록 하겠습니다. 기본 태그의 유형은, 태그 사이에 속성과 폼 관련 요소들을 삽입하는 형태로 구성됩니다. 폼 요소 위에서 기술된 '속성'은 몇 가지 대표적인 속성들이 있습니다. 하나씩 살펴보도록 하겠습니다. ○ name 이 속성은 JS로 폼을 제어하는 경우에 사용할 폼의 이름을 의미합니다. ○ action 태그의 내용을 처리할 서버 프로그램을 지정합니다. 예를들어 해당 폼을 실행했을 경우 서버로 내..
2. 내용 입력하기(6) - 하이퍼링크 삽입 하이퍼링크를 삽입하는 것은 대부분 크게 어렵지 않게 사용하시고 계실 것입니다. 그래도 html 태그 활용 중 의외로 중요한 부분이니 간단하게라도 짚고 넘어가도록 하겠습니다. ○ 와 href 속성 - 하이퍼링크 생성 하이퍼링크 생성에는 태그를 사용하게 됩니다. 여기에 href 속성 값으로 링크를 하고자 하는 url을 작성하게 되지요. 태그 사이에는 텍스트를 삽입하거나, 태그 등을 이용해 이미지를 삽입하게 됩니다. 그러면 해당 값을 클릭했을 때 링크를 띄워주게 되는 형태로 작동하게 됩니다. 텍스트 또는 이미지 url 여기에서 새로운 탭으로 링크를 출력하기 위해서는 target 속성을 사용해야 합니다. 새로운 탭에서 띄울 경우에는 _blank를 사용하게 됩니다. 이를 별도로 지정하지 않게 되면, _self 즉..
2. 내용 입력하기(5) - 오디오/비디오 삽입 이번 시간에는 html 웹 문서에서 오디오, 비디오 파일뿐만 아니라 기타 다양한 멀티미디어 타입의 파일을 첨부하는 방법에 대해서 살펴보겠습니다. 현재는 비슷한 동작을 하는 태그가 여러 가지 존재하는데, 실제로 자신이 즐겨 방문하는 웹페이지에서 어떤 식으로 첨부하는지 소스를 참고하는 것도 큰 도움이 될 것입니다. ○ 실제로 다음과 같은 방식으로 파일명을 입력하여 게시해 보도록 하겠습니다. ○ - 다양한 타입의 파일 삽입 태그는 일단 종료 태그 없이 단독으로 사용하며, 과거에 비디오 링크 등을 웹 게시판에 붙일 때 많이 쓰셨던 것을 기억하실 겁니다. 현재는 , , 등의 태그를 지원하지 않는 브라우저일 경우 사용하게 됩니다. src 속성을 이용해서 파일의 위치를 표시합니다. ○ , - HTML5에서의 비디오,..
2. 내용 입력하기(4) - 이미지 삽입 이번 시간에는 html 문서에 이미지를 삽입하는 태그에 대해 살펴보겠습니다. 사실, 일반적인 커뮤니티 게시판이나 댓글을 달 때 많이 써본 분들도 있어서 익숙하겠지만, 세부적인 속성 값과 적용 방식에 대해서 다시 한번 제대로 배워본다는 느낌으로 편하게 살펴보시기 바랍니다. ○ 태그와 대표 속성 값 일단 기본적으로 이미지를 html 문서에 삽입하기 위해서는 태그를 사용합니다. 종료 태그 없이, 단독으로 사용하게 되죠. 하지만 대부분의 경우 태그만 단독으로 사용하는 경우는 없습니다. 바로 src라는 속성을 부여하게 됩니다. 이 src는 이미지의 경로를 의미합니다. 위에서 상대 경로로 경로 작성 속성 예시를 적어두었는데, 말 그대로 해당 태그가 작성되는 html 파일 경로를 기준으로 상대 경로를 작성해야 하기 ..
2. 내용 입력하기(3) - 표 생성하기 3 지금까지는 주로 html에서 테이블을 생성하고 내용을 작성한 다음, 셀을 합치는 기능까지 살펴보았습니다. 오늘은 CSS 레벨이 아닌 html 태그 레벨에서 스타일을 지정할 수 있는 태그를 살펴보려고 합니다. 바로 열을 중심으로 스타일을 묶어서 지정할 수 있는 과 태그입니다. ○ 열 단위의 스타일 적용 태그 - , 우선 특정 열을 기준으로 스타일을 일괄적으로 지정할 수 있는 태그는 과 입니다. 이 태그를 사용하려면 약간의 조건과 적용 구조를 알아두어야 합니다. 기본적으로 과 태그를 작성하는 위치는 바로 다음입니다. 즉, 태그로 표를 선언하고 제목을 지정한 다음 본격적으로 표의 내용(row를 정의하는) 태그가 작성되기 전에 작성해야 합니다. 즉, 표의 기본 생성 이전에 미리 전제 조건을 선언해 주는 것이라고..
2. 내용 입력하기(3) - 표 생성하기 2 지난 시간에는 기본적인 표(table)의 생성과 영역의 구분에 대해서 학습했습니다. 표의 외형과 스타일을 지정하는 부분에 대해서는 추구 CSS 학습을 통해 진행할 예정이니 조금만 기다려 주세요. 2. 내용 입력하기(3) - 표 생성하기 1 이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수 nozeroslope.tistory.com 이번 시간에는, 표를 생성한 다음 각 행과 열의 셀을 합치는 기능에 대해서 살펴볼 것입니다. 워드나 엑셀, 스프레드 시트에서는 간단히 드래그하여 "합치기" 기능을 실행만 하면 되는 기능이지만, html 태그로 수행할 경우에는 다소 골치가 아..
2. 내용 입력하기(3) - 표 생성하기 1 이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수만 입력해서 자유롭게 표를 만들어왔을 것입니다. 하지만 html로 표를 생성하는 방법은 생각보다 까다롭게 느껴질 것입니다. 하지만 목록 리스트 생성과 마찬가지로, 표 작성 방법은 다양한 방식으로 CSS와 함께 사용되면서 중요한 역할을 하기 때문에, 귀찮게 느껴지더라도 꼭 배워야 할 내용임을 기억해야 합니다. 우선 가장 기본적으로 알아야 할 것은 당연히 행(row)과 열(column)의 개념입니다. 가로(행)와 세로(열)가 만나서 생기는 하나의 데이터 영역은 셀(cell)이라고 칭하게 됩니다. 앞으로 표를 다루는 데 있어..
2. 내용 입력하기(2) - 목록 생성하기 목록을 생성한다고 하면, 주로 글에서 순서대로 목록을 텍스트로 나열하는 기능만을 생각하실 것입니다. 물론, 텍스트와 콘텐츠의 줄 별 정렬을 위해서도 사용하지만 CSS를 통해서 내비게이션이나 콘텐츠의 배열을 구성하는 데 있어서도 응용하여 다양하게 사용되는 태그입니다. 이번 아티클에서는 html에서의 목록 태그를 살펴보도록 하겠습니다. ○ , - 순서가 있는 목록 만들기 은 기본적으로 ordered list의 줄임말입니다. 즉, 각 목록 콘텐츠에 순서(숫자나 알파벳 등)이 배정되는 리스트 목록을 의미합니다. 태그로 리스트를 생성하고 내부에 태그를 통해서 콘텐츠를 삽입하게 됩니다. 아래 예시를 살펴보겠습니다. 순서있는 리스트 생성하기 순서있는 리스트는 ordered list를 의미합니다. 첫 번째 입니다. 두..

티스토리툴바