최코딩의 개발노트

유수봉 교수의 WEB-07 본문

수업/자바스크립트

유수봉 교수의 WEB-07

seung_ho_choi.s 2024. 4. 17. 20:33

 Lab_webForm_21

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> 최승호 : 웹 폼 연습-2</title>
</head>

<body>
    <H3>최승호의 Web Form 연습-2</H3>
    <HR>
    <form>
        A.색 선택 :<BR>
        __1.Text Color :
        <input type="color" onchange="document.body.style.color=this.value">
        __2.BackGround Color :
        <input type="color" onchange="document.body.style.background=this.value">
        <HR>
        B.시간 선택 :<BR>
        __3.Month : <input type="month" value="2024-04"><BR>
        __4.Week : <input type="week" value="2024-W15"><BR>
        __5.Date : <input type="date" value="2024-04-10"><BR>
        __6.Time : <input type="time" value="12:34"><BR>
        __7.DateTime : <input type="datetime-local" value="2024-04-10T12:34:56.00"><BR>
        <HR>
        C.값 입력<BR>
        __8.스핀 (0.0~10.0) : <input type="number" min="0.0" max="10.0" step="0.5" value="3.5"><BR>
        __9.슬라이드 바 : 0&deg; <input type="range" min="0" max="100" list="temp" value="3.5">100&deg;
        <datalist id="temp">
            <option value="10" label="Low">
            <option value="50" label="Medium">
            <option value="90" label="High">
        </datalist>
        <HR>
        E. 형식을 가진 텍스트 :<BR>
        _10.Hint :
        <input type="text" placeholder="한글이름"><BR>
        _11.Mail :
        <input type="email" placeholder="id@host">
        <input type="submit" value="전송"> <BR>
        _12. URL :
        <input type="url" placeholder="http://"><BR>
        _13. Tel :
        <input type="tel" placeholder="010-1234-5678"><BR>
        _14.Search :
        <input type="search" placeholder="검색어">
        <input type="button" value="검색"><BR>
        <HR>
        _15. Naver Search : <a HREF="Lab_Naver.html" target="_blank"><button type="button"> 네이버 검색 </button></a><BR>

        <HR>
</body>

</html>

 

CSS 

 

예제1

<!DOCTYPE html>
<html>
   <head><title>스타일 없는 웹 페이지</title></head>
   <body>
      <h3>CSS 스타일 맛보기</h3>
      <hr>
      <p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
   </body>
</html>

 

예제2

<!DOCTYPE html>
<html>
<head>
  <title>스타일을 가진 웹 페이지</title>
  <style>
      /* CSS 스타일 시트 작성 */
      body { background-color : mistyrose; }
      xxx { color : purple; }
      hr { border : 5px solid yellowgreen; }
      span { color : blue; font-size : 20px; }
  </style>
</head>

<body>
  <xxx>CSS 스타일 맛보기</xxx>
  <hr>
  <p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>

예제3

<!DOCTYPE html>
<html>

<head><title>&lt ;style &gt; 태그로 스타일 만들기</title>
  <style>
    body { background-color :  linen;
               color : blueviolet;
               margin-left : 30px;
               margin-right : 30px;  }
    h3 { text-align : center; color : darkred;  }
  </style>
</head>

<body>
  <h3>소연재</h3>
  <hr>
  <p>저는 체조 선수 소연재입니다. 음악을 들으면서
책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p>
</body>

</html>

예제4

<!DOCTYPE html>
<html>
<head><title>&lt;style&gt; 속성에 스타일 만들기</title>
  <style>
    p { color : red; font-size : 15px; } /* 모든 p 태그에 적용 */
  </style>
</head>
<body>
  <h3>최 승 호</h3>
  <hr>
  <p>오페라를 좋아하고</p>
  <p>엘비스 프레슬리를 좋아하고</p>
  <p style="color:blue">김치부침개를 좋아하고</p>
  <p style="color:magenta; font-size:30px">축구를 좋아…</p>
</body>
</html>

예제5

body { background-color : linen; color : blueviolet;
    margin-left : 30px; margin-right : 30px; }
h3 { text-align : center; color : darkred; }
<!DOCTYPE html>
<html>
<head><title>&lt;link&gt; 태그로 스타일 파일 불러오기</title>
    <link type="text/css" rel="stylesheet" href="mystyle5.css">
</head>
<body>
<h3>최승호</h3>
<hr>
<p>저는 개발자 최승호입니다. 음악을 들으면서 운동을 좋아합니다. 라면과 고기를 무척 좋아합니다.</p>
<hr>
<p style="color:green">안녕하세요
    <em style="font-size:25px">자식입니다</em>
</p>
</body>
</html>

예제6

<!DOCTYPE html>
<html>
  <head><title>부모 스타일 상속</title></head>
<body>
  <h3>부모 스타일 상속</h3>
  <hr>
  <p style="color:green">자식 태그는 부모의 스타일을
    <em style="font-size:25px">상속</em>받는다.
  </p>
</body>
</html>

예제7

