position 속성 정리

1.프로필 모양에서 세팅 클릭

2.Edior Preferences 클릭

3. 스크롤 쭉 내려서 Editor Options에서 설정하고픈 옵션들 선택

자동완성,자동저장등이 있다

그 외에도 여러가지 설정이 가능한데 스페이스 누르면 2칸 띄우기 ,화면 테마 바꾸기 등등이 있다

<!-- ul : 목록 -->
<!-- li : 항목 -->

<!-- ul의 역할 : li의 부모 -->
<ul>
  <!-- li의 역할 : 항목을 표현 -->
  <li>동물</li>
  <li>식물</li>
  <li>광물</li>
</ul>

<ul>
  <li>과일</li>
  <li>야채</li>
</ul>

<ul>
  <li>포유류</li>
  <li>조류</li>
</ul>

<ul>
  <li>금속</li>
  <li>비금속</li>
</ul>

리스트를 나열할 때 ul,li를 주로 쓴다

<!-- ol : 목록(순서있는 목록) -->
<!-- li : 항목 -->

<!-- ol의 역할 : li의 부모 -->
<ol>
  <!-- li의 역할 : 항목을 표현 -->
  <li>물을 끓인다.</li>
  <li>라면을 넣는다.</li>
  <li>후레이크와 스프를 넣는다.</li>
  <li>맛있게 먹는다.</li>
</ol>

<!-- ol : 목록(순서있는 목록) -->
<!-- li : 항목 -->

<!-- ol의 역할 : li의 부모 -->
<div>
  <!-- li의 역할 : 항목을 표현 -->
  <div>물을 끓인다.</div>
  <div>라면을 넣는다.</div>
  <div>후레이크와 스프를 넣는다.</div>
  <div>맛있게 먹는다.</div>
</div>

순서가 있는 목록 항목등이 있는 자료에는 ol ,li를 쓴다

<h1>요구 : CSS 선택자로 검색되는 엘리먼트 개수를 주석에 적어주세요.</h1>

