[비트캠프] 18일차(4주차3일) - CSS(border, padding, margin, display, visibility, float, position)

 

border-style

test08_1.html

 

테두리 다루기(border)
    => border-style : 테두리 모양
       예) inset, outset, groove, ridge, solid, dashed, dotted, double 등
    => border-width : 테두리 두께
       예)thin, thick, 5px 등
    => border-color : 테두리 색상
       예) gray, rgb(100%, 0%, 0%), rgb(255, 0, 0), #ff0000

 

아래 두 줄의 코드는 거의 같은 기능이다.

display: inline-block;
float: left;

 

*inline-block 틈새 발생시 해결 방법

다음과 같이 틈새 발생했을때, 부모 태그의 font-size: 0으로 하면 틈이 없어진다.

 

*float시 붙은 박스 2줄일때 1줄로 붙게 하는 방법

박스의 margin: -0.5px로 하면 1줄로 붙게 된다.

 

 

border-style별 모양은 다음과 같다.

    #d1 {      border-style: inset;    }
    #d2 {      border-style: outset;    }
    #d3 {      border-style: groove;    }
    #d4 {      border-style: ridge;    }
    #d5 {      border-style: solid;    }
    #d6 {      border-style: dashed;    }
    #d7 {      border-style: dotted;    }
    #d8 {      border-style: double;    }

 

 

border-color

test08_2.html

 

각 변에 색상 다르게 줄 수 있다.

  #d1 {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
  }

 

 

box-sizing

test08_3.html

 

   /* width, height의 값이 태그의 너비, 높이로 설정한다. */
    box-sizing: border-box; /* = 내용물 너비/높이 + padding 너비/높이 + 테두리 너비/높이

 

 

padding

test08_4.html

 

    => padding: 테두리 안쪽 여백
    => margin: 테두리 바깥쪽 여백

 

  #d2 {
    padding: 40px 30px 20px 10px; /* 시계침 도는 방향: 12 -> 3 -> 6 -> 9 */
  }

 

margin

test08_5.html

 

  #d2 {
    margin: 10px 40px 30px 40px; /* 시계침 도는 방향 */
  }

  #d3 {
    margin: 10px 40px; /* (위/아래) (좌/우)*/
  }

 

 

display

test09_1.html

 

display 속성 : block, inline, inline-block
    => block
       => 한 줄을 모두 점유한다.
       => 자신의 너비와 높이를 가질 수 있다.
       => 예) h1 ~ h6, div, p, address, ul, ol 등
    => inline
       => 한 줄 속에 포함되어 다른 태그와 그 줄을 함께 공유한다.
       => 자신의 너비와 높이를 가질 수 없다.
          콘텐츠의 크기에 따라 너비와 높이가 결정된다.
       => a, i, b, strong, span 등
    => inline-block
       => inline 처럼 한 줄을 다른 태그와 공유한다.
       => block 처럼 자신의 너비와 높이를 가질 수 있다.

 

자식 태그의 너비는 부모 태그의 너비를 가져간다.

 

 

display: none vs visibility: hidden

test09_2.html

 

    display: none
    => 출력 대상에서 제외시킨다.
    => 태그가 차지했던 영역은 사라진다.

    visibility: hidden
    => 출력 대상이 존재하지만, 화면에만 보이지 않게 한다.
    => 따라서 태그가 차지했던 영역은 그대로 둔다.

 

 

위치 조정

test10_1.html

 

위치 조정
    0) 기본
      => 특별하게 위치를 조정하지 않으면,
         좌에서 우로 출력한다.
         위에서 아래로 출력한다.
      => 웹브라우저의 경계에 도달하면,
         자동으로 줄을 바꿔 출력한다.
      => 태그는 선언된 순서로 출력한다.

 

 

float

test10_2.html

 

float
    => 태그가 출력되는 현재 위치에서 공중부양시킨다.
    => 다음 태그가 현재 태그의 자리를 차지할 것이다.
    => left 또는 right 정렬만 가능하다.
    => float일 때 유의할 점
      1) width와 height를 지정하지 않으면, inline 처럼 콘텐츠의 크기에 따라
          너비, 높이가 결정된다.
      2) margin이 서로 겹치지 않고 그대로 유지한다.
         일반적인 경우 위,아래 margin은 서로 겹쳐 표현한다.

 

 

width : 부모태그의 콘텐트 출력 너비

height : 

자식 태그가 float되면 부모 태그 너비, 높이 계산시 사용하지 않는다.

부모 태그가 float되면 자식 태그의 크기로 줄어든다.

