IT/웹개발 (100일 도전)

Udemy section 7-8 (19-21일) - 카드룩, 오버플로우, 유니코드, 세번째 웹페이지

김숭늉이 2023. 2. 25. 11:55
728x90


1. 자  TRAVEL GOAL로 돌아와서 GRID를 직접 적용해보자!

 

    display: grid;  

 

    grid-template-columns: 1fr 1fr;   그리드를 어떻게 구성할건지 정하기!
 
   지정하고자 하는 element에  width가 지정된게 있는지 다시한번 체크하고 불필요하면 지우기
 
   gap 으로 20px 씩 간격을 좀 주고
  그다음 nth-of-type으로 1개의 요소가 2개의 행을 차지한다고 넣기
 
 
 
                                    

  

 2. 유니코드 (텍스트 이모티콘! 사용)

   ㄴ 전세계적으로 작동하고 사용하는 유니코드!

 

  <head>
    <meta charset="UTF-8" />   -> html이 가진 표준 문자열임
      브라우저 html의 특정문자들을 어떤기기나 플랫폼에서도 보이게 해준다!
 
 

https://en.wikipedia.org/wiki/Arrows_(Unicode_block)

   ㄴ 유니코드 확인가능한 위키피디아로 이동 !

 

 
 
4. 유니코드를 입력하는 방식은 &#x 를 붙인다!
 
 
              <a href="https://en.wikipedia.org/wiki/Barcelona">Explore &#x2192</a>
 
 
 
 
5. header의 nav에만 a:hover 기능 적용하기!

header nav a:hover {
    color: rgb(77, 77, 77);
    background-color: rgb(255, 251, 0);
}

 

 

6. 두번째 웹페이지 *** places.css의 최종버전

 

body {
    background: linear-gradient(30deg, rgb(77, 77, 77), rgb(58, 58, 58));
    color: rgb(68, 68, 68);
}

#page-logo a{
    color: rgb(183, 230, 235);
}

header {
    position: static;
}

header a {
    color: rgb(183, 230, 235);
}

header nav a:hover {
    background-color: rgb(183, 230, 235);
    color: rgb(59, 59, 59);
}


main ul{
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
}

li:nth-of-type(3) {
    grid-column: 1 / span 2;
}

main li {
    display: flex;
    background-color: white;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden ;    -> OVERFLOW 기능은 컨테이너에 적용해!!:) default 값은 visible.
}
 
---> overflow는 img + div가 한 컨테이너에 있을때

main li img {
    width: 300px;
    height: 280px;
    object-fit: cover;
}

.item-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-content h2 {
    margin: 0;

}

.actions {
    text-align: right;
}

.actions a {
    text-decoration: none;
    padding: 6px;
    color: rgb(22, 211, 228);
    border-radius: 5px;
}

.actions a:hover {
    background-color: rgb(235, 253, 255);
}


6. section 7의 전반적인 요약

 

  1) body 안에 시맨틱 요소 만듬 ex) header.. section.. main

  2) 플렉스박스 (flex, flex-direction, justify-content, flex-wrap)

  3) img 배경으로 사용하기 - position :  absolute, fixed, static

  4: object-fit : cover => img 를 컨테이너에 맞게 적용하기

  5) 플렉스박스는 1차원적 레이아웃 행과,열에 강하다!

      ㄴ 행과 열의 조합에 강한건 그리드!

 

 

7. 선택 사항: "위치", 플렉스박스 & 그리드에 대해 자세히 알아보기 [20일차]

기본을 넘어서

이 모듈에서 우리는 position 속성을 살펴보고 플렉스박스와 그리드가 요소의 레이아웃을 쉽게 변경할 수 있는 훌륭한 기술임을 이해했습니다.

이 모듈에서 다루는 개념을 통해 여러분의 프로젝트에서 이러한 기술을 사용할 준비가 되었어요.

여기에서 더 자세히 알아보려면 아래에서 이 과정의 핵심 요점을 넘어서는 전용 리소스를 찾아서 자유롭게 탐색해 보세요.

---

위치 속성에 대한 추가 정보

=>https://academind.com/tutorials/the-position-property/

플렉스박스 - 플렉스 컨테이너 => https://academind.com/tutorials/flexbox-basics-container/

플렉스박스 - 플렉스 아이템 => https://academind.com/tutorials/flexbox-flex-items/

