RAMY, LEE - 은은한 조약돌이 되기 위한 정진의 길.

안녕하세요! 레미입니다! 오늘은 textarea에 placeholder가 적용안되는 경우 해결하는 법을 가지고 왔습니다. 보기 편하도록 코드펜에서 만든 예제 이미지를 가지고 왔습니다. placeholder를 적용했는데 안되는 경우는 2가지입니다. 1. textarea 열림태그와 닫는태그 사이의 여백이 있다. 2. textarea의 닫는 태그가 줄바꿈이 되어 있다. 2가지로 나누어 쓰긴 했지만, 결국 같은 내용입니다. 열림태그 닫는태그 사이의 여백이 존재할 경우 placeholder가 표현되지 않습니다. 마크업 시 조금 더 신경써서 작성해주세요. :) 뿅!

안녕하세요! 레미입니다. 최근 프로젝트에서 프레임워크를 사용하였습니다. 선택한 이유는 반응형 대응이 잘 되어 있고, 공통으로 사용하는 기능에 대해 처리가 잘되어 있으며, 기본 컴포넌트 구성도 짜임새 있게 되어 있기에 쉽고 예쁘게 화면을 구성 할 수 있기 때문입니다. 크게 유명한 몇 가지의 프레임 워크를 비교하였고, 관련 커뮤니티가 있으면서, 디자인도 깔끔한 semantic UI를 최종적으로 선택하게되었어요. 이번에 마주친 문제는 모바일 디바이스에서 일정 높이 이하로 줄어들 시, close을 클릭해서 창을 닫으면 본 창 스크롤이 먹통이 된다는 점이었습니다. 시맨틱 UI 모달을 닫는 방법은 3가지가 있습니다. 1. dimmed 처리된 검정 레이어 클릭(default로 설정되어 있습니다.) 2. 확인/닫기 등..

안녕하세요. 오랜만입니다. 최근 들어간 프로젝트는 반응형 외부 사이트 멤버십 사이트였습니다. 프로젝트 중반에 해당 기업 사이트가 개편이 됨에 따라 멤버십 사이트 디자인도 전부 변경이 되었어요. 그래서 코로나가 기승을 부리는 때에도 굉장히 바쁘게 보냈던 것 같아요. 감사한일입니다. css 팁 메뉴로 들어가는 내용도 실은 작업하면서 부딪혔던 일들이어서 작업일지로 들어가는게 맞으나, 그때 그때 기록을 남기지 못해서 그런지 그 때 상황이 전부 기억나지 않아요. 이 메뉴에 들어오는 아이들은 작업 당시의 기억이 나는 것 위주로 올리려고 합니다. 자 이제 각설하고, 본론으로 들어갈게요. 모바일 디바이스 크로스 브라우징을 하며 발견한 이슈입니다. 아이폰 input/textarea에 텍스트 입력이 안되는 현상이었어요. ..

안녕하세요! 레미입니다. 오늘은 nth-child의 효율적인 사용법에 대한 글을 써보고자 합니다. 근래에는 최신 브라우저 지원을 주로 하며 flex를 많이 사용하게 되었어요. 그러면서 자연스레 nth-child나 only-child 등의 사용이 늘어났습니다. nth-child를 사용하기 전에는 일일히 태그에 클래스를 부여해서 사용하는 경우가 대부분이었는데, (first-child, last-child 이 외의 항목을 선택해야 하는 경우) 요즘엔 좀 더 랩업한 느낌이 들기도 합니다. 허허 좋은건 공유해야지요. 1. 홀수, 짝수 - 홀수 선택자 : nth-child(odd) - 짝수 선택자 : nth-child(even) 2. n의 배수 - 3의 배수 선택자 : nth-child(3n) 3. n번째부터 n번..

