본문 바로가기

CSS36

[CSS]input, button 포커싱 또는 클릭 시 테두리 지우기

outline:none; HTML에서 과 을 아무 처리 없이 사용하게 될 경우, 아래 처럼 테두리에 하이라이트가 생깁니다. 하이라이트를 없애면, 클릭해도 테두리가 보이지 않습니다. 이 하이라이트를 없애는 코드는 아래와 같습니다. outline:none; 도움이 되셨다면, 광고 한 번씩 눌러주세요. 2021. 2. 19.

[CSS]글자 밑줄 긑기 및 포인터 클릭 아이콘으로 변경

CSS로 글자 밑에 밑줄 긑기 text-decoration: underline; CSS로 글자 밑에 있는 밑줄 없애기 -> 태그에 사용 많이 함. text-decoration: none; 포인터 클릭 아이콘으로 변경 cursor: pointer; 2021. 2. 18.

[CSS]dim 검정 투명 화면으로 처리하기

가끔, 웹이나 앱을 처음 들어가게 된 경우에, 웹에 대한 설명을 하기 위해서 웹이나 앱 위에 투명한 검정색 팝업창을 전체크기로 해서 설명을 적어 놓은 기능을 보신 적 있으실 겁니다. 이걸 'dim'이라고 합니다. 투명한 색을 전체 배경으로 하는 CSS 사용 키워드 background-color: rgba(0, 0, 0, 0.3); rgba(적색, 녹색, 청색, 투명도)를 각 입력값으로 받습니다. 맨 마지막의 투명도의 값은 0~1 사이의 값을 가집니다. 1이 투명하지 안게 되는 쪽입니다. 적색, 녹색, 청색으로 색을 변경할 수 있습니다. 색의 강도는 0~255의 값으로 강도를 조절할 수 있습니다. 예시) 예시 코드 HTML 투명한 배경을 주고, 설명 CSS .init_desc { position: abso.. 2021. 2. 18.

[CSS] 글자가 길어서 영역 밖으로 벗어났을 때 생략처리 방법.

글의 결과 CSS를 사용해서 영역을 벗어날 정도로 긴 텍스트를 생략 처리를 해봅니다. CSS 설정 옵션 width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-bottom: 0.14em; //👈 글자 밑이 hidden으로 인해 잘려보일 수 있어서 추가함. 안녕하세요. 이번에 회사 업무를 하면서, 부모영역이나 태그 영역을 벗어날 정도로 긴 글자가 들어갈 경우에 대한 예외처리를 해야 했습니다. 서버로 부터 받아 온 데이터를 수정해서 화면에 보여주는 방법은 좋지 않다고 생각했습니다. CSS로 처리해 봅시다. 일단, CSS 코드로 작성한 결과 화면입니다. 여기서 width를 넘어가면, CSS 처리로 글자를 없애고,.. 2021. 2. 12.

[HTML] 숫자만 입력받기 및 숫자 최대값 최소값 입력 제한하기

마크업 작업을 할 때, 사용자에게 입력을 받는 페이지에서는 요소를 사용합니다. 요소는 마크업 요소 중에서 강한 기능을 가지고 있습니다. 그 이유는 정말 많은 유형(type) 기능을 제공하기 때문입니다. type의 기본값은 type="text"입니다. 숫자만 입력을 받게 하는 유형(type)도 있습니다. input요소에는 type이라는 속성이 존재합니다. type 속성 중에 number를 사용하면 됩니다. 1. input type="number"로 준다. 2. 입력값 최소값 및 최대값 설정하기 MDN을 참고하시면 많은 도움이 됩니다. MDN HTML 입력 요소 2021. 2. 9.

css 폰트 단위

px 가장 일반적으로 사용합니다. 절대 고정값을 줄 때 사용합니다. 반응형 웹에 적합하지 않습니다. em과 rem 둘 다 동적입니다. 고정된 값이 아닙니다. em (부모)요소의 글꼴 크기 rem 루트() 요소의 글꼴 크기 em: 요소 안에 요소가 있는 경우, '합성'동작때문에 원하는 사이즈가 적용되지 않을 수 있습니다. 아래 사진은 MDN에서 가져온 사진입니다. rem : em단위를 사용할 때 발생하는 '합성'동작 문제 때문에 생긴 단위입니다. 그냥 간단히 생각하면 root em입니다. 최 상위 요소인 요소의 크기에 비례해서 크기를 가지는 상대적인 단위입니다. 반응형 웹을 만들 때 좋습니다. 요소의 크기를 지정하지 않는 경우, 브라우저 기본인 16px로 적용됩니다. 1rem으로 계산됩니다. vh와 vw .. 2021. 1. 26.

티스토리툴바