HTML / CSS

Display

[복습] Inline 요소 / Block 요소

블록요소

블록요소의 종류

  • dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6
블록요소는 모든 인라인 요소를 포함할 수 있으며, 블록요소도 포함할 수 있다.
또한, 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며,
블록요소가 끝나는 지점에서 자동으로 줄바꿈이 된다.

인라인요소

인라인요소의 종류

  • a, img, span, srong, input, textarea, select
인라인 요소는 다른 인라인 요소를 포함할 수 있으며, 기본적으로 컨텐츠가 끝나는 지점가지 넓이를 가지게 된다.
또한, 너비(width), 높이(height)를 조절할 수 없으며, line-height(높낮이 조절) 혹은
text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄바꿈이 없다.

*인라인은 width , height , padding-top , margin-top/bottom 이 안됨 / display : block 화 한다.

요소의 변경 [display] 속성

inline, block 요소를 변경해야할때 display 속성을 사용한다.

  • block
  • inline
  • inline-block
    ex) display: block; / display: inline; / display: inline-block;

숨김 visibility / none / opacity

  • #box{visibility: hidden;} 형태를 가진채로 보이지 않게한다.
  • #box{opacity: .5;} 형태를 가진채로 보이지 않게한다.
  • #box{display: none;} 형태조차도 없어진다.

[복습] Box-sizing

box-sizing: content-box | border-box | initial | inherit

  • content-box : 콘텐트 영역을 기준으로 크기를 정한다.
  • border-box : 테두리를 기준으로 크기를 정한다.
  • initial : 기본값으로 설정한다.
  • inherit : 부모 요소의 속성값을 상속받는다.

*같은 넓이와 높이의 박스 크기라도 패딩값이 들어가면 박스의 사이즈가 커지게 된다. 박스의 사이즈를 유지하려고 한다면 box-sizing:border-box 를 사용한다.

  • 예제 (width: 200px, height:200px 의 BOX이다.)
.first{
    border: 10px solid #f00;
    padding: 20px;
}
.last{
    border: 10px solid #f00;
    padding: 20px;
    box-sizing: border-box;
}
  • 결과

[복습] Position : absolute , relativ

position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.
top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.

사용법은 간단하다.

  • 기준을 잡는다. (예- position: relative;)
  • 이동시킨다. (예- top: 50px;)

Relative

  • 요소를 일반적인 문서 흐름에 따라 배치한다.
  • 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.
  • 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
  • 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
  • 문서 상 원래 위치가 그대로 유지된다.

Absolute

  • 요소를 일반적인 문서 흐름에서 제거한다.
  • 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
  • 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
  • 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(요소)를 기준으로 삼는다. (static을 제외한 값)
  • 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)

absoulte 와 relative 를 이용한 위치조정 1

결과

HTML 구성

<body>
  <div class="red-box">
      <div class="green-box1"></div>
      <div class="blue-box">
          <div class="green-box2"></div>
      </div>
  </div>
</body>

CSS 구성

