안녕하세요. 키미추입니다.
이번 강좌에서는 div를 정렬하기에 가장 편리한 Float의 속성과 개념을 배워볼텐데요.
margin padding 값을 일일이 수동으로 조정할 필요없이 더욱 더 심플하게 float을 이용한 정렬,배치를 알아보겠습니다.
1. 실제 사용되는 구조와 패턴들
사이트를 보면 뉴스,광고,블로그,쇼핑몰 등 항상 사진 옆에 텍스트가 있는 형태를 많이 보았을 거예요.
쉽게 말하면 같은 행인데 글자와 사진이 2열로 나뉘어 양옆으로 나란히 있죠.
2-1. float의 개념
float의 사전적 의미는 '뜨다,부유키시다'이면서 Css에서 글자나 이미지와 같은 덩어리를 정렬해주는 기능입니다.
Html에서 내용을 쓰면 내용이 위에서 아래로 내려가 단순하게 보여질뿐인데, 화면에 다양한 배치와 정렬을 하기위해서 Css에서 주로 float,flex 같은 속성을 줍니다.
float의 주요 속성은 rigth,left와 같은 단순한 속성들 입니다.
2-2. float을 구조화하기
div로 틀을 짜고, 배치될 내용의 영역을 width로 일일이 조정하지 않도록 퍼센트%를 이용해 만들어 보겠습니다.
한 공간 안에서 이미지와 텍스트 두 가지 영역을 만드는 작업입니다.
전체 너비에서 이미지 30%, 텍스트 70%로 맞춰보려해요.
- 가장 바깥 틀 만들기: 우선 사진,글자 두 영역을 감싸줄 가장 바깥의 공간인 div의 width를 100%에서 사용자가 원하는 크기인 픽셀px로 전체 영역을 만들어 줍니다. 그러면 황토색 테두리와 같이 커다란 틀이 나옵니다.
- 첫번째 이미지 영역 만들기: 전체 가로너비 안에서 그림을 30%로만 보이게 해줄겁니다. 아주 간단히 width: 30%;로 값을 만들어주면 아래와 같이 전체 가로너비의 일부분만 자치하게 됩니다.
- 두번째 텍스트 영역 만들기: 전체 가로너비가 100프로라면 사진 영역이 30프로니 나머지 70프로는 글자 영역으로 해줍니다. 이번에는 width: 70%;으로 값을 만들어주면 됩니다.
그림을 보면 설명이 더 쉽게 이해가 됩니다.
2-3. float으로 정렬하기
진짜 중요한 것은 float으로 정렬하기 입니다.
비단 가로 너비만 지정했다고 해서 좌우로 정렬이 되는 것은 아닙니다.
예를들어, 블로그에 사진을 2장 올릴때 1장의 가로를 300px, 나머지 1장의 가로는 500px으로 값을 지정해주고 사진올리기를 하면 위에서 아래로만 정렬되듯이.
블로그에서 개별의 사진 두 장을 옆으로 나란히 배열하고 싶으면 마우스로 끌어서 정렬해주거나 사진 정렬하기 툴을 이용하는 것과 마찬가지로 float을 이용해 오른쪽,왼쪽으로 정렬을 해줍니다.
3. 코드 적용하기
/* div로 틀을 구조화 */ <div class="container0"> <div class="text0"> 텍스트 </div> <div class="image0"> 사진 </div> </div> /* 가장 바깥의 텍스트와 사진을 감싸고 있는 영역 */ |
4. 적용된 예제
좋아요와 구독하기는 글쓴이가 더 좋은 글을 작성하는데 힘이 됩니다. 감사합니다.
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
'CSS' 카테고리의 다른 글
| [CSS] 마우스 올릴때 점점 늘어나는 네모칸 상자 만들기 (10) | 2021.01.19 |
|---|---|
| [CSS] 코드로 회전하는 '로딩중...'표시 만드는 법 (8) | 2021.01.15 |
| [Css] 툴팁이란? 흔히 보는 툴팁 사용 예 (17) | 2021.01.11 |
| [CSS] 글자,이미지 중앙 가운데 정렬하는 방법 (11) | 2021.01.04 |
| [Css] 글자,텍스트에 그라데이션 만들기 & 예제 (0) | 2020.11.07 |