반응형
Hello JavaScript!
자바스크립트의 기초를 배워봅시다!

화면 출력하기 : alert ( )

alert ( ) 명령문은 말 그대로 알림창을 띄우는 명령어 입니다.

hello JavaScript 을 띄워볼까요?

// TODO : 화면 출력 방법 (결과 확인용)
// 1) 사용법 : alert("문자열");
// 코딩 용어 : ;(세미콜론), :(콜론), &(엔퍼센트)
// 자바스크립트(js) 명령문(문장)의 끝에는 ;(세미콜론) 붙임(생략가능)
alert("Hello JavaScript");

 

화면 출력하기 console.log()

console.log() 명령문은 브라우저 내 개발자 콘솔창에서 결과값을 확인할 수 있습니다.

console.log("Hello JavaScript"); 를 입력하고 출력해봅시다.

브라우저 빈 화면에 오른쪽 마우스를 클릭하고 검사버튼을 누릅니다 그럼 화면 오른쪽에 창이 뜨는데, 콘솔 버튼을 누르면 결과값이 출력된 것을 알수있습니다.

자바스크립트의 텍스트
  • 자바스크립트는 대/소문자를 구별합니다.
  • Apple, apple, APPLE 모두 다른 변수 이름으로 간주합니다.

 

자바스크립트의 주석

JS는 두 가지 스타일의 주석을 지원합니다. 

// 한 줄 주석

/* 이 것도 주석입니다. */

/*
 * 여러 줄 주석
 * 각 행의 맨 앞의 *은 꼭 써야하는 것은 아님
 */

 

리터럴

리터럴이란 프로그램 안에 직접 쓴 데이터 값을 말합니다. 다음은 모두 리터럴 입니다.

 
12                      // 숫자 12
1.2                     // 숫자 1.2
"hello JavaScript"      // 문자열
'Hi'                    // 다른 문자열
true                    // bool 값
false                   // 다른 bool 값
null                    // 객체가 존재하지 않음

 

식별자와 예약어

식별자 = 이름

자바스크립트에서 식별자는 상수, 변수, 프로퍼티, 함수, 클래스의 이름에 사용합니다.

자바스크립트의 식별자는 반드시 글자(알파벳), 언더바(_), 달러 기호($) 로 시작해야합니다. 

그 뒤에는 글자, 숫자, 밑줄, 달러기호를 쓸 수 있습니다.

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

'JavaScript > JS 이론' 카테고리의 다른 글

변수와 상수에 데이터 담기  (0) 2024.05.28
템플릿 문자열  (0) 2023.08.31
[JS] 문서 객체 모델 (DOM)  (0) 2023.08.22
[JavaScript] 자바스크립트의 기본 입출력방식  (0) 2023.08.16
반응형
문서 객체 모델(DOM, Document Object Model)

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

 

  • HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음
  • DOM은 웹 문서를 하나의 객체로 정의
  • 웹 문서를 이루는 텍스트, 이미지, 표 등의 모든 요소도 각각 객체로 정의

웹 문서 전체 - Document 객체

삽입한 이미지 - image 객체 

 

DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리함.

 

DOM 트리

부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.

DOM 트리에서 가지가 갈라져 나간 항목을 노드(node)라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다고 해서 루트(root)노드라고 한다.

 

DOM을 구성하는 기본 원칙은 다음과 같다.

  • 모든 HTML 태그는 요소노드임
  • HTML 태그에서 사용하는 텍스트 내용은 자식노드인 텍스트 노드임
  • HTML 태그에 있는 속성은 자식 노드인 속성 노드임
  • 주석은 주석 노드임
반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript > JS 이론' 카테고리의 다른 글

변수와 상수에 데이터 담기  (0) 2024.05.28
템플릿 문자열  (0) 2023.08.31
[JS] 기본이론  (0) 2023.08.23
[JavaScript] 자바스크립트의 기본 입출력방식  (0) 2023.08.16
반응형

자바스크립트의 기본 입출력방식에는 여러가지가 존재합니다.

아래의 내용은 JS의 기본입출력 방식에 대해 설명하겠습니다. 😊

알림창 출력하기

첫 번째로는 알림창을 출력하는 방법입니다.

알림창은 가장 많이 사용하고 간단한 대화상자입니다. 알림창은 간단한 실행결과를 표시할 때 사용합니다.

알림창 출력의 기본은 아래와 같습니다.

 

