어뮤징 라이프

HTML에서 표를 만들때 사용하는 태그를 TABLE(테이블)태그라고 부르는데요, Table 태그는 행과 열을 구성하는 여러 태그들을 포함하여 표를 만들 수 있는 태그입니다. 지난 번, table 태그를 이용하여 표 만드는 법을 알아봤는데요, 오늘은 표에서 행과 열을 합칠수 있는 colspan 태그와 rowspan 태그에 대해서 알아보겠습니다. 태그를 이용하여 표 만들기가 아직 익숙하지 않으신 분들은 지난번 포스팅을 참조해주세요. http://amusinglife.tistory.com/62 표에서 각 셀을 만드는 태그는 태그와 태그입니다. 태그는 행을 추가하며 태그는 셀을 추가하는 태그를 뜻합니다. 표에서 행이나 열을 합칠때는 행 방향 또는 열 방향으로 합치게 되므로 태그와 태그를 사용하게 됩니다. 표에서..

HTML & WEB 2017. 4. 4. 14:00

HTML 코드를 작성하다 보면 형태의 태그를 많이 보셨을 텐데요, 이 SPAN 태그는 텍스트 단락 안에서 줄바꿈 가능 없이 특정 텍스트만 묶어서 스타일을 적용하려고 할 때 사용하는 태그입니다. 예를 들어, 텍스트 단락에서 특정 부분의 글자색을 지정하고 싶다면 SPAN 태그로 묶어서 색상을 지정할 수 있습니다. 아래와 같이 내용 태그를 활용하여 텍스트 단락의 일부분의 색상을 지정해보았습니다. ▲ html 무료 편집기 Notepad++ 를 사용하여 작성하였으며, notepad++ 다운 방법은 지난 포스팅을 참조해주세요. http://amusinglife.tistory.com/63 ▲ "날씨가 좋구나." 부분을 span 태그로 글씨 색상을 지정하여 위와 같이 표시된 것을 확인 하실 수 있습니다. 흔히 사용하지..

HTML & WEB 2017. 3. 28. 06:00

HTML5 에서 추가된 태그 중 태그가 있습니다. mark 태그는 인라인 태그이기 때문에 태그를 사용한 영역에만 적용됩니다. 따라서 선택한 부분에 형광펜 효과를 줄 수 있습니다. 즉, 특정 부분을 강조할 때 사용합니다. 기존에 html4 에서는 해당 효과를 넣기 위해서는 별도의 스타일시트를 사용해야 가능했지만, html5 에서는 태그로 쉽게 표시할 수 있습니다. [HTML MARK] 마크태그로 형광펜 효과내기 내용 ▲위와 같이 HTML 코드를 입력해보겠습니다. 강조를 원하는 내용에 ~ 태그를 입력해주세요. ▲확인한 결과 마크 태그를 입력한 부분에 노란색으로 강조 표시, 형광펜 효과가 나타났습니다. 마크 태그는 기본적으로 노란색으로 표시되며 background-color 속성을 사용하여 마크 태그의 배경색..

HTML & WEB 2017. 3. 13. 16:01

얼마 전, HTML 편집기 NOTEPAD++ 다운 방법 및 사용법에 대해서 포스팅했는데요, 웹사이트를 개발할 때 이런 HTML 편집기를 사용하여 코드를 작성한 후 브라우저에서 확인하고 수정할 부분이 있으면 다시 편집기로 수정하는 작업을 반복하여 웹사이트를 개발할 수 있습니다. 그러나 해당 방법으로 코드를 만들게 되면 아무래도 시간이 많이 소요되고 불편한 부분이 있겠지요?? 그래서 웹사이트를 개발할 때는 브라우저에 포함된 개발자 도구를 이용하여 소스를 수정하고 즉시 브라우저 화면에서 결과를 확인할 수 있어야 합니다. 익스플로우, 파이어폭스, 크롬 등 각 브라우저는 각각의 브라우저 개발자 도구를 갖추고 있습니다. 그중에서 오늘은 크롬 개발자도구 사용법에 대하여 알아보도록 하겠습니다. 크롬 개발자도구 사용법 ..

