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

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

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에 부..

ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고 aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. aria-label 1-1. aria-label은 모든 html 태그에서 사용할 수 있다. 1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다. 일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌 이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 수 있..

페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지 그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠? 이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다. script로 구현 저는 서울시청 사이트 프로젝트에서탑 버튼을 클릭했을때 위로 가는 동작을 아래 처럼 스크립트로 구현했습니다. $(".fix-btn-..

네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고 이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데 오늘은 스프라이트 대하여 자세하게 알아보겠습니다! 이미지 스프라이트(Image Sprite)란? 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다. 쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다. 왜 쓰는 걸까? 이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 ..

게임을 이용하여 CSS기초 flex 마스터하기 ! flex를 모르는 초보자라도 쉽게 게임으로 이해할 수 있는 사이트를 이용하여 flex 테그들을 공부하였다. 개구리를 연잎에 올리는 방법을 코드로 치면 다음단계로 넘어가는 간단한 게임이지만 한눈에 보기 쉽게 사용해볼 수 있다는게 큰 장점이라고 생각한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com flex의 정렬 테그 정리 1. 가로 정렬하기 justify-content: flex-start : 요소들을 컨테이너의 왼쪽으로 정렬합니다. justify-content: flex-end : 요소들을 컨테이너의 오른쪽으로 정렬합니다. jus..