웹디자이너/css4 [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. 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. 이전 1 다음
