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-fit: contain; -> 이미지 크기가 컨테이너에 맞게 조절됨 (컨테이너 비율에 따라 빈공간이 생길수도 있음)
object-fit: cover; -> 이미지의 종횡비가 그대로 유지되면서 컨테이너를 채움!
728x90
반응형