본문 바로가기

분류 전체보기

 (42)
06 - 06 검은사막 메인 페이지 마크업 (13) - aos 플러그인 (3) :: 무난히 해서 딱히 막히는 부분이 없었다. 무난한 하단 마크업! https://github.com/wonpoem/black/tree/master/blackdesert GitHub - wonpoem/black: black desert main page. black desert main page. . Contribute to wonpoem/black development by creating an account on GitHub. github.com https://rkqtlr15159.cafe24.com/blackdesert/ 검은사막 광활한 오픈월드 숲과 바다, 사막과 설원 한적한 시골 마을에서 북적이든 대도시까지 발길이 닿는 곳마다 새겨진 가슴 뛰는 이야기 rkqtlr15159.cafe24.com
06-05 검은사막 메인 페이지 마크업 (12) - aos 플러그인 (2) * 오늘은 이 부분 마크업 + 다른 곳 아래까지 하고 반응형 작업까지 차차 완료하는걸로. + 자바스크립트 및 기본 페럴렉스 정도까지 공부해둘 필요 있음. + validator 검사 + 웹표준, 웹접근성 검사 + css방법론 공부 + 디자인 패턴 공부 :: flex를 다시 position으로 변경, 이후 저 캐릭터가 배경 이미지 위에 두지 않는 문제 발생 ( z-index로 해도 안됨 ) :: div 둘 다 포지션 앱솔루트로 두어서 해결. 오버플로우 히든 해제. html 새로 다시. :: min-height. ( 추후에 수정할 수도 있음 ) :: 레전드, 이거 마크업할 때 진짜 피똥쌌겠구나. div는 매직임. div만든 사람도 이렇게 많이 쓰일거라고 생각 못했을거야. 부모는 릴레이티브고 아래 자식은 ( 이..
06 - 04 vsc, git 오류 해결 vsc를 껐다가 다시 켜보니 git 터미널이 초기화 되어서 새로 시작했는데 오류가 나는 문제 발생. :: vsc를 보니까 index.html만 살아있고 나머지는 DIR이 된 채로 다 죽어버린 상황. 해당 파일 클릭하면 갑자기 사라짐. git 탭에 가서 새로고침하여 파일 복원이 가능. :: 로딩관련 문제였음. 완전히 껐다가 다시 키고 ftp-simple 워크스페이스 해당 폴더로 다시 로드하니까 제대로 뜸. git 재시도. :: 해결 완료. 깃허브 저장소들 정리, 기존의 안쓰고 오래되었던 것들 삭제. 전용 리포지토리 새로 추가. 연결 해제 후 새로 다시 연결하니 됨. :: 초록색 네모들을 지켜라...
05 - 28 검은사막 메인 페이지 마크업 (11) - aos 플러그인 :: 환기도 시킬겸 이 부분 마크업을 하는걸로 aos 플러그인 사용 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io :: css 기반 애니메이션 data-aos="fade-up" -> fade up 애니메이션 data-aos-delay="400" -> 딜레이 조절 data-aos-duration= -> -> 애니메이션 속도 조절. :: 메인 헤더 부분이 조금 애먹었고 나머진 쉬운듯. 밑에 부분부터는 좀 편하게 할 것 같음. https://github.com/wonpoem/blackdesert/tree/master/blackd..
05 - 27 검은사막 메인 페이지 마크업 (10) - 크로스 브라우징 :: 유독 아이패드에서만 보면 이런 식으로 짤림. 태블릿은 오버플로우 히든 x 이게 안먹히는 것 같음. ( ios, 사파리 기준 ) :: 모바일 반응형 meta 코드 추가, ( 아직 해결 x ) :: 개발자도구 모바일 버전 크로스 브라우징 ( 크롬 ) -> 여기도 이런 식으로 나옴. 모바일 버전이 문제인듯. :: 크롬은 되었는데 아직 사파리는 해결이 안됨. 이거 보니까 사파리는 일반 환경에서도 계속 가로 스크롤이 유지가 되는걸로 보임. :: 1440 해상도 미디어 쿼리 :: 오른쪽에 이 영역이 안보이게끔 해야할 것 같음. 일단 display:none 처리. :: 메타 태그를 넣어주고 :: 감사합니다 ... 이게 정답이었어요. ( relative ) :: 찾은 것 같음... 헤더에 오버플로우 히든 그리고 ..
05 - 26 검은사막 메인 페이지 마크업 (9) - 이벤트 페이지 :: 이걸로 교체, 새로 바뀐걸로 마크업 ( 이벤트 부분 ) :: 대략 뼈대만 1. 이벤트 부분 마크업하고 영역 잡아줬는데 위 쪽으로 빠지는 문제 2. 오른쪽 모바일 로그인 영역이 저런 식으로 되어서 가로 스크롤이 생겨버리는 문제 :: body에 해당 태그를 넣어주니 가로 스크롤이 되던 문제 해결 :: 메인 섹션 태그에 min-height 값을 넣어서 새로 마크업하는 것들이 자꾸 위로 가는 문제 해결 + height: 100% 추가 :: 메뉴 열 시 가운데 부분만 색이 들어오는 문제 -> menu_bg에 z-index 추가 :: 연습 겸 display:flex 사용 반응형 대비 :: 생각보다 꽤 편한 flex. https://github.com/wonpoem/blackdesert/tree/master/b..
05 - 25 검은사막 메인 페이지 마크업 (8) - 사이드 메뉴 (2) :: 오늘도 화이팅, 사이드 메뉴 우측 좌측 전부 완료하고 세세한 오류나 레이아웃 밀리는게 있는지 확인하고 정리 + w3c validator 검사하고 웹표준 적용하기 ( 우선은 여기까지 ) 어제 못했던 background 이미지 가운데 + 탑에 오게하는 방법 + ul li 테두리 2줄로 주는 방법 연구 + 나머지 기타 레이아웃들 수정 막히는 부분이 많으면 오히려 좋음. 공부가 많이 됨. ㄱㄱ 백그라운드부터. :: i 태그 위치 변경 :: i 태그 앱솔루트로 변경, ( a를 블락화했기 때문에 넓이 다 차지한 상태 ) 이 상태에서 i를 수직정렬하는 법. :: top:33% 추가 :: background-size: 100퍼를 주니 해결. 일단 이렇게 하면 아래 height값이 짤림. 조절 필요. :: 저거 해..
05 - 24 검은사막 메인 페이지 마크업 (7) - 사이드 메뉴 :: 4k 데스크탑 모니터에서 확인 시 이런 식으로 화면이 짤리는 현상 발생 :: 섹션 안에 비디오태그나 div박스에 width:100%를 줘도 이런 식으로 전부 적용이 안됨. -> height값을 880px로 고정해서 그런거였음 ( 반응형일 때만 880px로 해놓고 평상시엔 height값 고정시키지 않는걸로 해결 ) = 그런데 이렇게 해도 맘에 들지는 않음. 메인 사이트는 영상의 height가 화면의 너비만큼 차지하도록 딱 되어있는데 height값을 오토로 두다보니까 메인 페이지가 영상에 따라 너무 길어지는 효과가 남. :: 그리고 추가로 비디오의 위치가 height 100%를 줘도 너무 아래 공간을 많이 차지함. 웹 사이트 화면의 100%만 차지해서 스크롤을 바로 내리면 아래 메뉴가 보이게끔 하는 1..
05 - 24 검은사막 메인 페이지 마크업 (6) - 메인 반응형 :: 1025px일 때 메엔 반응형 ( 태블릿모드 ) 윗 상단 헤더 삭제, 로고가 가운데에 위치, nav li 들 삭제, 왼쪽엔 햄버거 메뉴 오른쪽엔 사람 아이콘 메뉴 배치 ( xeicon, float ), 메인 동영상 -> 이미지 교체, 폰트 사이즈, 버튼 사이즈 조정, 메인 높이 값 조정, main video width 100% 해제 , height값 추가 왼쪽 햄버거 메뉴를 선택하면 왼쪽에서 사이드 메뉴가 나오게끔. 양쪽 메뉴 html 추가해주고 평소엔 안보이고 모바일 사이즈가 되면 나오게끔. 이 사이드 메뉴 html도 새로 추가 필요. :: 모바일 반응형 작업하는데 저 흰색 공간이 안 없어지는 문제 발생 :: 얘 때문에 그랬던거였음 height값 초과 header .main_header img {..
05 - 23 검은사막 메인 페이지 마크업 (5) - 메뉴 반응형 :: 1300px 일 때, 다운로드와 고객센터가 안보이고 더 보기가 활성화 더 보기가 평소엔 비활성화 우선 메뉴부터, 천천히 보이고, 안보이고, :: 반응형에서 적용 안되면 선택자를 하나 더 써주자. :: 이렇게 설정을 하면 공간만 차지하고 보이지만 않게 되는 문제 ::1350px 기준. 제이쿼리가 자동으로 height값을 조절해줘서 그런거였음. 반응형으로 css. * 1300px 반응형 상태에서 더보기 메뉴 레이아웃 조정 * 각 메뉴마다 글자만큼이 아닌 메뉴 넓이만큼 선택범위 확대 height : auto 로 수정, 선택자 > 로 수정 ( >를 안하면 안에 li들까지 전부 적용이 되어버려서 레이아웃이 깨짐 ) :: 성공! ::1200px 커뮤니티 메뉴 더보기 안으로 굿 마지막으로 :: 1100px일 때..

티스토리툴바