WebServerPrograming_Project/chat.css at main · youngw77/WebServerPrograming_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
* {
  box-sizing: border-box;
  }
  @media only screen and (min-width:0px) { /* 창의 최소 너비 0px부터 */
      .left,.right { /* left 또는 right라는 이름의 클래스를 사용하는 영역의 너비는 창 너비의 10%이다. */
      width:10%;
      }
      .center { /* center라는 이름의 클래스를 사용하는 영역의 너비는 창 너비의 80%이다. */
      width:80%;
      }
  }
  @media only screen and (min-width:500px) { /* 창의 최소 너비 500px 부터 */
   .left,.right { /* left 또는 right라는 이름의 클래스를 사용하는 영역의 너비는 창 너비의 15%이다. */
      width:15%;
      }
      .center { /* center라는 이름의 클래스를 사용하는 영역의 너비는 창 너비의 70%이다. */
      width:70%;
      }
  }
  @media only screen and (min-width:1000px) { /* 창의 최소 너비 1000px 부터 */
   .left,.right { /* left 또는 right라는 이름의 클래스를 사용하는 영역의 너비는 창 너비의 20%이다. */
      width:20%;
      }
      .center { /* center라는 이름의 클래스를 사용하는 영역의 너비는 창 너비의 60%이다. */
      width:60%;
      }
  }


  input#user{
      border:1px solid;
      padding: 5px;
      border-radius: 5px;
  }

  /* h2태그에 background라는 이름의 클래스를 사용할 경우 적용될 스타일 속성 */
  h2.background {
  color:white; /* 기본색상 : 흰색 */
  background: black; /* 배경 : 검정색  */
  border:1px solid black; /* 테두리 : 1px크기의 검정색 실선을 지닌 테두리. */
  border-radius:5px 5px 0px 0px; /* 테두리-반경 : 좌측 및 우측 상단 5px크기의 반경을 지님.
  우측 및 좌측 하단은 0px크기의 반경을 지님. */
  text-align:center; /* 텍스트 정렬 : 가운데  */
  margin-bottom:0px; /* 해당 요소 바로 하단에 있는 다른 요소 상단과의 여백 : 0px */
  text-shadow:1px 1px 1px blue; /* 텍스트 그림자 : 텍스트 좌측 상단 기준점으로부터 우측으로 1px만큼,
  하단으로 1px만큼 떨어진 거리에 1px만큼의 흐림도를 가진 파랑색 그림자를 그려줌. */
  }

  /* textarea태그에 적용될 스타일 속성 */
  textarea {
    width:100%; /* 너비 : 100% */
    padding: 10px; /* 테두리와 내용물 사이의 여백 : 10px */
    font-size: 20px; /* 폰트 크기 : 20px */
    height:50px; /* 높이 : 200px */
    resize: none; /* 사이즈 변경 : 불가능  */
  }

  /* div태그에 chatcontent라는 이름의 클래스를 사용할 경우 적용될 스타일 속성 */
  div.chatcontent {
    padding: 10px; /* 테두리와 내용물 사이의 여백 : 10px */
    font-size: 20px; /* 폰트 크기 : 20px */
    height:400px; /* 높이 : 200px */
    border:1px solid;
    line-height: 1.5em;
    overflow-y: auto;
  }

  /* div태그에 input라는 이름의 클래스를 사용할 경우 적용될 스타일 속성 */
  div.input {
    padding: 10px; /* 테두리와 내용물 사이의 여백 : 10px */
    font-size: 16px; /* 폰트 크기 : 20px */
    border:1px solid; /* 테두리 : 1px크기의 실선을 지닌 테두리  */
  }

  /* left 또는 right 또는 center라는 이름의 클래스를 사용할 경우 적용될 스타일 속성. */
  .left, .right {
  float:left; /* 유동 : 왼쪽  */
  border:1px solid; /* 테두리 : 1px크기의 실선을 지닌 테두리  */
  opacity:0; /* 불투명도 : 0 */
  }

  .center{
  margin-top:-25px;
  float:left; /* 유동 : 왼쪽  */
  }

  /* dropdown-content라는 이름의 클래스를 사용할 경우 적용될 스타일 속성. */
  .dropdown-content {
    display: none; /* 내용을 없는 것 취급하게 만들어줌. */
    position: absolute; /*  위치: 절대적  */
    min-width: 20px;  /* 최소 너비 : 20px */
    z-index: 1; /* z축으로 1만큼 앞에 내용물을 표시 */
  }
  h2.background {
    color:white; /* 기본색상 : 흰색 */
    background: black; /* 배경 : 검정색  */
    border:1px solid black; /* 테두리 : 1px크기의 검정색 실선을 지닌 테두리. */
    border-radius:5px 5px 0px 0px; /* 테두리-반경 : 좌측 및 우측 상단 5px크기의 반경을 지님.
    우측 및 좌측 하단은 0px크기의 반경을 지님. */
    text-align:center; /* 텍스트 정렬 : 가운데  */
    margin-bottom:0px; /* 해당 요소 바로 하단에 있는 다른 요소 상단과의 여백 : 0px */
    text-shadow:1px 1px 1px blue; /* 텍스트 그림자 : 텍스트 좌측 상단 기준점으로부터 우측으로 1px만큼,
    하단으로 1px만큼 떨어진 거리에 1px만큼의 흐림도를 가진 파랑색 그림자를 그려줌. */
    }
  /* emoticon라는 이름의 클래스를 사용하는 영역에 마우스를 올리면
  dropdown-content클래스에 있는 없는 것 취급한 내용을 보여준다. */
  .emoticon{width: 20px;}

  .emoticon:hover .dropdown-content {
  display: block;
  }