LG 디스플레이 반응형 리뉴얼
LG디스플레이는 OLED 및 TFT LCD와 같은 디스플레이 기술을 활용한 제품의 연구, 개발, 제조, 판매를 하고 있습니다. 2021년 기준 매출 비중은 TV 32%, IT 42%, MOBILE 및 기타가 26%이고 글로벌 메이커가 주된 고객으로 상위 10개 고객사의 매출 비중이 전체의 86%를 차지하고 있고 수출을 주력으로 하는 기업입니다.
파일 구조/명
index.html : 마크업
asset
1) font : 사용 폰트
2) image : 사용 이미지
3) js : main.js 스크립트
4) css :
base
common.css : common
reset.css : reset
fonts.css : font
layout
footer.css : footer
header.css : header
main
main.css : main
개념
grid
**CSS Grid는 CSS Flex 와 같이
Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다.
Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.
- 컬럼(cloumn)은 열
- 로우(row)는 행
1 .grid-template-rows: 명시적 행(Track)의 크기를 정의
2 .grid-template-columns : 명시적 열(Track)의 크기를 정의
3 .grid-template : grid-template-xxx의 단축 속성
4 .grid-row : grid-row-xxx의 단축 속성(행 시작/끝 위치)
transition
- 속성을 서서히 변화시키는 속성 (IE버전 10부터 지원)
- 요소의 변화를 일정 기간(duration)동안 일어나게 함(속성을 서서히 변화시키는 속성)
- 자동으로 발동되지 않음
반응형 웹페이지
미디어쿼리
- 반응형 웹페이지를 만들때 사용한다.
- 미디어 쿼리 안에 적은 선택자는 지정해놓은 크기보다 줄어들었을 때 적용이된다
- 우선순위, 즉 선택자의 복잡도가 같아서 아래에 있는 선택자가 적용이 되기 때문에 무조건 맨 아래에 적어야한다.
@media (max-width:1200px){
/pc형 1200이상보고 잡으면 pc/
}
@media (max-width:1024px){
/ 테블릿 768보고 잡으면 테블릿 /
}
@media (max-width:767px){
/모바일 320을 보고 잡으세요/
}
코드분석
마크업
<div class="sc-wrap">
<div class="flow-text">
<div class="line">
<a href=""><img src="./asset/images/avern.png" alt=""></a>
<a href=""><img src="./asset/images/dal.png" alt=""></a>
<a href=""><img src="./asset/images/hyundai.png" alt=""></a>
<a href=""><img src="./asset/images/ej.png" alt=""></a>
<a href=""><img src="./asset/images/daol.png" alt=""></a>
<a href=""><img src="./asset/images/orion.png" alt=""></a>
<a href=""><img src="./asset/images/vinyli.png" alt=""></a>
<a href=""><img src="./asset/images/sqisfot.png" alt=""></a>
</div>
<div class="line">
<a href=""><img src="./asset/images/avern.png" alt=""></a>
<a href=""><img src="./asset/images/dal.png" alt=""></a>
<a href=""><img src="./asset/images/hyundai.png" alt=""></a>
<a href=""><img src="./asset/images/ej.png" alt=""></a>
<a href=""><img src="./asset/images/daol.png" alt=""></a>
<a href=""><img src="./asset/images/orion.png" alt=""></a>
<a href=""><img src="./asset/images/vinyli.png" alt=""></a>
<a href=""><img src="./asset/images/sqisfot.png" alt=""></a>
</div>
</div>
<div class="flow-text reverse">
<div class="line">
<a href=""><img src="./asset/images/sungheung.png" alt=""></a>
<a href=""><img src="./asset/images/elvision.png" alt=""></a>
<a href=""><img src="./asset/images/mds.png" alt=""></a>
<a href=""><img src="./asset/images/audio.png" alt=""></a>
<a href=""><img src="./asset/images/intellian.png" alt=""></a>
<a href=""><img src="./asset/images/erose.png" alt=""></a>
<a href=""><img src="./asset/images/kiko.png" alt=""></a>
<a href=""><img src="./asset/images/digital.png" alt=""></a>
<a href=""><img src="./asset/images/easywitn.png" alt=""></a>
<a href=""><img src="./asset/images/rainus.png" alt=""></a>
</div>
<div class="line">
<a href=""><img src="./asset/images/sungheung.png" alt=""></a>
<a href=""><img src="./asset/images/elvision.png" alt=""></a>
<a href=""><img src="./asset/images/mds.png" alt=""></a>
<a href=""><img src="./asset/images/audio.png" alt=""></a>
<a href=""><img src="./asset/images/intellian.png" alt=""></a>
<a href=""><img src="./asset/images/erose.png" alt=""></a>
<a href=""><img src="./asset/images/kiko.png" alt=""></a>
<a href=""><img src="./asset/images/digital.png" alt=""></a>
<a href=""><img src="./asset/images/easywitn.png" alt=""></a>
<a href=""><img src="./asset/images/rainus.png" alt=""></a>
</div>
</div>
</div>위 이미지와 같이 띠 이미지가 화면안에서 끊김없이 줄 세우기 위해 .sc-partners .sc-wrap .flow-tex에 display: flex;를 넣고 가로로 만들어 이미지를 화면밖까지 코드를 생성 아래 띠는 반대 반향으로 흘러가기 때문에 reverse라는 클래스명을 부여
keyframe으로 0%일때와 100%일때 x축이동
@keyframes rolling1{
0%{
transform: translateX(0%);
}
100%{
transform: translateX(-100%);
}
}
@keyframes rolling2{
0%{
transform: translateX(0%);
}
100%{
transform: translateX(100%);
}
animation으로 부가옵션 infinite(무한반복)와 lineaer(일정속도) 속성부여
.sc-partners .sc-wrap .flow-text .line{ display: flex; gap: 30px;
animation: rolling1 20s infinite linear; }
scroll 이벤트
$(window).scroll(function(){
curr = $(this).scrollTop(); //브라우저 스크롤했을때 위치
if (curr > 0) { //스크롤 내릴 떄
$('.header').addClass('scroll') // 배경흰색
$('.sc-visual').addClass('scroll') //높이 조절
$('.logo').addClass('scroll') //로고변경
$('.util-area').addClass('scroll') //텍스트 색 변경
} else { //스크롤 올릴 때
$('.sc-visual').removeClass('scroll') // 각 코드에 scroll클래스 제거
$('.header').removeClass('scroll')
$('.logo').removeClass('scroll')
$('.util-area').removeClass('scroll')
}
})
$(window).trigger('scroll');
////스크롤 한 상태에서 새로 고침 했을 때 발생하는 오류를 막기 위해
항상 스크롤이 실행되도록 스크롤 이벤트 강제 실행
```
