CSS (4) : 박스모델 (Day 4)

코딩기록·2024년 10월 12일
CSSfrontend국비지원프론트엔드
  • margin(바깥여백)
    -margin-left/top/bottom/right: 4px;
    -margin: [상하좌우] / [상하] [좌우] / [상] [좌우] [하] / [위] [오른쪽] [아래] [왼쪽] (시계방향)
    -box 가운데 정렬 : margin: 7px auto

  • box-sizing: border-box : 패딩과 테두리를 박스 크기에 포함시켜, 패딩/테두리 적용해도 너비와 높이 변하지 않도록 함

  • padding : 안쪽여백
    -margin처럼 속성값 1~4개 줄 수 있음

  • border : 테두리
    -border:3px solid gray;
    • border-style 종류 : solid(실선), dashed, dotted, double 등
      -border-style border-color border-width
      -border-radius : 박스 끝부분 부드럽게

  • visibility: hidden; : 화면 상 안보이게 (자리는 그대로)
    cf. display: none; :화면 상 사라지고 자리도 없어짐
    cf. opacity: 0~1; : 투명도

  • width: fit-content : 요소의 너비를 자식 콘텐츠의 크기에 맞춰 자동으로 조정
  • display: flex : 부모 요소를 플렉스 컨테이너로 만들어, 자식 요소들을 수평 또는 수직으로 배치할 수 있게 해주는 CSS 속성-
    -justfity-content: center; <- 가로정렬
    -align-items: center; <- 세로 정렬

  • overflow: scroll/hidden/auto(크기 넘을 때만 scroll 생기게)