알림창 출력
alert("메세지");

알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 홑따옴표 또는 쌍따옴표와 함께 출력할 메시지를 입력해주시면 됩니다.

 

한 번 실습을 해볼까요?

"안녕하세요" 라는 메시지를 출력해보겠습니다.

왼쪽은 코드값을 입력한 결과이고 오른쪽은 실행결과입니다. 메세지가 뜬 것을 볼 수 있습니다.

 

확인 창 출력하기

알림창은 단순히 메시지를 보여주는 기능을 하지만 확인 창은 사용자가 확인/취소 버튼을 직접 클릭할 수 있습니다.

그러면 선택한 결과에 맞게 프로그램이 작동합니다.

확인 창 출력하는 기본코드는 다음과 같습니다.

확인창 출력
confirm("메세지");

확인 창 출력하는 방법은 confirm("메세지"); 으로 입력합니다.

간단한 예제를 해보겠습니다.

confirm() 을 사용하여 "이미지를 변경하시겠습니까?" 라는 창을 출력해봅시다.

 

입력 창 만들기

프롬프트 창(입력 창)은 텍스트 필드가 존재하는 작은 창입니다. 텍스트 필드안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있습니다.

아래는 프롬프트 창 생성방법 입니다.

프롬프트 창에서 입력받기
prompt(메시지) 또는 prompt(메시지, 기본값)

입력 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있습니다. 기본값을 지정하면 텍스트 필드안에 기본값이 표시 됩니다. 기본 값을 지정하지 않으면 빈 텍스트 필드로 표시됩니다.

 

 

 

document.write() 문

documnet.write()문은 단순히 브라우저 화면에서 결과값을 확인하는 용도로 사용합니다.

documnet.write()문의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있습니다. 괄호안에서 " " 나 ' ' 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됩니다. 또한 따옴표 안에는 HTML 태그도 사용가능합니다.

그리고 웹 브라우저 화면에 표시할 내용을 변수를 섞어서 나타낼 수 있습니다. 이 때는 + 연산자를 이용하면 되는데요, 여기서 +는 더하다는 뜻이 아니라 연결한다라는 연결 연산자 입니다.

다음 실습예제는 name 변수에 저장된 값과 텍스트를 연결해서 표시하는 예제를 실습해보겠습니다.

콘솔 창에 출력하는 console.log()문

console.log()문은 괄호안에 내용을 콘솔 창에 표시합니다.

콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어있습니다. 이 콘솔창에서 소스코드의 오류를 발견하거나 변수값을 확인 할 수도 있습니다.

console.log() 괄호안에는 변수가 들어갈수도, 따옴표 사이에 표시할 텍스트로 넣을 수 있습니다. 이 때 따옴표 안에는 HTML 태그는 들어갈 수 없습니다.

예제를 한 번 실습해보겠습니다. 프롬프트 창에서 이름을 입력받아 콘솔 창에 표시하는 예제를 실습해보겠습니다.

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

'JavaScript > JS 이론' 카테고리의 다른 글

변수와 상수에 데이터 담기  (0) 2024.05.28
템플릿 문자열  (0) 2023.08.31
[JS] 기본이론  (0) 2023.08.23
[JS] 문서 객체 모델 (DOM)  (0) 2023.08.22
반응형
keyframs 함수
/* 전체 div */

#container {
  width: 200px;
  margin: 30px auto;
}

/* 애니메이션 효과 부여 대상 */
img {
  /* 외곽선 */
  border: 1px solid #cccccc;
  /* 둥근 사각형 */
  border-radius: 50%;
  /* TODO 애니메이션 효과 부여(함수 사용) */
  /* TODO : infinite : 무한정 */
  animation: rotateBear 2s infinite;
}

/* css 함수 */
/* @keyframes 함수명 */
/* from {} : 최초 실행위치 */
/* 50% :     중간 실행위치 */
/* to {} : 마지막 실행위치 */
@keyframes rotateBear {
    /* TODO : 음수 : 왼쪽으로 회전, 양수 : 오른쪽으로 회전 */
    /* TODO : rotateY(각도0~360) : Y축으로 기준으로 회전  */
    /* TODO : perspective(픽셀) : 원근감  */
    /* TODO 사용법 : transform: perspective(위치) rotateY(0~360); */
  from {
    transform: perspective(200px) rotateY(0deg);
  }

  50% {
    transform: perspective(200px) rotateY(-180deg);
  }

  to {
    transform: perspective(200px) rotateY(-360deg);
  }
}

