CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이는 브라우저의 화면에 맞춰야 할 때가 있다. 예를들면, 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이거나 네비게이션 버튼을 화면 하단에 두어야 할때가 있다. CSS의 heigh에 대해서 알아보았다. 1. height: 100% 의 의미 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있다. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거라고 기대하는 것이다. .screen-height { height: 100%; } 사실 이렇게 해주면 대부분의 경우 아무런 변화도 일어나지 않는다. 왜냐하면 %는 '부모 요소 기준'으로 결정이 되는 상대 단위이며, 부모 요소의 height 속성은 ..

📁 다우오피스 👉 사이트명 : 다우오피스 👉 작업기간 : 6일 👉 사용언어 : HTML5, CSS3, JQuery 👉 라이브러리 : GSAP, Swiper 👉 분류 : PC 세미 반응형 웹사이트 👉 URL : ✨ POINT ✔️ 모션의 분석과 이해 ✔️ GSAP + ScrollTriger를 활용한 애니메리션 구현 ✔️ Video Background로 사용 ✔️ Top 버튼 위치 변화 ✔️ 💡 구조 살펴보기

화살표 없애는 방법(CSS) HTML 삽입 미리보기할 수 없는 소스 select { -webkit-appearance:none; /* 크롬 화살표 없애기 */ -moz-appearance:none; /* 파이어폭스 화살표 없애기 */ appearance:none /* 화살표 없애기 */ }

📁네이버 커리어👉 사이트명 : 네이버커리어👉 작업기간 : 3일 👉 사용언어 : HTML5, CSS3, JQuery👉 라이브러리 : Swiper👉 분류 : 반응형 웹사이트👉 URL : https://codenablog.github.io/Naver-careers/✨POINT✔️ Medis query 반응형✔️ label 사용과 custum✔️ swiper 활용과 custum 💡 개선한 점1. 태블릿 크기 반응형 보완기존 NAVER Careers는 1230px 이하로 가로 스크롤이 생기는 현상이 있어 사이즈를 개선했다.전체적으로 body에 min-width값이 있어서 빼주었고,  메인 섹션 영상이 화면을 벗어나 over-flow:hidden;을 주어 간단하게 해결했다!! 개선 (전) : 화면 크..

Input Type: text 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input: First name: Last name: HTML 삽입 미리보기할 수 없는 소스 Input Type: password 는 password 필드를 정의한다. password 필드의 문자는 별표나 동그라 미로 표시로 가려집니다. User name: User password: HTML 삽입 미리보기할 수 없는 소스 Input Type: submit 는 폼 -헨들러 (form- handler)에게 폼을 제출하 는 버튼을 정의합니다. 폼-헨들러(form-handler)는 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지이 다. 폼-헨들러(form-handler)는 폼의 action 속성에 ..

반응형 디자인의 장단점 장점: 모든 플랫폼에서 일관된 콘텐츠 경험 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능 단점: 각 기기에서 웹사이트가 렌더링되는 방식에 대한 통제가 상대적으로 어려움 요소가 잘못된 순서 또는 크기로 재배치되는 경우 시각적 계층 구조를 방해함 디자인에 대한 더 많은 전문 지식이 필요함. 플랫폼 간 테스트 및 디자인 조정을 요함 동적 콘텐츠를 불러오는 데 더 많은 작업이 요구되어 웹사이트 성능이 저하됨 적응형 디자인의 장단점 장점: 각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행 광고 및 타사의 통합 콘텐츠에 대한 간편한 맞춤화 단점: 콘텐츠가 모든 기기에서 일관되지 않을 경우 SEO에 부..

스크롤 이벤트를 할때, offset top값을 가져와 처리하기 애매한 경우, 스크롤이 맨 끝으로(하단으로) 도착한경우 이벤트를 발생시켜야 하는 상황이 있죠. 그럴때 쓰는 간단한 jquery소스입니다. 일단 먼저 스크롤 동작을 감지하는 코드부터 알아야 겠죠! $(window).scroll(function(){ alert('스크롤 동작 감지') } 그 다음으로는 스크롤 값을 가져옵니다. .scrollTop() 으로요/ .scrollTop()은 스크롤 위치에 따라 변하는 값이고 맨 윗부분에서 0값으로 시작해서 맨끝으로 스크롤시에 스크롤길이 최댓값을 가집니다. $(window).scroll(function(){ var scrT = $(window).scrollTop(); console.log(scrT);//스크..

스크롤 이벤트를 인식하는 코드 $('#div01').scroll(function(){ //div01 에서 스크롤변화가 발생할때 호출 }); 스크롤을 내려보세요. 예제의 HTML 코드 예제의 자바스크립트 코드 //추가될 이미지 태그를 문자열로 변수에 저장 var imgs = 'https://t1.daumcdn.net/cfile/tistory/9940D03D5A584CCD0C>"> '; imgs += 'https://t1.daumcdn.net/cfile/tistory/99F7323D5A584CCE1C>"> '; imgs += 'https://t1.daumcdn.net/cfile/tistory/99E6DF3E5A584CD311>"> '; $(document).ready(function(){ //스크롤 발생 이..