Notice
Recent Posts
Recent Comments
Link
ยซ   2025/05   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
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
Tags more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Outputor

SASS layout 1 ๋ณธ๋ฌธ

๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป/๐Ÿž ํ”„๋กœ์ ํŠธ

SASS layout 1

output7 2022. 1. 14. 13:57

 

๋”๋ณด๊ธฐ
๋”๋ณด๊ธฐ
๋”๋ณด๊ธฐ

HTML

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./scssEx.css" />
  </head>
  <body>
    <div class="body-container">
      <div class="inner">
        <!-- LIST -->
        <ul class="lists-box">
          <li class="list active">๋‚˜์ดํ‚ค</li>
          <li class="list">์•„๋””๋‹ค์Šค</li>
          <li class="list">๋ฐ˜์Šค</li>
        </ul>

        <!-- BOX -->
        <div class="boxs">
          <div class="box1">
            <p>์ฐธ ์ž˜ํ–ˆ์–ด์š”. ์•ž์œผ๋กœ๋„ ๊ณ„์† ์ž˜๋ถ€ํƒํ•ฉ๋‹ˆ๋‹ค</p>
          </div>
          <div class="box2">
            <p>์ด์ •๋„๋ฉด ๊ดœ์ฐฎ์•„์š”. ์กฐ๊ธˆ ๋” ๋ฐœ์ „ํ•˜๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค</p>
          </div>
          <div class="box3">
            <p>๋„ˆ๋ฌด ๋ถ€์กฑํ•˜๋„ค์š”. ์ด๋Ÿฌ๋ฉด ๊ฐ™์ด ๊ฐ€๊ธฐ ํž˜๋“ค์–ด์š”</p>
          </div>
        </div>

        <!-- COLUMN LAYOUY -->
        <div class="column-layout">
          <div class="half">
            <div>
              <p>1 of 2</p>
            </div>
            <div>
              <p>2 of 2</p>
            </div>
          </div>
          <div class="third">
            <div>
              <p>1 of 3</p>
            </div>
            <div>
              <p>2 of 3</p>
            </div>
            <div>
              <p>3 of 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

๋”๋ณด๊ธฐ
๋”๋ณด๊ธฐ
๋”๋ณด๊ธฐ

SCSS

 


// LIST
@mixin list () {
  border: 1px solid #e9ecef;  
  padding: 10px 0px 10px 10px;
  font-size: 20px;
}
@mixin active () {
  background-color: #1c7ed6;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0;
  padding: 10px;

  .list {
    @include list();
  }

  .list:nth-child(2),
  .list:last-child {
    border-top: none;
  }

  .active {
    @include active();
  }
}

// BOX
@mixin box ($bgColor, $color) {
  background-color: $bgColor;
  color: $color;
  padding: 10px;
  border-radius: 8px;
  margin: 10px;
  font-weight: bold;
  box-sizing: border-box;
}

.boxs {
  margin-top: 50px;
  .box1 {
    @include box(#d3f9d8, #2b8a3e);
  }
  .box2 {
    @include box(#d0ebff, #1864ab)
  }
  .box3 {
    @include box(#ffe3e3, #c92a2a)
  }
}

// COLUMN LAYOUY
@mixin halfThrid () {
  margin: 0 10px 10px 10px;
  border: 1px solid #9775fa;
  box-sizing: border-box;
}
@mixin column ($width) {
  float: left;
  width: $width;
  box-sizing: border-box;
  background: #e5dbff;
  padding-left: 10px;
}
@mixin clearfix () {
  content:'';
  clear: both;
  display: block;
}
.column-layout {
  margin-top: 50px;
}
.half {
  @include halfThrid();
  div {
    @include column((100%/2));
  }
  div:first-child {
    border-right: 1px solid #9775fa;
  }
  &::after {
    @include clearfix();
  }
}
.third {
  @include halfThrid();
  div {
    @include column((100% / 3));
  }
  div:first-child,
  div:nth-child(2) {
    border-right: 1px solid #9775fa;
  }
  &::after {
    @include clearfix();
  }
}

'๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป > ๐Ÿž ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

carousel slider ์‰ฌ์šด ๋ฒ„์ „  (0) 2022.01.27
Admin page 1  (0) 2022.01.23
layout 3  (0) 2022.01.13
Shadow DOM  (0) 2022.01.06
layout 2  (0) 2022.01.05
'๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป/๐Ÿž ํ”„๋กœ์ ํŠธ' Related Articles more