[실행결과]

이동 애니메이션
/* 부모 div */
#container {
  width: 800px;
  height: 200px;
  margin: 20px auto;
}

/* 1st 2nd 3rd box : 자식 div */
.origin{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    /* 왼쪽배치 : 가로배치 == display:inline-block; */
    float: left;
    /* 바깥여백 */
    margin: 40px;
}

/* 손자 div들 : 자식 div 아래에 있는 div들 */
.origin > div {
  width: 100px;
  height: 100px;
  background-color: orange;
}

/* TODO : 이동 애니메이션 부여 */
/* 손자div1 : #movex에 마우스에 올라갔을때 */

#movex:hover{
  /* 이동효과 */
  /* 사용법 : transform: translateX(x좌표거리); */
  transform: translateX(50px);
}

/* 2nd 손자 */
#movey:hover{
  transform: translateY(50px);
}

/* 3rd 손자 */
#movexy:hover{
  transform: translate(50px, 50px)
}


[실행결과]

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

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션  (0) 2023.08.16
[CSS] one true layout  (0) 2023.08.14
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
반응형
transition 속성
  • transition-property : 애니메이션 효과를 부여할 속성들을 나열
  • transition-duration: 속성들의 지속시간(속도)

예제) 박스에 마우스를 올리면 애니메이션 효과가 나타나게 적용

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/07_ant_transition.css">
</head>
<body>
    <div class="box1"></div>
</body>
</html>
.box1 {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  /* 외곽선 */
  border: 1px solid black;
  /* 바깥여백 */
  margin: 20px auto;
    /* TODO : 애니메이션 추가 박스 클레스에 생성 */
    /* transition-property: 애니메이션 효과를 부여할 속성 나열 */
    /* 사용법 : transition-property: 속성1, 속성2, .... */
    transition-property: width, height;
    /* 지속시간 : 애니메이션 효과를 지속할 시간 */
    /* s(second) 초, ms(mili second) 1/1000초 */
    /* 사용법 : transition-duration: 지속시간, 지속시간; */
    transition-duration: 2s, 1s;
}




/* 박스의 마우스가 위로 올라가면 :hover */

.box1:hover {
  /* 가로 100px -> 200px */
  width: 200px;
  /* 세로 100px -> 120px */
  height: 120px;
}

transition 축약식

transition : 속성적용범위 속도차이효과 지속시간

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/08_ani_transition2.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>
.box{
    width: 100px;
    height: 100px;
    /* 가로 중앙 */
    margin: 50px auto;
    border: 1px solid black;
    background-color: orange;
    /* 애니메이션 구현(축약식) */
    /* all : 모든 속성에 애니메이션 부여 */
    /* ease-in : 시작(천천히 진행)-끝(빠르게 진행) : 속도차이가 있는 속성 */
    /* 2s : 2초(지속시간) */
    /* 사용법 : tansition : 속성 속도차이효과 지속시간 */
    transition: all ease-in 1s ;
}

.box:hover{
    width: 200px;
    height: 200px;
    background-color: red;
}

[실행결과]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/09_ani_transition3.css">
</head>
<body>
    <div class="bg-tr"></div>
    <div class="border-tr"></div>
</body>
</html>
/* 박스 2개 공통속성 디자인 */
div {
  width: 100px;
  height: 100px;
  margin: 30px;
  /* 좌측 배치 : 가로 배치(display: inline-block) */
  float: left;
}


/* 1st 박스 */
.bg-tr {
  background-color: skyblue;
/* TODO : 애니메이션 부여 */
/* ease : 시작(천천히) 중간(빠르게) 끝(천천히) */
transition: all ease 1s;
}

.bg-tr:hover{
    background-color: blue;
}

/* 2nd 박스 */
.border-tr {
  background-color: orange;
  /* linear : 등속 >> 시작 - 중간 - 끝 속도가 같음 */
  transition: all linear 1s;
}

.border-tr:hover{
    background-color: red;
    /* border-radius:50% = 원 */
    border-radius: 50%;
}

 

<실행결과>

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

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션 (2)  (0) 2023.08.16
[CSS] one true layout  (0) 2023.08.14
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
반응형

인터넷에서 볼 수 있는 폼(form)

 

인터넷에서 자주 볼 수 있는 폼 형식 입니다.

 

