'css' 태그의 글 목록 (3 Page)

728x90

문제

버튼을 클릭하면 프롬포트 창을 나타난다.
프롬포트 창에 구구단의 단을 입력하면 해당 구구단이 출력하도록 코드를 작성하라.

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gu {
            padding: 30px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button class="gu" onclick="clickGugudan()">구구단</button>
</body>
</html>
<script>
    function clickGugudan() {
        var name = prompt("구구단을 입력하세요");
        document.write("<h2><"+name+"단></h2>");
        document.write("<table style = 'border: 1px solid #ccc; border-collapse: collapse;'><tbody><tr>");
        for (var i=1;i<=9;i++){
            document.write("<td style = 'border: 1px solid #ccc; border-collapse: collapse; padding:10px;'>" + name + "*" + i + "=" + name * i + "</td>");
        }
        document.write("</tr></tbody></table>");
        
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
</body>
</html>
<script>
    var name = prompt("구구단 몇 단?");
    document.write("<table><tbody><tr>");
    for(var i=1;i<10;i++){
        document.write("<td>"+name+"*"+i+"="+name*i+"</td>");
    }
    document.write("</tr></tbody></table>");
</script>

728x90

저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] grid 실습 (30일차) (0)	2023.06.27
[CSS] 미디어 쿼리 실습 (30일차) (0)	2023.06.27
[CSS] 선택자 실습 (29일차) (0)	2023.06.26
[CSS] 컬러 실습 (29일차) (0)	2023.06.26
[CSS] Background 문제 (28일차) (0)	2023.06.24

728x90

문제 1

가상 클래스를 사용하여 첫 번째 이미지를 선택한다.
첫 번째 이미지 스타일은 테두리 색상을 빨간색, 두께를 2px로 지정한다.

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>  
  <style>
    img {
      margin-right:50px;
      border:1px solid #ccc;
      box-shadow: 2px 2px 5px #ccc;
    }
    img:nth-child(1) {
      border:2px solid red;
    }
  </style>
</head>
<body>
  <img src="../img/1.jpg" alt="">
  <img src="../img/2.jpg" alt="">
  <img src="../img/3.jpg" alt="">
</body>
</html>

문제 2

메뉴6의 오른쪽에 있는 테두리를 없앤다.
메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색은 검은색, 글자색은 흰색으로 변경한다.
마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경은 빨간색으로, 글자색을 흰색으로 변경한다.

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 2</title>  
  <style>
    .top-menu {
      margin:50px auto;
      padding:0;
      list-style:none;
      width:606px;
      height:35px;
      box-shadow:0 3px 4px #8b8b8b;
      background-color:#dadada;
    }
    .top-menu li {
      float:left;
      border:1px solid #929292;
      border-right: none;
    }
    .top-menu li a:link{
      color:black;
      text-decoration:none;
      text-align:center;
      display:inline-block;
      width:100px;
      height:35px;
      line-height: 35px;
    }
    .top-menu li a:visited {
      color:black;
    }
    li:last-child {
      list-style-type: none;
    }
    .top-menu li a:hover {
      background-color: black;
      color: white;
    }
    .top-menu li:last-child a:hover {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="top-menu">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
      <li><a href="#">메뉴5</a></li>
      <li><a href="#">메뉴6</a></li>
    </ul>
   </nav>
</body>
</html>

728x90

저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] 미디어 쿼리 실습 (30일차) (0)	2023.06.27
[CSS] 프롬포트 실습 (29일차) (0)	2023.06.26
[CSS] 컬러 실습 (29일차) (0)	2023.06.26
[CSS] Background 문제 (28일차) (0)	2023.06.24
[CSS] 스크립트 onclick 실습 (28일차) (0)	2023.06.23

728x90

문제

container의 자식 p태그의 글자 색 빨간색
p_color 클래스의 하위 모든 p태그 백그라운드 회색으로 변경
p_color 클래스와 같은 레벨(형제 요소)에 있는 div_color 클래스에 있는 p태그의 글자색을 파란색으로 변경
p_color 클래스의 자식요소에 있는 div_color 클래스의 모든 요소의 글자색을 초록색으로 변경
container 클래스의 모든 하위 p태그의 테두리를 1px, solid, black 로 변경

<body>
    <div id="container">
        <h1>HTML/CSS/JAVASCRIPT</h1>
        <p>HTML 태그는 쉽다.</p>
        <p>미디어쿼리는 중요하다.</p>
        <div class="p_color">
            <p>CSS는 어렵다.</p>
            <div class="div_color">
                <p>오라클은 재있다.</p>
                <h2>JQuery는 꿀잼이다.</h2>
                <span>JSP는 노잼이다.</span>
            </div>
            <p>JAVASCRIPT는 더 어렵다.</p>
        </div>
        <div class="div_color">
            <p>자바는 쉬웠다.</p>
        </div>
    </div>
</body>

코드

    <style>
        /* container의 자식 p태그의 글자 색 빨간색  */
        #container > p {
            color: red;
        }
        /* p_color 클래스의 하위 모든 p태그 백그라운드 회색으로 변경  */
        .p_color p {
            background-color: #ccc;
        }
        /* p_color 클래스와 같은 레벨(형제 요소)에 있는 div_color 클래스에 있는 p태그의 글자색을 파란색으로 변경 */
        .p_color ~ .div_color p {
            color: blue;
        }
        /* p_color 클래스의 자식요소에 있는 div_color 클래스의 모든 요소의 글자색을 초록색으로 변경 */
        .p_color > .div_color {
            color: green;
        }
        /* container 클래스의 모든 하위 p태그의 테두리를 1px, solid, black 로 변경 */
        #container p {
            border: 1px solid black;
        }
    </style>

