Block

대표적인 Block element인 div와 h2로 실습

<h1>Display Block</h1>
<!-- Block element -->
<div>content</div>
<div>content</div>
<div>content</div>
<!-- Block element -->
<h2>title</h2>

실행하면 display 기본값이 block으로 되어있음을 확인할 수 있음

Inline

width와 height가 적용되지 않음

  div,
  h2 {
      border: 1px solid grey;
      width: 100px;
      height: 100px;
  }

  span,
  a {
      border: 1px solid blue;
      width: 100px;
      height: 100px;
  }

• 

None

display: none;과 visibility: hidden;의 차이

• visibility: hidden;

• 

• display: none;
• 

Inline-Block

block태그 div와 inline태그 span을 같이 작성하고

<article>
  <h1>Display Inline Block</h1>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <span>content</span>
  <span>content</span>
  <span>content</span>
</article>

• 

여기에 css display 설정을 inline-block으로 하면 .!!!!

article > div,
article > span {
  display: inline-block;
}

• 

이렇게 보면 그냥 inline 형태 같지만? width와 height를 적용해 보자.

• 

inline에서는 안 되는 width, height 조절이 가능한 것을 확인할 수 있다 !

😀 메뉴 상단바 제작 ! ! !

html

메뉴에 들어갈 글자를 html에서 리스트 형태로 만들고

    <nav>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>

css

css 설정을 이렇게 했다.

      * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
      }
      nav {
        background-color: #34495e;
        width: 100%;
        height: 80px;
      }
      nav li {
        display: inline-block;
        margin: 8px;
        line-height: 50px;
      }
      nav a {
        color: white;
        font-size: 20px;
        text-transform: uppercase; /* 모두 대문자로 변경 */
      }
      a.active,
      a:hover {
        border: 1px solid white;
      }

하나씩 봅시다 ~

1. *는 전체 선택자로 속성을 초기화할 때 쓰기 좋다 !
   padding, margin, 스타일 등을 초기화했다.

2. nav 태그는 navigation의 줄임말로 문서 내에서 링크를 그룹화할 때 사용한다고 한다! 지금 메뉴바를 만들기 때문에 이 메뉴 링크를 담을 수 있는 nav로 ul>li 목록들을 그룹지었다.

3. nav의 자식태그인 a태그를 흰색, 20px, 대문자로 변경해준다.

4. a태그의 클래스인 active와 a태그를 마우스 오버했을 때 하얀 박스가 표시될 수 있도록 한다.