하지만 이러한 방법은 RAM이나 그래픽 처리 장치(GPU)의 사용량을 커지게하여 페이지에 병목 현상을 줘서 오히려 악영향을 끼치게 한다.
2. will-change
위 css핵을 대체할 수 있는 새로운 css 속성이 생겼다. 그 속성이 will-change 이다.
속성명 그대로 어떤 속성이 변경이 될 것인지 미리 엘리먼트에 적용하여 브라우저가 해당 css를 읽을 때 변경 될 속성을 알게하여 미리 그 변경에 대비할 수 있게 하는 것이다.
will-change: auto; /* 기본 값 */
will-change: scroll-position; /* 스크롤 위치가 변경 될 예정 */
will-change: contents; /* 요소의 컨텐츠 내용이 변경 될 예정 */
/* 특정 css 속성 적용 */
will-change: transform; /* transform 속성이 변경 될 예정 */
will-change: opacity; /* opacity 속성이 변경 될 예정 */
will-change: left, top; /* left, top 값이 변경 될 예정 */
will-change: transform, opacity
BEM은 클래스 사용을 각각 블록(block), 요소(element), 상태(modifier)로 구분하여 네이밍한다.
*장점
- 직관적인 클래스 사용을 통해 여러사람이 함께 작업을 진행하더라도 클래스를 알아보기 쉽게한다.
- 코드의 재사용성이 용이하다.
*단점
- 직관적인 클래스명을 사용하다보니 클래스명이 지나치게 길어져 복잡해지는 경우가 있다.
1. Block
- block의 속성을 가지고 재사용할 수 있는 독립적인 영역에 적용한다.
- block은 여백, 위치, 색상 등 상태에 대한 내용은 담지 않는다.
- 클래스명이 길어질 경우엔 하이픈(-) 으로 구분한다.
<!-- O -->
<div class="paging"></div>
<div class="btn-area"></div>
<!-- X -->
<!-- fixed, red와 같이 상태에 대한 내용은 클래스로 담지 않는다. -->
<div class="paging-fixed"></div>
<div class="btn-area-red"></div>
그 요소와 img태그와 vertical-align:middle 속성을 이용해 중앙 정렬을 맞춘다.
3. position:absolute 속성을 이용한 정렬
absolute를 이용해 중앙 정렬하는 방법은
크게 2가지로 나눌 수 있다.
고정된 이미지 크기를 가지고 있고
그 이미지의 크기를 확실히 알 경우에 쓸 수 있는
absolute와 margin-top 속성을 이용한 방법과
이미지 크기가 가변적이고
이미지 크기에 대한 정확한 정보가 없을 경우에 쓸 수 있는
absolute와 transform:translateY() 속성을 이용한 방법이 있다.
3-1. absolute & margin-top을 이용한 방법
<style>
/* absolute를 사용하기 위해 감싸는 영역에 position:relative 적용 */
.img_area{position:relative; height:300px;}
.img_area img{position:absolute; top:50%; margin-top:-100px; height:200px;}
</style>
<body>
<div class="img_area">
<img src="./img/test.jpg" alt="test이미지">
</div>
</body>
이미지 요소를 top 기준으로 50%만큼 이동 후에
이미지 높이값인 200px의 절반만큼을 margin-top의 마이너스 값으로 끌어 올린다.
이해를 쉽게하기 위해 아래의 예시를 준비했다.
위의 예시는 이미지 영역을 top:50%만 적용한 모습이다.
여기서 margin-top을 이미지의 높이값의 절반 만큼을 빼주면
위에 표시한 영역 만큼이 강제로 끌어올라가게 된다.
그래서 이미지 중앙 정렬을 맞출 수 있다.
3-2. absolute & transform 속성을 이용한 방법
<style>
/* absolute를 사용하기 위해 감싸는 영역에 position:relative 적용 */
.img_area{position:relative; height:300px;}
/* 높이값이 고정되어 있지 않은 경우 */
.img_area img{position:absolute; top:50%; transform:translateY(-50%);}
</style>
<body>
<div class="img_area">
<img src="./img/test.jpg" alt="test이미지">
</div>
</body>
위쪽에서 설명한 absolute와 margin-top을 이용한 방법과 유사한 방법으로
margin-top은 정해진 px의 값을 빼서 끌어올린다면
transform:translate를 이용한 방법은 이미지 영역 높이의 퍼센트 값을 이용해서
이런식으로 .float_left 클래스 영역은 왼쪽으로 .float_right 영역은 오른쪽으로 정렬할 수 있다.
그리고 텍스트와 float 설정된 영역이 같이 노출이 되는 경우엔 아래와 같이 노출된다.
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.</p>
</div>
</body>
<style>
.float_right{float:right; background:greenyellow; width:150px; height:50px;}
</style>
<body>
<div class="wrap">
<div class="float_right">오른쪽정렬</div>
<p>텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.</p>
</div>
</body>
2. float 해제 (clearfix)
위와 같이 float를 사용하여 왼쪽 혹은 오른쪽 정렬을 했을 경우에
생각지도 못한 상황이 발생하곤 한다.
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>
위와 같이 float를 사용한 영역 아래에
.text라는 클래스를 사용해서 별도의 영역을 만들고자 했을 때,
원하던 모습이 아닌 .text 영역의 위치가 .wrap 영역과 겹쳐서 보이는 것을 확인할 수 있다.
이것은 float 속성 때문에 그렇게 되는건데
float를 사용하면 사용한 영역 자체가 화면에서 아예 띄워지게 된다.
position:absolute 하는 것과 마찬가지로 띄워지게 돼서
그 영역을 감싸고 있는 부분이 float한 부분까지 너비나 높이를 인식하지 못한다.
그렇기 때문에 .wrap의 영역은 .float_left 영역의 높이값이 무시된 상태로
p태그에 텍스트 영역만 높이을 인정받아 .text영역의 위치가 위와 같이 노출이 된 것이다.
이를 해결하기 위해서는 float 설정해놓은 것을 해제해줘야한다.
그래야 올바른 높이값을 잡고 레이아웃을 바로할 수 있다.
float를 해제할 수 있는 방법은 크게 3가지가 있다.
1. float한 요소의 부모요소에 overflow:hidden 속성 사용
2. float한 요소의 부모요소에 가상선택자 :after를 사용하여 clear해제
3. 임의의 div를 만들어 clear 속성을 사용한 해제
2-1. overflow:hidden 사용
<style>
.wrap{overflow:hidden;} /* float를 사용한 .float_left의 부모인 .wrap에 overflow:hidden 사용 */
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>
2-2. 가상선택자 :after 를 사용하여 clear 처리
float된 영역의 부모 요소에 :after 사용하여
display:block; clear:both; content:"";
속성을 사용하여 해제
<style>
.wrap:after{display:block; clear:both; content:"";} /* 부모요소 wrap에 가상 요소를 사용하여 clear */
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>
2-3. 임의의 div에 clear 속성 사용하여 해제 (비추천)
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.clearfix{clear:both;} /* 임의의 div에 clear 속성을 추가하여 float 해제 */
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="clearfix"></div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>
