IT/웹개발 (100일 도전)

Udemy section 7 (17일) - %단위, 헤더(box-sizing), 하이라이트 섹션

김숭늉이 2023. 2. 23. 10:53
728x90

1. %단위 작업

 

   position : absolute ; 로 설정한다는 의미는 

   ㄴ 문서작성 흐름에서 빼겠다는 의미!

 

    width : 100% ;

    ㄴ 이렇게 적용하면 부모요소에 상대적으로 % 너비가 적용되는데,

        부모 요소에 상대적으로 너비를 적용하고싶지않으면 아래와 같은 방법이 있다 

 

box-sizing이라는 css기능을 사용하면 된다!

박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.

    box-sizing : content-box ; (default 값)

    box-sizing : border-box ;   -> 테두리를 기준으로 크기를 정한다 (패딩크기까지 모두 포함됨)

 

 

2. 헤더에 absolute를 정상적으로 지정하기 ! 

header {
    display: flex ;
    justify-content: space-between;
    align-items: center;
    padding: 15px 60px;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
}

 

3. 그럼 이제 section2를 정리해보자!

 

먼저 h2로 이 섹션의 제목을 설정하고!(참고로 h1,h2...는 한 html 안에 하나밖에 안써!)

ul랑 li 3개 추가한다음 고유(유일한)값인 ul에는 id값을 설정하고 li에는 class로 공통 css가 적용될수 있도록 작성하기!

 

  <section id="hightlights">
        <h2>hightlights</h2>
        <ul id="destinations">
          <img src="/images/places/miami.jpg" alt="miami streets on sunny day">
          <p>Miama USA</p>
          <li class="Destination"></li>
          <li class="Destination></li>
          <li class="Destination></li>
        </ul>
      </section>
 
 
 
4. css를 타지않고 html문서에서 글자 굵게 하는방법
 
   <strong>seungyeon</strong>
 
 
 
5. 띄어쓰기 필요한경우 html문서에서 띄어쓰기 적용시키면 된다!

 

6. 플렉스 컨테이너 구축하기 

 

플렉스박스의 컨테이너는 ul이기에, ul에 flex 적용하기!

ul은 블록요소!

magin auto를 이용해서 박스를 중앙으로 가지고 오자!

 

#destinations {
    display: flex;
    width: 90%;
    margin: auto;
    margin-bottom: 40px;
}
 
 
 
7. 이미지를 가지고왔는데 왜 조금씩 px이 다를까?
 
각 이미지의 해상도가 높거나 낮거나, 고정된높이에 적용하면 조금씩 다를수 있음
   ㄴ 이미지가 보여주는 방식임. 그래서 넓이를 설정해주면 됨
 
    width: 250px; 고정값으로..그러나 이런방식은 반응형웹,앱에 적합하지 않음..
     width: 100%; 
    ㄴ 반응형웹이 아주 좋음 ! 

 

8. 이미지를 깔끔해 보이도록 이미지간 margin 주기

 
.destination {
    margin: 0 20px;
}
 
9. 이미지가 실제 비율과 다르고 찌그러졌을때?
  ㄴ object-fit 기능 이용!
    object-fit: fill;   -> 기본값 주어진치수에 맞게 잘 조절한다는 의미, but 크기 비율에 맞추다보니 찌그러질수 있음
 
    object-fitcontain; -> 이미지 크기가 컨테이너에 맞게 조절됨 (컨테이너 비율에 따라 빈공간이 생길수도 있음) 
    object-fit: cover;  -> 이미지의 종횡비가 그대로 유지되면서 컨테이너를 채움!

 

728x90
반응형