본문 바로가기

Programming/HTML

(21)

HTML table colspan(가로) rowspan(세로) 합치기 HTML table 태그 합치는 예제 몇가지 2행 3열 table 태그이며 단순히 table 태그의 가장 기초적인 사용방법이며 table 태그에 border 속성을 사용해 table이 표시 되도록 작성 하였습니다. table 의 넓이는 최대치로 늘려 지도록 width 속성을 사용 했습니다. 2행3열 테이블 1 2 3 4 5 6 결과화면 html table 태그 속성중 넓이와 높이를 지정할 수 있는 width, height 속성이 존재 합니다. table 전체 크기는 200씩 지정 하였으며 3,4 tr 태그 높이만 좀 늘려 봤습니다. 2행2열 3,4 높이 조절 1 2 3 4 결과화면 table 태그에서 3번칸 글자만 align, valign 속성을 사용해 가운데 아래로 글자가 정렬 되도록 작성 하였습니다...

HTML5 마크업 요소 활용하기ㆍheaderㆍnavㆍsectionㆍasideㆍfooterㆍtime HTML5 마크업 요소 활용하기ㆍheaderㆍnavㆍsectionㆍasideㆍfooterㆍtime 웹사이트 화면을 구성하며 HTML div 태그만을 활용해 작성한 코드를 HTML5 마크업 요소를 변경하게 되면 브라우저에 어떠한 역활을 하는 웹페이지인지 목적을 알려줄 수 있다. CSS에서 HTML5 마크업 요소는 어떠한 방식으로 선택하는지 그리고 HTML5 마크업 요소는 HTML로 어떻게 표현하면 되는지 간단히 예제 소스를 작성하였으며 다음에 필요한 경우 제가 활용하기 위한 목적도 있습니다. HEADER 홈 1번 메뉴 2번 메뉴 3번 메뉴 LEFT CENTER 2021/04/16 RIGHT FOOTER 결과 화면 화면을 구성하며 이미 구성한 div 요소를 HTML5 마크업 요소로 변경하여 사용하지 않았는데..

HTML 기본 코드와 그냥 지나쳤던 HTML 태그들 HTML 기본 코드와 그냥 지나쳤던 HTML 태그들 HTML, CSS, PHP, My SQL, Mobile, JAVA 등 기존에 알고 있는 내용도 꽤 있고 공부도 했었지만 다시 한번 HTML부터 책을 읽으며 프로그래밍 관련 서적을 재미 삼아 읽고 있습니다. 개인적으로 작업을 진행하면서 HTML 코드를 기본적으로 많이 다루게 되는데 평소에 자주 잘 사용하지 않거나 특정 태그를 사용하긴 했지만, 그했지만 그 의미에 대해 전혀 신경 쓰지 않다 보니 지나쳤던 몇몇 HTML 태그들이 있습니다. 물론 검색만 조금 해본다면 쉽게 알 수 있는 내용이지만 개인적으로 HTML 기본 구문들과 HTML에서 잘 사용하지 않았거나 그 의미를 알면 좋은 HTML 태그 몇 가지를 정리해 볼까 합니다. 먼저 아래 HTML 코드와 같이..

이미지에 링크를 연결하는 방법_HTML 이미지맵 활용 이미지에 링크를 연결하는 방법_HTML 이미지맵 활용 웹사이트에서 HTML 코드를 이용해 이미지 파일에 링크를 연결할 수 있습니다. 기본적으로 이미지를 불러오는 img 태그를 이용해 이미지를 불러오고 해당 이미지를 감싸는 HTML의 a 태그를 연결해 이미지에 링크를 연결할 수 있습니다. 그런데 위와 같은 방법은 전체 이미지에 대한 링크를 거는 것이고 이미지의 특정 영역에 링크를 연결하고 싶다면 이미지를 부분적으로 잘라내거나 이미지를 백그라운드에 배치하고 이미지 위에 HTML 태그를 배치해 링크를 연결할 수 있습니다. 위와 같은 방법을 이용해 링크를 건다면 시간도 오래 걸리고 이미지를 자르거나 배치하는데 매우 번거로운 작업이 될 수 있습니다. 기본적인 방법을 통해 사이트를 구현하면 좋겠지만 이미 구현된 사..