<!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 {
      /* 기본여백(대부분 8px) 제거 */
      margin: 0;
    }

    .container {
      width: 400px;
      height: 300px;
      border: 10px solid red;
      /* 바깥 여백 : margin */
      margin-left: 40px;
      margin-top: 50px;
    }    

    .box  {
      width: 25%;
      height: 100px;
      border: 4px solid gray;
      background: #333;
    }

    .box:first-child {
      margin-left: 20px;
      margin-top: 30px;
    }

    .box:last-child {
      margin-top: 20px;
      margin-left: 50px;
      /* margin: [상하좌우] */
      margin: 100px;
      /* margin: [상하] [좌우] */
      margin: 10px 20px;
      /* margin: [상] [좌우] [우] */
      margin: 10px 20px 30px;
      /* margin: [위] [오른쪽] [아래] [왼] (시계방향) */
    }

    section {
      width: 80%;
      border: 4px solid red;
      margin-left: 10%
    }

    /* 화면 가운데 설정하는 법 3개 */

    section h1 {
      /* text-align은 화면 안에서의 가운데가 아니라, box의 가운데로 정렬하는 것임 */
      text-align: center;
      background: orange;
      width: 50%;
      /* !!화면 안에서 가운데로 설명하고자 할 때. 이렇게 하면 width를 바꾸면 margin-left 숫자로 수기로 바꿔야 하므로,
      이를 개선하기 위해 밑의 코드로 변경 */
      margin-left : 15%
    }

    section h1 {
      text-align: center;
      background: orange;
      width: 50%;
      /* !!화면 안에서 가운데로 설명하고자 할 때 : margin: auto; */
      margin: 30px auto;
    }

    section h2 {
      background: aqua;
      /* margin : [상] [좌우] [하] */
      margin: 0 auto 20px;
      width: 70%;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="box">박스1</div>
    <div class="box">박스2</div>
  </div>

  <div class="container2">
    <div class="box2">박스3</div>
    <div class="box2">박스4</div>
  </div>


  
  
  <section>
    <h1>안녕하세요</h1>
    <h2>메롱메롱</h2>
  </section>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 전체 선택자: 모든 태그에 적용 */
    * {
      /* 요소의 전체 크기에 패딩과 테두리를 포함시켜, 설정한 너비와 높이가 변하지 않도록 합니다. */
      box-sizing: border-box;
    }

    .container {
      width: 500px;
      height: 500px;
      background: orange;
      margin: 100px;
      /* padding : 안쪽여백 */
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px;

    }
    .box {
      width: 100%;
      height: 50%;
      background: tomato;
      font-size: 2rem;
      color: #fff;
      padding: 20px 40px 10px;
    }

    .card {
      width: 250px;
      height: 350px;
      border: 2px solid gray;
      /* border 테두리 깎기 */
      border-radius: 10px;
      margin : 20px auto;
      /* 안쪽 여백 만들기 위함 */
      padding: 10px;
    }
    

    .card .image {
      width: 100%;
      height: 250px;
      border: 2px solid lightgray;
      overflow: hidden;
    }

    .card .image img {
      height: 100% /* 사진 : 가로세로 하나만 조정하면 나머지 하나도 비율 조정됨 */
    }
    
  </style>
</head>
<body>

  <!-- Symantic HTML을 위해 div를 article로 -->
  <!-- article : 웹 페이지에서 독립적인 콘텐츠를 나타내는 데 사용 -->
  <!-- article를 묶는 데는 session 씀 -->
  <article class="card">
    <!-- image를 제어할 때는 div를 사용하여 액자로 감싸주기! -->
   <div class="image">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTEhMWFhUXFx8YGBgYGBgaGxsaGhgYGB0dGBgdHiggGholHRcaITEiJSkrLi4uFx8zODMsNygtLisBCgoKDg0OGxAQGzAlICUvLS0tLS0tLS0tLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOgA2QMBIgACEQEDEQH/xAAcAAADAQADAQEAAAAAAAAAAAAEBQYDAAIHAQj/xABAEAABAwIFAgQDBgYBAwIHAAABAgMRACEEBRIxQVFhBhMicYGRoSMyUrHB8BQVQtHh8QcWU2JyshckM0NUgqL/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMEAAX/xAAnEQACAgICAgIBBAMAAAAAAAAAAQIRAyESMUFREyIEQmFxgTIzof/aAAwDAQACEQMRAD8A81yXwk84NahA4Bqow/hBsD1kk9qq/LtXxxGkFSrACazzm26RilkcmQ+ceGkJQVJUR71OP4cBGkAzNUWNzEuuEz6QbD9a6lM0vKh4TcUS2XtAOp1C081fOsspSCAAN7VN4rDCNR68U3wRJbAWIPFTzSb2LldoSZ3jXNkCE9RvS/I8IVKK1TA5PWqZeEE32pVnGtuCkegcRXY8lrigwlrikVGTeMUtFLTp9KjAPSi/GjaFsF0RKbgivKsctazqUkge1qrcmbfew6WXFaW1G6jvFJPBwamn/IZYapoWYPxEB6XE6h3pU+99prSBpBkDivQXfALBaPluBSt5JvUlj8tQ2CkLMixtWmE4XopCUf0lf4Zzv+JTJTp0WPT4Us8TZskuQTITeBS4Zg21gQ20ftFmD1qcxAhNySo1yhbO+NcihV4kxC1jQ5obGwEVqy8teoqUVe5pHkidUp5p8w0Ugjk0mWPhCzSRhikwAaVLZMlXE7UzxaoTKjQWBxiVAoO/FFJxR0bSOi2p2NYiW1hQJH5GjHWSkWrRbQWna8fWnTtDJlPgHw43Y2UINSD+UeW6Uk2mxpz4VeOhSdik1vmDQJ1RfmssZPHNxRNS4SaQnw2Yu4ZxBJLjYMkdqu8b/wAmsqw6gwlQdIgJI27zUkvCApIIkRSR3DgGAIHaqOEMn+Xgqljn9mGvZktbJWqFLCpPeeaN8HZtLulSB6rSDH0pZhmUpbWOtYtsgQQSkgyCOtOoRpopKSqkert4bUFRNrxQXlnrQvh7xJrSpK0+oNkyOYiuv8+T+BXyrPLTozNOirfUEpKlWAqGzjPlvktps3PxNdvE2dKeJSgwgfWp/LMlcfdKErI5Ua0qqGjhaVy0MkspQnUb0Ol5x5XltwJqpb8DtaRqcXbvRSMtwmFGskApG5Mmp/JFdbJc4roWYPIgloIdTJG961UWkwgNSTYXpD4i8aFR04fb8Vdv+Om1PPrW4rUQLUsoTlHlLRSMZtbKdzKUoRqVIjikZfK1+WuwO0iqPOsyQhxCVfdG9SGMxQW8XE7A29qzxg+zqSCsVlikgk6SgXiL1V+BsG28xqUm87GhMM6hxuRzWPhrNSxiS2uyF7RxS25JxYuS+Oh54myFKWitkaVDpaRXlWbNaxA3r3HMXx5SiLjSTXiD+PbUsj7pk7+9avxbrfg78eT2TyEFJhQvWmYggielODh1OSAmY2Nd80ydZZCyghSRt2rU5U1Zobp7EeVYjQ4k9TBq5DYieIrz1pskgbVV4vO0oaShB1KiDQyxbaoXJFtqhLnaypwxMCjPDuBSr1SZpe7hVrMnnrVHknlNgAmFbHvXTklGhpKo0bYjBiIBJpSvU2rSQYPNU+IcSkSBPtUrjM7KiUhAt1pI0+iUbYxyBOlau4r7mGbobd0KSfcV9yxdgra1Kc8Z1qKxuKnGF5LYIq57KDB4ptydBJFL1sgpUDuFWpRlmJW0rUnY7g0xOLCl3Gknin4OL0MoU36OrjHArpp7UYGryelcW1XCuWwjw49ofTOxlJ+NvziqnyE9BUUEXtTX+cudKhkhbseMo1sBxSTv9BRWRZl/D6lgFa1ccAVuGUJgpIUTuKIwrCXAYGlQ4qnNV0M3a2B43PcU9IJ0J7UrVlrrp+8VdybU6/lJJufhTZ1otNggRbini62gxSirIpzJAnc098MgMBawIJEVk3h9Rk3vTAtDTG1NJtoXk27EWYvrWokkkmt8uwBIPSj28GNzT3DYYBIrLnnxjRHI60IsLjDhgdf3PyrHCZk3iHyUz6RanGd5elbShHFQHhp7RiB0uDQwRWSDfkMNxfsu8y8SLYYUg3BECvOMRiAobXo/xPmXmOaQfSn86VJTaYrZhhxjbK4o8YlJ4LePmetwJbSJM/pVviMxQoD7NRQqyVEWNeYZelJcQk2BUJPxr1zxAlIw7RKglKbE9oqedWzpq3sl8f4TacClp9M3kbihsN4MQggqXqTvtEHuKYZA+kuLUp9RZbSVqIIBiYABI3KiE9ppnl2asuuaH2ktIcMJdQtw6enmhZIUmd1J0xU0s1VZXHCTVojn8hxjq1qZwzriE8oQpQt3Aue1IFsrSSFpUlYMEKBBHuDcV+gcUwpKUMgkBI06RcTaT8SZnv70uzvw8nFNjzgVEXSvdaT0Chxt6Ta9a4xSigyi2jydl10Javc/UUtzJgJWVbTeKucX4QWFhYcslJ0pUIuOD++Kis9yvEtrKnkEAzB3HwI9xSxg7J8Gj4nHAFAHG9MMU2CgkHcTUz5hqnysh3D6VCDMA0s1xpiyVbFeTYfUSo7JuayxMqUTtyKbu4UtI8tAgkyo1ojDahciRuO1B5Fdg5Wxdg8xVsq460x/ikWhVEYfIUug+W6gK6TXU+D8UgatGsAz6TNBZIs5JSZ1cQQgOJEpmK7R2p7m+H8thlqIKjKuvWkvmUim2PB0ugjEOCR5aQj404ShCkhRUErHTmkGHw2oyobGmKcKSCSLUrh+4/Foe+YFJkAavzoDFOKUNJkDvS510oA0712wSlLdAWTYUyhJOn0S4voPZw4Tteu5HWlmc5jp9LZE0QxidTeo7iqUHi6sD8RZoEJCE3UfpVVlB8xlCu1eZ5s2sqLsak7W4qu/4+zpIacS7YIuKn+Ri5QtCZYXHQ6zl0NNqUraK8fWs6yoWkk1dZ1iHcXISkwdgAdu9KG/CL6r6DbeB++lP+Li4R2Ngx8VbJwIG5piw2C3W+OyR5J+4YHT9RWuDwkpKY4q0+h5oXpaTIOxme1ek5q/5uFbSAVAgbV5yGiDCtq9T8BYNflIUoBSEn+oKj5x9RO3FTnByaoXi2zHwz4MUnDvFaftFgaU9kK1/WI2pXi8YnylN6IUntH7NerZa+FrMwixAHxtpmPnUX4/8EB1KnWZSoG97ETxeAb1Zx0jRjkloFGbvBhh5HqVpCVKF/umNJI53qrwmILiQoGSASPYyLjkA77xPeoLwqtSkFkpU2htWkztYHnrPTk0Thc1WwrTvpVIm1ryD2+NZ23GTRbjyVlJjMaEHSoA9bD+0DsfpXV4IWkpUjSCLSNSRaJPT6bRNE5b5GKbhRDatUagdjJNyff92NY5j4RxeH+1a0Pti5SICo9ogn40VL0d+x57n3gxKtTjEDktgzbkjteCOI5oMYPykhI4F/eq1T8r1N+kpEkXBkelWoWkRPxFt6xxLSAgrcFryIumI/uK6f3Rlz4mtokncSmdK+bT0o3AICFFLn3OFdjX3EZOlz14dSV9jvRGUKhJbxKNzFx+tZpRSRl1WgbMPD+lQU2TpVsR/eqHwu48n7NSzIuLzbpWuBy8JSoNLKhuG1bj2NDZUhbbqnnARptHxpZyvTC03sfO5k064pp5oEIEhY3Apd/BZf8A90/P/NH4nL7rUSIcExzBHFT/AP0yz+L6mg5UXjKSXRjmGGLalD41ll5dWYUn09arnMD5pSogGU1s9gAE6UWNbEuSpjzVk4rABBCoB960bwal/wCKeYXKzohdyKapwGlv0pua7Gm278CRl4POszy5CbASZ3odQKhoR8aqs2yZ9Q0hIE1hhfDTjAlQBnc9KZtWNfshQvyXIIlJMKH61QZF4YlepIXpVcAaYjvJ2vTrAeHPOeGkAAXUs8e3f2qoxGLZwyfLQnUr9ep6n3Jo36KRhf2DMqydplPqPqji3xmxrVzNmE2KgL76AD3mbEGorMHcS6ZTrAPQafmekda+O+HsTo8zyyR1Jj8t6n8be2y1paLU4fCLExonkxt3k7fE0BjMjwSQSFgKN+DNuImoN51aFnVaDYG/zUZE0ywOKUuylK0xaEgW37SNvnTRTXk5r2Nmsrwqlx5QcUOSAEyfxER254qnOCUWwgaWkiwSnaeogUqwGHS2lJ/qF+4nrFvpRYx+telCdhquBt12tPSOapyoi1fQHjVOM6Q0b7anBb2vx8KZ5VjApC2sWAAoQCDPH9Khfv8AGscXinNMeXJ3tpEEdiQZ9rdqIGKGgL0WUJIAAI4PYHfe1t6Sba2dGnoEGU4Vrygw5r0ekGbnUZOojck/metZZr4UbUCpIlW+kaR77mKMxeTpWdTc7cGD77gf6oLF4fEt+sOLtwZt8L6h7/Ss7nu2XS9Mgs18LYpJeWEny0oKjB2MWkcwb/OplnxWpshWHQpl4R60rUPUNwoE+pPZU73r1nDeNVNKlaQoEQoRA4tFcc8N5Rij5wSG1q3E6b72CgRFa8OdVTJZMTuxdjcU1jU4V9gBOIKFKdQmwB2Ukn3Kt+DQbS0alJXI9KgoExaNNweYJ7+9dlZUcK8Th5UNyZHPECwH7tROPbbxI0hQadOxiZ33ngzvxWZtc6iW8bJJjLi0+YA0zKFJ5EkfmCD3Bpjm2P1gjSLEA+9MG21t3c0hIBhfA1cBO42J+Vca8Ov+UtXpck6k6TuLdbVHKqdsx5cbk/qifViCuzcpcSLRzVPlmNUEJS8Aoq6i9BYHLYGtQKFz91XBo5/ChZ1kkQII/UUjq9EYqUezLxJj0hptYkOIVB7D+1Lf5seiPnXV7BFwPKKjpWAAOnelv8j7n5mjSGjniuz0FDLkBITAFG4XBlRtxRqccgSVKCeoNLMTnbLd9dzsBzW+qdFW7Ha8OBuLgVrgUg/0+1ROa+NW0fe1AxU/iP8AkRW7M22rq3Z1HseIw7aEyoge9S3iPEa0BttQlRi1682OfYnFEFx7SOg3NVeRsFpGqdTi7J1HYSL/AL+tI5Juhoxt0F4zH+SgNNj1c7gT77k0VkHhou/aOki8yJB+Hb4GmGV5e0yC7iIKhyZn5cfnQmZ+J3XFeXhxA7RPv3NNpFty6KAP4PDEIUslRM6RePcX0+1fcT4wwxOkXEwNr9d9hUtlnhHEuKKnSGwRJ1EKJ23IM/X2pzh/+PWAn7R1ajvIASPgBP513ypeRHBeTZeV4PEjUsIkm39P79/rX1vBYZgENtz1MW524+Ik0izrwS42kraekJMgK9JvPN/kIqcfxDyNQcUqwkwQN+moXMncUvNDcL6Y7zHMtSyG9h6Qfe3tz9KDw+YKDoJIgiNMxqNjv++9JRmIjSlVgJBN5Uoe9hf92kN96FysgkRHTfb9T8aErCkj1BopKIgJVzKo343IHsKHwag2SgiCCSJm/WLzwDG9C5MllTaYvbe0jrxPw9+lMMThiRYgpAtYyI6KN4qfO1QHGnYT/MNKfuWHO4jr7e+1bNvoVuBB7fW0W96Roc0qEk3sJ9wL7g9Yi9caxSdz7AA2t1uZO0R1qcoS8BTQwzLw8y6dd7XsTvsDwDF+KQI8Nws6VejfuR3KZ/O9PBmKSPw87J/P9muy8aebzubfOItsP3NKvRTk0CYDISk9BHJJ+k29qTZ34fUn7RKII+9veCRtJib8xBExvVlhnxbUd7fQq/IfWgc+8RsIbUm61G2lMFUSmSR8Z+fFWxYtsV5WReXZg2slDomTp9W5MRH096Bwr7jLqsNrJTqOiDBAsR8b0wwmG84qKBpcElIOygImI2VF45G1IcW04h4rWbbyOOwpsiUVTM+bJHroocY2d9clO4pfh8eoOaVCx3rEYshlS1j1LI0jmO9D4h1SViEyTG9ZlF3VEGpSKV3ASgpQQkqNgaB/l2J/APnTDDu+Y2AR6hce9Y+diOiqNWLCK9E69my3JKiB0veshi0qKRuobVnhcraDSUqJUta4Bnj9zTF7KW2iQlWlQveqObsLcluxJmWWuPKJcICRzQ2IyQtgFJCk9R+tUmAyl1bmlKwoK67U3T4RxDKylCQtBEqHA9qaPOW7Gi5PbI7Ics1Op2Anc/p3r0/w4EKeJgENgJTPXepdACVwRp079op1gcaW8M4sCFLUUpjoNzbcnb4VRXds2JLj/JpmmLOKf8sEhIMCAI3Ek/sVR4TDYPAiSpttREa3FJBPaSdrnapLLsWtlpSiNC1EweY4ueedqlxlH8Q8pbhVrFwdV9rCTYDvx0JpuDkwOVKi/wAz8Suu6fISYS5pGkFUiwJKkqgDcQQRzG1HYjHPoRqGkqsNM2kmCB1uYF/8ocHhn2WijWAfuqUCVFBPCAqSbkG/atlYBwpCVOOE6gJm6oAA1HrMkx24pJwiwRbKL+exCVg3tIJIE8mLpFt+9A55lrTzcqSkKJgWmTBj6UCxlaBqUSZIuJgCdNgOgH6V0weIUmWlidBseok3n3M1nf1deC6VqyOzrIjh0FyDG4F+CAkdhYT7d6Vv4oLPAkCBtFhb8xXpOZgLZ0kAjp7Dvxua85x2A03i8m45iwt8f3vWmLUlsk9M3yfM1Mk6xMAQOk8ntsatMpzUrSF65On8p/zUC43MqvpIB+gP5j6U78P4jQdCrT6v1j25+FJPHew2V6FKUBKZv/s++/7FAZs3IlBKDYTFom8z8KZYLFo0FRNgkk9h98z3gx8aDzTF60BRgj8PG2rf8j2roNx7FasUZk6UggGSLCPnE8nehGMxdEalSJkz24nminEhJgkHoeo6++/yNDjD6iSiPhMfC8CulK/A0VQ9wGOCjKyYkHuCN7dDcX4ojGIwaEpLjiGXJkHRv7iQDalSMNpRqmAL32mKwTnzoJUVJ0xZIEyffamxy422LklFLsZuYZCUlbCkKKV6lOzxxB5WSNI4GntSzN20FS1IGpsGQIm28UkxPiRwhekJSCqSkRuefe1ZJzR6AQkibnpUs2XlVIw5JqTXoJViEK9SkEDjVb6UdgHWVg649JsZ2msTjEugExMQOlL3HIBmB6gOlInKx4X4ZUoYhSdKrgXvvTDyldTUnl616StZtNoNxFG/zZP4j86Z67KRtLRMYDDlLbClGftRv0mrDPMOnzkemZTv8KTZwlKEoESkKBEdZqkzN4jy1RI0j3ptMi9yTRjlrq2rxYdqLRn7/qVqGmvmGx7bzagj7w/p2pHiUuKSUkaegFM6SqylUjXE5kh3UsJAUPaD70xbdCmmm5FgJOwk+omplrDgbz7Dmj3H/syZ2BSPcyJNGLpaNONJoLaxaS4oJGpE6Zjcgxzx/ambGNQr1hMACEzuSDf4Sd+1TLa4SlPQhPyGkfrTJnEWCO1viQZ99/lVZNUcouygViRYE3kfCN/8+/ai0YgKgzcdOsDap5nETzt9f2TTHL7K6CR8iFbHtAFZ5XWii0O04PkcdOtj+goDMctjYwZInqD1+FVGXJBA9v8ANaYvBgjbn/E1yxuSFc0mR7LNrk7f+4EW+dJ8dkQ9RJtNuu1V7mGAOkjY27iuryRBtarY4Vpk5Tvo86x+UKG2w/f50Ercbj+0R+p+VeiuITERSrG5S2viDwe9NKNAU/YiwiyELTqsoX9rg++9d3sYARNhJiDtaB9BHxoheUR/WIP+P38a6uMtNn1+okzHAvzU7RznH2ZMtrdJj7nJNh/r+wovz2m/SPUdp7/2pPnWIcWry0mEGLJsZpdjVKSry0qJhN1dz1pHL0Slm1opVY0uNuJUBa46WqRzvF6G1BJ9RSSCKKyzWlOlxQ1EGaXYLADUfNWNJkd71OLTlcmRbjyuQLg8tUEBwn0rEmtcfiHmUBWjU2bagZA96qsI0z/D+UJUESO9JWM3ZQf4fQdCt9WwoPcrqyKcmxflOcajBSAJt71RYtxKGC4UBQ1SZqczXJSh4EWQu7ahtPSqDIsUSPJcAIVYg9aeXuJWElGVg7eODrLikekBNwel6W+Yn8SfnT57BthLzQSBqTGr5iI+NKP+mv8Azb+X+a6Eobs0/LB9DdKi4iSLg1ti8W4oIEgRaaoH2EhOkJgCkGFy8uOqKpDY5P6U08bXRGpN1EIQnY7Acjmu62gsygmPzrbD4tKnQgj0JBA7mispxg84JgGDsNqSMJPsMYySo7Zd4aeXcjSk0jzTCFgqaIuoz203Nu94r1PEYrQjUogWt2qB8SkOp8wXKSAVcb1ocFFaL4tOiUQ6PUDNpPzJn43+lHpdHFrW+OkRPxpY83Kkx/Ub/EUThnQYiIAg/De3xpTSxkziAATI3t8SP0pphMWYE+x6zpE/GPyqZxKyBYAyb7XgDb4SaO/iFbHcOEz1A/wR86XjsF6PWMhxQJI6W+l/yP0pviFiDG9RHhjFapV3J+Z/SPrTzFYyDBrZBJIxz7OmKMmgHyTtWinZMg1oynSZULUGjkwHHYJaU6xPcCkzD7hsm4nbme1W6cYgpUBftSFrJF+Z5qElO9v8Vky4W3aYKd9iLGYNTiTYoUIkG1L8Rl7xIQlIj8SjVc5gHFmVmFDtZQqJznFrLikFSkAfdP8Aes0oSholLFWjiMC4h2ZBA5ms0ZZHmuqI1KvvIFCtagRMr+NG5ThFrUuAYUL6uBSKbuiTlJ6EqMEtK1OElyBYDaP70HmzGxWdJVtGw96ssNlikmx272oLHZO2tSgue9/qKeMqdsqpbtmPhNyFFDm8b9aT4zKCX1EAAAmJO4qnwuXNtlI1SE8nc1hmmWJOJbIWNI/pprtiqm3sxWptlCEPGWz90/hPvXTGYMeYh5ozCgTFFv5d56HsOpQK0+pHUD9iprA45bQAP3SdKgeCOlFWKo+SrzFlCVrO6XET7TyKm/5K1/8Akq+dP8HjEOpRJlJlINZ/yRr8f1pXZohjdar+xxilaEo1kqUaVZhiHFWAjoBt8a75a6kI1vEqV/SK6vY1wqPpgEWFb3DyzQqRpglJQklRBVFdWMQEEqTvEz3rBvCHTP0rHQsGfLKR35pfOjmHtl7FKSlSlRzVdicjnDqRxGw5PvQ/g5LaLrI1GqdTwXITtyeKatCXvR4ji0+WsovqBI/1++tY4dQSozI1Xte1gY+VVPjjAN+bLcFSQVK7m5j5VHq6mRaB9P7/AFqaRo5Wg7zRrEj0x8OSPoPyrJOI0k8gqkc8R+grPGatI0jYhJ72jf5V9bQ2gJUo2i45tEwOZJ+prtnaLjwviFNtkm8Am3XUNqZuY5S12uOI78H51HN5+gjQ3MHiJtPt7GqLIcnfxCfM+63xqCgoxaQmLDinua6RJxj2x5hMS0gy6q2+kXJ/QfGmGEzQLUoeUUgbSRt3nb99KF/6XQRoWty4umAlKvcXJHxrHM/D74aSjCwE7KQpRuN/Sozbe3E9LVTfkT6lFhgkmZAn2r6w7qWUpUCU7wQY9xxUVluGXhnFfxMlBkoKzc3mxBJkdLTvFUWA8SsqV6EqKZhRAmP/AFdP9daHGgtehylKJ+0O1J/Fnh5p1kqQBIuetVBwjaxJSL1hiW20+mCLVzgmtkzxFOVaCVoUogiYnaKMy7EQhS1SAU1U5g215itYCPSQeJqaxyk6fKR9yIChXn5cfFmR/WRgw+UnUkkk7cijHmVuJBWBPTmu+Fwnkt6lCY2G9Y4ArLq1mCCn0jvUkuIsEpOkwJZSOCCRBFZ/xySWzBMKCSa+Y1glwEqIG5EVrgBJIMWUCD1oqSbpjSSfkZPSh1LzcEpVCx/4neaSeKMEkLWUwUKhQ9zW2dOuN4lp7/7biSlYFxI2/M0LmiC7hVaElKkqsDzHIqqVuzTGP1pgeQ4bQhbaZsdUK3Bvt2rp/GPfgNFYV8wAqPMKZB6xuKe//rVS1aRS+IsOhISU6CJggb0CnCNuKSlMhXWKHyXJF2U4FKk9bRT13FoRcAIIMAVr8A8k3mOXqYcOskTt0od3FFRTrO1UOOabxCVF1+FpEoiIqbxeE1MKKlS4DAI2IoJWNYQy9K9aAZiO1Uysb5GGU44bxYDknYCpDK8QqNJIE2+NaY/GKee0xKGxFjaRBJP5fDmgotJge2K38QsrKyPWs3G49vypUVBayIuCFT/6p/K1MsyxQCCRAj1H5gfv3ozw/wCB8Y8jziEspJEeaSlUddOkmDPxjvQoZyAHGSYCUyo9BN5gR3q0ynwAkoSp5JK+nTc3HSqbKcraw7YDaJUBBcIEzG45HsOm9aYTMClRSDIJO/bp2+NNGHlk5Ts3weRsNAaG0ptyLkf5rVSnIMK9JAAJGkhQP0FtjQa8wXrOlAi6ZVMhUEweg/Peu7WOJIQnSkm29iCJHMnYW/8AL3pxWGltZVJNhwDNzHJvweea7v4sNq0lUKP3Z2vWqwEESZJ42Hy+NYYxSAZIExadyPeikAHx+D/iEKbcEpMb9R+xShnLEYQfZpnXJhIvHX/yEESBfeKp0NSJPT6+1DuJ1CDwZB6He3w/Oh0G9HxjOIRJE7dpB2MdKAzTNkxKrGJrReEbbsLaiVdj1g/GY7GBUT4pximklOkEqgpPwnT8JqWafBWK5Uhb4kx4dSpwndUAe1KMDjwQEaCk9Tsa643LnHW2wixkqKffpRmXYMEeW6ooUOeKwtXtkWt7CGczWmURI6Hj/FfBiiVTtH5VrmGHDYSoqCjEEihcI6SZCCoe1JKVEfjfL6H1GNIXKDqHMinTmASpBcSgH3tQzmAVALY9wRXV1/FNAKQQoTdBH61yhF/5Ipa/Wr/sZoyRpTSSokKnragHMEUkDe8Qe/NFDNFOAJdagckbCiHFIctI1IHpvuO9OsMVtFYcH0J3snSFjV6Snboa0g/iT8qYPlLzesfeQdKo6dfas/Ja/ZqiX7mn7LoMbddQYVJEcdaWOoIJJSTfk1SYTGQNOgFO5mi3XsMWzDZKiNiK23YOiLLEK1BPvWzjetUgRbam6MoWRqAMfpRAwwbJKU6pE+1dYSUCEoCluiANh16CO9CrWkJUrV6QYkcqVue5lQFG+N2oSlszcaiBck8AxxPH9jWeWZWVLwrKxKZ8xzoTIAkdZV9D0qiWhLNvDHhdTzyV4hOhowW0WlQBO4/pBjc716qp6AqEkgCQLcb87UsxSYUlSUmNlDsQbnoL/ua+KxAmEmRfbiNztH7FIqA7O+d4rSgTOkqG3xsetKGWA4r02CjZJMEWg6rzFhb2ovF4X0RJ9GkgcbmQbbEGK1/hFBIAUoEKKvSmDG6Rttt7RT0LZz+HS2UoQCVCZUIIlX9o+lZvKZQnW96DMKKrcE3Mix7WlVEtBPl6kGHJJlUGNUTYb7AixIn3qdz97EiXBpeQSAUCUwInV0Mzpj9aDTCqGqVNjQ4hSnElMoUlX3R0iRG0cniuYTEKU8Uf0iDztYSfc8zUtisV5eKQpCdTarpR6QdZMCQmNuk+21UXhvzNPmO/fXKtIiIB+6m4AM8SO9BMLKF9wJUkEphQueQoXuOhv9a+PBSFpk+lUzewMWjpP5ihluFxAUiQtMWIm5gQRuneO16CfzFwqCXEpkK4OqCI5tsR0tTAGWKYS62plQVHBBunuDxtS3xDkgebUJEq2VA9KtgofHf49aKW6UtrI1ekEyBNt7De1vlXMJp1LkqAcECVSkH1TAm0kyJvQq9MDPN8a4WNIkF1B0nmODS1/HIaSTiFkqVJB6ewqt8U5aEK83SJX98gf1AbnpO/f3qNzNppaYUoA7/6rzZpRk1LpEn68AWU+K0FaW/LUUlUajVmxj21SAShQttapbBZegIVpcSpRHptsaW5Xmiw4UPgi8aotNTbb/1o6G39SyxuPxSEEpQhwfiForvlWOe8sqcaKjzpE0qXjH2Rqb0LSRYXg0Jh/FIBCVFTalCSkbCeL0y5V0XlFpb3/RXYfN2VW0lKu9q0fdZMSQknn/NSv8uWpXmNu+Yk7pO49q7qwqwY1fA0kpTXqjN9X1ooUobQYC7G1tiO9GfwjH4frSBhvUkAiDNzMiiPJP8A3BTqb8GhLKlrY+weISmBB3gj9K7GQ5KZAE2rjgHpUlQnau7ziiNKlX9q36K7Oz2ZKUoJ1QD0tXR/GG5TbSLgc1zDYTUCQQY/dqXeJMWlIDLQPmL9MD7xneAP1oxTYJaErj6nsQCBKhJKUyoyBCUjvwB3jmqXIMC439o6gpVqEokKICQozNwfUqbdubVv4S8OlsaiEkwCSDtN4A62E8dJ3qhLIBJWbREnkXt233qreqJvs3ZlSZO287WM81kjApkagYJESSTquZKgY32nk1g462j1AkAWibHjp3otWKTpBP8AUJ70iCfRhApWoxpHbkEW0kRFpmhM3JShULMn7vy4r7icTtFoPsD9dr7d6+BKlagopgxveL7g8Hc+9OmBoRupabTC1uNiI9JUSozIJERIkjb47UPm+dtNrSCpSUqISsxtAkKgbQRWj5QvEoCzKFEgEkQYJB0xeO9vetnslZUo6Jv94XM9gVAmNuZ3vXV5OFLmLZUZ06kbzIAJJ1QTsEiNha9dHM9aFkKMJOobyruTFv0tes8fkaVn7JLi7XUk2KpgSJ4AN/ag8qyfzQNUtrHqS4Fdgf6oMGORyehiTVjppFGxmK3EpWg+onfUZgTbTpsmTyZsOtcTK3ChSzrA1FZjYmN9zzH510YUtgyB5i1RJSLD7qbzYTPXjmneNwHlgqSogrkrn7p4tPNul4+NOtCsJyTE+m0qIVBJ3MW24G9veuz3lNuBJSQTBttJ29P9v9KsoxKgoAgoSABMEyruNkiZE7U4xbrJAUoSQTHMHb8xx/ejYKBMfdelQlgtHVBAg3iB1vPumvL8blKsP5hV9u5qISI2E9ParrMsVqWEq06CCn1SJuDfjf8AWkuOwqnFFTJPmselSOVojcdVJg26fCo58fNCTuqJTK2TvGieDz7U1abRqunV2IEUSw8FBTTulSN0mYUDWGGwtigKIO6Sb7cTXnfHT0yWOW9dg7uLkLCWo03gfpXBiGFpBxDKdPBIgj3pjhHDGhxITOyhsfjT/D5O2pMFEzya0Y1zRqjNNbEDGUpWkuYFxOqJ0k/pS/GYnFiz7aQRseD8arkeHw36mbKrq6lwCFiZ35FdLE6BLHGRIM4lYAVoF9yP7Vv/ABivx/8A800Vh06p8kj2/tWvkJ/7Z+VS+NorGMYqq/6GZV6kAAHVsZFOBh1gQYIJn/FLcNiFKOlbYQsCygYn+9ENtqKZUdRTMcfX9a396FMMwxnlAogAngbjuazyfLG21LUn7TEKGlSlbNi8gHfXYye3zGYwrjjgWoA6VekXgxc73IFpJ+tOiylAgA3JUoTEkEEzG5MiQeJ3qvQjY2bUEpJQopJSPviLA3MW4G/FK86zNDZIW4nVE3tuJ0kncGB027xXC+PKUIQhShP2it5PAIE8/wCaXu4NTiW1pUFBJmQkEkXsFHaIse/yVnGGJzUOFoIVPqAiIEFJj5G/+aMwzrkbk6R8P99u9AYrHekjTBkSTulQgyJ4k7cg8EUPg3nnBBVE7kCCRfgjp1JFq5MI/wANjm3VhsiYJCo1SCRb1RA5tvdJohzE2ICSNJ0ngGDHPfkClWVMpaIQDp4UVSYO+pV+YHO9Ml5eoSgO3nlM3tYxB5nfnvTimTuCLy0uOlA8u4KepkEdRF7d6HfWlsBSioJUYCpE8mEgRf3/AFrs3ljTTzJkhJJB3gqAkSBAt7f0iu+JxDJcLOhSQs9BBHWDJiQQemkUtvoIBkWMXqOs6UmAgQTJKdzB44BG1F5ow8hJMCxGoJkAnTEyOSCL/wCqRHMkYVbqUuBRSJSkIkBRsBrBgAFVxANo7U7yzNkOelfPq+8NibTBO1xA7iuSR1sJaxSXkpU2kBKF+pJEBWnSRMX1DTsb9r18X9pLYQVQnn1C0CRz0Me3ap3PjpV/8u4kFPqIE6QQLE6Tbe4k/Wa1y3PdCBqCdY+9YnTIkFJIsn02n8912uw1ZRY5aQlUnnaAk9TuII5477UGFktlwA2SSAJKoPIkiBbb60lGKW+5OkqmVRGwMCDBkAj8uKpWcIlBK9WmQRxFwNudx+VczgJQS+hGgALFwJE2IkmLXvb2olNvLuUOyLBNlykkGYidubwRxQ+HbQklTcAqV9mZAIXOytPH3t+9tqaJcJVEAqtBSIB5UfaCfjTLoVk94t8PtvJLo9CpHqG07XHF/wAxUthnXsOspcG2x4iqpWcLQoeYiUOCFCI32B4CgL/EihM0zVlH2GJb9BHodT+FWxP5HoQazZYeUK4JsZ5c8y4nQoASJHQnt0pxg2dCQmpLCZStCUlJ8xvdKkm8e3WnuV49SSEmSOh3pYezuMolGlAtNaKYSoQb0OMY2EkqIAHJoPEeI8M2P/qhR6AyaspWrKLfQw/hEDZIrn8On8IqKzH/AJFbBhCJAP8AUYn2pT/8UFf9tPzNdaG4sp8YwVL0hVx6rbfGs80kI9bhbTuqBKlDpv6SeIue1crldj6bA3uhzlzoAsiCSEgHeSduZgkD5mssUFNrCQgGSoFczBJ1EQdrfG3U1yuVUQXfwBQ6iD6FKsBskpkK2gC0b/C+55SAhWjVp2SZkzI5PFt+oO9crlBsIuS6hTxB0qKEgEQZMnTPWL7/AO6zxzPljzIJGqJ2N7WPEDrauVyuS0cdMMV6fMEEKiZuR24uesUzwuI8wAxp7CAe6r8/CuVyqIDNHcc01DStSjMDcmSN1GN44qefcbxTep0BCkIKCIhRbBPNtQgieLbCa5XKTtsJnlmDbS0UlqC4J7kTYT7iSPevuY5AhEaUJlQBISoyQbQoxcTF467VyuUWgBbmHSSA0nStJhYJFrQOPVwQRPtNI2cE44+loRrSPVpiSNpItG42P61yuUlBGSMEplwLb9Y0yQiSRa4UI9J368iKF/niFjSp/Sehi54ggSDNr9ZrlcoPRSKsLLGtIWhZSCoyTEpABAtzHb+9M8C0S56XDZICB2AgzB3+t65XKZCNH3CPIkkp9P8AVKpj1WgC8pPyntFB4nKWSkMrUVNq+4uQSlRUozf7ySCJHYV8rldQosyXDO4cqYUfs59Ckn7pNxHYz9aFbzjFoc0OeXYweTHB4ua5XKxzfGWij1GzVGbLSsuQpbK/S42bkcSKT+K8mWwnzcOCtpdybynsewrlcowlfYjlVSXklG2HcQpDbSZv6lxAvf6U1/6KxP4x865XKv0Us//Z
     alt="">

   </div>
   <p class=""text>Also, <br> this is a quirrel in han river.</p>

  </article>
  
  <div class="container">
    <div class="box">안녕안녕</div>
  </div>

</body>
</html>
<!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>

    * {
      box-sizing: border-box;
    }

    .box {
      width: 150px;
      height: 150px;
      background: gray;
      margin: 10px auto 0;
    }

    .box1 {
      background: tomato;
      /* 테두리선 꾸미기
       (1) 하나로 할 때는 "border: 굵기 선스타일 색상"
       (2) 따로 할 때는 border-width, border-style, border-color */
      border-width: 10px;
      border-style: dashed;
      border-color: orange;
      /* 이렇게만 해주면 border 크기 만큼 박스의 크기가 커지므로, box-sizing: border-box; */
      box-sizing: border-box;
    }

    .box2 {
      background: aqua;
      border: yellow dotted 10px;
    }

    .box3 {
      background: greenyellow;
      border-top: 4px solid green;
    }

    body {
      margin: 0;
    }

    .banner {
      width: 80%;
      height: 150px;
      margin-top: 50px 0;
      background: pink;
      border: 4px solid #000;
      /* border 한 쪽 제외할 때 */
      border-left: none;
      /* border-radius : 테두리 부드럽게 */
      border-radius: 0 20px 20px 0;
    }

  </style>

</head>
<body>

  <div class="banner">
    배너
  </div>


  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </div>
  
</body>
</html>
<!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>
    .box {
      margin-bottom: 50px;
    }
    .box input {
      /* inline-block : inline이지만 가로세로 사이즈 조절 가능. image, input이 있음 */
      display: inline-block;
      height: 40px;
    }

    span {
      background: orange;
      width: 500px;
      height: 500px;
    }

    .box input:nth-child(3) {
      background: greenyellow;
      /* display: none 
         화면에서 사라지고 자리도 뺏김. 주로 토글링할 때 사용(댓글 펼치기, 댓글 닫기)
         cf. opacity, visibility */
      /* display: none; */
    }

    .box input:nth-child(4) {
      /* opacity : 투명도(0~1) */
      /* visibility: hidden : 사라지는데 자리는 유지 */
      visibility: hidden; 
    }

    .click {
      margin-left: 20px;
      border: 1px solid #000;
      /* width: fit-content : 가로 길이를 내용에 핏하게 */
      width: fit-content;
      width: 200px;
      height: 50px;
      /* padding: 7px 14px; */
      border-radius: 10px;
    }

    .click a {
      width: 100%;
      height: 100%;
      /* <a>는 inline요소이므로,
         예를 들어 '클릭하세요'라는 텍스트를 가진 큰 버튼을 만들 경우
         클릭하세요 부분에만 링크가 적용되고 버튼의 텍스트 외 부분은 링크가 적용한되는 문제가 생김
         -> display: block 하면 텍스트 바깥 부분을 클릭해도 링크로 연결되게 함 */
      display: block;
      font-weight: 700;
      text-decoration: none;

      color: gray;
      background: orange;
      /* display: flex; : 부모 요소를 플렉스 컨테이너로 만들어, 자식 요소들을 수평 또는 수직으로 배치할 수 있게 해주는 CSS 속성 */
      /* justify-content: 가로 정렬 */
      /* align-items: 세로 정렬 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>

  <span>안녕</span>

  <div class="box">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <input type="text" value="5">
  </div>

  <div class="click">
    <a href="#">click me!</a>
  </div>
  
</body>
</html>
<!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>
    * {
      box-sizing: border-box;
    }

    .parent {
      width: 300px;
      height: 250px;
      border: 4px solid gray;
      /* overflow: scroll/hidden/auto(크기 넘을 때만 scroll 생기게) */
      overflow: scroll;
    }

    .child {
      width: 100px;
      height: 100px;
      background: red;
      border: 4px solid orange;
    }
  </style>
</head>
<body>
  
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>

</body>
</html>
profile
코딩기록
이전 포스트

CSS (4) : 글꼴 (Day 4)

다음 포스트

CSS (5) : FLEXBOX, 외부 CSS 사용 (Day 5)

0개의 댓글