✔ TODAY
오늘은 키즈가오 상단부분을 실습하였다... 날씨가 35도 넘는 폭염도 힘들었지만... 오류를 수정하는 데 거의 5시간... 따라 치는 것도 왜이리 틀리지...ㅜ
게다가 중간에 집안일이 생겨서... 날 넘기고 새벽2시에 겨우 강의를 다 수강해서... 학습내용은 차후 정리할 예정.. 복습도 하면서..ㅜ
✔ 학습한 내용
원페이지사이트- 하나의 html으로 구성된 사이트
실습한 코드는 아래의 깃허브링크를 참조
kidsgao.html
pc-css
mobile-css
anime-css
css는 3가지로 pc, 모바일, 애니메이션용 으로 작성.
- 💥모바일 버전을 만들때 반드시 기재
아니면 비율이 맞지 않는 상태에 올라온다.
<meta name="viewport" content="width=device-width, intial-scale=0.1">- 해더의 아이디.인트로렙의 경우 백그라운드 속성을 이용해서 이미지를 삽입 키즈가오 디폴트
body{
overflow: hidden;
} - 브라우즈의 엑스축을 벚어나는 영역을 (크기에 넘어가서 있는 오버젝트)가 있는 숨기겠다 ㅅ(삽입을 안하면 가로 스크롤이 생김
버튼은 태생적으로 테두리와 회색 배경색을 가지고 있는데 이걸 없애고 투명을 바꾸는 작업
클리어 픽스!!!!!
css인트로
포지션을 사용할때 . 그에 대한 당위성이 필요함. 왜 이걸 사용했는 지에 대해 이유를 만들어야 됨(포지션에 대한 깊이 있는 이해)
인트로.인트로렙
중앙으로 끌고오기 중앙정렬
-마진 0 오토 / 레프트 50% + (-박스넚이의 반값)
포지션 레렐티브 쓰는 이유
1중앙정렬 위의 방법으 쓰는 이유는 3차원영역에서만 가능한 방법임
레레티브는 2,3차원다 이용가능
2로고 동물은 포지션 엡솔루트 마진으로 배치작업
마진이 아닌 탑 렙 다텁 이용 - 위치는 그대로냐 좌표기준법이 달라짐 부모의 포지션상태에 따라서 자식의 3차원 속성에 부모의 기준도 달라짐
순수3차원사용하면 포지션 렐레티브를 사용한 부모의 기준에 따름
탑레프트 기준이 달라짐(부모에게 기준을 다는 게 유용함30분대)
로고.
포지션 엡솔루트
동물별로 앞뒤가 존재 - z측이 존재 3차원차원포지션
어느 동물을 위로 뒤로?
z-index: 100; 일종의 기준점 값이 더 크면 위로 적으면 뒤로.
인트로렙라이언.
제트인덱스가 없으면 0이라고 봄
.이미지의 크기를 공간의 크기와 동일하게 만들어줌.
백그라운드 이미지- 매꿀려고 공간의크기대로 이미지를 배치로 매꿈
백그라운드 리엑트 논을 사용해서 이미지가 하나만 나오게 해도 공간은 그대로 존재
이미지를 맞춰 공간의 크기를 맞춰 생성하는 게 좋음-데코레이션.요소이미지의 경우.
구름만들기
레이어가 뜰어짐
전체크기보다 각 구름이미지의 합이 더 크기 떄문
문제해결
1.플로우 레프트와 라이트를 사용하기
해결된걸려 보이지만 브라우저를 줄이면 레이어가 틀어지게됨
플로우의 한계 브러우저의 크기보다 플로우의 위드값의 합이 더 크면 레이어가 틀어지기 죔
유동적일때 레이어가 틀어지는 건 문제
즉 ㅡ 문제 해결이 안됨
2.포지션 엡슐루트를 사용
그리고 각 끝에 고정되게 레프트 0 라이트0를 각각 입력
반드시 추가하기!!! 아니면 개판으로 겹쳐짐...
기준은 위 부모갑의 클라우드뤱 의 포시젼 리렉티브가 된다.
자식으로 포짓ㄴ 엡슐류트사용. 부모를 포지션레렐레티브를 갑사주는게 안전하게 작업하는 방법
잠자리
전부 3차원이라서 모두 겹치기게 된다
탑800
포지션 렐레티브를 사용하지 않으면 잠자리가 안보임.
레프ㅌ 크라우드 뒤에 있음(브러우저 기준 탑800 사용했기때문) 렐레티브사용하면 렐세티브 작용부모그룹 기준으로 탑 800작용.
로고를 밑으로 내려달라
인트로인트로퉵에 마진탑작용. 근데 부모다 같이 내려옴
레이어병함현상/마진 병함현상이 일어났기 때문
-
인트로영역에 패딩탑100
인트로와 인트로엡 상에 공간만들기
마진병합현상없이 내려옴
주의점) 공간이 벌어진다/ 전체 콘테츠가 100씩 밀리게 됨
즉 로고만 움직이게 되는 게 아님. 레이어가 틀어지게 됨.
무리.... -
마진탑은 마진병함됨때 안됨
-
인트로 인트로렙에 포지션 렐레티브를 사용한 이우!!
탑을 사용하기 위해서
특징) 모두 사방도 마찮가지
노랑은 움직이는데 핑크는 원래 위치 그대로 핑크뒤로 노라이 들어감 두 레레티드 끼리 탑을 사용했다. 3차원에 탑을 사용하면 자기 자신이 주체가 되어 움직이는데 그 아래 어떠한 요소의 레이어 아웃이 배치가 있더라도 그 요소으 레이어 아웃의 변화는 없다. 즉 레이어아웃이 틀어질 문제는 없다.둘다 3ㅊ원인 경우 나중에 작성한 3차원이 더 높다.
실무팁
직접 디자인작업을 해야되는 경우, 포토샵이 가능하다면...(필수는 아님...)
실제이미지의 크기는 짝수나 숫자5로 떨어져야된다.
애네메이션
4마리의 동물 넣기
곰이 없다....
잠자리 밖에서 밖으로 사라져야되낟.
레프트-잠자리크기만큼
키프레임안의 스타일css의 포지션에 영향을 받음 엡솔로투여서 탑레프트드응ㄹ 사용할수 있음
밖으로 사라지는 걸 고정값px 아닌%으로 수시로 수정하지 않도록 레프트100% 항상 브라우저의 화면밖에서 사리진ㅁ
너무 크게 고정값을 잡으면 잠자리가 다시 나타나는데 시간이 걸림
디폴트 오버플로우 히든을 안한 상태에서는 잠자리가 끝까지 다 사라질때까지 가로스크롤이 생기게 되낟.
플레임
@media(max-width: 767px) 이상은 스타일css
이하는 모바일
모바일에는 이미지별 모바일 버전이 있다...모바일버전으로 교체
로고와 구름
배경 잠자리 - 피시에 적용했던 잠자리를 노출되지 않게 해야됨.
미디어쿼리는 미디어쿼리의 밖의 값을 상속함
즉 바꿀 속성만 미디어쿼리 안에 작성 포지션 레프트등 다 적용
변경된 위드값에 맞춰서 마진레프트도 수정
없애는거 디스프레이:논에르로 설정
모배일 배경
백그래운드 리피트 가 자동응로 들어가 반복해서 매꿈 노리피트를 사용하기대문에 실제 이미지만 나와서
인트로 끝 농부트
부모보다 자식의 높이가 큼 그라데이션때문에 다된 영역에 침볌해야되는 경우. 되도록이면 그라데이션을 넣지말기....
......overflow: hidden;...
overflow-x: hidden;..!!!!!!!!!!!!
피시버전에 곰이 안나타난 이유는..... html코드에서 콤div를 안만들어서.....
z-인텍스는 px 고정값 만들지 말기...
모베일
농부는 탑과레프트로 위치지정
이전 지정이 3차원 엡솔루투 팜스피치랩은 레어가 겹치게 됨92,3차원과 상관없이)
렐레티브 2,3차원 나중에 쓰인 3차원 레이어 층이 가장 위에 배치
팜2
프롯으로 사용해도
만나기도 전에 모바일 버전으로 변경되기 떄문
(줄여도 겹치지 않음
팜3
하기 전에 항상 이미지를 미리 보는 것이 좋다
타이머와 새를 제외하고는 최상위 존재 해야됨 제트 인텍스 900
✔ 학습한 내용 중 어려웠던 점 또는 해결못 한 것들
- ... 진짜...출력이 이상하게 되는 경우가 많아서 오류부분찾는데 반나절을 사용했다... 심지어 갑자기 왼쪽에 벼랑 구름이 이상하게 나와서 찾아내는 데만 3시간...이상 그외 오탈자와 오류를 찾는 것이 너무 힘들었다....ㅜ
✔ 해결방법작성
-
사전에 제공된 완성본이랑 비교하며 찾았다...
-
그외 기본적으로 제대로 된 위치에 있는지 하나하나 찾음...
학습소감
... 오늘따라... 이 길이 나의 길인가 진지하게 고민했.. 강의 진도가 많아서 그런가.. 날이 너무 더워서 그런가... 일이 많아서 그런가... 차후... 정리를....ㅜㅜㅜㅜ 지금은 너무 아무 생각이 없다..ㅜ