@charset "utf-8";
*{margin: 0; padding: 0;}
.red-box{
    width: 700px;
    height: 400px;
    background: red;
    position:relative;
    top: 10px;
    left: 10px;
}
.green-box1{
    width: 100px;
    height: 100px;
    background: greenyellow;
    position: absolute;
    top: 0;
    left: 0;
}
.blue-box{
    width: 100px;
    height: 100px;
>     background: blue;
    position:absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.green-box2{
    width: 10px;
    height: 10px;
    background: greenyellow;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}
  

absoulte 와 relative 를 이용한 위치조정 2

결과

HTML 구성

<div class="purple">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div>
  </div>

CSS 구성


body{
   margin:80px 80px;
}
.purple{
   width: 700px;
   height: 400px;
   background: violet;
   position: relative;
}
.red{
   width: 100px;
   height: 100px;
   background: red;
   position: absolute;
   top: -50px;
   z-index: 1;
}
.blue{
   width: 100px;
   height: 100px;
   background: blue;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}
.green{
   width: 100px;
   height: 100px;
   background: greenyellow;
   position: absolute;
   top: 100px;
   left: 0;
}

HTML 구성

<body>
  <div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
  </div>
</body>

CSS 구성

.box{
    width: 100px;
    height: 100px;
    position: absolute;
}
.box:nth-child(1){
    background: red;
    top: 10px;
    left: 10px;
    z-index: 1;
}
.box:nth-child(2){
    background: greenyellow;
    top: 50px;
    left: 50px;
    z-index: 0;
}
.box:nth-child(3){
    background: plum;
    top: 150px;
    left: 150px;
    z-index: -1;
}
body>div{
    width: 400px;
    height: 200px;
    border: 3px solid #000;
    position: relative;
    overflow-y: scroll;
}

결과

  • 부모가 relative 자식이 absolute 로 되어있고 부모를 벗어난 영역은
    overflow-y: scroll; 을 하여 스크롤을 만든다.
  • z-index를 사용하여 겹쳐진 요소의 우선순위를 설정할 수 있다.

absoulte 와 relative 를 이용한 위치조정 3

결과

HTML 구성

<body>
    <div id="mainHeader">
        <div id="title">
            <div class="heading">
                <h1>Let's Explore</h1>
            </div>
        </div>
        <div class="gnb">
            <ul>
                <li><a href="#"><strong>Korean</strong></a></li>
                <li><a href="#"><strong>English</strong></a></li>
                <li><a href="#"><strong>Chiness</strong></a></li>
            </ul>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Html</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">PhotoShop</a></li>
                <li><a href="#">Illustrator</a></li>
            </ul>
        </div>
    </div>
</body>

CSS 구성

@charset "utf-8";
*{margin: 0; padding: 0;}

ul{
  list-style: none;
}
a{
  text-decoration: none;
}
#mainHeader{
  width: 1000px;
  height: 200px;
  background: green;
  margin: 0 auto;
  position: relative;
}
#title{
  text-align: center;
}
#title .heading{
  position: relative;
  top: 70px;
}
#title .heading h1{
  color: #fff;
}
.gnb{
  position: absolute; 
  top:0; 
  right: 0;
}
.gnb ul{
  overflow: hidden;
}
.gnb ul li{
  float: left;
}
.gnb ul li a{
  display: block;
  padding: 2px 10px;
}
.gnb ul li:hover a{
  background: #000;
  color: #fff;
}
.nav ul{
  /* overflow: hidden; 사라지기 때문에 clearfix로 해결해야한다.*/
  position: relative;
  float: left;
  left: 50%;
  top: 120px;
}
.nav ul li{
  float: left;
  position: relative;
  left: -50%;
}
.nav ul li a{
  display: block;
  padding: 5px 40px;
}
.nav ul li a:hover{
  background: #000;
  color: #fff;
}

border tip 만들기

결과

HTML 구성

<body>
  <div class="border-tip">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cum officiis nisi itaque nobis illum reiciendis placeat qui dicta ipsum sapiente, officia harum facilis doloremque est rem odio dolorum obcaecati.
      <div class="left"></div>
      <div class="right"></div>
      <div class="right-s"></div>
  </div>
</body>

CSS 구성