아이디와 비밀번호를 입력하거나 회원가입을 할 때 개인정보를 입력하는 요소들을 모두 폼이라고 할 수 있습니다.

 

폼을 만드는 <form> 태그

 

폼을 만드는 가장 기본적인 태그로 기본형과 같이 <form> </form> 태그 사이에 여러가지 폼 요소를 넣습니다.

기본형
<form [속성="속성값"]> 여러 폼 요소 </form>

 

폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

 

하나의 폼 안에서 여러 구역을 나눌 때 <fieldset> 태그를 사용합니다.

예를 들어 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나누어 표시하면 사용자가 입력하기도 편리하고 화면도 깔끔하게 표시할 수 있습니다.

기본형
<fieldset [속성="속성값"]> </fieldset>

 

<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있습니다.

 

기본형
<fieldset>
  <legend> 그룹 이름 </legend>
</fieldset>
<h3>주녘 쇼핑몰 주문서</h3>
    <form action="">
      <fieldset>
        <legend>상품선택</legend>
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
      </fieldset>
    </form>

폼 요소에 레이블을 붙이는 <lable> 태그

lable 태그는 input 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다.

lable 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹브라우저가 알 수 있습니다.

 

기본형
<lable> 레이블 명 <input> </label>
  <h3>주녘 쇼핑몰 주문서</h3>
    <form action="">
      <fieldset>
        <legend>개인정보</legend>
        <label for="user_name">이름 <input type="text" id="user_name"></label><br>
        <label for="user_address">연락처 <input type="text" id="user_address"></label>
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
        <label for="address">이름 <input type="text" id="address"></label><br>
        <label for="message">배송 메시지 <input type="text" id="message"></label>
      </fieldset>
    </form>

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

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 표 만들기  (0) 2023.08.15
[HTML] 서식/목록 태그  (1) 2023.08.13
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
반응형

HTML에서 표를 만드는 방법에 대해 알아보자!

<table> 과 <caption> 태그

표를 생성할 때 <table> </table> 태그를 표시하고 사이에 표와 관련된 태그를 모두 넣습니다.

만약 표에 제목을 표시하고 싶으면 <table>태그 바로 아래에 <caption>태그를 사용하면 됩니다.

<caption> 태그를 사용하면 표의 위쪽 중앙에 제목이 나타납니다.

<table>
        <caption>표 제목</caption>
</table>

 

 

행을 만드는 <tr> 셀을 만드는 <td>, <th>

단순히 <table> 태그만 작성하면 표가 완성되지 않습니다. table 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지를 입력해주어야 합니다. <tr> 태그는 행을 생성하고, <td> 태그는 행 안에 있는 셀을 만들어 줍니다.

즉, <table> 태그 안에는 <tr>, <td> 태그가 있어야 하나의 표를 만들 수 있습니다.

    <table>
        <caption>표 제목</caption>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </table>

표가 생성된 결과물

또한 표의 제목 행에 셀을 만들경우에는 <th> 태그를 이용합니다. <th> 태그를 사용하면 내용은 진하게 표시되고 셀 안에서 중앙에 배치되므로 눈에 잘 띄게 됩니다.

제목 행에 <th>를 사용하면 강조가 된다

 

<thead>, <tbody>, <tfoot> 태그

일부 표에는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래에 합계나 요약 등의 내용을 표시하기도 합니다.

이런 종류의 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 작성하는 것이 좋습니다.

이럴 때 <thead>, <tbody>, <tfoot> 태그를 사용하면 됩니다.

행이나 열을 합치는 rowspan, colspan

표는 tr 태그와 th태그 td 태그를 이용하여 여러가지 셀로 구성됩니다.

경우에 따라 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있습니다. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td> 태그나 <th> 태그안에서 이루어집니다.

행을 합치려면 rowspan 속성을, 열을 합치려면 colspan 속성을 사용하면됩니다.

 

 기본형
<td rowspan="합칠 셀의 개수"> 셀의 내용 </td>
<td colspan="합칠 열의 개수">  셀의 내용</td>
<body>
    <h2>주녘의 과일 가게 상품 구성</h2>
    <!-- 표 만들기 -->
    <table>
      <caption>
        선물용과 가정용 상품 구성
      </caption>
      <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>개수</th>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>
    </table>
  </body>

 

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

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 폼 삽입하기  (0) 2023.08.15
[HTML] 서식/목록 태그  (1) 2023.08.13
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
반응형
one true layout ?
현대 홈페이지를 만드는 전형적인 구조