<!DOCTYPE html>
<html>
<head><title>셀렉터 만들기</title>
<style>
h3, li              { color : brown; }                      /* 태그 이름 셀렉터 */
div > div > strong { background : yellow;   }   /* 자식 셀렉터 */
ul strong       { color : dodgerblue; }             /* 자손 셀렉터 */
.warning        { color : red;   }                          /* class 셀렉터 */
body.main       { background : aliceblue;   }       /* class 셀렉터 */
#list               { background : mistyrose;   }       /* id 셀렉터 */
#list span      { color : forestgreen;          }       /* 자손 셀렉터 */
h3:first-letter { color : red; }                            /* 가상 클래스 셀렉터 */
li:hover            { background : yellowgreen; }   /* 가상 클래스 셀렉터 */
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
    <div>2학기 <strong>학습 내용</strong>입니다.</div>
    <ul id="list">
        <li><span>HTML5</span></li>
        <li><strong>CSS</strong></li>
        <li>JAVASCRIPT</li>
    </ul>
    <div class="warning">60점 이하는 F</div>
</div>
</body>
</html>

예제8

<!DOCTYPE html>
<html>
<head><title>CSS3 색 활용</title>
<style>
  div {
     margin-left :          30px;
     margin-right :         30px;
     margin-bottom :    10px;
     color :                        white;          /* 모든 <div> 글자 색은 white */
}
</style>
</head>
<body>
  <h3>CSS3 색 활용</h3>
  <hr>
  <div style="background-color:deepskyblBue">   deepskyblue(#00BFFF)        </div>
  <div style="background-color:brown">              brown(#A52A2A)              </div>
  <div style="background-color:fuchsia">                fuchsia(#FF00FF)                </div>
  <div style="background-color:darkorange">     darkorange(#FF8C00)     </div>
  <div style="background-color:#008B8B">            darkcyan(#008B8B)           </div>
  <div style="background-color:#6B8E23">            olivedrab (#6B8E23)         </div>
</body>
</html>

예제9

<!DOCTYPE html>
<html>
<head><title>텍스트 꾸미기</title>
 <style>
  h3            { text-align : right; }                         /* 오른쪽 정렬 */
  span      { text-decoration : line-through; } /* 중간 줄 */
  strong    { text-decoration : overline; }         /* 윗줄 */
  .p1       { text-indent : 3em;                            /* 3 글자 들여쓰기 */
                  text-align : justify;  }                      /* 양쪽 정렬 */
  .p2       { text-indent : 1em;                            /* 1 글자 들여쓰기 */
                  text-align : center; }                        /* 중앙 정렬 */
 </style>
</head>
<body>
 <h3>텍스트 꾸미기</h3>
 <hr>
 <p class="p1">HTML의 태그만으로 기존의  워드 프로세서와 같이 들여쓰기, 정렬, 공백, 간격 등과 세밀한 <span>텍스트 제어</span>를 할 수 없다.  
 </p>
 <p class="p2">그러나, <strong>스타일 시트</strong>는 이를 가능하게 한다. 들여쓰기, 정렬에 대해서 알아본다
 </p>
</body>
</html>

예제10

<!DOCTYPE html>
<html>
<head><title>폰트</title>
<style>
  body {    font-family : "Times New Roman", Serif;
                font-size : large;      }
  h3        {   font : italic bold 40px consolas, sans-serif; }
</style>
</head>
<body>
  <h3>Consolas font</h3>
  <hr>
  <p style="font-weight:900">   font-weight 900 </p>
  <p style="font-weight:100">   font-weight 100 </p>
  <p style="font-style:italic">     Italic Style                </p>
  <p style="font-style:oblique">    Oblique Style           </p>
  <p>현재 크기의 <span style="font-size:1.5em">
                        1.5배</span> 크기로                                 </p>
</body>
</html>

예제11

<!DOCTYPE html>
<html>
<head><title>박스 모델</title>
<style>
body { background : ghostwhite; }
Span { background : deepskyblue; }
div.box {
    background : yellow;
    border-style : solid;
    border-color : peru;

    margin : 40px;
    border-width : 30px;
    padding : 20px;
}
</style>
</head>
<body>
    <div class="box">
        <span>DIVDIVDIV</span>
    </div>
</body>
</html>

예제12

<!DOCTYPE html>
<html>
<head><title>마우스 커서</title>
</head>
<body>
 <h3>마우스 커서</h3>
 아래에 마우스를 오려 보세요. 커서가 변합니다.
 <hr>
  <p style="cursor: crosshair">십자 모양 커서</p>
  <p style="cursor: help">도움말 모양 커서</p>
  <p style="cursor: pointer">포인터 모양 커서</p>
  <p style="cursor: progress">프로그램 실행 중 모양 커서</p>
  <p style="cursor: n-resize">상하 크기 조절 모양 커서</p>
</body>
</html>

 

느낀점

프로젝트를 하면서 적용하고 싶은 요소들이 몇개 있다!! 오늘도 역시 좋은 강의 였다 ㅎㅎ 

728x90

'수업 > 자바스크립트' 카테고리의 다른 글

유수봉 교수의 WEB-09  (0) 2024.05.02
유수봉 교수의 WEB-08  (0) 2024.04.25
유수봉 교수의 WEB-05  (0) 2024.04.04
유수봉 교수의 WEB-04  (0) 2024.03.28
유수봉 교수의 WEB-03  (0) 2024.03.21
'수업/자바스크립트' Related Articles more