반응형

1. Inline Style Sheet

 Inline Style Sheet은 HTML 태그 Style 속성에 CSS 코드를 직접 넣는 방법이다.

<div id="wrap" style="background-color:blue"></div>

 

2. Internal Style Sheet

 Internal Style Sheet은 HTML 페이지 내 <style></style> 코드를 입력 후 안에 CSS 코드를 입력하는 방법이다.

<style>
	div{
    	background-color:blue;
    }
</style>

 

3. Linking Style Sheet

 Linking Style Sheet은 CSS 파일을 생성 후 이를 HTML 문서와 연결하는 방법이다.

 아래와 같은 태그를 적용하고 싶은 HTML 페이지에 추가 후 href로 적용할 .css 파일 경로를 입력하여 연결한다.

<link rel="stylesheet" href="LinkingStyleSheet.css"/>

 

 

반응형
저작자표시

'프로그래밍 > Web Program' 카테고리의 다른 글

GET / POST  (0) 2022.03.05
쿠키(Cookie)와 세션(Session)  (0) 2021.04.30
Substitution  (0) 2020.02.24
Output Cache (출력캐시)  (0) 2018.07.26
반응형

아래와 같은 script src 경로로 vue 호출

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>좋아요</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>{{first}}곱하기 {{second}}는?</div>
      <form v-on:submit="onSubmitForm">
        <input type="number" ref="answer" v-model="value"/>
        <button type="submit">입력</button>
      </form>
      <div id="result">{{result}}</div>
    </div>
  </body>

  <script type="text/javascript">
      const app = new Vue({
        el: '#root',
        data: {
          first: Math.ceil(Math.random() * 9),
          second: Math.ceil(Math.random() * 9),
          value: '',
          result: '',
        },
        methods: {
          onSubmitForm(e) {
            e.preventDefault();
            if(this.first * this.second === parseInt(this.value)) {
              this.result = '정답';
              this.first = Math.ceil(Math.random() * 9),
              this.second = Math.ceil(Math.random() * 9),
              this.value = '';
              this.$refs.answer.focus();
            } else{
              this.result = '땡';
              this.value = '';
              this.$refs.answer.focus();
            }
          },
        },
      });
  </script>
</html>

 

정답이 맞을 경우 first / second 값을 랜덤 처리로 호출하며 구구단 처리 소스

[참조]

https://www.youtube.com/watch?v=TIHluPn05VY&list=PLcqDmjxt30RsdnPeU0ogHFMoggSQ_d7ao

 

반응형

'프로그래밍 > Vue' 카테고리의 다른 글

[Vue3] onMounted  (0) 2024.05.14
[Vue3] Computed  (0) 2024.04.26
Vue.js 2.0 라이프 사이클  (0) 2024.02.21
[Vue.js] Props 란  (0) 2022.06.30
반응형

Delegate : 델리게이트란 '대리인' 이란 뜻으로 누군가를 대신해서 일해주는 것을 전문으로 하는 것을 의미한다.

 

int num = 1;

String str = "test";

Int 형은 숫자, String은 문자열 타입을 담을 수 있듯이 메소드를 변수에 담고 사용한다고 생각하면 좀 더 쉽게 이해할 수 있을 것이다.

 

Delegate 선언 및 방식

-> delegate [ 참조할 함수의 반환 Type ] [ 델리게이트 명 ] (매개 변수 목록)

Ex) delegate int MyAddDelegate(int a, int b)

// 참조할 메소드

Public int AddDelegate(int a, int b)

{

      return a+b;

}

 

Delegate CallBack

- 여기서 Callback 이란 'A'라는 메소드를 호출했을 때 'A'에서 'B'메소드를 호출하는 것을 의미한다.

// 아래 그림 참조 > AddDelegate(), MinusDelegate(), MultiplyDelegate()를 대신 호출하는 것을 말한다.

namespace ConsoleApp2
{
    delegate int MyDelegate(int a, int b);

    class Program
    {
        static int num1 = 10;
        static int num2 = 5;

