본문 바로가기

기술/FE (HTML & CSS)3

프론트앤드 컴포넌트 라이브러리 프론트앤드 컴포넌트 라이브러리 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com https://github.com/mui-org/material-ui GitHub - mui-org/material-ui: MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design syste MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or.. 2022. 2. 2.
[HTML] input, textarea에서의 자동 완성 속성 (비밀번호 자동 완성 막기) 부제목 [HTML] input password 자동 완성 막기 HTML에서 회원가입 화면, 로그인 화면, 정보 수정 화면을 만들고 테스트를 하다보면 회원가입이나 로그인에서 입력한 계정 정보(비밀번호 등)가 브라우저 또는 사용자가 직접 저장해서 자동 완성되어 버리는 일이 있다. 이를 방지하기 위해 자동 완성 속성(autocomplete)을 파헤쳐보려고 한다. 먼저 아래와 같은 코드로 autocomplete 속성을 추가하면 된다. autocomplete 속성은 입력 필드에 대해 브라우저에게 어떤 항목이 자동완성 될 수 있는지 알려주고, 브라우저가 기억하고 있는 단어 중 이름이면 이름만, 비밀번호면 비밀번호만 자동완성 할 수 있도록 지정해준다. 그리고 autocomplete 속성이 주어지지 않은 경우 부모 에.. 2021. 3. 14.
크롬, IE 등 웹브라우저에서 인쇄할때 하이퍼링크(a 태그)에 주소(URL)가 같이 나오는 경우 이 사진과 같이 웹브라우저에서 페이지를 인쇄할 때 하이퍼링크(a 태그)의 주소(URL)가 붙어서 나오는 경우가 있었다. 그저 웹브라우저로 보는 화면은 위와 같은데 인쇄할때만 계속 주소가 붙어서 나오는 것이였다. 포도빛 블로그 네이버 티스토리 소스보기를 해도 URL이 표시되도록 한 것이 없는데 말이다. 그런데 알고보니 bootstrap(부트스트랩)이 문제인 것이였다. * bootstrap 3에서만 발생하고, bootstrap 4에서는 발생하지 않는다. CSS의 @media print를 사용해 인쇄 화면에서 a태그에 URL을 붙여주는 모습을 볼 수 있었다. 따라서 FE 개발자는 아래 3가지 방법중 하나를 택하여 페이지를 고쳐야 하고, 사이트 방문자라면 아래 4번 방법을 사용하여 일시적으로 해결할 수 있다. .. 2020. 9. 10.