DevSSOM
CSS - 레이아웃에 영향을 미치는 속성 본문
display
이전에, HTML 태그는 크게 두 가지의 성격을 가지고 있다고 했음. Block과 Inline. 근데, 간혹가다 <a>태그를 가지고 공간에 대한 크기를 입력해주고 싶다. <p>태그가 공간에 대한 크기를 갖고 있지 않으면 좋겠다. 하고 원래 태그가 갖고 있는 성격을 바꾸고 싶은 거야. 그럴 땐 display라고 하는 CSS 속성을 사용하게 되면, <p>태그를 inline으로 바꿀 때 속성값으로 inline을 주면 됨.
- display : Block과 Inline 요소가 가지고 있는 원래의 성격을 바꾸고 싶을 때 사용. 속성값으로 inline-block을 적용하면 두 요소의 성격을 모두 가짐. x축 정렬이면서 공간에 대한 크기를 만들고 상하 배치 작업까지 하고 싶다고 할 땐 inline-block. inline-block은 내비게이션 버튼을 만들 때 주로 사용됨.
/* style.css 문서 */
p { display: inline; }
a { display: block; }
a { display: inline-block; }
float
어떤 오브젝트를 브라우저를 기준으로 왼쪽에서부터 정렬시키고자 할 때, 혹은 오른쪽에서부터 정렬시키고자 할 때 사용. 이름 그대로 선택자를 띄워 새로운 레이어층을 만듦. 포토샵의 레이어 개념처럼.
- float : left; 왼쪽에서부터 정렬시킬 때.
- float : right; 오른쪽에서부터 정렬시킬 때.
<div class = "left"> Hello World </div>
<div class = "right"> Hello World </div>
/* style.css 문서 */
.left { float: left; }
.right { float: right; }위처럼 코드를 작성하게 되면, left를 사용하는 지점, right를 사용하는 지점이 같은 선상에 위치하면서 왼쪽 끝, 오른 쪽 끝에 정렬이 되게 됨.
<div class = "left"> Hello World </div>
<div class = "next"> Hello World </div>
/* style.css 문서 */
.left { float: left; }
.next { float: left; }레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 주루룩 정렬시키고 싶은 경우엔, 이렇게 float: left; 를 연속적으로 입력. 그럼 같은 선상 위에서 정렬이 됨.
clear
float을 사용할 때, 따라오는 속성이 clear. float은 공중에 띄우는 기능이 있기 때문에, 다음에 나오는 오브젝트도 float을 쓰게 되면, 이어서 나오게 되는게 아니라, 레이어층이 겹치는 형태로 화면에 출력됨. 이게 float의 단점. 그래서 float을 사용할 때는 특정 지점에서 float에 대한 기능을 꺼줘서 그 다음에 정상적으로 다음 오브젝트가 배치가 될 수 있게끔 장치를 만들어줘야돼. 그럴 때 사용하는 게 clear. 그래서 악어와 악어새의 관계처럼 float에는 clear가 따라서 사용됨.
- clear : float에 대한 속성을 제어하고자 할 때 사용.
- clear의 값 : left, right, both가 있는데, both만 기억하면 됨. float 양쪽에 대한 모든 기능을 다 꺼주겠다는 의미.
- clear를 사용하는 위치 : float을 마지막으로 사용한 지점, 그 다음에 나오는 태그에 clear를 넣어주면 됨.
<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>
/* style.css 문서 */
footer { clear: both; }<aside>, <main>, 그리고 다시 <aside> 이 3개의 영역에 flaot을 사용했다면, 마지막으로 사용한 <aside> 다음에 나오는 태그인 <footer> 영역에다가 clear 값을 넣어주면 됨.
브라우저와 공간 사이의 공백 제거하기
추가적으로, 웹사이트를 만들 때, 브라우저 화면에서 어떤 공간에 대한 크기를 설정하고 출력을 하는데, 브라우저와 공간 사이에 미세하게 공백이 있는 걸 확인할 수 있어. 이렇게 공백이 생기는 이유는 <html>태그와 <body>태그가 태생적으로 margin값과 padding값을 가지고 있기 때문. 그래서 웹사이트를 만들 때는 항상 <html>과 <body>태그의 margin값과 padding값을 0으로 초기화시켜야 됨. 아래 코드를 항상 디폴트로 넣어주기.
<style>
html, body {
margin: 0;
padding: 0;
}
</style>혹은, html과 body 대신에 * 별 표시를 써줘도 margin과 padding값을 초기화시켜주기. * 별 표시는 모든 html 태그를 선택해주는 것임. 실무에서 작업할 때는 * 별 표시를 많이 쓴다고 함.
<style>
* {
margin: 0;
padding: 0;
}
</style>
'HTML, CSS' 카테고리의 다른 글
| HTML, CSS - Transform 속성 (0) | 2021.08.05 |
|---|---|
| HTML/CSS - 간단한 쇼핑몰 만들기 실습 3(하단 영역) (0) | 2021.07.18 |
| HTML/CSS - 간단한 쇼핑몰 만들기 실습 1(상단 영역) (0) | 2021.07.16 |
| CSS - 마진 병합 현상 (0) | 2021.07.14 |
| CSS - 박스 모델 (0) | 2021.07.13 |
| CSS - 주요 속성 (0) | 2021.07.12 |
| CSS - 캐스케이딩 (0) | 2021.07.11 |