        static void Main(string[] args)
        {
            MyDelegate addDelegate = new MyDelegate(AddDelegate);
            MyDelegate minusDelegate = new MyDelegate(MinusDelegate);
            MyDelegate multiplyDelegate = new MyDelegate(MultiplyDelegate);

            Calcurator(num1, num2, addDelegate);
            Calcurator(num1, num2, minusDelegate);
            Calcurator(num1, num2, multiplyDelegate);
        }

        public static int AddDelegate(int a, int b)
        {
            return a + b;
        }

        public static int MinusDelegate(int a, int b)
        {
            return a - b;
        }

        public static int MultiplyDelegate(int a, int b)
        {
            return a * b;
        }

        public static void Calcurator(int a, int b, MyDelegate calcurate)
        {
            Console.WriteLine(calcurate(a, b));
        }
    }
}

<결과 출력>

 

반응형

'프로그래밍 > C#' 카테고리의 다른 글

DataTable에 대한 LINQ 쿼리  (0) 2022.08.23
DateTime 형식 ToString()으로 변환 시 문자열 처리  (0) 2020.12.18
반응형

Substitution (캐시 후 대체)

 캐시된 페이지 내 동적으로 컨텐츠를 출력할 때 사용한다.

 

 즉, 전체 페이지를 OutputCache를 이용하여 캐시가 처리되었을 때,

 Substitutio 컨트롤은 동적으로 컨텐츠를 출력할 수 있도록 해준다.

 

 간단한 예제를 확인해보면 아래와 같다.

  1. Output Cache 하단의 시간은 캐시가 30초간 걸린 시간

  2. Substitution 하단의 시간은 <asp:Substitution> 컨트롤을 이용하여 동적으로 현재 시간을 출력 처리한 결과

  -> 해당 페이지를 새로 고침 하면 output Cache는 캐시가 걸려 시간이 10:41:10으로 고정되어 있는 반면

      Substitution은 새로고침 할 때마다 시간이 새롭게 갱신되는 것을 볼 수 있다.

 

[ 현재 시간 출력 ]

<h2>OutputCache</h2>
<div><%=test %></div>

<h2>Substitution</h2>
<asp:Substitution runat="server" MethodName="GetCurrentDate" id="substitution" />

 

#region [ Substitution 메소드 처리 ] 

protected static string GetCurrentDate(HttpContext context)
{
	return DateTime.Now.ToString();
}

#endregion
반응형

'프로그래밍 > Web Program' 카테고리의 다른 글

GET / POST  (0) 2022.03.05
쿠키(Cookie)와 세션(Session)  (0) 2021.04.30
CSS 적용하는 방법  (0) 2020.09.28
Output Cache (출력캐시)  (0) 2018.07.26
반응형

Cache


Cache

: 웹 서버측의 임시 메모리 공간이며, 

 서버의 효율을 위해 사용한다.


Output Cache (출력 캐시)

: 출력 캐시 같은 경우 임시 페이지를 잠시 저장해놓는 공간이며,

 한 페이지를 여러명이 접속 시 DB 접속 보다

 Cache 에 저장된 페이지를 조회해서 보여준다.


사용방법을 알아보면,


[ 사용 방법 ]

<%@ OutputCache Duration="30" VaryByParam="none" %>

코드 내에 선언

 - Duration="30" 30초 간격으로 페이지를 새로 호출을 의미


Ex ) 현재 오후 10시 24분 50초를 웹페이지에 출력 후 

새로고침을 해도 30초 동안 시간 변동이 없게 된다. 

왜냐하면, Duration을 30초로 설정했긴 때문으로 30초 후 부터

다시 코드를 실행.

-------------------------------- 31초 후  새로고침

- VaryByParam="none"

현재 none 으로 설정을 했지만 값을 입력하면 해당 문자열 파라미터에 따라

캐시가 초기화 됩니다.

Ex) VaryByParam="test"


 1) www.url?test=1

 2) www.url?test=2

1,2 번의 경로는 test 파라미터 값에 따라 캐시가 달라집니다.




반응형

'프로그래밍 > Web Program' 카테고리의 다른 글

GET / POST  (0) 2022.03.05
쿠키(Cookie)와 세션(Session)  (0) 2021.04.30
CSS 적용하는 방법  (0) 2020.09.28
Substitution  (0) 2020.02.24

+ Recent posts

티스토리툴바