<body>
    <!-- TODO : one true layout == 현대 홈페이지를 만드는 전형적인 구조 -->
    <!-- container == 1 page 디자인 -->
    <div id="container">
        <!-- 머리말 시작 -->
        <header id="header">
            <h1>사이트 제목</h1>
        </header>
        <!-- 머리말 끝 -->

        <!-- 사이드메뉴 시작 -->
        <aside id="sidebar">
            <h2>사이드바</h2>
        </aside>
        <!-- 사이드메뉴 끝 -->

        <!-- 본문 시작 -->
        <section id="contents">
            <h2>본문</h2>
        </section>
        <!-- 본문 끝 -->

        <!-- 꼬리말 시작 -->
        <footer id="footer">
            <h2>꼬리말</h2>
        </footer>
        <!-- 꼬리말 끝 -->
    </div>
</body>
/* 여백초기화 */
*{
    padding: 0;
    margin: 0;
}

/* 전체 페이지 크기 정하기 */
#container{
    /* 가로 */
    width: 1200px;
    /* 중앙 정렬 : auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/
    /* 사용법 : margin : 상/하 좌/우(auto) */
    margin: 20px auto;
}

/* 머리말 */
#header{
    /* 세로 */
    height: 120px;
    /* 임시 */
    background-color: gray;
}

/* 디자인 계산 : 전체 width 1200 == 사이드(300px)+본문(900px) */

/* 사이드 바(좌측메뉴) */
#sidebar{
    /* 가로 */
    width: 300px;
    /* 세로 */
    height: 600px;
    /* 배경색(임시) */
    background-color: aqua;
    /* 좌측 배치 */
    float: left;
}

/* 본문(우측 배치) */
#contents{
    /* 가로 */
    width: 900px;
    /* 세로 */
    height: 600px;
    /* 배경색(임시) */
    background-color: palevioletred;
    /* 우측 배치 */
    float: right;
}

/* 꼬리말 */
#footer{
    /* float 영향제거 */
    clear: both;
    /* 세로 */
    height: 100px;
    /* 임시 */
    background-color: blueviolet;
}
반응형
저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션 (2)  (0) 2023.08.16
[CSS] 애니메이션  (0) 2023.08.16
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
반응형

주요 서식(Texts) 태그

<h1> ~ <h6> 태그
heading : 제목
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
   <h1>안녕하세요</h1>
   <h2>안녕하세요</h2>
   <h3>안녕하세요</h3>
   <h4>안녕하세요</h4>
   <h5>안녕하세요</h5>
   <h6>안녕하세요</h6>
  </body>
</html>

<p>
paragraph : 문단
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
    <h1>제목 태그 테스트입니다.</h1>
    <p>문단 태그 테스트입니다.</p>
    <p>문단 태그 테스트입니다.</p>
  </body>
</html>

<br>
break : 줄바꿈
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
 <p>줄바꿈은 <br> br태그를 이용하여 줄바꿈 한다.</p>
  </body>
</html>

<hr>
horizontal rule : 가로줄
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
 <p>줄바꿈은 <br> br태그를 이용하여 줄바꿈 한다.</p>
 <hr>
 <p>가로줄 아래에 쓰는 글</p>
  </body>
</html>

<pre>
preformatted text : 정의된 형식
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
 <pre>
    pre 태그를 테스트하는 중
                  pre 요소 내 텍스트는
    고정폭 글꼴(fixed-width font)을 사용하여 표현
    띄어쓰기
    줄바꿈이 모두 그대로
    나오게 됩니다.
 </pre>
  </body>
</html>

<div>
division : 그룹(블록)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <div id="black1">블록 구역 1</div>
    <br />
    <div id="black2">블록 구역 2</div>
  </body>
</html>

<span>
그룹, 인라인 특성을 가짐
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <span style="background-color: red;">안녕</span>
    <span style="background-color: yellow;">반가워</span>
    <span style="background-color: blue;">하이</span>
  </body>
</html>

<strong> (b)
strong : 강조, bold : 굵은 글씨
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, exercitationem consequatur repellat vel quo
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      necessitatibus nulla consequuntur illum.
    </p>
  </body>
</html>

<em> (i)
emphasized text : 강조, itallic : 기울임체
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, <em> consequatur repellat vel quo</em>
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      necessitatibus nulla consequuntur illum.
    </p>
  </body>
