CSS 기초를 배웠으니 이제 레이아웃과 반응형을 배워보자.
HTML 문서의 기본 배치 흐름은 왼쪽 → 오른쪽, 위 → 아래이다. 이러한 배치 흐름을 내가 원하는 대로 바꾸기 위해서는 레이아웃 작업을 해야 한다. 예를 들어, 뉴스 기사에 이미지와 텍스트를 넣는다고 하면 이미지 아래에 텍스트가 들어가게 된다. 텍스트를 이미지 오른쪽에 배치하고 싶다면? 바로 float을 적용하면 된다.
● float 이용하여 다단구조 만들기
이미지 3개를 나란히 배치하고 싶다면,
<body>에서 다음과 같이 쓰고 ↓↓
<div>
<img src="1.jpg">
<h5>고양이 사진</h5>
</div>
<div>
<img src="2.jpg">
<h5>강아지 사진</h5>
</div>
<div>
<img src="3.jpg">
<h5>호랑이 사진</h5>
</div>
<style>에서 다음과 같이 설정하면 된다.
div{
foat: left;
}
그럼 세 개의 이미지가 나란히 위치하게 된다.
● float을 적용하고 싶지 않을 때
clear: both;를 써주면 적용에서 제외된다.
● overflow
: content가 블락요소의 크기보다 클 때 어떻게 표시되게 할지 정하는 기능
- overflow: hidden; - 넘치는 부분을 숨긴다.
- overflow: scroll; - 스크롤을 생성한다.
- overflow: visible; - content를 모두 보이게 한다.
● position
: 요소의 배치 기준을 지정하는 속성
- position: static; - 기본값. 기본 배치 방향
- position: absolute; - 상위요소를 기준점으로
- position: relative; - 원래 배치 위치로
- position: fixed; - 브라우저(viewport)를 기준으로. 고정되어 스크롤을 해도 요소가 사라지지 않게 된다.
요소의 위치는 기준점에서 얼만큼의 거리를 줄지 지정하여 설정한다. 즉, 위치좌표이다.
각각 top, left, right, bottom에 픽셀값을 설정한다.
p{
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
}
상위요소를 기준점으로 하여 배치를 바꿀 때 주의할 점으로는, 기준이 되는 상위 요소에 position: relative;를 적용한 후 위치좌표를 설정해야 한다는 것이다. 잊지 않도록 하자.
● 반응형 - 미디어쿼리
반응형 웹은 브라우저 크기에 따라 디자인이 변하는 웹을 말한다. 각각 모바일 버전과 PC버전에서 표시되는 디자인을 다르게 하기 위해서 설정한다.
<head> 요소 안에 <meta name="viewport" content="width=device-width, initial-scale=1">요소를 추가한다. 이 viewport meta 요소가 없으면 사용자가 어떤 환경에서 보고 있는지 여부를 판단할 수 없다.
그리고 다음을 작성한다. @media(max-width:800px){}
{ 이하로는 적용하고자 하는 속성을 작성한다.
@media(max-width:800px){
div{
background-color: ■green;
}
}
max-width: 800px는 800px이하인 브라우저 크기에 적용한다는 뜻 ↔ min-width: 800px
● 주로 설정되는 크기
- 데스크탑: 992px 또는 1200px 이상
- 태블릿: 768px 이상
- 모바일:768px 미만
● 부트스트랩 https://getbootstrap.kr/
: 반응형 웹 페이지를 쉽게 만들 수 있도록 도와주는 CSS, JS 프레임워크
부트스트랩 CSS 파일을 HTML <head>에 링크시키는 것부터 시작한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
*CDN(Contents delivery network)
부트스트랩 웹 사이트에서 설명을 보며 내 파일에 적용시키면 된다.
매우 유용하다. 여러 가지 적용해 봐야겠다.
'MS AI School' 카테고리의 다른 글
| DAY 6 - JAVASCRIPT 자바스크립트 이벤트 다루기(click, resize) (0) | 2022.10.13 |
|---|---|
| DAY 5 - 자바스크립트 기초(데이터 유형, 함수, HTML에서 작성하기) (0) | 2022.10.13 |
| DAY 3 - CSS기초 박스모델 공부 (0) | 2022.10.11 |
| DAY 2 - CSS를 배워보자 (0) | 2022.10.09 |
| Day 1 - HTML을 배워보자 (0) | 2022.10.09 |