본문 바로가기

텍스트유형3

[사이트 만들기] 텍스트 유형 03 사이트 만들기 : 텍스트 유형 STUDY 03 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 02 사이트 만들기 : 텍스트 유형 STUDY 02 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 01 사이트 만들기 : 텍스트 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 8. 30.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바