본문 바로가기
반응형

전체 글160

[CSS] 글자 사이에 구분선 넣기 구체적인 기능 평문 ABCD를 A | B | C | D의 형태로 나타내기 하지만 HTML 자체를 건드리지는 않기 스크린리더가 ABCD를 통째로 인식할 수 있도록 코드가 복잡하지 않도록 구분선은 "접근 가능한 문자"가 아니었으면 스크린리더가 인식하지 않도록 복사했을 때, 보여지는 A | B | C | D가 아니라 원문 ABCD가 복사되도록 ​ ​ 이러한 기능이 필요한 이유 간혹 헤딩을 이러한 형태로 디자인하는 경우가 있는데 시각효과일 뿐인 구분선이 텍스트 형태로 되어있는 경우가 많아서 스크린리더 사용자 입장에서는 제목을 파악하기 어렵겠다는 생각이 들었고 어디론가 내용을 복사해갈 때에도 불필요한 시각효과가 함께 넘어가기 때문에 ​ ​ 방법1: aria-hidden 속성 이용 A | B | C | D 해결된 .. 2023. 10. 18.
반응형 웹 만드는 법 (디바이스 종류별 width값) ● 반응형 웹을 만드는 방법 반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법으로 판단하여 반응형 웹인지 아닌지를 판단할 수 있는 것이 아닙니다. 흑과 백에 더해 회색도 있어 얼마나 다양한 디바이스 화면과 다양한 사이즈에 대응하고 있는지에 따라 흑에 가까워질 수도, 백에 가까워질 수도 있습니다. 그럼에도 불구하고 우리는 반응형 웹이라고 부를 수 있는 기준이 필요합니다. 통상적으로 다음 두 가지 조건에 대해 어느 정도 크게 만족하고 있으면 반응형 웹이라고 부릅니다. 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면을 제공한다. 같은 디바이스여도 유저가 사용하기에.. 2023. 10. 18.
Html a태그 Html a태그 웹이 점점 화려해 지고 인터넷속도가 빨라지면서 웹페이지들은 점점 빨라지고 있고 디자인은 갈수록 중요해지고 있기 때문에 웹사이트에는(특히 국내에서) 정말 많은 이미지가 들어가고 있다. 근데 HTML 코드를 보다보면 정말 흔히 볼 수 있는 이미지버튼의 형태가 ​ ​ 이런 형태이다. 나도 회사처음 들어왔을때 내 바로 윗사람이 이렇게 쓰는것을 권고하기도 했었고 대부분의 사람들이 이런 형태로 이미지 버튼을 만들고 있는데 이건 정말 잘못된 형태의 html이다. 무엇보다 이렇게 써서 얹을 수 있는 잇점이 단 한개도 없다고 생각한다. ​ 저렇게 허위 a태그를 거는 상황은 100% 이미지를 버튼으로, 즉 클릭용으로 사용하기 위함이다. 그래서 img에 onclick 속성을 사용하고.. 2023. 10. 18.
<CSS> <a>태그 밑줄없애기, 색상 변경하기 - 태그 밑줄 없애기, 색상 변경하기 HTML에서 태그는 클릭 시 다른 페이지로 이동할 수 있도록 하는 기능을 가진 태그이다. 이 때, 태그를 넣어주면 자동으로 해당 값에는 밑줄과 색상이 변경되는 효과가 적용된다. 이것을 CSS 스타일시트를 이용하여 밑줄을 없애고, 색상을 변경할 수 있다. 1) 태그 적용 전 태그 적용 전 HTML BRAND CSS .title { font-size: 2em; } 2) 태그 적용 후 태그 적용 후 HTML BRAND 3) 태그 밑줄 없애기 text-decoration 속성 값 변경 후 text-decoration 속성에 none의 값을 주면 적용되어있던 효과가 사라진다. CSS a { text-decoration: none; } 4) 태그 색상 변경하기 폰트 색상 변경 .. 2023. 10. 18.
Html/ nav태그 html * nav 태그 html5에서 nav 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그 html5에서는 각 영역별로 그 의미를 나타내기 위하여 nav 태그와 같은 특정 태그를 사용하게 됨 일반적으로 웹사이트에서 주요한 네비게이션은 바로 '메뉴'! * 태그 : html5에서 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그이다. 예전에는 메뉴든 뭐든 전부다 div에 넣는 것이 일반적이었지만, 이제 div는 일반적으로 떠다니는 내용을 넣을 때의 역할을 하는 경우가 많아졌고, html5에서는 각 영역별로 그 의미를 나타내기 위하여 태그와 같은 특정 태그를 사용하게 되.. 2023. 10. 18.
CSS Flex(Flexible Box) CSS Flex(Flexible Box) 대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다. 문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 나 float 혹은 inline-block 등의 도움을 받았습니다. 하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수.. 2023. 10. 18.
반응형

티스토리툴바