</html>

<mark>
marked, highlighted : 형광펜
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, <em> consequatur repellat vel quo</em>
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      <mark>necessitatibus nulla consequuntur illum.</mark>
    </p>
  </body>
</html>

<small>
덧 붙이는 글, 저작권, 법률 표기 등...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, <em> consequatur repellat vel quo</em>
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      <mark>necessitatibus nulla consequuntur illum.</mark>
    </p>
    <hr>
    <small>이 글의 저작권은 주녘에게 있습니다.</small>
  </body>
</html>

<del>
제거된 텍스트, 취소선
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      주녘은 개발자가 되기 위해 <strong>자바, HTML,</strong> <del>CSS를</del> 열심히 공부하였습니다.
    </p>
  </body>
</html>

<ins>
inserted : 밑줄
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      주녘은 개발자가 되기 위해 <ins>자바, HTML,</ins> <del>CSS를</del> 열심히 공부하였습니다.
    </p>
  </body>
</html>

<sub>
subscript : 아래 첨자
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      log<sub>2</sub> 2
    </p>
  </body>
</html>

<sup>
superscript : 윗 첨자
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      2<sup>2</sup> = 4
    </p>
  </body>
</html>

<blockquote>
인용구(블록)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>태극기</h3>
        우리나라의 국기.

        우리나라에서 국기제정에 대한 논의가 처음 있었던 것은 1876년(고종 13) 1월이었다. 운양호사건을 계기로 한 · 일 사이에 강화도조약 체결이 논의되는 동안, 일본 측은 「운양호에는 엄연히 일본국기가 게양되어 있었는데, 왜 포격했느냐?」면서 트집을 잡았지만, 조선 측에서는 <국기>가 무엇을 뜻하는지 알 수 없었다.
       
        이 일이 계기가 되어 조정에서 비로소 국기제정의 필요성이 활발히 논의되었고, 82년 8월 9일 수신사 박영효 등 일행이 인천에서 일본 배를 타고 도일할 때 당장 게양해야 할 국기가 있어야겠다고 생각한 나머지, 그전에 이미 조정에서 대체적으로 정해진 국기 도안내용을 약간 고쳐 태극사괘의 도안이 그려진 기를 만들었다. 이들 일행은 8월 14일 고베(神戶)에 도착하여 숙소건물 지붕 위에 이 기를 게양했는데, 이것이 태극기의 효시다. 이것을 조정에서 83년 정식으로 국기로 채택, 공포했고, 대한민국이 수립된 후 1949년 문교부에 심의위원회를 설치, 음양과 사괘의 배치안을 결정, 오늘에 이르렀다.
        <br><cite>[네이버 지식백과] 태극기 [太極旗] (한국근현대사사전, 2005. 9. 10., 한국사사전편찬회)</cite>
    </blockquote>
  </body>
</html>

<q>
quotation : 인용구, 인라인 속성
q태그를 쓰면 q태그 안에 텍스트를 큰 따옴표를 표시해줍니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>주녘에 따르면,
        <q>HTML을 마스터하고 싶다고 합니다.</q>
    </p>
  </body>
</html>

<abbr>
abbreviation/acronym : 줄임말
abbr 태그를 사용하면 마우스 커서를 가져다 놓으면 줄임말의 설명을 보여줍니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>주녘에 따르면,
        <q><abbr title="Hyper Text Markup Language" >HTML</abbr>을 마스터하고 싶다고 합니다.</q>
    </p>
  </body>
</html>

목록(Lists) 태그

1. 순서가 있는 목록(Ordered Lists)

<ol>, <li>

<ol type=" ">
type에 종류에 따라 순서의 표시가 달라집니다.
유형 설명
type="1" 숫자 목록(기본값)
type="A" 알파벳 대문자
type="a" 알파벳 소문자
type="I" 로마숫자 대문자
type="i" 로마숫자 소문자
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ol>
        <li>자바</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>스프링</li>
    </ol>
  </body>
</html>

2. 순서가 없는 목록(Unordered Lists)

<ul> <li>

순서가 없는 목록의 스타일에는 4종류가 있습니다.

유형 설명
disc 불릿형(기본값)
circle 작은원형
square 작은 사각형
none 마크 생략
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: disc">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: circle">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: square">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: none">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
  </body>
</html>

