[23.07.19] 수업내용 복기

728x90

display 종류

block 레벨

한줄을 통째로 차지하는 요소
기본적으로 부모와 같은넓이 가지게 됨
크기를 가질 수 있다

block 레벨간의 수평정렬

margin의 수평값에 auto값을 사용 (auto값은 block레벨에만 적용됨.)

inline 레벨

줄내림이 되지 않는 요소
크기 속성을 가질 수 없음
a, small, em , i

inline 레벨간의 줄 맞춤

text-align은 요소 안쪽 글자및 인라인 계열 요소를 정렬

line-height은 행간을 제어하는 속성이지만, 요소의 높이와 동일하게

설정할 경우 수직 중앙정렬 기능으로 사용됨. (단 한줄까지만 사용

가능!!!!!, 두줄 이상부터는 flex 같은걸 사용.)

vertical-align속성은 글자 및 인라인 계열 요소의 수평줄맞춤

inline-block 레벨

줄내림이 되지 않으면서 크기를 가질 수 있음.

출처 : https://velog.io/@mong-byte/TIL-5%EC%9D%BC%EC%B0%A8-Inline-block

[css / margin 과 padding]

margin 과 padding

<html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>margin과 padding</h1>
    <ul>
      <li>
        첫번째, 마지막 블럭레벨요소는 상하마진이 적용되지 않는다 (예외 :
        부모객체의 padding-top, border-top이 적용되지 않았을경우)
      </li>
      <li>
        padding과 border는 기본적으로 크기에 추가됨. <br />
        box-sizing:border-box를 이용해서 크기 안쪽에 포함시킬 수 있음.
      </li>
      <li>inline 레벨은 상하마진이나 상하패딩이 적용되지 않는다.</li>
      <li>block레벨간에 상하마진은 하나의 큰 값만 적용된다.</li>
    </ul>
    <hr />
    <p>1번 와이어프레임</p>
    <div class="ex1">
      <div>div1</div>
      <div>div2</div>
      <div>div3</div>
    </div>
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <hr />
    <p>2번 와이어프레임</p>
    <div class="ex2">
      <div>
        <div>div1</div>
        <div>div2</div>
      </div>
    </div>
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <hr />
    <p>3번 와이어프레임</p>
    <div class="ex3">
      <span>span</span>
      <br />
      <span>span</span>
    </div>
    <hr />
    <div class="ex4">
      <div>div</div>
      <div>div</div>
    </div>
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <hr />
    <p>4번 와이어프레임</p>
    <div class="ex5">
      <div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
  </body>
</html>

<css>

.ex1 {
  width: 500px;
  background: #eee;
  margin: 0 auto;
  padding: 100px;
  box-sizing: border-box;
  /* 지정한 사이즈만큼 여백을 발라주게 해준다. */
}

.ex1 div {
  width: 100px;
  height: 100px;
  background: black;
  color: white;
  text-align: center;
  line-height: 100px;
}

.ex1 div:nth-child(2) {
  margin: 0 auto;
}

.ex1 div:nth-child(3) {
  margin: 0 200px;
  /* margin-left: 0 auto; 라고 해도 된다.
  margin: 0 0 0 auto 와도 같다. */
}

.ex2 {
  width: 500px;
  background: #eee;
  margin: 0 auto;
  padding: 100px;
  box-sizing: border-box;
}

.ex2 > div {
  /* width: 300px */
  /* height도 안쓴다. */
  background: black;
}

