전체 글16 [html/css] table 요소 caption 웹 접근성을 고려하여 table에서 caption요소를 사용합니다. 보통 제목을 h태그로 달아주고 caption요소는 css 로 숨겨주는데, display:none 요소로 숨길 경우 스크린리더기에서 읽지못하기때문에, 아래소스처럼 처리해줍니다. table caption { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } 2023. 1. 17. 광역 알뜰교통카드로 일상에서 마일리지 적립 쉽게하는 방법 알뜰 교통카드란? 대중교통을 이용하기 위해 집에서 버스정류장까지 걷거나 자전거로 이동한 거리만큼 마일리지가 적립되고, 발급한 카드사의 추가 할인 혜택까지 받는다면 교통비를 최대 30% 절감할 수 있는 후불교통카드입니다. 사용절차 안내 홈페이지에서 우리 카드, 신한카드, 하나카드 중 1개를 선택하여 신청합니다. 신청 후 카드를 발급받으면 알뜰 교통카드 앱을 다운로드합니다. 다운로드한 후 회원가입을 해줍니다. (카드 발급 후 회원가입 가능) 앱 실행하여 출발할 땐 "출발" 버튼을 누르고, 도착하면 "도착" 버튼을 눌러 줍니다. 마일리지 적립 방식 알뜰 교통카드 마일리지 적립 월 15회 이상 알뜰 교통카드로 대중교통을 이용하면 마일리지가 지급됩니다. ( 주민등록상 주소지 확인 후) 후불교통카드(플라스틱 카드).. 2021. 6. 23. html/css 박스스타일 - 둥근모서리/그림자/컬러 넣는 방법 html/css 작업 시 필요에 따라 박스의 색상, 그림자, 둥근 모서리의 효과를 필요로 하는 경우가 있습니다. css에 들어가야 할 요소는 style에 간단하게 표기해두겠습니다. 박스스타일에 사용할 소스 종류 둥근 모서리 박스 : border-radius 박스 그림자 : box-shadow 박스 컬러 : background / border 1. 박스 둥근 모서리 만들기 border-radius: 20px; border-radius: 5px; 설명 : border-radius를 이용하여 모서리의 둥글기를 조절할 수 있습니다. 숫자가 높을수록 둥글게 되고, 숫자가 낮을수록 각지게 나옵니다. 2. 박스 그림자 효과 주기. 설명 : box-shadow: 10px 10px 0px #666666; 순서대로 그림자.. 2021. 6. 18. css 보더(border)속성 - 박스 테두리 라인 스타일 9가지 html 박스 디자인할 때 단순한 네모 박스가 아닌 테두리 스타일을 제작해야 하는 경우가 있습니다. css에서 적용 가능한 border 스타일 총 9가지를 알려드리겠습니다. border style 9가지 종류 none : 테두리 표시 없음. solid : 실선(단선)으로 표시. dotted : 점선으로 표시. dashed : 파선으로 표시. double : 2줄(이중)로 표시. groove : 박스가 안으로 들어가 보이게 표시(함몰). ridge : 박스가 밖으로 튀어나와 보이게 표시(돌출). inset : 테두리가 안으로 들어가 보이게 표시. outset : 테두리가 밖으로 나와 보이게 표시. 설명 디자인 소스 none 테두리 없음 none border: 5px none #36c1ae; solid 실선.. 2021. 6. 16. html/css 긴 글 작성 시 줄인말 "..." - text-overflow:ellipsis 보통 게시판 목록에서 제목에 많이 사용되는 소스입니다. 한 줄로 글을 작성해야 하는데 글자의 수가 넘쳐나면 2줄로 줄 바꿈이 되는 경우가 있어요. 이때 사용되는 소스가 "text-overflow:ellipsis"입니다. 적용화면 내용이 지정한 가로사이즈를 넘칠 때 "..." 처리되는 것을 보실 수 있습니다. 해당 영역에 아래 소스 3줄만 추가해주시면 됩니다. .ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 사용된 태그 설명 white-space:nowrap : 자동 줄 바꿈이 없이 한 줄로 표시. overflow:hidden : 정해진 가로 값을 넘기면 숨겨짐. text-overflow:ellipsis : 넘어가는 텍스트는 .. 2021. 6. 11. 엔티티(Entity) - html 특수문자를 소스로 표현할 수 있습니다. 엔티티(Entity)란? HTML에는 미리 예약된 문자가 있습니다. 이런 문자들을 "예약어"라고 부르는데요. 예를 들어 괄호 로 사용하고 싶었으나 이 그대로를 쓰면 HTML에서는 코드로 인식하여 내가 사용하려던 특수문자로 표현이 안 되는 경우가 있습니다. 공백, 괄호, 특수문자 등 소스로 작성해주면 변형될 우려가 없어요. 몇몇 가지를 알려드리겠습니다. 표시 설명 엔티티 이름 엔티티 숫자 공백 non-breaking space greater than > > & ampersand & & ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € § section § § © copyright © © ® registered trademark ® ® ™ trademark ™ ™ 필요한 특수문자.. 2021. 6. 10. [html/css] placeholder 태그 - 로그인(아이디/패스워드) input 클릭 시 글씨 사라지게 하기! 로그인 페이지에 활용할 수 있는 태그입니다. 기본 값이 심심하다고 느낀다면 해당 태그에 style 도 추가해줄 수 있습니다. [placeholder] 태그의 정의와 활용법을 알려드리겠습니다. [placeholder] 태그란? 설명 : 아이디/패스워드 입력 칸인 [input] 클릭 시 글씨가 사라지게 하는 소스입니다. 소스 : 효과 : 클릭 후 입력 시 기존에 "텍스트"가 사라지고, 작성하는 정보가 보이게 됩니다. 로그인 로그인 결과화면 [placeholder] 태그 효과 넣기 기본값에 텍스트의 색상 등.. 스타일을 추가하고 싶은 경우 style값을 지정해줄 수 있습니다. 소스 : IE / 크롬 / 파이어 폭스 등... 에 style 다 적용될 수 있도록 아래 3줄 추가해주세요. .login-form in.. 2021. 6. 8. 코로나 아스트라제네카 백신 접종 후 - 발열시 먹는 해열진통제 종류 코로나 19로 백신 접종이 시작되고 주변에 주변에 아스트라제네카 백신 접종자가 늘어나고 있다. 어떤 약을 먹어야 할지 정리해 보았다. 우선, 성분은 "아세트아미노펜" 성분의 해열진통제를 복용해야 한다. 무조건 타이레놀이라고 다 같은 약이 아니며, 무조건 좋은 것도 아니니 성분을 확인하고 알맞은 약을 선택해보자. 해열진통제의 제형으로는 연질캡슐과 서방정으로 나뉜다. 연질캡슐이란? 젤라틴을 원료로 사용한 말랑말랑한 형태의 캡슐약이다. 서방정이란? 일반적인 딱딱한 알약. 서서히 방출되는 정제약이라는 의미를 가지고 있다. 아세트아미노펜 연질캡슐 종류 이지엔 6 에이스 - 대웅제약 타미노 펜 - 녹십자 마하펜 - 일양바이오팜 스피드 싹 - 제일 헬스 사이언스 영진 아미노펜 - 영진약품 타이렌 - 에이프로젠 제약 .. 2021. 6. 3. 이전 1 2 다음