HTML 바둑판 형식 div 태그 정렬 샘플 예제 몇가지(div 왼쪽, 오른쪽, 가운데 정렬) HTML 바둑판 형식 div 태그 정렬 샘플 예제 몇가지(div 왼쪽, 오른쪽, 가운데 정렬) 좋은 내용의 글을 작성하려고 하는 데 최근에 정말 많이 바쁜 것 같습니다. 언젠가 지금 하는 일들이 손에 익고 개인적인 실력이 더 늘어난다면 좀 더 유용한 글을 작성할 수 있을 것 같습니다. 여러 개의 div 태그를 이용해 전체 태그 안에 있는 div 태그들은 가운데 정렬하고 전체 div 태그 자체를 왼쪽, 가운데, 오른쪽으로 정렬하는 샘플 예제 div를 몇 가지 작성해 보려고 합니다. 개인적으로도 많이 사용하게 될 것 같아 기록을 남기는 의미도 있고 필요한 분들에게 도움이 되길 바라며 간단히 작성하였습니다. 글만으로는 어떤 내용인지 조금 헷갈리실 수 있으니 div 태그들의 이미지와 소스 코드를 첨부하였습니다...

HTML 작업을 편하게 하는 방법(크롬 개발자 도구를 활용하세요) HTML 작업을 편하게 하는 방법(크롬 개발자 도구를 활용하세요)HTML 코딩을 하면서 크롬 브라우저의 개발자 도구를 활용해 사용하는 방법에 대해서 작성해 보려고 합니다. HTML 작업 중 간단한 작업의 경우는 브라우저의 화면을 직접 보면서 CSS 작업까지 동시에 진행 할 때 개인적으로 자주 사용하는 방법입니다. HTML이나 CSS 작업의 경우 태그의 속성이 기억나지 않을때 자주 사용하는 방식이며 작성한 HTML 파일은 특정 프로그램이나 다른 도구를 이용하지 않아도 HTML 파일을 완성할 수 있는 장점이 있습니다. 직접 수정한 내용을 눈으로 보면서 확인하고 완성된 코드를 가지고 쓰다 보니 다시 코드를 수정하지 않아도 되는 장점도 있는 것 같습니다. 먼저 HTML 파일을 하나 만들어 보도록 하겠습니다. 윈..

HTML 파일 소스 코드 보는 방법 HTML 파일 소스 코드 보는 방법기본적인 프로그램 교육을 받거나 IT에 관심이 있으신 분들은 대부분 파일의 확장자가 html확장자에 대해서 굉장히 익숙 하실 겁니다. 하지만 프로그래밍 IT에 지식이 없으신 분들이 확장자가 html인것을 보면 무엇인지 잘모르실 겁니다. 간단하게 html확장자는 웹페이지를 보기위한 파일이라고 생각하시면 될것 같습니다. 사이트, 블로그, 까페등을 운영 하면서 html파일을 열어보는 일이 한두번은 생기게 됩니다. 여기서 html에 이론에 대한 설명은 모두 드리기 힘들것 같으니 단순히 HTML파일 확장자의 파일을 열어 소스코드를 확인하고 수정 하는 방법을 써볼까 합니다. html파일의 경우는 바로 아래 이미지에 나온것처럼 생겼습니다. 더블 클릭을 하거나 파일을 열어보면 바로 인..

HTML 글자크기, 글씨 진하게, 목록 표시, 테이블 태그, 이미지 태그 넣는 방법 HTML 글자크기, 글씨 진하게, 목록 표시, 테이블 태그, 이미지 태그 넣는 방법html 글자 크기 조절, 링크, 글자 강조하기 SOURCE.HTML html연습1 HTML html의 역사 팀버너스리에 의해서 처음으로 시작되었다. 처음에는 연구논문을 공유할 목적으로 시작되었다. 자바 에서는 서블릿/jsp 기술을 사용해서 다이나믹한 웹 페이지를 제작할 수 있다. 특히, jsp기술은 html포맷 기반에서 개발하기 때문에 훨씬 html친화적인 코드로 웹 개발이 가능 하다. 자바를 이용한 웹 개발은 오라클 에서 배울 수 있다. html의 문법 html의 태그 태그의 구분 결과 화면 HTML 리스트 표현 방법 SOURCE.HTML New Web Project 리스트 엘리먼트 ol태그 이번주 개봉영화 순위 매드맥..

이전 1 2 3 다음

티스토리툴바