SITE/Text Type3 [사이트 만들기] 텍스트 유형03 사이트 만들기 _ 텍스트 유형03 이번 시간은 텍스트 유형 세번째 시간입니다. 이번엔 제가 임의로 만든 사이트라서 제가 여러가지 실험 아닌 실험을 많이한 사이트네요. 같이 가보시죠 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ ir효과와 이미지스프라이트효과에 대한 설명은 또 할 이유가 있을까요ㅎㅎ패스하겠습니다. 구글 아이콘 활용하기! star star 오늘의 피그마를 보시면 별점을 메기는 박스가 있었는데요. 세개의 박스에 전부 같은 별점그림이면 이미지태그를 썼겠지만 하나는 별점이 4개라서 두개의 이미지로 저장해서 또 넣기는 조금 비효율적인것 같더라구요!그래서 저는 이걸 이미지말고 또 색다른 방법으로 구현을 해보고 싶더라구요. (근데 이게 웹표준을 준수할 수 있는 방법일지...😶) 아.무.튼! 단순하게 이미지파일로.. 2022. 9. 1. [사이트 만들기]텍스트 유형 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 다음 반응형