안녕하세요 ~ 레미입니다. 이번 내용은 파이어폭스 브라우저에서 select 선택 시, option 박스에 점선이나 실선이 생기는 현상에 대해 이야기해보려고 해요! 이 현상은 단순하게 outline:0 속성으로 해결될 줄 알았으나! 해결되지 않더라고요. 그래서 구글링 하여 찾은 아래와 같은 방법으로 해결했습니다. select { color: transparent !important; text-shadow: 0 0 0 #000 !important; } 위처럼 추가하고, select option { color:#333; } 옵션에 컬러 재지정하지 않으면 option 컬러가 안 나올 수 있으니 꼭 지정해주세요. 그러나, 웹 접근성 준수할 시엔 outline을 살려야 합니다. 웹 접근성 미준수 시에만 사용해 주세..

안녕하세요~ 레미입니다. 이번에도 FLEX layout과 관련된 글을 데려왔습니다. 바로 본론으로 들어갈게요! IE에서 수직 중앙 정렬이 안되는 경우가 있습니다. (하,, 또 IE가,,,) 이런 경우 해결 방안은 center 정렬이 될 자식의 부모 태그에 고정 높이가 있어야만 center 정렬이 됩니다. min-height, max-height가 설정되어 있어도 전부 무시되며, height가 적용 된 경우에만 속성이 적용되어야 합니다. 사용예는 아래와 같아요. .box-wrap { display:-ms-flexbox; display:flex; justify-content:space-between; align-items:center; height:300px; } .box { flex:0 0 calc(50%..

flex layout 사용시, flex content의 초기 너비 설정 속성인 flex-basis는 IE에서 제대로 적용하려면 세심하게 조정해야 합니다. Chrome, Firefox, Edge 등 타 브라우저의 flex basis의 너비 값 계산은 큰 문제 없이 참 잘되요. 일단, 이해하기 쉽도록 예를 먼저 들어보겠습니다! 만약 IE 브라우저에서 content의 너비가 100px 일 경우, flex-basis:100px;을 지정했다면 padding, border, margin의 값을 제외한 오직 content의 너비여야 합니다. padding이 양옆으로 10px씩 들어가 있으면 IE 브라우저는 너비를 120px로 인식해요. 잠깐! 그럼 box-sizing의 border-box 주면 되는거 아니에요? 라고..

50. E-R 모델의 표현 방법으로 옳지 않은 것은? 1. 개체타입 : 사각형 2. 관계타입 : 마름모 3. 속성 : 오각형 4. 연결 : 선 정답 : 3번 해설 E-R 모델의 표현 방법 중 속성은 타원으로 표현된다.

49. 데이터베이스의 논리적 설계(logical design) 단계에서 수행하는 작업이 아닌 것은? 1. 레코드 집중의 분석 및 설계 2. 논리적 데이터베이스 구조로 매핑(mapping) 3. 트랜잭션 인터페이스 설계 4. 스키마의 평가 및 정제 정답: 1번 해설 레코드 집중의 분석 및 설계는 물리적 설계 단계에서 수행하는 작업이다. 물리적 설계 단계 1. 논리적 설계 단계에서 논리적 구조로 표현된 데이터를 디스크 등의 물리적 저장장치에 저장할 수 있는 물리적 구조의 데이터로 변환하는 과정이다. 2. 데이터베이스 파일의 저장 구조, 레코드의 형식, 접근 경로와 같은 정보를 사용하여 데이터가 컴퓨터에 저장되는 방법을 묘사한다. 3. 트랜잭션을 작성한다. 4. 물리적 설계 단계에 꼭 포함되어야 할 것은 저장..

48. 데이터베이스 시스템에서 삽입, 갱신, 삭제 등의 이벤트가 발생할 때마다 관련 작업이 자동으로 수행되는 절차형 SQL은? 1. 트리거(trigger) 2. 무결성(integrity) 3. 잠금(lock) 4. 복귀(rollback) 정답: 트리거(trigger) 해설 절차형 SQL 1. 프로시저(Procedure) - 특정 기능을 수행하는 일종의 트랜잭션 언어이다. - 호출을 통해 실행되어 미리 저장해 놓은 SQL 작업을 수행한다. 2. 트리거(Trigger) - 데이터베이스 시스템에서 데이터의 입력, 갱신, 삭제 등의 이벤트가 발생할 때마다 관련 작업이 자동으로 수행된다. 3. 사용자 정의 함수 - 프로시저와 유사하게 SQL을 사용하여 일련의 작업을 연속적으로 처리한다. - 종료 시 예악어 Ret..