.ex2 > div > div {
  background: red;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.ex2 > div > div:nth-child(2) {
  /* .ex2 > div > div:last-child 라고 해도 상관없음. */
  margin: 100px 0 0 auto;
}

.ex3 span {
  display: inline-block;
  border: 1px solid red;
  background: yellow;
  margin: 30px 0;
  padding: 10px 30px;
}

.ex4 div {
  margin: 30px 0;
}

.ex5 {
  width: 670px;
  margin: 0 auto 0 auto; /*  == margin: 0 auto */
  background: black;
  padding: 30px;
  box-sizing: border-box;
}

.ex5 > div {
  /* > 를 사용하는건 직계 자식만 적용된다는 뜻 */
  width: 290px;
  background: red;
  padding: 30px;
  box-sizing: border-box;
}

.ex5 > div:last-child {
  margin: 30px 0 0 auto;
}

.ex5 > div > div {
  width: 100px;
  height: 100px;
  background: green;
  padding: 30px;
  box-sizing: border-box;
}

.ex5 > div > div:nth-child(2) {
  margin: 30px 0 0 auto;
}

[jquery / 이벤트타겟 노드]

이벤트타겟 노드

<index.html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <script
      src="http://code.jquery.com/jquery-latest.js"
      type="text/javascript"
    ></script>
    <script src="./js/script.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="ex1 slider">
      <img class="img1" src="./img/img1.jpg" alt="" />
      <img class="img2" src="./img/img2.jpg" alt="" />
      <img class="img3" src="./img/img3.jpg" alt="" />
      <img class="img4" src="./img/img4.jpg" alt="" />
      <img class="img5" src="./img/img5.jpg" alt="" />
      <div class="btns">
        <button class="btn1" value="1"></button>
        <button class="btn2" value="2"></button>
        <button class="btn3" value="3"></button>
        <button class="btn4" value="4"></button>
        <button class="btn5" value="5"></button>
      </div>
    </div>
    <hr />
    <div class="ex2 slider">
      <img class="img1" src="./img/img1.jpg" alt="" />
      <img class="img2" src="./img/img2.jpg" alt="" />
      <img class="img3" src="./img/img3.jpg" alt="" />
      <img class="img4" src="./img/img4.jpg" alt="" />
      <img class="img5" src="./img/img5.jpg" alt="" />
      <div class="btns">
        <button class="btn1" value="1"></button>
        <button class="btn2" value="2"></button>
        <button class="btn3" value="3"></button>
        <button class="btn4" value="4"></button>
        <button class="btn5" value="5"></button>
      </div>
    </div>
    <hr />
    <div class="ex3">
      <p>
        3. 클릭한 버튼의 부모박스가 변해요 <br />
        클릭한 박스의 자식버튼이 변해요
      </p>
      <div>
        <div class="box"><button>1</button></div>
        <div class="box"><button>2</button></div>
        <div class="box"><button>3</button></div>
      </div>
      <div>
        <div class="box"><button>1</button></div>
        <div class="box"><button>2</button></div>
        <div class="box"><button>3</button></div>
      </div>
    </div>
    <hr />
    <br /><br /><br /><br /><br /><br />
    <div class="ex4">
      <p><button>버튼</button></p>
      <p><button>버튼</button></p>
      <p><button>버튼</button></p>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </body>
</html>

.slider {
  width: 200px;
  margin: 30px auto;
  border: 5px solid #000;
}

.slider img {
  width: 100%;
  display: none;
}

.slider .img1 {
  display: block;
}

.slider .btns {
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: purple;
}

.slider .btns button {
  width: 10px;
  height: 10px;
  background-color: #eee;
  /* background-color = background 다만 배경색이 없는건 none / transparent */
  border: none;
  border-radius: 50%;
  /* 정사각형일때만 원형
  직사각형이면 타원형 */
  cursor: pointer;
}

.slider .btns .active {
  background: yellow;
  width: 25px;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid black;
}

.ex3 .box.active {
  background: yellow;
  border-radius: 50%;
}

.ex3 button.active {
  color: red;
}

.ex4 button.active {
  color: red;
}

// $(function () {
//   var fnSlider = function (ex, n) {
//     $(`.ex${ex} img`).hide();
//     //$('.ex1 .img3').show(); show라는 명령어는 jquery가 알아서 변경
//     $(`.ex${ex} .img${n}`).css({ display: 'block' });
//   }; //fnSlider

//   $('.ex1 button').click(function () {
//     var n = $(this).val();
//     fnSlider(1, n);
//   }); // ex1 click

//   $('.ex2 button').click(function () {
//     var n = $(this).val();
//     fnSlider(2, n);
//   }); // ex2 click
// }); //ready

$(function () {
  var fnSlider = function (el, ex) {
    var n = el.val();
    $(`.ex${ex} img`).hide();
    $(`.ex${ex} .img${n}`).css({ display: 'block' });
    $(`.ex${ex} button`).removeClass('active');
    el.addClass('active'); //클릭한 버튼에게 active라는 클래스명을 추가해준다.
  }; //fnSlider

  $('.ex1 button').click(function () {
    fnSlider($(this), 1);
  }); // ex1 click

  $('.ex2 button').click(function () {
    fnSlider($(this), 2);
  }); // ex2 click

  $('.ex3 button').click(function (e) {
    e.stopPropagation();
    $(this).parent().siblings('div').removeClass('active');
    $(this).parent().addClass('active');
  }); // ex3 click

  $('.ex3 .box').click(function () {
    $(this).siblings('div').children('button').removeClass('active');
    $(this).children('button').addClass('active');
  });

  $('.ex4 button').click(function () {
    // $('.ex4 button').removeClass('active');
    $(this).parent().siblings('p').children('button').removeClass('active');
    $(this).toggleClass('active');
  });
}); //ready

728x90