현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

인풋버튼관련해서 질문있습니다

익명 사용자의 이미지
글쓴이: 익명 사용자 / 작성시간: 토, 2017/03/11 - 12:27오전 

<!DOCTYPE html>
<html>
 
<head>
    <style type="text/css">
        .dark {
            background-color: black;
        }
    </style>
</head>
 
<body>
    <input type="button" onclick="document.body.className='dark'" value="dark" />
    <input type="button" onclick="document.body.className=''" value="reset" />
</body>
 
</html>

저렇게 버튼이 2개있고 이벤트라고하나요? 효과가 2개 있는데

버튼을 1개로 축소하고

백그라운드가 black일때 버튼이름이 reset
백그라운드가 white일때 버튼이름이 dark가 되도록 어떻게 하나요?

Forums: 
프로그래밍 QnA
shint의 이미지

글쓴이: shint / 작성시간: 토, 2017/03/11 - 2:02오전

즉시 갱신이 안되는데. 대충 맞춰보니 되네요.
정확한건 책 예제 참고해보세요.

 
<head>
    <style type="text/css">
        .dark {
            background-color: black;
        }
        .white {
            background-color: white;
        }
    </style>
</head>
 
<body>
 
<script language="JavaScript">
 
document.body.className = "white";
 
//백그라운드가 white일때 버튼이름이 dark가 되도록 어떻게 하나요?
//백그라운드가 black일때 버튼이름이 reset
//http://www.w3.org/TR/2010/WD-html-markup-20101019/body.html
 
function fn_toggle()
{
	var div = document.getElementById("btn1");
	if(document.body.className == "white")
	{
		div.value = "reset";
		document.body.className = "dark";
		return;
	}
	if(document.body.className == "dark")
	{
		div.value = "dark";
		document.body.className = "white";
		return;
	}
}
</script>
 
    <input type="button" onclick="fn_toggle();" value="dark" id="btn1" />
</body>
 

CSS 폰트 속성
http://cafe.naver.com/jjdev/1923

http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-style
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weight

CSS 로 하면. 크기가 맞다.
HTML Font 는 브라우저 마다. 크기가 다르다.

댓글 첨부 파일: 
첨부파일 크기
Package icon css_editor_HTML_소스로_디자인_편집하는_방법.zip7.27 KB

----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.

매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.