본문 바로가기

분류 전체보기235

반응형 포폴 준비하기 반응형 프로젝트 사이트 선정 / 비지니스 레이아웃 회사사이트 솔루션형격 피하기(쇼핑몰) 너무 어려운 디자인 피하기 데스크탑1920px / 타플렛768px /모바일360px / 디자인 3개 타블렛은 데스크탑 & 모바일을 섞는다 http://www.wood.co.kr/ https://www.astycabin.co.kr/ https://rooicell.co.kr/ https://www.parad.am/ https://www.sulwhasoo.com/kr/ko/index.html 2022. 11. 25.
html h2 배경 이미지 정리 로고 html 총 제목느낌 / 서브페이지 제목 / 내용이 하나이기에 위에 한번만 사용 / 나머지강조는 em, strong 메인페이지에서 섹션별 내용에따라 여러번씩 사용할 수있음 컬럼제목 h3 h4는 없음 로고 html 총 제목 느낌 서브페이지 제목 서브내용이 하나이기에 위에 한번만 사용 / 나머지강조는 em, strong 메인페이지서는 섹션별 내용에따라 여러번씩 사용 가능 컬럼제목 섹션별 작은 제목 사용안함 안에 img 가능? button inline-block, img도 inlin-block 으로 가능하지만 block요소 불가능 브라우저마다 이미지와 버튼의 간격이 달라짐 버튼은 클릭으로 기능을 구형, 배경이미지로 버튼디자인에 맞춰 아이콘 크기 조정 = 자바.제이쿼리 기능구현할때 (toggle) 사용 f.. 2022. 11. 24.
제이쿼리 데이터값 가져오기 data (필터기능) HTML문서에 data-cate="56" 적은 data 값을 가져와라 // 서브탭 이벤트 $('.sub_tab a').on('click', function () { var cate = $(this).data('cate'); // 데이터가져오기 console.log(cate); 변수에 담아 console 로 찍어보기 데이터값 속성선택자로 연결하기 // 서브탭 이벤트 $('.sub_tab a').on('click', function () { var cate = $(this).data('cate'); // 데이터가져오기 // console.log(cate); // 연결하기 $('.menu_list li').hide(); $('.menu_list li[data-cate=' + cate + ']').show();.. 2022. 11. 23.
제이쿼리 주요 메서드 요소 정리 요소의 문서에서의 위치 $('요소').offset().top 함수는()사용 offset 메서드가 return값(객체)이 들어온다. 객체가 리턴되어 속성값 .top 지정 스크롤 위치를 찾을떄 요소의 기준에서의 위치 $('요소').position().left 바 에니메이션을 만들때 요소의 크기를 구할떄 $('요소').outerWidth() - width + padding + border $('요소').outerWidth() - width + padding + border 포함한 요소의 크기를 구한다. $('요소').innerWidth() - width + padding / 안쪽크기만 구한다. border을 제외 $('요소').width() - width 요소의 순수 크기만 구할때 $(window).outer.. 2022. 11. 23.
웹퍼블리셔란? 웹디자이너가 디자인한 시안을 웹 문서화 언어인 HTML과 웹 페이지를 시각화하는 CSS를 사용 원칙에 맞추어 제작 웹표준(국제표준화단체인 W3C가 지정한 표준안에 따라 목적과 방법에 맞게 웹페이지를 만드는 것) 웹접근성(장애를 가진 사람뿐만 아니라 장애를 가지지 않은 사람 모두가 정보와 기능에 동등하게 접근할 수 있도록 웹사이트를 제작하는 것) 크로스브라우징(Cross Browsing:어떤 웹브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음), 시멘틱마크업(브라우저가 잘 이해할 수 있는 코드를 사용해 의미를 잘 전달하도록 웹문서를 작성하는 것) Javascript, jQuery등을 사용하여 동적인 사이트를 구현, 작업결과물을 웹프로그래머, 웹기획자 등에게 전달 운영.. 2022. 11. 23.
lnb depth02 구조 제이쿼리 클래스 걸기 $('.lnb_wrap .lnb .depth02').hide(); $('.lnb_wrap .lnb .btn_toggle').on('click', function () { $(this).toggleClass('on'); $('.depth02').slideToggle(); }); $('.lnb_wrap .lnb .depth02').hide(); $('.lnb_wrap .lnb .btn_toggle').on('click', function () { $(this).toggleClass('on'); // $('.depth02').slideToggle(); // lnb 서브가 보일때만 닫기 if ($('.lnb_wrap .lnb .depth02').is(':visible')) { $('.lnb_wrap .lnb ... 2022. 11. 22.
뒤로가기 버튼 onclick="history.back(); / javascript:void(0) 이전페이지로 가는 뒤로가기 만들기 이전페이지로 가는 버튼은 사용자가 여러페이지를 방문했을때만 적용된다 onclick="history.back();" 클릭하면 뒤로가는 요소이기에 a 태그 안에 onclick="history.back();" histoty는 윈도우의 하위객체 이다. window.생랼 인라인으로 기본 이벤트를 막는다.(클릭하면 위로가는) href 링크는 # 아닌 href="javascript:void(0)" 이문법은 비문법으로 정식이 아님 다른버전 이전페이지 이전페이지 history태그 대신 retutn 도 있지만 백엔드와 겹치기 때문에 사용하지 않는다. 2022. 11. 21.
select 옵션 change / location.href 현재창 띄우기 $('#footer .select_area select').on('change', function () { console.log($(this).val()); }); $('#footer .select_area select').on('change', function () { // location.href = $(this).val(); window.open($(this).val(), '_black'); }); 빈칸이 떠버림 $('#footer .select_area select').on('change', function () { // location.href = $(this).val(); if ($(this).val()) { window.open($(this).val(), '_black'); } }); 빈칸을.. 2022. 11. 21.
미디어쿼리로 320 화면 대응하기 정상화면 320 화면으로 줄였을때 제목을 가린다. 미디어 쿼리로 높이를 잡자 360부분부터 가려지는 부분을 강제로 높이잡기 자바스크립트 if 와 같음 /* 문제있는부분에서 media 쿼리 적용 */ /* 창크기 360 이하 */ @media (max-width : 360px) { .main_vision { height: 210px; } } 예) @media screen and (max-width : 360px) and (min-width:320px) 조건설정할때 360이하일때 360 이하에서도 잘 적용이 된다. 2022. 11. 18.
구글 개발자 모드에서 사이트 폰트찾기 소스에서 리소스 파일을 보자 새로고침 후 주석풀면 파일이 들어온다. 또는 https://cdn.bonif.co.kr/resources/mobile/css/font/Spoqa-Han-Sans-Bold.woff 주소 직접 입력 2022. 11. 17.
아이폰 배경 fixed 이 반영안됨 pc에선 잘 보이지만 아이폰에서 배경에선 배경 fixed (스크롤 움직였을때 배경이 고정된 상태로 움직이는 ) 가 반영이안됨 이미지가 확대되고 깨짐 안드로이드는 잘 보임 /* 아이폰에선 반영안됨 */ /* background: url(../images/bg_main_vision.jpg) 50% 50% / cover fixed; */ 다른방법으로 반영하기 (아이폰대응) 방법 1 배경으로 깔아준다. 다른 섹션에 배경을 일일히 깔아주고, 현재 섹션을 배경 fixed 가 아닌 position 으로 띄우고 z-index로 맨 밑에 깔아준다. /* 아이폰에서 배경 fixed 막혀있음 */ .main_vision .bg_fixed { position: fixed; left: 0; top: 0; width: 100%;.. 2022. 11. 17.
모바일 유튜브 비율조절 모바일에서 유튜브 삽입시 데탑과 동일하게 넣었을때 깨짐 css 처리를 해줘야한다. div 로 한번 감아주고 width / height 을 100% 로 맞춘다. .main_best .youtube { margin-top: 60px; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .main_best .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 영상 비율은 16:9 이기때문에 옾이를 꽉 차게 100% 로 준다면 16 : 9 X100 16 : 900 900 / 6 = 56.25% 즉 56.25% 비율로 아래를 늘려주라는 뜻 2022. 11. 16.

티스토리툴바