설명목록(Description Lists)
<dl>
<dt>
<dd>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>주녘의 카페 메뉴</h3>
    <dl>
        <dt>커피</dt>
        <dd>- 아메리카노 HOT</dd>
        <dd>- 아메리카노 ICE</dd>
        <dt>논 커피</dt>
        <dd>- 딸기쉐이크</dd>
        <dd>- 초코쉐이크</dd>
    </dl>
  </body>
</html>

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

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 폼 삽입하기  (0) 2023.08.15
[HTML] 표 만들기  (0) 2023.08.15
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
반응형

package ch01;

 

import java.util.Scanner;

 

public class Ex4_20 {

public static void main(String[] args) {

int menu = 0, num = 0;

Scanner sc = new Scanner(System.in);

 

// while문에 outer라는 이름을 붙임

outer: while (true) {

System.out.println("(1) square");

System.out.println("(2) square root");

System.out.println("(3) log");

System.out.print("원하는 메뉴(1~3)을 선택하세요, 종료는 0번");

 

String tmp = sc.nextLine(); // 입력값을 tmp에 저장

menu = Integer.parseInt(tmp); // 입력받은 문자열 tmp를 숫자로 변환

 

if (menu == 0) {

System.out.println("계산을 종료합니다.");

break; // 계산종료 for문 벗어남

} else if (!(1 <= menu && menu <= 3)) {

System.out.println("잘못입력하셨습니다.");

continue;

}

 

for (;;) {

System.out.print("계산할 값을 입력하세요(계산종료 0, 전체종료 99)>");

tmp = sc.nextLine();

num = Integer.parseInt(tmp);

 

if (num == 0)

 

break;

 

if (num == 99)

 

break outer;

 

switch (menu) {

case 1:

System.out.println("result=" + num * num);

break;

 

case 2:

System.out.println("result=" + Math.sqrt(num));

break;

 

case 3:

System.out.println("result=" + Math.log(num));

break;

}

} // for(;;)

 

} // end of while

} // end of main

} // end of class

 

메뉴를 선택하면 해당 연산을 반복적으로 수행할 수 있게 for문을 추가하였다.

반복문만 떼어놓고 보면 무한 반복문인 while문안에 또 다른 무한반복문인 for문이 중첩된 구조인 것을 알 수 있다.

while문은 메뉴를 반복해서 선택할 수 있게 해주고, for문은 선택된 메뉴의 작업을 반복해서 할 수 있게 한다.

 

outer:

while(true) { // 무한 반복문

           ...

          for(;;) { // 무한 반복문

           ...

          if(num==0) // 계산 종료 for문을 벗어남

              break;

          if(num==99) // 전체 종료 for문과 while 문 모두 벗어난다.

              break outer;

          ...

            } // for(;;)

    } // while

 

 

 

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

'Java > Java 연습문제' 카테고리의 다른 글

자료구조 연습문제 2  (0) 2023.09.26
자료구조 연습문제  (0) 2023.09.26
이름 붙은 반복문  (0) 2023.08.12
break문과 continue 문 예제  (0) 2023.08.12
[JAVA] 매개변수의 다형성 연습  (0) 2023.08.11
반응형
  • break문은 근접한 단 하나의 반복문만 벗어날 수 있다.
  • 여러 개의 반복문이 중첩된 경우 break문으로 중첩 반복문을 완전히 벗어날 수 없다.
  • 중첩 반복문 앞에 이름을 붙이고 break, continue 문에 이름을 지정하면 하나 이상의 반복문을 벗어날 수 있다.

package ch01;

 

public class Ex4_19 {

public static void main(String[] args) {

// 이름 붙은 반복문

 

// for문에 Loop1 이라는 이름을 붙임.

 

Loop1 : for(int i=2; i <= 9; i++) {

for(int j = 1; j <= 9; j++) {

if(j == 5) {

break Loop1;

// break;

// continue Loop1;

// continue;

 

} System.out.println(i + "*" + j + "=" + i * j);

} System.out.println(); // end of for i

} // end of Loop 1

}

}

 

위의 예제는 구구단을 출력하는 예제이다.

제일 바깥에 있는 for문에 Loop1 이라는 이름을 부여했다. 그리고 j가 5일때 break문을 수행하도록 했다.

반복문의 이름이 지정되지 않는 break문은 자신이 속한 하나의 반복문만 벗어날 수 있다.

이 처럼 반복문에 이름을 부여하고 break 문에 반복문 이름을 붙여주면 하나 이상의 반복문도 벗어날 수 있다.

