Post

web 공부 2024.04.05

Posted
html 로고 img
html 로고 img
By Jiwoon
11 min read

CSS 시작

로그인페이지

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

<!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 {
        height: 100%;
        display: flex;
    }
    .org {
      color: orange;
    }
    #sTitle {
      color: red;
    }
    #title {
      border-bottom: 3px solid purple;
      padding: 20px;
      margin: 50px;
      text-align: center;
    }
    #content * {
        box-sizing: border-box;
    }
    #content>div {
        margin: auto;
        width: 400px;
    }
    #content div {
        margin-bottom: 20px;
    }
    #content {
      width: 500px;
      margin-top: 600px;
      height: 500px;
      border-radius: 20px;
      border: 5px solid gray;
      margin: auto;
      margin-top: 50vh;
      transform: translateY(-300px);
    }
    #content input {
        width: 100%;
        font-size: 20pt;
    }
    .login-btn {
        width: 100%;
        height: 50px;
        font-size: 20pt;
    }
  </style>
</head>
<body>
  <div id="content">
    <h1 id="title" class="org">로그인</h1>
    <div>
        <input type="text" placeholder="ID"> 
        <div>아이디는 4자</div>
    <div>
        <input type="password" placeholder="PW">
        <div>비번은 알아서</div>
    </div>
    <div>
        <button class="login-btn">login</button>
    </div>
    
  </div>
</body>
</html>

2024-04-06-102032

  1. 선택자(Selectors):

body, .org, #sTitle, #title, .login-btn 등 다양한 선택자를 사용하여 특정 요소를 선택하고 스타일을 지정.

  1. 색상 지정:

color 속성을 사용하여 텍스트 색상을 지정. 예를 들어, color: orange;는 클래스 .org에 대해 오렌지 색상을 지정.

  1. 박스 모델(Box Model):

padding, margin, border 속성을 사용하여 요소의 여백과 테두리를 지정. box-sizing: border-box;를 사용하여 내부 여백과 테두리가 요소의 너비와 높이에 포함되도록 설정.

  1. 레이아웃 관련 속성:

display: flex;를 사용하여 body를 flex container로 설정하여 요소들을 유연하게 배치. margin, width, transform, margin-top 등을 사용하여 요소를 가운데 정렬하고 위치를 조정.

  1. 폰트와 텍스트 관련 속성:

font-size 속성을 사용하여 텍스트 크기를 조정.

  • 개발자 도구에서 주황은 margin이고 초록은 padding, 파랑은 content이다.

flexbox

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background</title>
    <style>
      @font-face {
        font-family: "SOGANGUNIVERSITYTTF";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/SOGANGUNIVERSITYTTF.woff2")
          format("woff2");
        font-weight: normal;
        font-style: normal;
      }
      #content {
        /* 배경을 사진으로 설정 */
        background: url("https://cdn.pixabay.com/photo/2023/11/23/20/40/ocean-8408693_1280.jpg");
        /* 반복끄기 */
        background-repeat: no-repeat;
        /* contain은 딱맞게*/
        background-size: contain;
        /* 위치설정 */
        background-position: center;
        /* cover은 화면에 맞게 채움 */
        background-size: cover;
        /* 배경색 설정 */
        /* background: gray; */
        /* 배경을 콘텐츠 상자에만 적용 */
        /* background-clip: content-box; */
        /* 안쪽 여백 설정 */
        padding: 20px;
        /* 빨간색 테두리 설정 */
        border: 2px solid red;
        /* 높이 설정 */
        height: 500px;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("https://wikidocs.net/images/page/191680/024_2_%EB%B6%88%EB%8F%85%EC%9D%B4%EB%AF%B8%EC%A7%80.jpg");
        /* x와 y는 둘 중 하나만 적용됨 그냥 repeat를 해야 두개 다 적용됨 */
        /* background-repeat: repeat-x;
      background-repeat: repeat-y; */
        background-repeat: no-repeat;
        background-size: contain;
        /* 위에까지만 하면 body에 높이가 없어서 안보이게 사라짐 */
        height: 100vh;
        /* 마진을 0을 안주면 스크롤이 생김 */
        margin: 0px;
        box-sizing: border-box;
      }
      #title {
        /* 폰트사용..위에꺼 폰패밀리 복붙 ,, 기본폰트도 사용가능 */
        /* 처음 폰매는 궁서가 없으면 다음걸로 적용됨 */
        font-family: "궁서1", "SOGANGUNIVERSITYTTF";
        font-family: "SOGANGUNIVERSITYTTF";
        font-size: 40pt;
        color: white;
        /* x축, y축, 퍼지는 강도, 색 */
        text-shadow: 5px 5px 10px red;
        width: 1000px;
        height: 500px;
        /* box-shadow: 2px 2px 10px gray; */
        text-align: center;
        /* 
        display: flex;
        justify-content: center;
        align-items: center; */
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div id="title">힘으로 안되는건 힘이 부족하기 때문이다.</div>
    </div>
  </body>
</html>

2024-04-06-102850

