티스토리

KA's Regalo

검색하기

블로그 홈

KA's Regalo

programacion.tistory.com/m

나의 공부를 위한 개인공간

구독자: 1

방명록 방문하기

주요 글 목록

[HTML/JSP] Form 작성시 자동 Submit 막기 Form 태그에 onSubmit="return false;" 추가 공감수 0 댓글수 0 2019. 10. 24.
[HTML/CSS] 이클립스에서 db연동하여 화면 구성하기 소스123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107Insert title here *{ margin: 0px; padding: 0px; } #header,#footer{ background-color: #ccc; height: 80px; } #header>h1{ text-align: center; } table{ width: 100%; } table td:nth-child(1.. 공감수 0 댓글수 0 2016. 9. 28.
[HTML/CSS] 애니메이션 소스1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 애니메이션 .menu1>div{ width: 200px; height: 100px; float: left; background-color: bisque; border-style: solid; border-color: white; border-width: 10px; border-radius: 50px; text-align: center; line-height: 100px; transition-duration: 1s; } .menu1>div:hover{ co.. 공감수 0 댓글수 0 2016. 9. 27.
[HTML/CSS] 기본적인 웹 화면 만들기 기본&그리드 이용한 웹 화면 만들기 1. 그리드를 사용하지 않은 웹 화면소스부분에는 구성을 보여준다우선 header부분으로 로고 이미지를 넣고menu부분에 메뉴를 4개를 넣어 a태그로 설정했다.그리고 왼쪽은 서브메뉴의 공간, 중앙엔 메인 내용, 오른쪽은 광고란으로 구성하고제일 하단에 footer부분으로 웹 화면을 구성한다.1234567891011121314151617181920212223242526272829303132 menu1 menu2 menu3 menu4 서브메뉴 환영합니다 정우성입니다.. :) 광고 오픈 API | 이용약관 | 개인정보취급방침 | 청소년보호정책 | 권리침해신고 | 고객센터 | E-mail수집거부정책 Copyright © Corp. All rights reserved. Colore.. 공감수 0 댓글수 0 2016. 9. 27.
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹 이번 포스팅은 그리드 파일을 이용한 것이 아닌 직접 작성하였다.전체 소스123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 Document *{ margin: 0px; padding: 0px; .. 공감수 0 댓글수 0 2016. 9. 27.
[HTML/CSS] 그리드(grid) 소스12345678910111213141516171819202122232425262728293031323334353637383940414243 Document 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 1 2 3 4 1 Colored by Color Scriptercs결과결과창은 grid_12 부분의 공간을 보여주는것이다 위의 소스에서 주석처리한부분을 풀어보면 12다음에 13은 아래로 한칸 내려가서 표현된다. * 해당 파일은 가 필요하다. grid.css를 다운받아야 한다. 공간할당은 아래와 같다.위에서부터 grid_1,grid_2,,,grid_12 순서이다. 공감수 0 댓글수 0 2016. 9. 27.
[HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경) 부분소스12345678910111213141516171819202122 GOOGLE menu1 menu2 menu3 menu4 환영합니다 한빛 교육센터에 오신것을 환영합니다 이곳에는 내용이 쏼라쏼라 정책 및 약관|회사소개|광고|마이비즈니스|제휴제안|이용약관|개인정보취급방침|청소년보호정책|고객센터 Colored by Color Scriptercs 부분소스1. PC 환경소스123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 @media screen and (min-width:1024px){ /*pc 환경*/ #header{ width: 100%; height: 80px; background-i.. 공감수 0 댓글수 0 2016. 9. 27.
[HTML/CSS] 위치 변경하기 기본 소스와 결과1234567891011121314151617181920212223242526272829303132333435363738 body{ margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; } div:nth-child(1){ background-color: lightpink; } div:nth-child(2){ background-color: lightgreen; } div:nth-child(3){ background-color: lightgray; } div:nth-child(4){ background-color: lightyellow; } div:nth-child(5){ background-color: lightblue; } 1 .. 공감수 4 댓글수 1 2016. 9. 26.
[HTML/CSS] 제휴 사이트 연결하기 제휴 사이트 연결하기예시로 네이버/다음/서울시청/현재 블로그 사이트를 들 것이다. 소스12345678910111213141516171819 #content a:after{ content: '-' attr(href); } 네이버 다음 서울시청 블로그 Colored by Color Scriptercs결과버튼을 클릭하면 해당사이트로 넘어간다 공감수 0 댓글수 0 2016. 9. 26.
[HTML/CSS] 숨김기능&선택지시자 (+와 ~의 차이) 기본 소스와 결과소스12345678910111213141516171819202122232425262728293031323334353637383940 div{ width: 100px; height: 100px; } div:nth-child(1){ background-color: lightpink; } div:nth-child(2){ background-color: lightgreen; } div:nth-child(3){ background-color: lightgray; } div:nth-child(4){ background-color: lightyellow; } div:nth-child(5){ background-color: lightblue; } 1 2 3 4 5Colored by Color Scrip.. 공감수 0 댓글수 0 2016. 9. 26.
[HTML/CSS] 상단 이미지 고정하기 소스* position: fixed; 가 고정하는 기능을 한다.* background-repeat: no-repeat; 는 이미지의 중복되는 것을 막아준다.1234567891011121314151617181920212223242526272829303132333435363738394041424344 body{ margin: 0px; padding: 0px; } #bar{ border: 1px red solid; } img{ width: auto; height: 80px; } #img01{ position: fixed; background-color: aquamarine; width: 100%; height: 250px; background-image: url(uuu.jpg); /*background-siz.. 공감수 0 댓글수 0 2016. 9. 22.
[HTML/CSS] 테이블 만들기(지시자) 소스 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 table{ width: 100%; } tr:first-child{ background-color: darkgray; } tr:nth-child(2n){ /*짝수*/ background-color: beige; } tr>th:nth-child(1){ width: 10%; } tr>th:nth-child(2){ width: 60%; } tr>th:nth-child(3.. 공감수 0 댓글수 0 2016. 9. 22.
[HTML/CSS] 지시자 우선순위 소스 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 *{ padding: 0px; margin: 0px; } div{ width: 100px; height: 100px; } /*띄어쓰기는 자식을 포함한 모든 자식들에게 적용 / 콤마는(,) 자신까지 */ body div{ border-bottom-color: black; border-width: 1px; border-style: solid; } body>div>div{ width: 50px; height: 50px; background-color: antiquewhite; } body>div>div>div{ width: 30.. 공감수 0 댓글수 0 2016. 9. 22.
[HTML/CSS] 이미지 넣기 소스 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 body{ margin: 0px; padding: 10px; } #logo{ width: auto; height: 80px; } #main{ width: 100%; height: auto; } #page1{ width: 80%; margin: auto; } #content,#aside{ display: inline-block; padding: 0px; border-width: 0px; margin.. 공감수 0 댓글수 0 2016. 9. 22.
[HTML/CSS] 마진과 패딩,border(color,style,width) 소스* margin / padding / border현재 소스에서 body 에 마진을 50px 만큼 준것을 표현한 그림이다.보더에 색을 주고 스타일로 solid를 설정하여 실선으로 표현됨을 알수있다. width에 10px만큼의 두께를 설정한다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 body{ margin: 50px; } h1{ background-color: red; height: 50px; /* width: 200px; 사이즈가 줄은 것 같이 보여도 한 블록을 차지하는건 이전과 동일하다. */ margin: 0px; padding: 0px.. 공감수 1 댓글수 0 2016. 9. 22.
[HTML/CSS] 블럭/인라인 블럭의 차이와 설정 오버라이드 소스* 지난 포스팅에서 잠깐 보여준 display: inline-block; / block; 차이 확인* 공통적으로 배경색을 지정하고 아래에 배경색을 다시 지정하면 오버라이드1234567891011121314151617181920212223242526272829303132333435363738 #in02,#box02,#box03{ background-color: bisque; height: 100px; width: 100px; } #box03{ display: inline-block; } #box03{ background-color: aquamarine; } #in02{ font-size: 30px; display: block; } box1 box2 box3 box3의 display가 인라인-블럭이라 ,.. 공감수 0 댓글수 0 2016. 9. 22.
[HTML/CSS] 마우스 올렸을 경우,클릭하고있는 경우,클릭 후 소스 * 마우스를 올리고 있는 동안 : hover* 마우스를 클릭하고 있는 동안 : active* 마우스를 한번 클릭 한 이후 : visited12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 li{ display: inline-block; background-color: cornflowerblue; color: white; } a{ color: aliceblue; } /* 마우스 오버(마우스 올렸을때) */ a:hover{ background-color: chocolate; } /* 마우스 클릭하고있을때 */ a:active{ background-color: aqua; } /* 마우.. 공감수 11 댓글수 0 2016. 9. 22.
[HTML/CSS] HTML에 CSS를 적용하는 방법 3가지 1. 인라인 방식- 해당태그의 style 속성에 넣는 방식이다. 예시)12345678910 제목1 제목에 따른 내용(문단)입니다. Colored by Color Scriptercs 결과)2. 내부의 스타일 태그 방식- 해당파일의 태그 안에 예시)1234567891011121314151617181920 h1{ background-color: yellow; text-align: center; } #content{ color: deeppink; font-style: italic; } 제목1 제목에 따른 내용(문단)입니다. Colored by Color Scriptercs결과) 3. 외부의 .css 파일 연결하는 방식- 해당파일 안이 아니라 별도의 .css 파일을 생성해 태그로 연결하는 방식이다. 예시).css.. 공감수 0 댓글수 0 2016. 9. 20.
[HTML]Form(input, select, checkbox, radio) 1234567891011121314151617181920212223242526272829303132333435 회원가입 id: pw: 취미: 농구 배구 야구 관심사: java web spring 하나만 선택: java spring web file Colored by Color Scriptercs 공감수 1 댓글수 0 2016. 9. 6.
[HTML]table만들기 * 테이블 : border="1" or "0" : 1은 테두리 표시 : 0은 테두리 표시하지 않음을 뜻한다 12345678910111213141516171819202122232425262728293031323334353637383940 1줄 2줄 3줄 1줄,1행 1줄 2줄 3줄 1줄,1행 2줄,1행 3줄,1행 1줄,2행 2줄,2행 3줄,2행 3줄,1행 1줄,2행 2줄,2행 3줄,2행 Colored by Color Scriptercs 공감수 1 댓글수 0 2016. 9. 6.
[HTML]이미지 불러오기 / 이동하기 * 이미지 불러오기 : 공감수 1 댓글수 0 2016. 9. 6.
[HTML]특수문자 엔티티(' < ',' > ',' " ',' " ') * 띄어쓰기 : * : >* & : &* " : " 123456789101112131415161718 상단바 제목 내용을 작성하는데 다음처럼 띄어쓰기를 하든 엔터를 적용 하든 없어 앤드 & == & " 큰따옴표 " Colored by Color Scriptercs 공감수 1 댓글수 0 2016. 9. 6.
[HTML]글자 폰트 * 이테리체 : & * 굵은 글씨 : & * 줄바꿈 : (없는 경우 줄바꿈이 되지않는다) & 1234567891011121314151617181920212223242526272829303132 내용을 작성하는데 다음처럼 띄어쓰기를 하든 엔터를 적용하든 소용없어 ------------------------------- 내용1 내용2 내용3 내용4 내용6 내용7 내용8 내용9 Colored by Color Scriptercs 공감수 1 댓글수 0 2016. 9. 6.
[HTML]제목 / 주석 / 타이틀바 * 타이틀바 : * 주석 : * 제목 : 12345678910111213141516 상단바 제목 제목1 제목2 제목3 제목4 제목5 제목6 cs 공감수 1 댓글수 0 2016. 9. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.