<!--
.menu-1>ul>li*2>a[href=#]{1차 메뉴 아이템 $}+ul>li*2>a[href=#]{2차 메뉴 아이템 $}
-->
<nav class="menu-1">
  <ul>
    <li>
      <a href="#">1차 메뉴 아이템 1</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 2</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

문제 선택자를 찾아 갯수를 써주세요

html { /* 개 */ }
body { /* 개 */ }
html body { /* 개 */ }
html > body { /* 개 */ }
html, body { /* 개 */ }
ul { /* 개 */ }
body > ul { /* 개 */ }
body ul { /* 개 */ }
body > nav > ul { /* 개 */ }
body > nav ul { /* 개 */ }
body > nav.menu-1 ul { /* 개 */ }
body > nav.menu-1 ul ul { /* 개 */ }
body > nav.menu-1 ul ul ul { /* 개 */ }
body > nav.menu-1 li { /* 개 */ }
body > nav.menu-1 li li { /* 개 */ }
body > nav.menu-1 > ul { /* 개 */ }
body > nav.menu-1 > ul li { /* 개 */ }
body > nav.menu-1 > ul > li { /* 개 */ }
body > nav.menu-1 > ul > li a { /* 개 */ }
body > nav.menu-1 > ul > li > a { /* 개 */ }
body > nav.menu-1 li > a { /* 개 */ }
body > nav.menu-1 li:hover > a { /* 개 */ }
body > nav.menu-1 li > ul { /* 개 */ }
body > nav.menu-1 li:hover > ul { /* 개 */ }

정답

html { /* 1개 */ }
body { /* 1개 */ }
html body { /* 1개 */ }
html > body { /* 1개 */ }
html, body { /* 2개 */ }
ul { /* 3개 */ }
body > ul { /* 0개 */ }
body ul { /* 3개 */ }
body > nav > ul { /* 1개 */ }
body > nav ul { /* 3개 */ }
body > nav.menu-1 ul { /* 3개 */ }
body > nav.menu-1 ul ul { /* 2개 */ }
body > nav.menu-1 ul ul ul { /* 0개 */ }
body > nav.menu-1 li { /* 6개 */ }
body > nav.menu-1 li li { /* 4개 */ }
body > nav.menu-1 > ul { /* 1개 */ }
body > nav.menu-1 > ul li { /* 6개 */ }
body > nav.menu-1 > ul > li { /* 2개 */ }
body > nav.menu-1 > ul > li a { /* 6개 */ }
body > nav.menu-1 > ul > li > a { /* 2개 */ }
body > nav.menu-1 li > a { /* 6개 */ }
body > nav.menu-1 li:hover > a { /* 0개 */ }
body > nav.menu-1 li > ul { /* 2개 */ }
body > nav.menu-1 li:hover > ul { /* 0개 */ }

<nav class="menu-1">
  <ul>
    <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>
      </ul>
    </li>

    <li>
      <a href="#">광물</a>

      <ul>
        <li><a href="#">금속</a></li>
        <li><a href="#">비금속</a></li>
      </ul>
    </li>
  </ul>
</nav>




/css



.menu-1 > ul ul {
  display:none;
}

.menu-1 ul > li:hover > ul {
  display:block;
}

<!-- nav>section>div*4>a[href=#]{메뉴 아이템 $} -->

<!-- 메뉴 박스(메뉴를 감싸는 부모) -->
<div class="menu-box">
  <!-- 메뉴 -->
  <div>
    <!-- 메뉴 아이템 -->
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 1</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 2</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 3</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 4</div>
    </div>
  </div>
</div>





/css/

/* 노말라이즈 */
a {
  color:inherit;
  text-decoration:none;
}

/* 커스텀 */

/* 메뉴박스 */
.menu-box {
  text-align:center;
}

/* 메뉴 */
.menu-box > div {
  /* 메뉴에는 배경색이 있다. */
  background-color:#dfdfdf;
  /* 메뉴는 너비가 최대한 줄어든다. */
  display:inline-block;
  border-radius:5px;
  padding:0 10px;
}

/* 메뉴 아이템 */
.menu-box > div > div {
  /* 메뉴 아이템은 너비가 최대한 줄어들고 한줄에 여러개 나온다. */
  display:inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box > div > div > div {
  padding:10px;
  /* 커서를 포인터로 바꿈 */
  cursor:pointer;
}

/* 마우스가 올려진 메뉴 아이템의 자식인 텍스트 */
.menu-box > div > div:hover > div {
  background-color:black;
  color:white;
}

/html/

<nav>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</nav>





/css/



body {
  background-color:black;
}

nav {
  text-align:center;
}

nav > div {
  width:20px;
  height:20px;
  /* rgba(255,255,255,0.5) 반투명한 하얀색 */
  background-color:rgba(255,255,255,0.5);
  display:inline-block;
  border-radius:50%;
  /* 마우스를 올렸을 때 커서를 포인터로 바꾼다. */
  cursor:pointer;
}

nav > div:first-child, nav > div:hover {
  background-color:rgba(255,255,255,1);
}

/html/

<div>
    <section><img src="http://bnx.oa.gg/img/20160921PM33800_8489.jpg" alt=""></section>
    <section><img src="http://bnx.oa.gg/img/20160913PM122312_9304.jpg" alt=""></section>
    <section><img src="http://bnx.oa.gg/img/20160913PM122323_2917.jpg" alt=""></section>
</div>
<div>
    <section><img src="http://bnx.oa.gg/img/20160913PM122333_5909.jpg" alt=""></section>
    <section><img src="http://bnx.oa.gg/img/20160913PM122345_286.jpg" alt=""></section>
    <section><img src="http://bnx.oa.gg/img/20160913PM122357_7873.jpg" alt=""></section>
</div>



/css/

div {
    text-align:center;
}
div > section {
    display:inline-block;
    padding:30px;
}
div > section > img {
    width:200px;
}

• hover 이벤트, 높이 맞추기, this, find, children, height

커서를 올리는곳에 따라 빈 여백이 채워진다

시도 2와 합쳐보면 이렇게 여백만큼 채워준다

최종적인 모습

https://codepen.io/guenhyuck/pen/gOBYzRx

이미지 삽입과 자바스크립트를 이용한 화면 구현