플렉스박스와 그리드 비교 => https://academind.com/tutorials/css-grid-vs-flexbox/

 

 

8. 어떤 디바이스를 사용하더라도 웹이 최상의 모습으로 보일수있게 해야해!

  즉 반응형 웹을 만들어야한다는거지! 그럼 시작해봅시다 :)

 

 

 

9. 챌린지 솔루션! HTML 구조

 

1) header먼저 만들기!

    ㄴ header 안에 a tag 와 nav 안에 ul 과 li로 (li안에 a) 상단의 헤드영역 만들어주기 

     (모바일은 다른 헤더를 가질수도있음, header에  id값 지정해주기!

 

2) main 영역에 h1으로 제목 작성해주고,  <section>안에 <ul> <li>추가하기!   

    + li 안에 <article> 추가해주기 !  + 그리고 이미지와, h2 그리고 a (버튼) 만들어주기!

      ㄴ article 즉 글을 포함하고 있다라는걸 알려주는 시멘틱적 요소!

 

3) 각각 개별항목에따라서 id, class 이름 정해주기 (필요시)

 

4) 어느정도 구조적으로 완성되었으면 스타일링 시작!

   - 구글폰트 meta 영역에 추가해주고,  css 파일 링크하기!

      *** 구글폰트를 css 파일 링크 코드보다 위에 적용시키기!!! 왜냐면 css파일에서 구글폰트를 사용해야하기에!

 

5) body 영역에 기본 공통부분 설정하기 (폰트, 마진, 배경색)

   css파일에 들어가서 ! body 영역에 기본 폰트 설정해주고~

   그다음 margin은 0으로 설정하는걸 기본 default로 적용해주자!

   backrgound-color도 설정! 

   a 영역에서 text-decoration : none ;으로 설정해주자!

 

 

6) #main-header에 height(이건 특이한경우)와 display : flex적용해주고 justify-contecnt: space between ; 으로 요소간의 넓이를 확보해준다! align-items : center로 axis에 따라 중앙정렬될수있도록 적용.

    + 헤더 백그라운드 컬러도 설정해주기

 

 

 

7) 그다음 로고를 설정해주자! 

    font-size, font-logo, color, text-trasform으로 대문자도 만들어주고!

 

 

참고) 개발자도구 통해서 보면 marker라고 되어있는건 li elements에서 기본적으로 붙는 dots에 관한것이다.

 

8) header의 nav를 좌우 정렬 시키자!

   먼저 앞에 점부터 없주고, display : flex; 적용해주고

   margin : 0; padding : 0 ; 을 각각 선택하여 기본 여백이 적용된거 없는지 확인해주자 .

  그리고 li에 margin 적용!

 

 

9) nav의 앵커요소 꾸미기 (+ 호버효과)

 

 

10. 그다음 메인영역!

    h1 텍스트 정렬, 글자색깔, 폰트사이즈 지정 해주기!

 

 

11. 그다음 섹션! 먼저 섹션의 크기부터 정하고 가운데 정렬!

 

#latest-poducts {
    width: 80%;
    margin: 50px auto;
}

 

12. 그다음 카드가 나란히 보이게 해야한다!

       +  li의 food-item의 class적용하기!

 

이번엔 그리드를 사용해봅시다!

 

#latest-products ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
13. 그다음 이미지 !

.food-items img {
    height: 240px;
    width: 100%;
}
   ----> 근데 이렇게만 하면 이미지가 꺠져! 그래서 아래와같이 object-fit을 사용해야해!
 
.food-items img {
    height: 240px;
    width: 100%;
    object-fit: cover;
}
 

 

14. li element사이 띄우기 -? gap 추가 

#latest-products {
    width: 80%;
    margin: 50px auto;
    gap: 16px;
}
 
15. 여기서 ul가 중앙으로 배열되어있지 않음! -> magin과 padding 추가 !
 

#latest-products ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;

}
 
 

 

16. food-item 영역 꾸며주기!

     ㄴ 백그라운드 색깔설정하고 overflow 기능 적용 !

 

.food-items {
    background-color: rgb(228, 206, 182);
    border-radius: 6px ;
    overflow: hidden;
}

 

17. add to cart 버튼 꾸며주기


.btn {
    background-color: rgb(228, 157, 44);
    color: white;
    border-radius: 4px;
    padding: 8px 2px;
}

 

728x90
반응형