망한듯2 [사이트 만들기]텍스트 유형 02 사이트 만들기 _ 텍스트 유형02 이번 시간은 텍스트 유형 두번째 시간입니다. 들어가기에 앞서 이번엔 레이아웃 배치를 원활하게 하기 위해서 dispaly:grid를 사용해서 작업했구요. 더보기링크가 없으므로 아이콘에 a링크를 부여할 예정입니다. 한번 따라가 보실까요 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ - html 코드 - icon - css 코드 - .ir{ overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } .icon{ background: url(img/text_type02.svg) no-repeat; width: 60px; height: 60px; border-radius:.. 2022. 8. 31. [사이트 만들기] 텍스트 유형01 사이트 만들기 _ 텍스트 유형01 이번 시간에는 텍스트 유형을 만들어 보겠습니다. 6개의 섹션으로 구성되어 있으며, 아이콘은 div태그에 background를 이용했지만 웹표준을 준수하기 위해 ir효과를 입힐 예정입니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ - html 코드 - icon - css 코드 - .ir{ overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } 시각적으로는 아이콘이 표시되지만 웹표준을 준수하기 위해서는 의미없는 div태그에 이미지를 입혀서는 안되겠죠? 그래서 span태그에 그림에 대한 설명을 적어주고 ir효과를 주어서 시각적으로 텍스트는 가리지만 리더기가 읽.. 2022. 8. 30. 이전 1 다음 반응형
