본문 바로가기
반응형

개발 공부116

div 가운데 정렬 하는 방법 div 가운데 정렬 하는 방법 정렬 방향 div의 가로만 정렬 div의 세로만 정렬 div의 가로와 세로 모두 정렬 div의 가로만 정렬 가로로 정렬하는 세 가지 방법 text-align 속성 이용 flex 속성 이용 position과 transform 속성 이용 ​ ● text align 속성 이용하여 가로 정렬 HTML display: inline-block text-align: center CSS /* 백그라운드 색깔 및 크기 설정 */ html,body{background:#ddd} .outer{width:400px;height:150px;background:pink} .inner{width:150px;height:150px;background:black;color:white} /* 가운데 정렬 .. 2023. 10. 18.
[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.
반응형

티스토리툴바