Post

web 공부 2024.04.12

Posted
css 로고 img
css 로고 img
By Jiwoon
12 min read
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
112
113
114
115
116
117
118
119
120
121

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>화면 아래에 븥는 푸터</title>
    <style>
      /* html body에 height 안주면 푸터가 밑으로 안감 그냥 바디에는 안됨 html필수 */
      html,  
      body {
        height: 100%;
      }
      body {
        width: 100%;
        min-width: 1000px;
        margin: 0px;
        /* 밑을 하면 푸터가 바닥에 붙어요 */
        display: flex;
        flex-direction: column;
      }

      footer {
        background-color: #f5f6f7;
        margin: 0px;
        padding: 20px;
        /* 푸터가 절대위치 위에서 100떨어진, 왼쪽에서 100떨어진곳에 붙음 (포지션 앱솔, top, left) */
        width: 100%;
        bottom: 0px;
        margin-top: auto;
      }
      footer .list_corp {
        list-style-type: none;
        padding: 0px;
        /* 밑에 애들을 하니까 border-right이 가운데에 먹힘 */
        margin: 0;
        display: flex;
        justify-content: center;
      }
      /* 마지막리스트만 border 오른쪽을 지워줌 */
      .list_corp > li:last-child {
        border: none;
      }

      .corp_item {
        display: inline-block;
        padding: 0px 10px;
        border-right: 1px solid #999;
        /* 그냥 플랙스는 block 인라인 플랙스는 가로로 됨 인라인 처럼이 돼서 */
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
      .corp_item a {
        text-decoration: none;
        color: #404040;
        font-size: 1em;
        text-align: center;
      }
      /* 얘를 없애야 푸터가 제대로 붙음 콘텐츠가 많아지면 .. 엉망이 될 수 이쒀 */
      /* #content {
        height: 500px;
      } */
    </style>
  </head>
  <body>
    <div id="content">
      <h1>어떤 사이트 내용</h1>
      <div>어떤 콘텐츠</div>
    </div>
    <!-- 시맨틱 태그 -->
    <!-- <section></section>
    <header></header>
    <footer></footer> -->
    <!-- 해보기 -->
    <footer>
      <ul class="list_corp">
        <li class="corp_item">
          <a target="_blank" href="https://www.navercorp.com/">회사소개</a>
        </li>
        <li class="corp_item">
          <a target="_blank" href="https://recruit.navercorp.com/">인재채용</a>
        </li>
        <li class="corp_item">
          <a
            target="_blank"
            href="https://www.navercorp.com/naver/proposalInquire"
            >제휴제안</a
          >
        </li>
        <li class="corp_item">
          <a target="_blank" href="https://www.naver.com/policy/service.html"
            >이용약관</a
          >
        </li>
        <li class="corp_item">
          <a target="_blank" href="https://www.naver.com/policy/privacy.html"
            ><strong>개인정보처리방침</strong></a
          >
        </li>
        <li class="corp_item">
          <a
            target="_blank"
            href="https://www.naver.com/policy/youthpolicy.html"
            >청소년보호정책</a
          >
        </li>
        <li class="corp_item">
          <a
            target="_blank"
            href="https://policy.naver.com/policy/service_group.html"
            >네이버 정책</a
          >
        </li>
        <li class="corp_item">
          <a target="_blank" href="http s://help.naver.com/">고객센터</a>
        </li>
      </ul>
    </footer>
  </body>
</html>

배운것

  • html, body에 height을 100을 줘야한다.
    그냥 body에는 안먹는다.

  • 자식 선택자 > 에 : 을 써서 마지막만 제거하는 법을 배움

  • content를 500으로 해버리면 푸터가 제대로 안먹힌다.

check & animation & media

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

<!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>
      body {
        background-color: black;
        color: white;
      }

      #mTitle {
        display: none;
      }

      /* 780보다 화면이 작을때 스타일 지정 */
      @media screen and (max-width: 780px) {
        body {
          background-color: skyblue;
        }
        #mTitle {
          display: block;
        }
        #pcTitle {
          display: none;
        }
        #list li {
            display: inline-block;
        }
      }

      /* 인쇄시 스타일 지정 */
      @media print {
        body {
          background-color: white;
          color: black;
        }
      }
      /* 1단계 */
      /* input[type="checkbox"] {
            outline: 1px solid red;
        } */
      /* 2단계 */
      input[type="checkbox"] + label {
        outline: 1px solid red;
      }
      /* 3단계 */
      input[type="checkbox"]:checked + label {
        text-decoration: line-through;
        color: red;
      }
      /* 처음 리스트 */
      #list li:nth-child(1) {
        color: yellowgreen;
      }
      /* 짝수 리스트 */
      #list li:nth-child(2n) {
        color: yellowgreen;
      }
      /* 변형 위치 */
      /* #title {
            transform: translate(50%, -50%);
        } */

      /* 변형 크기 */
      /* #title {
            transform: scale(50%, 50%);
        } */

      /* 변형 각도 */
      /* #title {
            transform: rotate(180deg);
        } */

      /* 피피티 애니매이션 */
      #title {
        /* 1이 기본 50%이 0.5임 */
        opacity: 0.5;
        /* 애니매이션 이름있어야 애니 적용 */
        animation-name: fade;
        /* 애니매이션 시간 */
        animation-duration: 1s;
        /* 이건 검색 필요 */
        animation-fill-mode: forwards;
        /* 반복횟수 */
        animation-iteration-count: infinite;
      }

      /* #box {
            width: 100px;
            height: 100px;
            background-color: grey;
            animation-name: fade;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            position: absolute;
        } */
      #box1 {
        width: 50px;
        height: 50px;
        border-radius: 50%; /* 원형 모양 만들기 */
        background-color: transparent;
        border-top: 3px solid blue; /* 상단에 보이는 테두리 부분 */
        border-left: 3px solid transparent; /* 나머지 테두리는 투명 */
        border-right: 3px solid transparent; /* 나머지 테두리는 투명 */
        border-bottom: 3px solid transparent; /* 나머지 테두리는 투명 */
        animation: loading 1s linear infinite; /* 애니메이션 적용 */
      }

      #content {
        margin-top: 250px;
      }

      @keyframes fade {
        0% {
          transform: rotate(0deg);
          /* transform: translateY(100px); */
          opacity: 0;
          color: blue;
        }

        /* 50% {
                transform: rotate(180deg);
            } */

        100% {
          transform: rotate(360deg);
          color: red;
          opacity: 1;
          width: 200px;
          height: 200px;
        }
      }

      @keyframes loading {
        0% {
          transform: rotate(0deg);
          border-top-color: blue; /* 시작 색상 */
          opacity: 0.5;
        }

        50% {
          transform: rotate(180deg);
          border-top-color: purple; /* 중간 색상 변경 */
        }

        100% {
          transform: rotate(360deg);
          border-top-color: red; /* 끝 색상 */
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <!-- <h1 id="title">어떤 제목</h1> -->
    <h1 id="pcTitle">pc에서 보이는 제목</h1>
    <h1 id="mTitle">모바일에서 보이는 제목</h1>
    <div id="box"></div>
    <div id="box1"></div>
    <div id="content">
      <input type="checkbox" id="check1" />
      <label for="check1">조식</label>
      <input type="checkbox" id="check2" />
      <label for="check2">중식</label>
      <input type="checkbox" id="check3" />
      <label for="check3">석식</label>
      <input type="text" />
    </div>
    <ul id="list">
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
      <li>어떤리스트</li>
    </ul>
  </body>
</html>

배운것

  • media쿼리로 각 화면은 크기에 따라 ui배치를 다르게 할 수 있음.

  • media로 print시, 혹은 다양한 상태에 따라 화면 표시를 다르게 가능

  • :nth-child와 :checked 그리고 + 선택자를 사용하여 js없이 체크박스에 체크 되었을때 label을 꾸며 줄 수 있음

+ 기호는 인접 형제 결합자(Adjacent sibling combinator). 이 결합자는 특정 요소 바로 다음에 위치한 형제 요소에만 스타일을 적용하도록 설정하는 데 사용.
input[type=”checkbox”]:checked + label 이라는 선택자는 다음과 같은 상황에 사용:
input 요소가 체크박스(type=”checkbox”)이고, 그 체크박스가 ‘체크된 상태’(:checked)일 때, 바로 그 다음에 위치하는 label 요소에 스타일을 적용.
즉, 이 선택자는 체크박스가 체크되어 있을 때, 그 체크박스 바로 다음에 위치한 label 요소에 text-decoration: line-through (텍스트 중간에 선을 그음)와 color: red (텍스트 색상을 빨간색으로 변경) 스타일을 적용.
이를 통해 사용자가 체크박스를 선택했을 때, 라벨에 시각적 피드백(예: 할 일 목록에서 할 일 완료 표시)을 제공할 수 있다.

  • transform으로 각도나, 크기, 위치 이동등이 가능하다.

  • keyframes으로 애니 매이션 만들기 가능 적용하려면 animation-name에 만든 애니매이션 이름을 적고 시간을 적어줘야한다 animation-duration: 1s;

과제

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

<!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>
        html, body {
            height: 100%;
            /* 넘치면 스크롤 없애기 가능 */
            overflow: hidden;
        }
        body {
            background-color: #02233b;
            display: flex;
            background-image: url('mic.png');
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: fixed;
        }
        #content {
            width: 600px;   
            margin-left: 400px;   
        }
        img {
            margin-top: 30px;
            margin-left: 150px;
            margin-bottom: 20px;
        }
        h1 {
            color: white;
        }
        h2 {
            color: yellow;
        }
        li {
            list-style-type:none;
            margin-bottom: 8px;
            color: white;
            font-family: "바탕";
        }
        h3 {
            color: skyblue;
        }
        
    </style>
</head>
<body>
    <div id="content">
        <h1>대학언론사 수습기자 모집</h1>
        <h2><em>신입생 여러분을 기다립니다</em></h2>
        <img src="onair.png" alt="">
        <div>
            <h3>모집분야</h3>
            <ul class="list">
                <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
                <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
                <li>엔지니어(0명) : 라디오 방송 녹음 및 편집</li>
            </ul>
        </div>
        <div>
            <h3>혜택</h3>
            <ul>
                <li>수습기자 활동 중 소정의 활동비 지급</li>
                <li>정기자로 진급하면 장학금 지급</li>
            </ul>
        </div>
    </div>
</body>
</html>
폴리텍, web
html css
This post is licensed under CC BY 4.0 by the author.