HTML & WEB 2017. 3. 13. 06:00

처음 HTML을 배우기 시작했을 때 간단하게 메모장으로 만들던 시절이 있었습니다. 그것만으로도 충분하다 생각했지만, notepad++ 프로그램을 알고 나서 신세계를 경험했죠. 메모장과 비교하면 훨씬 다양한 기능을 지원합니다. 그러니 우리는 HTML 문서를 만들 때 전문적인 HTML 편집기를 사용해야 합니다. 물론 무료 프로그램으로!! HTML 편집기 notepad++ 다운받기 검색창에 notepad++ 를 검색하고 무료 다운받기를 클릭합니다. 편집기는 한글을 지원하니 걱정 마시고 다운로드 받아주세요. 다운받은 파일을 실행하시면 설치가 시작됩니다. HTML 편집기 다운받기 참~ 쉽지요?? 실행해보니 아주 잘 되네요. HTML 편집기 notepad++ 기능 아래는 제가 주로 사용하는 기능입니다. 1. 책갈피..

HTML & WEB 2017. 3. 8. 20:05

TABLE 태그 ~ : 사이트 레이아웃을 잡거나 표를 만들 때 사용하는 태그이며, 테이블 태그는 태그, 태그, 태그를 함께 사용합니다. : 행을 추가하는 태그입니다. : 셀을 추가하는 태그입니다. : 행, 열의 머리말을 나타내는 데 사용합니다. 글씨를 가운데 정렬하고 굵게 나타냅니다. : 표의 테두리를 표시하는 태그로 숫자에 커질수록 표의 굵기도 굵어집니다. html table 태그로 표 만들기 html 편집기를 통해서 위와 같이 입력해 보았습니다. 어떻게 보이는지 확인해볼까요?? 위와 같이 잘 나오셨나요??^^ 처음 표를 만들 때는 태그와 태그가 헷갈릴 수 있는데요. 천천히 직접 만들어보시면 금방 쉽게 하실 수 있으리라 생각합니다! 그럼, table 태그로 표만들기 포스팅을 마치겠습니다. 도움이 되셨길..

HTML & WEB 2017. 3. 8. 15:24

HTML을 작성하다 보면 자주 쓰는 기초 태그가 있는데요, 오늘은 HTML 기초 명령어 태그, 태그에 대해서 알아보겠습니다. 태그 제목 : 제목을 표시하는 태그이며, 이 태그를 이용하면 일반 텍스트보다 크고 진하게 표시할 수 있습니다. 크기에 따라 ~ 까지 사용할 수 있는데, h1이 가장 크고 h6이 가장 작게 표시됩니다. 예시로 작성해보도록 하겠습니다. Amusing Life Amusing Life Amusing Life Amusing Life Amusing Life Amusing Life 그럼, 위와 같은 크기의 제목으로 나타납니다. 태그 글 : 웹 문서에서 가장 많이 사용되는 태그 중 하나이며, 텍스트 단락을 만들어 냅니다. 즉 줄 바꿈. 태그라고 부릅니다. 예시로 작성하겠습니다. Amusing L..

HTML & WEB 2017. 3. 7. 09:11

HTML5란 무엇인가?! HTML은 인터넷상에서 표현하기 위한 기본 프로그래밍 언어입니다. 이를 기반으로 화면에 글씨와 그림을 보여주는 것이 웹 브라우저라고 합니다. 즉, 우리가 보는 대부분의 인터넷 사이트가 HTML 기반으로 만들어졌다고 생각하시면 됩니다. HTML에는 각 버전이 존재하고 HTML5는 HTML의 최신 버전을 뜻합니다. HTML5의 기본 구조는 HTML과 크게 다른 점은 없습니다. 하지만 기존 HTML에 비해 표현할 수 있는 기능들이 다양해서 더 많은 표현을 하게 해줍니다. HTML5는 액티브X(Active X, 플래시(flash), 실버라이트(Silverlight), 자바FX(JAVA FX)와 같은 플러그인 기반의 각종 프로그램을 별도로 설치할 필요가 없이 영상, 음악 등을 손쉽게 보여..

HTML & WEB 2017. 2. 9. 12:41