반응형 CSS4 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. <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. CSS Flex(Flexible Box) CSS Flex(Flexible Box) 대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다. 문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 나 float 혹은 inline-block 등의 도움을 받았습니다. 하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수.. 2023. 10. 18. 이전 1 다음 반응형
