반응형

HTML 4

[CSS] 테이블(table)에 스크롤 기능 만들기

테이블 스크롤 기능 table 태그를 만들어서 작업하다보면 반응형에서 문제를 일이큽니다. 크기는 줄어드는데, 테이블의 데이터들 때문에 넓어지고나 늘어나거나 길어지곤 합니다. 이럴 때 테이블에 가로 또는 세로 스크롤 기능을 사용하면 됩니다. 순서 div 하위에 table 생성 div에 width 값이나 height 값을 지정 overflow 속성을 사용하여 스크롤 여부 속성을 지정 필수 : table 에 white-space:nowrap; 적용 물론 테이블 마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면 nowrap를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다. /*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤..

프로그래밍/CSS 2020.06.14

[CSS] 텍스트가 div, code block 범위 밖으로 나가는 현상 해결

div 태그 또는 특정 태그에 코드나, 일반 텍스트 입력시 자동으로 줄 바꿈을 하지 못하고 범위를 벗어나는 경우가 있습니다. 저의 경우 블로그 포스팅시 코드블럭(code block) 범위를 벗어나는 경우였습니다. 이 문제를 해결하는 방법은 간단합니다. div 또는 특정 태그의 스타일을 정해주는 부분에 “word-break:break-all;” 또는 “white-space: pre-wrap;”를 추가하면 됩니다. div{ word-break:break-all; } pre, code { white-space: pre-wrap; }

프로그래밍/CSS 2020.06.08

[CSS/html] 모바일(반응형) 에서 좌,우가 움직이는 현상, 수평 스크롤 없애기

모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경우 위의 그림과 같이 화면을 터치하여 왼쪽으로 이동시키면 사이트가 좌우로 움직이게 되는 문제 발생. 모바일 기기에서 수평 스크롤을 비활성화하여 이 문제를 해결할 수 있습니다. 비슷한 현상이 생기는경우 아래와 같이 수정해보길 바랍니다. 우선 다음 메타 태그를 header에 추가합니다. (이미 있는 경우 기존 것을 대체합니다.) 어떤 사용자는 content=”initial-scale=1.0; maximum-scale=1.0;를 삭제하니 문제가 해결된다고도 하네요. 아이폰 등 Apple iOS 기기에서 문제가 나타나는 경우 다음 메타 태그를 추가하도록 하도록 합니다. 아이폰 문제 확인해보기 : Prevent horizontal scroll in iOS WebA..

프로그래밍/CSS 2020.06.07

[Database] 데이터베이스의 정의

데이터와 정보 데이터 일련의 작업을 목적으로 수집된 의미있는 값 연구나 조사 등의 바탕이 되는 재료 정보 뜻을 가지는 자료 특정한 목적의 의사결정을 위하여 가공한 형태 일정한 형식으로 표현한 모든 종류의 자료 또는 지식 파일시스템 정의 데이터를 파일에 저장하고, 파일을 수정, 삭제, 검색하는 기능을 제공하여 사용자가 파일을 손쉽게 이용할 수 있도록 지원하는 프로그램. 특징 각각의 응용 프로그램은 데이터를 고유의 형식에 맞추어 관리 응용 프로그램마다 독립적인 파일을 관리 단점 데이터가 중복되어 저장된다. 여러 파일에 중복되어 저장된 데이터가 변동될 때, 일치시키기 어렵다. 프로그램에 종속된 데이터를 다른 목적의 프로그램에서 사용하기 어렵다. 데이터 보안을 유지하기 어렵다. 데이터베이스 도입 배경 파일 시스..

반응형