김숭늉 마음대로

Udemy section 9 (24일) - 타켓 선택자, 사이드바, CSS 디자인 팁 본문

IT/웹개발 (100일 도전)

Udemy section 9 (24일) - 타켓 선택자, 사이드바, CSS 디자인 팁

김숭늉이 2023. 3. 2. 15:06
728x90

 

1. 타켓 선택자 이해하기!

 

  #side-drawer:target {
    display: block;
  }
 
    --> 특정 id가 url 브라우저에 추가되면 block 을 실행하라!
 
 
 
2. 그럼 메인으로 돌아가려면?

 
aside 영역안에 header 영역(햄버거)를 추가해준다!
  ㄴ 기존의 메인 헤더의 햄버거를 참고하여 추가!
  ㄴ id 값에 #를 추가해서 default menu로 갈수있도록 한다!
 
    <aside id="side-drawer">
      <header>
        <a href="#" class="menu-btn">
          <span></span>
          <span></span>
          <span></span>
        </a>
      </header>
      <nav>
        <ul>
          <li>
            <a href="">Browse Meals</a>
          </li>
          <li>
            <a href="">My Orders</a>
          </li>
        </ul>
      </nav>
    </aside>
 
 
----------------------

햄버거 메뉴 위치, 스타일은 기존 참고하여 아래와같이 정리하기

  #side-drawer header {
        height: 5rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 5%;
  }

 

 

 

3. Z-인덱스 - 무엇일까 & 왜일까?

문서 흐름과 poisition 속성을 사용해서 HTML 요소의 기본 위치를 변경하는 방법에 대해 배웠습니다.

기본 요소 위치를 변경하면 한 요소가 다른 요소와 겹치고 제어하려는 위치에서 어떤 요소가 다른 요소 위에 배치되는지 알 수 있습니다.

이러한 경우 z-index가 필요하죠.

 

어떻게 작동하나요

CSS 속성인 z-index는 위치 지정 요소(즉, position 속성이 static 값과 다른 값으로 적용된 요소)의 z-order를 정의합니다. z-order는 z-축을 참조하므로 해당되는 경우 요소가 서로 위에 쌓이는 방식을 제어합니다.

HTML 요소의 기본값은 auto로 설정되며 이는 0에 해당하죠. z-index가 높은 위치에 있는 요소는 z-index 값이 낮은 요소 위에 배치됩니다.

 

코드 예제

HTML

  1. <body>
  2. <div id="first">Element 1</div>
  3. <div id="second">Element 2</div>
  4. </body>

CSS

  1. div {
  2. width: 200px;
  3. height: 200px;
  4. text-align: center;
  5. color: white;
  6. }
  7.  
  8. #first {
  9. background-color: rgb(55, 117, 209);
  10. }
  11.  
  12. #second {
  13. background-color: rgb(233, 137, 59);
  14. }

기본적으로 두 요소 모두 문서 흐름을 따르며 요소 1이 먼저 표시되고 요소 2가 두 번째로 차례로 표시됩니다.

이제 #second에 다음 코드를 추가합니다.

  1. position: absolute;
  2. top: 0;
  3. left: 0;

요소 2는 문서 흐름에서 가져와서 요소 1 위에 표시됩니다.

z-index: 1을 #first에 추가해도 z-index는 기본 값인 position: static을 제외하고 배치된 요소에만 영향을 미치므로 z-축을 따라 요소의 순서가 변경되지 않습니다.

 

position: relative를 추가하면 #first를 기준으로 요소 1이 요소 2 위에 다시 표시됩니다.

 

 

 

--> z-index 는 겹침을 말한다!

숫자가 높을수록 가장 최상단을 덮고, 부모요소내부에서 적용된다!

 

 

 

앞으로 배울 모듈!

 

 

만들어볼 example

 

 

4.홈페이지를 만들때 명심해야할것 세가지! (CSS 디자인 팁)

 

 

1) 웹사이트에 여러기능을 차근차근 추가하기!

    ㄴ 개별기능부터 시작하기!

        (위 카드를 먼저 추가한다음 점점 확장시킴!) -> 처음부터 전체 레이아웃을 생각하지 말걸! 지양하는 방식!

 

2) 사용자가 어떤 정보를 얻고싶어하지는 core 를 항상 생각하기!

 

3) 웹사이트를 과장해서 스타일링 하지 말기!

    ㄴ 물론 많은 스타일링이 필요할수있지만,

         보통 웹사이트는 과장되지 않고 단정하고 깔끔해야함!

 

 

 

** 특히 크기와 간격, 이카드에는 어떤 크기를 사용하는지? 

   그다음은 폰트, 폰트 크기 등 

   그다음 색상!을 알아보기!

 

5. 홈페이지 예 (컨텐츠를 가운데 중심에 두기! 염두해두고 작업하기 )

https://stripe.com/

https://www.amazon.com/

 

 

6. 시작할때 컨텐츠에 최대한 많은 공간을 주기! (나중에 줄이면 되니까!)

    ㄴ 내용 그룹별로 간격을 다르게 줘서 사용자가 보기 편하도록!

 

 

7. 올바른 글꼴 선택하기!  => 구글 폰트 "font properties" 필터옵션 사용하면 원하는 폰트 찾기 쉬움!

 

    ㄴ 폰트타입, 폰트 패밀리,

         -> 폰트에서 제공하는 style이 많으면 좋다! ( but, 2개이상 왠만하면 쓰지말것!)

    ㄴ 폰트크기

         -> 너무 많은 폰트크기는 지저분해보일수 있음!

    ㄴ 폰트웨이트

         -> 강조할부분에 강조!

 

8. 회색, 기본 & 강조 색상의 중요성 이해 

 

    ㄴ 회색은 항상 필요하다!!  ex) 백그라운드에 회색, 텍스트,

          -> 순수한 블랙은 거의 안씀... 웹사이트를 자연스럽고 전문적인 모양새를 내게 하려면 회색 꼭 필요!

    ㄴ 주색상 (primary color) 필요하다!  =  기업의 정체성

         + 예를들어 '할인행사'같은 뱃지에는 강조색상이 보일수도 ..

 

 

 

 

 

 

 

 

728x90
반응형

'IT > 웹개발 (100일 도전)' 카테고리의 다른 글

Udemy section 10 (26일) - input, button, POST/GET  (0) 2023.03.05
Udemy section 9 (25일) - CSS 사용자 정의 속성, CSS 변수, transform, transition, SVG  (0) 2023.03.05
Udemy section 8 (23일) - 미디어쿼리, 햄버거버튼, 사이드바  (0) 2023.02.28
Udemy section 8 (22일) - 미디어 쿼리 (반응형 웹디자인)  (0) 2023.02.28
Udemy section 8 (22일) - em, rem, % 차이 (반응형디자인)  (0) 2023.02.28
'IT/웹개발 (100일 도전)' Related Articles more