📅2024. 01. 15 26일차

---

🎨 HTML, CSS

Ctrl + A --> Shift + Tab ==> 드려쓰기 정리
hover는 왼쪽으로 갈 수 록 좋다

📜 image

• 이미지는 넓이만 바꿔도 자동으로 높이까지 바뀐다.
• 이미지는 글자라 부모에 의해서 속성을 바꿀 수 있다.

📜 패딩(padding)

• padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받는다.

• CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있다.

• padding 속성
  1) padding-top
  2) padding-right
  3) padding-bottom
  4) padding-left

• padding 축약 표현

<style>

    div.four { padding: 20px 50px 30px 50px; }

    div.three { padding: 20px 50px 30px; }

</style>

4개의 속성값을 가질 때는 top, right, bottom, left 순

📜 마진(margin)

• margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다.

• 이러한 마진 영역은 패딩 영역과 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않는다.

• CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있다.
  

• margin 속성
  1) margin-top
  2) margin-right
  3) margin-bottom
  4) margin-left

• margin 속성값을 inherit로 설정하면, 부모 요소의 margin 속성값을 그대로 물려받는다.

<style>

    div.parent { height: 100px; margin-left: 100px; }

    div.child { background-color: #FFF8DC; margin-left: inherit; }

</style>

• margin 속성값에 auto를 사용하는 이유
  margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다. 즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 된다.
  그 결과 해당 요소는 그 요소를 포함하고 있는 부모 요소의 정중앙에 위치하게 된다.

<style>

    div {

        border: 2px solid teal;

        width: 300px;

        margin: auto;

    }

</style>

📜 CSS 선택자 정리

• nth-child(N) = 부모안에 모든 요소 중 N번째 요소

• A:nth-of-type(N) = 부모안에 A라는 요소 중 N번째 요소

• :frist-child = 부모안에 모든 요소 중 첫번째 요소

• :last-child = 부모안에 모든 요소 중 마지막 요소

• A:frist-of-type = 부모안에 A라는 요소 중 첫번째 요소

• A:last-of-type = 부모안에 A라는 요소 중 마지막 요소

• 참조

class 도입

• .별명 => 별명 () 선택가능
• 복수개의 별명 ==> 띄어쓰기로 구분

id 도입

• #.별명으로 선택가능
• id는 하나만 쓸 수 있다. 똑같은 id x

border-radius

• border-radius 속성은 요소의 테두리를 둥글게 만들어줍니다. px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있다.

• 총 4개의 모서리를 각각 다른 값으로도 줄 수 있다. margin 및 padding 속성 처럼 4개의 값을 띄워쓰면 왼쪽-위 부터 시계 방향으로 각자 다른 값을 지정할 수 있다.

상속

• CSS 작업 할 때는 <a> 노멀라이즈 해야한다. 링크인 걸 티 안내기 위해

🔍 문제 : 메뉴바 구현하기

<!-- section > nav > div*4 > a>{메뉴아이템 텍스트}-->
<!-- 메뉴박스 -->
<section>
  <!-- 메뉴 -->
  <nav>
    <!-- 메뉴아이템 -->
    <div>
      <!-- 메뉴아이템 텍스트 -->
      <a href="">Home</a>
    </div>
    <div><a href="">Tutorials</a></div>
    <div><a href="">Articles</a></div>
    <div><a href="">inspiration</a></div>
  </nav>
</section>

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

/* 커스텀 */

/* 메뉴박스 */
nav {
    text-align:center;
}

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

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

/* 메뉴 아이템 텍스트 */
nav > section > div > a {
    /* 무조건 a(버튼)에 padding을 넣어야 한다. */
    padding:10px;
    /* 이걸 안하면 padding이 안 먹는다. */
    display:block;
}

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