배운것

  1. @font-face: 사용자 지정 글꼴을 웹 페이지에 적용한다. 이를 통해 웹 페이지에서 사용할 수 있는 특정 글꼴을 지정할 수 있다.

  2. 배경 이미지 설정: 배경 이미지를 설정하는 방법 배움. background 속성을 사용하여 URL을 통해 이미지를 불러오고, background-repeat, background-size, background-position 등의 속성을 사용하여 배경 이미지의 반복, 크기 조절, 위치 조절을 설정할 수 있다.

  3. 박스 모델 관련 속성: padding, border, margin 속성을 사용하여 요소의 내부 여백, 테두리, 외부 여백을 설정하는 방법을 배웁.

  4. 텍스트 스타일링: 텍스트에 대한 스타일을 지정하는 방법을 배움. 폰트 크기, 색상, 그림자 효과 등을 지정하여 텍스트를 스타일링할 수 있다.

  5. 레이아웃 관련 속성: 요소를 가운데 정렬하고, Flexbox를 사용하여 요소를 유연하게 배치하는 방법을 배움. display: flex, align-items, justify-content 등의 속성을 사용하여 레이아웃을 조정할 수 있다.

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

<!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>
      .item {
        /* 패딩은 먹음 inline도 근데 가로세로는 안먹음 */
        /* display: inline-block; */
        height: 100px;
        width: 100px;
        border: 2px solid red;
      }
      #head {
        display: flex;
        /* 로고와 다른 아이템들을 두개로 나눌 수 있음 */
        justify-content: space-between;
        margin-bottom: 30px;
        padding-right: 20px;
      }
      #head .logo {
        width: 120px;
        margin-top: -18px;
      }

      #menu {
        float: right;
        list-style: none;
        padding: 0;

        color: white;
      }
      /* 리스트안에 color가 바로안먹힘 a에 먹여야함 */
      #menu > li {
        display: inline;
      }
      #menu > li > a {
        color: white;
        text-decoration: none;
        display: inline-block;
        width: 100px;
        text-align: center;
        padding: 10px;
        /* border-right: 2px solid white; */
        background-color: #0d4036;
        font-weight: bold;
        font-size: 1.5em;
      }
      #menu > li > a:hover {
        background-color: #2a8c7a;
        color: #0d4036;
      }
      #container {
        height: 300px;
        border: 2px solid blue;
        flex-direction: column;
        /* 리벌스는 오른쪽에서 왼쪽으로 축이 이동함 */
        flex-direction: row-reverse;
        flex-direction: row;
        display: flex;
        /* item들을 오른쪽 끝으로 모두 보냄 */
        justify-content: flex-end;
        /* space는 item들의 위치.. 공간을 의미함 */
        justify-content: space-around;
        justify-content: space-between;
        justify-content: space-evenly;
        /* justify-content: center; */
        /* y축으로 정렬 */
        align-items: flex-end;
        align-items: center;
      }
      /* 부모안의 자식들 선택 */
      #container>div:first-child {
        background-color: grey;
        align-self: flex-start;
      }
      #container>div:last-child {
        background-color: grey;
        align-self: flex-end;
      }
    </style>
  </head>
  <body>
    <!-- 메뉴도 공간 먹을라고 하나로 싸고 그안에 한거임 -->
    <div id="head">
      <img class="logo" src="img.png" alt="logo">
      <ul id="menu">
        <li><a href="/04-05/04-05-block.html">home</a></li>
        <li><a target="_blank" href="https://naver.com">naver</a></li>
        <li><a target="_blank" href="https://google.com">google</a></li>
        <li><a target="_blank" href="https://youtube.com">youtube</a></li>
      </ul>
    </div>

    <div id="container"> 
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

배운것

  1. 로고와 메뉴의 위치 조정: 로고 이미지와 메뉴 항목들을 가로로 나란히 배치하고, 로고는 왼쪽에, 메뉴는 오른쪽에 위치하도록 조정. 이를 위해 Flexbox를 사용하여 display: flex 및 justify-content: space-between 속성을 적용.

  2. 메뉴 스타일링: 메뉴 항목들의 스타일을 지정하여 마우스 호버 시 배경색이 변경되도록 만들 수 있음. 메뉴 항목들은 수평으로 배치되며, 각 항목은 일정한 너비와 여백을 가지고 있다.

  3. 컨테이너와 아이템 정렬: 아이템들을 컨테이너 안에서 가로로 배치하고, 컨테이너는 특정 방식으로 아이템들을 정렬가능. 이를 위해 Flexbox를 사용하여 display: flex 및 justify-content, align-items 속성을 활용할 수 있음.

  4. 아이템 스타일링: 아이템들은 특정한 크기와 테두리를 가지며, 배경색을 회색으로 설정가능. 첫 번째 아이템은 컨테이너의 위쪽으로 정렬되고, 마지막 아이템은 아래쪽으로 정렬. 이처럼 원하는 정렬 방법 채택하여 꾸미기 가능

폴리텍, web
html css
This post is licensed under CC BY 4.0 by the author.