float하면 겹쳐졌던 margin이 겹쳐지지 않는다.

 

 

float II

test10_3.html

 

float II
    => float의 특징을 살려서 위치 조정하기
    => width와 height를 지정한다.
    => 위,아래,좌,우 margin을 이용하여 위치를 어느정도 조정할 수 있다.

 

 

float III

test10_4.html

 

이미지가 없으면 dummy 이미지를 출력한다.

페이지 로딩을 빠르게 하기 위해 기본 이미지 먼저 출력 후 진짜 이미지를 출력한다.

 

 

position: absolute

test10_5.html

 

position: absolute
    => 가장 가까운 조상 중에 absolute나 relative, fixed 타입 조상이 있으면 
       그 조상을 기준으로 자신의 위치를 조정한다.
       테두리 안쪽을 기준으로 위치를 계산한다.
    => 만약 조상 중에 absolute나 relative, fixed가 없다면,
       문서 가장자리를 기준으로 자신의 위치를 조정한다.
    => absolute 태그는 width, height를 지정하지 않으면 콘텐츠의 크기에 맞춘다.
    => 기준이 되는 태그가 움직이면 자신도 같이 움직인다.

 

position: absolute하면 margin: 0으로 해야 위치 조정 편하다.

 

relative는 absolute의 기준을 잡을때 사용한다. relative는 아무 영향을 안끼친다.

 

 

position: absolute II

test10_6.html

 

position: absolute II
    => float 대신 absolute를 사용하여 동일한 화면을 출력해보자!

 

float은 컨텐트가 밀려 옆으로 나온다. absolute는 컨텐트가 안밀려 덮어서 가린다.

 

 

position: fixed

test10_7.html

 

    position: fixed
    => 웹브라우저의 클라이언트 영역을 기준으로 위치를 지정한다.
    => 클라이언트 영역?
       웹브라우저의 툴바 아래에 내용이 출력되는 영역이다.
    => 내용을 위,아래로 스크롤하더라도 fixed 타입의 태그는 움직이지 않는다.
    => 화면 스크롤과 상관없이 웹브라우저의 특정 영역에
       내용을 띄우고 싶을 때 사용한다.

 

광고창 x 클릭시 사라지게 하는 script

  <script>
    var btn = document.getElementById("closeBtn");
    btn.addEventListener('click', function () {
      var adDiv = document.getElementById("ad");
      //adDiv.style.display = "none";
      adDiv.style["display"] = "none";
    });
  </script>

 

알림창 참고 'javascript sweetalert' 검색 : https://sweetalert2.github.io/

'javascript 2d', 'javascript 3d', 'javascript chart'

이런거 만들려고 하지 말라. 경력 먼저 쌓고 3d에 관심 있으면 공부해보라

라이브러리 자체를 만들지 말고 라이브러리 이용해서 차트 구현하는데 노력하라

 

 

position: relative

test10_8.html

 

position: relative
    => absolute나 fixed와 달리 공중부양시키지 않는다.
    => 현재 자리를 유지한 상태에서 상,하,좌,우로 위치를 조정하고 싶을 때
       사용한다.
    => absolute 자식 태그에 대해 기준 태그로 설정하고 싶을 때
      부모 태그를 relative로 지정한다.

 

 

본문 가운데 정렬

test10_9.html

 

본문을 화면에서 가운데 정렬시키기
    => margin을 이용하여 가운데 정렬시킬 수 있다.

 

body를 id="main"이라 하고 통째로 div로 감싼다.

다음과 같이 설정한다.

    #main {
      position: relative;
      border: 3px solid green;
      width: 720px;
      margin: 0px auto;
    }

 

 

 

CSS와 Javascript 코드의 분리

 

분리의 이점

① 가독성이 좋아진다.

② CSS 나 Javascript 코드를 다른 페이지에서 재사용하기가 쉽다.

 

 

 

---

 

조언

 

*

 

 

---

 

과제

 

naver.com의 메인 페이지를 똑같이 복제하라

 

과제 내용:

1) www.naver.com 의 메인 화면을 그대로 복제한다.

2) 외부 CSS나 JavaScript 라이브러리는 사용하지 않는다.

3) 이미지나 텍스트는 네이버 메인 화면에서 가져와서 사용한다.

 

제출 내용:

1) 작성한 HTML, CSS, 이미지 파일을 한 개의 파일로 압축하여 제출하시오.

2) 압축 파일의 내부 디렉토리는 다음과 같이 구성한다.

압축파일:

     index.html

     /css/*.css

     /image/*.png, *.jpg, *.gif