K_blueprint

게시판 소개 HTML 페이지 만들기 본문

HTML & CSS & Java script/실습 문제 모음

게시판 소개 HTML 페이지 만들기

GODAGO 2024. 2. 21. 00:23
728x90
반응형

< 페이지 간략 소개 >

  • 본 게시판을 소개하는 간단한 HTML 페이지를 작성해 보겠습니다!
  • 본문의 제목에 마우스 커서를 올리면 사진이 출력됩니다.

< 코드 소개 >

 

(태그 간단 설명)

  • 다들 아실 거라 생각되지만 HTML 코드 파일을 만들고 !+Enter를 하게 되면 HTML의 기본 뼈대가 자동으로 만들어집니다!
  • <style> : 페이지의 전체적인 디자인을 조정할 수 있습니다.(배경색, 글꼴, 글의 위치, 글의 색 및 크기 등)
  • <script> : 해당 태그는 간단한 기능을 추가할 수 있는 태그입니다.
    (여기서는 본문의 <h3> 제목에 마우스 커서가 올라갔을 때 특정 이미지를 출력하는 기능을 포함하고 있습니다!

(코드별 세부 설명)

<style> /*배경색, 글꼴, 글의 위치, 글의 색 등을 지정하는 태그*/
        body { background-color: mediumslateblue; margin-left: 40px; margin-right: 40px;}
        h3 {text-align: center; color:darkslateblue}
        hr {height: 5; border: solid gray; background-color: grey;}
        span {color:brown; font-size: 20px;}
    </style>
  • body 태그 : 배경색 지정 / 왼쪽, 오른쪽의 공백을 지정합니다.
  • h3 태그 : 글자의 위치를 가운데로 / 글자의 색을 지정합니다.
  • hr 태그 : 라인의 높이 / 테두리 색상 / 채워질 색상을 지정합니다.
  • span 태그 : 색 / 폰트의 크기를 지정합니다.

 

<script>    /*기능을 추가할 수 있는 태그*/
        function show()
        {document.getElementById("fig").src="discord_cyber.png";}
        function hide()
        {document.getElementById("fig").src="";}
    </script>
  • function show() : 보여주는 기능으로 id를 "fig"로 지정한 "discord_cyber.png"이미지를 보여주는 기능입니다.
  • function hide() : 숨기는 기능으로 id를 "fig"로 지정한 "(공백)"을 대신 출력합니다 = 이미지 없음

 

<body>  <!--본문의 내용을 담는 태그-->
    <h3 onmouseover="show()"onmouseout="hide()"> 안녕하세요!</h3> <!--h3태그에 기능을 추가-->
    <hr>
    <div><img id="fig" src=""></div>    <!--사진이 나타날 위치를 지정-->
    <span>HTML 게시판의 첫 게시글입니다.</span> 
    해당 게시판에서는 이러한 실습 문제를 통해서 다양한 것들을 만들어 볼 예정입니다.
    <span>재밌게 봐주세요!</span>
  • onmouseover="show()" : (h3태그의 부분에) 마우스 커서가 올라갔을 때 "show()"기능을 수행합니다.
  • onmouseover="hide()" : (h3 태그의 부분에)마우스 커서가 올라가지 않았을 때 "hide()"기능을 수행합니다
  • img id="fig" src=" " : 이미지가 출력된다면 (div 태그의 부분에) 출력되도록 지정합니다. = 기본 상태는 공백입니다.

(페이지 모습)

페이지 출력 모습
"안녕하세요!"부분에 커서를 올렸을 때 이미지 출력

 

 

 

 

 

★ 해당 게시글은 "HTML5+CSS3+Javascript 웹 프로그래밍"을 참고하여 작성하였습니다! ★

728x90
반응형