j가 5일 때 Loop1을 벗어나도록 했으므로 2단의 4줄 까지 출력된다.

만일 반복문에 이름이 부여되지 않은 break문 이었다면 2단 부터 9단까지 모두 네 줄씩 출력되었을 것이다.

// 반복문에 이름을 부여하지 않은 break 문

2*1=2

2*2=4

2*3=6

2*4=8

 

3*1=3

3*2=6

3*3=9

3*4=12

 

4*1=4

4*2=8

4*3=12

4*4=16

 

5*1=5

5*2=10

5*3=15

5*4=20

 

6*1=6

6*2=12

6*3=18

6*4=24

 

7*1=7

7*2=14

7*3=21

7*4=28

 

8*1=8

8*2=16

8*3=24

8*4=32

 

9*1=9

9*2=18

9*3=27

9*4=36

 

 

// 반복문에 Loop1이라는 이름을 부여한 break 문

2*1=2

2*2=4

2*3=6

2*4=8

 

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

'Java > Java 연습문제' 카테고리의 다른 글

자료구조 연습문제  (0) 2023.09.26
이름 붙은 반복문 심화예제  (0) 2023.08.12
break문과 continue 문 예제  (0) 2023.08.12
[JAVA] 매개변수의 다형성 연습  (0) 2023.08.11
[JAVA] 배열의 활용 - 총합과 평균, 최대값과 최소값, 섞기(shuffle)  (0) 2023.08.09
반응형

메뉴를 보여주고 선택하게 하는 예제입니다. 메뉴를 잘못선택한 경우 continue문으로 다시 메뉴를 보여주고

종료(0)을 선택한 경우 break문으로 반복을 벗어나 프로그램을 종료하도록 설계하였다.

package ch01;

import java.util.*;

public class Ex4_18 {

public static void main(String[] args) {

// break문과 continue 문 예제

 

int menu = 0;

int num = 0;

 

Scanner scanner = new Scanner(System.in);

 

while(true) {

System.out.println("(1) square");

System.out.println("(2) square root");

System.out.println("(3) log");

System.out.print("원하는 메뉴(1~3)을 선택하세요. (종료 : 0)>");

 

String tmp = scanner.nextLine(); // 화면에서 입력받은 내용을 tmp에 저장

menu = Integer.parseInt(tmp); // 입력받은 문자열(tmp)을 숫자로 변환

 

if(menu == 0) {

System.out.println("프로그램을 종료합니다.");

break;

} else if(!(1 <= menu && menu <=3)) { // menu의 선택 번호가 1보다 같거나 크고 3보다 작거나 같은게 아닌 번호

System.out.println("잘못 입력하였습니다. 종료는 0번");

continue;

}

 

System.out.println("선택하신 메뉴는 " + menu + "번 입니다.");

}

 

} // end of main

} // end of class

 

(1) square

(2) square root

(3) log

원하는 메뉴(1~3)을 선택하세요. (종료 : 0)>1

선택하신 메뉴는 1번 입니다.

-------------------------------------------------------------------------------------------------

(1) square

(2) square root

(3) log

원하는 메뉴(1~3)을 선택하세요. (종료 : 0)>2

선택하신 메뉴는 2번 입니다.

-------------------------------------------------------------------------------------------------

(1) square

(2) square root

(3) log

원하는 메뉴(1~3)을 선택하세요. (종료 : 0)>3

선택하신 메뉴는 3번 입니다.

-------------------------------------------------------------------------------------------------

(1) square

(2) square root

(3) log

원하는 메뉴(1~3)을 선택하세요. (종료 : 0)>4

잘못 입력하였습니다. 종료는 0번

-------------------------------------------------------------------------------------------------

(1) square

(2) square root

(3) log

원하는 메뉴(1~3)을 선택하세요. (종료 : 0)>0

프로그램을 종료합니다.

 

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

'Java > Java 연습문제' 카테고리의 다른 글

이름 붙은 반복문 심화예제  (0) 2023.08.12
이름 붙은 반복문  (0) 2023.08.12
[JAVA] 매개변수의 다형성 연습  (0) 2023.08.11
[JAVA] 배열의 활용 - 총합과 평균, 최대값과 최소값, 섞기(shuffle)  (0) 2023.08.09
[JAVA] 상속 구조로 클래스 만들어보기  (0) 2023.08.08

+ Recent posts

티스토리툴바