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

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-fit: contain; -> 이미지 크기가 컨테이너에 맞게 조절됨 (컨테이너 비율에 따라 빈공간이 생길수도 있음) 

    object-fit: cover;  -> 이미지의 종횡비가 그대로 유지되면서 컨테이너를 채움!