『FR』

목록 태그웹 페이지에 빼놓지 않고 등장하는 요소이다.태그 이름설명ul순서가 없는 목록 태그ol순서가 있는 목록 태그li목록 요소 아래 예제를 보면 쉽게 이해할 수 있다. 목록요소 순서가 있는 목록 목록요소1 목록요소2 목록요소3 순서가 없는 목록 목록요소1 목록요소2 목록요소3 정의 목록 태그태그 이름설명dl정의 목록 태그dt정의 용어 태그dd정의 설명 태그특정 용어와 그 정의를 표할할 때 사용하는 태그이다. 아래 예제를 보면 쉽게 이해할 수 있다. 정의 용어 태그 정의 설명 태그1 정의 설명 태그2 정의 설명 태그3 정의 용어 태그 정의 설명 태그1 정의 설명 태그2 정의 설명 태그3

html 테이블 합치는방법 간단하게 예를들어 1교시와 3교시까지 (세로)를 합치려면 에 rowspan에 원하고자하는 길이만큼 입력해줍니다.간단하게 test 3개 합치기 와 같이 사용하 실 수 있습니다. 가로합치기는 로 사용할 수 있습니다. 시간 월요일 화요일 수요일 목요일 금요일 토요일 1교시 9:20-10:10 test 3개 합치기 2교시 10:20-11:10 test 2개 합치기 test 3개 합치기 3교시 11:20-12:10 4교시 12:20-13:10 5교시 13:20-14:10 test 3개 합치기 6교시 14:20-15:10 7교시 15:20-16:10 test 3개 합치기 8교시 16:20-17:10 9교시 17:20-18:10 또한 기본 스타일인 에 미리 원하고자하는 테이블형태를 입력해놔..

HTLM 이미지/글자 테두리 설정하는 방법 좌측 이미지와 같이 테두리가 없는 소스는 아래와 같다. 기본적으로 테두리는 border로 나타낸다. style="border: 테두리 크기px;" 크기를 조정하였다면 테두리를 설정한다. 테두리를 생성해 보기전에 선종류를 확인하자면선의 종류는 solid, dotted, dashed, double, groove, inset, outset, ridge 가 있다. 거기서 본인은 실선인 solid를 사용하였다.상기 배운 부분을 합치면 아래와 같다. 좌측의 이미지는 적용한 이미지이며, 글자 또한 테두리 설정 방법은 동일하다. 글자의 style일 부분에 동일하게 적용해 주면된다.

편집 프로그램 윈도우에서 문서 작성을 하려면 간편하게는 메모장만 있어도 문서를 작성할 수 있지만 다양한 기능들을 구성하고 표시하기 위해서는 MS워드나 아래아 한글과 같은 워드 프로세서들을 사용하면 훨씬 더 다양한 기능들을 간편하게 구성할 수 있다. 1. GR HTML Editor국산 HTML 편집 프로그램 중에서 드물게 WYSIWYG 기능과 HTML 편집 기능이 뛰어난 '무료' 프로그램이다. 2. 나모 웹에디터국내에서 가장 인기 있는 HTML 편집 프로그램으로써 그냥 일반적인 워드프로세서로 작업하는 것처럼 웹 페이지를 만들 수 있게 해놓은 것이 특징이다. 3. Microsoft Frontpage마이크로소프트에서 개발한 HTML 편집 프로그램이다. 4. 드림위버웹 디자이너들이 가장 즐겨 쓰는 대표적인 HT..

1. 이미지 클릭시 현재 열기 ex) 네이버 이미지 주소 - http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif 본인은 네이버를 연결해 보도록 하겠습니다. 블로그일 경우 HTML편집 부분에 아래와 같이 작성해주세요. 상기 부분과 같이 작성하면 아래와 같이 설정할 수 있습니다. 2. 이미지 클릭시 새창으로 열기[입력방법은 똑같습니다 태그안에 target="새창" 이미지 클릭시 새창으로 열리게 되는 태그를 추가합니다.] ex)상기 부분과 동일하게 네이버를 연결해 보도록 하겠습니다.HTML편집 부분에 상기 부분과 같이 작성해주면 아래와 같이 설정됩니다.

1. 아래링크를 클릭하여 해당 페이지로 넘어갑니다.http://csssprites.com/ 2. 해당 페이지의 '파일 선택'을 클릭 > 원하는 파일을 선택합니다. 저같은경우는 '1' 이라는 컨버스 로고 입니다. 3. 상기와 같이 합치고 싶은 이미지들을 모두 선택하였다면+options >> 을 클릭하여 원하시는 옵션으로 설정해 줍니다. 저같은 경우 두이미지 사이는 '0' , 이미지들은 다 top부분에 있는 것으로 생성하였습니다. 4. 오션을 다 조정하였다면 PNG 버튼을 클릭합니다.클릭을 하면 아래와 같이 이미지가 합성된것을 확인 할 수 있습니다. 5. 해당 이미지를 '우클릭' > '이미지를 다른 이름으로 저장' 하여 PC에 저장합니다. 어때요 참 쉽죠 ?

. HTML5UP (https://html5up.net/)모두 무료로 사용 가능 !! 기본적으로 반응형 웹 제작이 가능도하록 설정/ 공개되있어 사용하기 편하며, CCA3.0 라이센스로 개인용, 상업용으로도 사용가능!! BOOTSTRAP (http://getbootstrap.com/)기본적으로 반응형 웹 기반의 HTML , CSS, javascript파일을 제공하고 있으며, 데모 사이트를 제공하고 커스텀마이징 가능한 예제를 제공해 주고있다. LUISZUNO (http://luiszuno.com/blog)해당 사이트 또한 무료로 제공하고 있으나 트위트, 페이스북에 해당 사이트를 공유해야 사용이 가능하다. 상기 본인은 HTML5UP을 이용하였다

웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 방법이다. HTML5에서는 아래와 같이 사용한다. 예를 들어 본인의 이미지가 images/pic01.png에 있다면 위와 같이 설정할 수 있다. 수정 전 수정 후 참고로 CSS에서는 아래와 같이 사용한다.img {max-width: 100%;height: auto;}