출력 결과

728x90

저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] 프롬포트 실습 (29일차) (0)	2023.06.26
[CSS] 선택자 실습 (29일차) (0)	2023.06.26
[CSS] Background 문제 (28일차) (0)	2023.06.24
[CSS] 스크립트 onclick 실습 (28일차) (0)	2023.06.23
[CSS] Postion 실습 (27일) (0)	2023.06.22

728x90

문제 1

다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

 <body>
	<div id="container">
		<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
		<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>					
	</div>
 </body>

▶ 코드

  <style>
	body {
		margin: 0;
		background-image: url(../images/bg1.jpg);
		height: 200px;
	}      
	h1 {
		font-size: 20px;
	}
	p {
		line-height: 25px;
		font-size: 16px;
	}
	h1, p {
		color: white;
		width: 80%;
	}
	#container {
		background-color: gray;
		padding: 10px;
		height: 100%;
	}
  </style>

문제 2

다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

<body>
	<div class="container">
		<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
		<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>		
	</div>
</body>

▶ 코드

  <style>
	.container {
		width:500px;
		padding:10px;
		border:1px solid #ccc;
		background-color: black;
	}
	h1 {
		font-size: 17px;
	}
	p {
		font-size: 16px;
		line-height: 25px;
	}
	h1, p {
		color: white;
	}
  </style>

문제 3

다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

문서 전체의 배경색을 #02233b로 지정합니다.
#container의 배경색은 흰색으로 지정합니다.
#container의 배경 이미지는 반복하지 않고 오른쪽 아래에 고정합니다.
<h1> 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꿉니다.

<body>
  <div id="container">
    <h1>대학언론사 수습기자 모집</h1>
    <h2>신입생 여러분을 기다립니다</h2>
    <article>
      <h3>모집분야</h3>
      <ul>
        <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
        <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
        <li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
      </ul>
      <h3>혜택</h3>
      <ul>
        <li>수습기자 활동 중 소정의 활동비 지급</li>
        <li>정기자로 진급하면 장학금 지급</li>
      </ul>
    </article>
  </div>
</body>

▶ 코드

  <style>
		body {
			margin: 0;
			background-color: #02233b;
		}
		#container {
			margin:0 auto;	
			width:600px;
			height:700px;
			border:1px dotted gray;
			padding:20px;
			background: url(../images/mic.png) no-repeat right bottom;
			background-color: white;
		}
		img {	
			margin:30px 10px 30px 180px;
		}
		h1 {
			text-align:center;
			padding:20px;
			background-color: #004344;
			color: white;
		}
		h2 {
			text-align:center;
			font-style:italic;
			margin-bottom:50px;
		}
		h3 {
			color:#cf3b00;
		}
		ul{
			margin:20px;
      		list-style-type:none;
		}	      
		li {
			line-height:30px;
		}
  </style>

728x90

저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] 선택자 실습 (29일차) (0)	2023.06.26
[CSS] 컬러 실습 (29일차) (0)	2023.06.26
[CSS] 스크립트 onclick 실습 (28일차) (0)	2023.06.23
[CSS] Postion 실습 (27일) (0)	2023.06.22
[CSS] Float 실습 (27일차) (0)	2023.06.22

README

css

[CSS] 프롬포트 실습 (29일차)

문제

코드

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] 선택자 실습 (29일차)

문제 1

▶ 코드

문제 2

▶ 코드

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] 컬러 실습 (29일차)

문제

코드

출력 결과

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] (29일차)

[CSS] Background 문제 (28일차)

문제 1

다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

▶ 코드

문제 2

다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

▶ 코드

문제 3

다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

▶ 코드

'HRD_훈련 > 실습' 카테고리의 다른 글

+ Recent posts

티스토리툴바