.border-tip{
  position: relative;
  width: 400px;
  padding: 10px;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  background: yellowgreen;
  text-align: justify;
}
.border-tip::before{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 10px solid yellowgreen;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: -10px;
}
.border-tip::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-top: 10px solid yellowgreen;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  bottom: -10px;
}
.border-tip .left{
  content:"";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-right: 10px solid yellowgreen;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -10px;
}
.border-tip .right{
  /* content:""; 컨텐츠가 없어서 없어도 됨 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid yellowgreen;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  right: -10px;
  z-index: 1;
}

메뉴 만들기

가로 메뉴

결과

HTML 구성

<body>
  <nav id="menu">
      <ul>
          <li><a href="#">menu1</a></li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
          <li><a href="#">menu4</a></li>
          <li><a href="#">menu5</a></li>
          <li><a href="#">menu6</a></li>
      </ul>
  </nav>
</body>

CSS 구성

@charset "utf-8";

*{margin: 0; padding: 0;}
body{
    margin: 0;
    color: #404040;
    font: 13px/1.5 "맑은고딕", sans-serif;
    background: url(../img/img.jpg) no-repeat center top/cover;
}
#menu ul{
    list-style: none;
    overflow: hidden;
}
#menu ul li{
    float: left;
}
#menu ul li a{
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 10px 15px 10px;
    display: block;
    color: #888;
    font-size: 18px;
    background: #292929;
    margin-right: 1px;
}
#menu ul li a:hover{
    border-bottom: 5px solid orange;
    padding-bottom: 10px;
}

a태그 패딩으로 메뉴의 넓이를 정하고 메뉴 하단에 들어간 padding 값 만큼 border-bottom과 padding-bottom을 적용해야 잘 적용된다.

세로 메뉴

결과

HTML 구성

<body>
  <nav id="menu">
      <ul>
          <li><a href="#">menu1</a></li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
          <li><a href="#">menu4</a></li>
          <li><a href="#">menu5</a></li>
          <li><a href="#">menu6</a></li>
      </ul>
  </nav>
</body>

CSS 구성

@charset "utf-8";

*{margin: 0; padding: 0;}
body{
    margin: 0;
    color: #404040;
    font: 13px/1.5 "맑은고딕", sans-serif;
    background: url(../img/img.jpg) no-repeat center top/cover;
}
#menu ul{
    list-style: none;
    overflow: hidden;
}
#menu ul li{
    width: 100px;
    text-align: center;
    margin-bottom: 1px;
}
#menu ul li a{
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 10px 10px 15px;
    display: block;
    color: #888;
    font-size: 18px;
    background: #292929;
    margin-right: 1px;
}
#menu ul li a:hover{
    border-left: 5px solid orange;
    padding-left: 10px;
}

position을 이용한 2Depth 메뉴바 만들기

결과

HTML 구성

<body>
  <div id="nav">
      <ul>
          <li><a href="#">처음으로</a></li>
          <li><a href="#">등잔펜션 안내</a>
              <ul>
                  <li><a href="#">소개합니다</a></li>
                  <li><a href="#">오시는 길</a></li>
              </ul>
          </li>
          <li><a href="#">이용 방법</a>
              <ul>
                  <li><a href="#">객실둘러보기</a></li>
                  <li><a href="#">요금 안내</a></li>
                  <li><a href="#">예약 방법</a></li>
                  <li><a href="#">예약 게시판</a></li>
              </ul>
          </li>
          <li><a href="#">게시판</a>
              <ul>
                  <li><a href="#">공지사항</a></li>
                  <li><a href="#">묻고 답하기</a></li>
              </ul>
          </li>
          <li><a href="#">프로필</a></li>
      </ul>
  </div>
</body>

CSS 구성

@charset "utf-8";
*{margin: 0; padding: 0;}

ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
body{
    margin: 50px;
}
#nav{
    width: 100%;
    height: 50px;
}
#nav>ul{
    width: 1440px;
    margin: 0 auto;
    background: rgb(49, 127, 140);
    border-radius: 5px;
}
#nav>ul::after{
    content: "";
    display: block;
    clear: both;
}
#nav>ul>li{
    float: left;
    width: 150px;
    margin: 0 5px;
    text-align: center;
}
#nav>ul>li>a{
    font-weight: bold;
    padding: 15px 10px 15px 10px;
    display: block;
    border-radius: 3px;
}
#nav>ul>li:hover>a{
}
#nav>ul>li>ul{
    display: none;
    position: absolute;
    width: 150px;
    background: rgb(58, 182, 139);
}
#nav>ul>li:hover>ul{
    display: block;
}
#nav>ul>li>ul li{}
#nav>ul>li>ul li a{
    display: block;
    padding: 10px;
}
#nav>ul>li>ul li:hover a{
    background: pink;
    color: red;
} 

0개의 댓글