Giant Danio Fish
본문 바로가기

사이트 만들기15

사이트 만들기 - 실전 유형01 사이트 만들기 실전 연습 사이트 Figma HTML 보기 소스 보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 alcohol journalist WHISKEY SITE WORLD BEER BANNER FOOD Log in 슬라이드 영역 alcohol variety of drinks 세상에 아주 다양한 술들이 있습니다. 지금 만나러 가시죠 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 WHISKEY 평소에 흔히 볼수있는 위스키 리스트입니다. JACKDANIELS 잭다니엘 블랙라벨입니다. 도수는 40도 최소 4년 숙성한 위스키로서, 콜라를 섞어 잭콕으로.. 2022. 9. 12.
사이트 만들기 - 푸터 유형 사이트 만들기 슬라이드 유형01 Figma HTML 작성 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨텍트 유형02 푸터 이메일 유형03 2022 LeeYounghwan. Portfolio is Power All rights reserved. CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/Ne.. 2022. 9. 5.
사이트 만들기 - 배너 유형 사이트 만들기 배너 유형01 Figma HTML 작성 배너 영역 블로거 이영환 더 다양한 정보는 블로그를 통해 제공하고 있습니다. https://younghwan112.tistory.com/ 배너 유형01 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .blind{ position:absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden } /* 이미지 대체(ir) */ .ir { display: block; overflow: hidden; font-size: 0; line-h.. 2022. 9. 5.
사이트 만들기 - 슬라이드 유형 사이트 만들기 슬라이드 유형01 Figma HTML 작성 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } .blind{ position:absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; over.. 2022. 9. 5.
사이트 만들기 - 이미지 텍스트 유형 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } /* reset */ * { margin: .. 2022. 9. 1.
사이트 만들기 - 헤더 유형 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } i.. 2022. 9. 1.
사이트 만들기 - 텍스트 유형03 사이트 만들기 텍스트 유형03 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 한 영역을 텍스트로 클래스 선언하고 그 내부도 위 가운데 아래로 나눕니다 코드보기 겨울왕국 팝송 듣다가 문득 겨울왕국 노래가 나오길래 써보는 일기장 나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가 언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데 합격할수 있을까.. 잠이 계속 든다.. 눈도 감긴다.. 눈이 감겨서 눈이 오는 겨울왕국노래가 나오는건가.. 내가 무슨소리 하고있는지 나도모르겠다. 아무튼 모두 시험 화이팅 합격기원 김엘사 만 37세 자러 가기 나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가 언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데 합.. 2022. 8. 30.
사이트만들기 - 텍스트유형02 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 playList 플레이리스트 들어보기 다양한 유형의 플레이리스트를 여러분들께 소개합니다 지금 감상하시죠 비오는날 듣기좋은 리스트 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 여행에서 듣기좋은 리스트 여행에서 듣기좋은 플레이 리스트입니다 여행에서 듣기좋은 플레이 리스트입니다 여행에서 듣기좋은 플레이 리스트입니다 클럽에서 자주듣는 리스트 클럽에서 자주 듣는 플레이 리스트입니다 클럽에서 자주 듣는 플레이 리스트입니다 클럽에서 자주 듣는 플레이 리스트입니다 낮잠잘때 듣기좋은 리스트 낮잠잘때 듣기 좋은 플레이 리스트입니다 낮잠잘때 듣기 좋은.. 2022. 8. 30.
사이트만들기 - 텍스트유형01 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 텍스트 유형01 노래 플레이리스트 모음 카페에서 듣기좋은 리스트 카페에서 듣기좋은 플레이 리스트입니다 카페에서 듣기좋은 플레이 리스트입니다 카페에서 듣기좋은 플레이 리스트입니다 더보기 비오는날 듣기좋은 리스트 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 더보기 시간가는줄 모르는 플레이리스트 듣느라 시간가는줄 모르는 플레이리스트요 듣느라 시간가는줄 모르는 플레이리스트요 듣느라 시간가는줄 모르는 플레이리스트요 더보기 X톡 하면서 듣기좋은 리스트 X톡 하면서 듣기좋은 플레이 리스트입니다 X톡 하면서 듣기좋은 플레이 리스트입니다 X톡 하면.. 2022. 8. 30.
사이트만들기 - 이미지유형 03 사이트 만들기 이미지 유형03 이미지 유형03은 왼쪽 큰 이미지 한개와 오른쪽 4개의 이미지의 레이아웃 틀을 가지고있으며, 마우스를 이미지에 오버했을때 박스와 아이콘들이 올라오게 만들었습니다. Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 자동차 리스트 제 미래의 차고에 있는 슈퍼카 리스트.. 여러분들께 지금 소개시켜드립니다. 안전벨트 꽉매고 쫒아오세요. 테슬라 미국의 전기자동차 제조업체이다. 본사는 미국 텍사스 오스틴에 두고 있다. 설립자인 일론 머스크가 테크노킹[3]을 맡고 있다. 페이스북 페이지이동 페이지이동 페이지이동 페이지이동 BENZ 독일 메르세데스-벤츠 그룹 산하의 프리미엄 자동차 제조사 페이스북 페이지이동 LAMBORGHINI 1963년에 페루치오 람보르기니에.. 2022. 8. 19.
사이트 만들기 - 이미지 유형02 사이트 만들기 이미지 유형02 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 사진 포즈 사진 찍히는 방법에 대해서 설명드리겠습니다. 포즈는 다양합니다. 우측 사선형 자세히보기 정면 시선형 자세히보기 얼짱 미녀형 자세히보기 CSS 작성 이미지에 마우스 hover 효과를 넣어서 마우스를 위에 올리면 박스가 올라와서 보이고 평소에는 overflow hidden을 사용해 보이지 않게 설정했습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: 'GmarketSans'; font-weight: 400; } /* reset */ * { margi.. 2022. 8. 17.
사이트만들기 - 이미지 유형01 사이트 만들기 이미지 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 축구 강의⚽ 축구에 관한 기초, 드리블, 슈팅 강의 리스트 입니다. 축구 기초 강의 축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다. 후보5명까지 있습니다. 자세히 보기 축구 기초 강의 축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다. 후보5명까지 있습니다. 자세히 보기 CSS 작성 /* fonts */ @import url('https://webfontworld.githu.. 2022. 8. 17.
사이트 만들기 - 카드 유형03 사이트 만들기 카드 유형03 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 건축의 세계 나무 나무는 나무질로 된 줄기 또는 가지를 가진 여러해살이 식물을 통틀어 이르는 말이다. 나무는 흔히 지구에서 가장 거대한 단일 생명체라고 알려져 있다. 나무가 무엇인지는 누구나 다 알지만, 막상 엄밀하게 정의되지 않는 식물의 분류이다. 다양한 나무들을 보면 나무들끼리 서로 유전자상의 공통점이 많이 있을 것 같지만, 실은 나무들은 다양한 식물들이 생존에 유리한 방향으로 진화하는 과정에서 서로 독립적으로 도달한 이상적인 형태이다. 김나무에오18 resources 딸기 딸기는 쌍떡잎식물의 이판화군 장미목 장미과의 여러해살이풀 혹은 그 열매를 가리킨다. 학문적 관점에 따라 딸기를 과일, 과채류.. 2022. 8. 10.
사이트 만들기 - 카드 유형02 사이트 만들기 카드 유형02 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 시멘틱 태그를 이용해서 구역에 맞게 태그를 작성합니다. 큰 틀을 만들면서 확인해 가면서 제작합니다. 화살표 모양은 svg파일을 불러와 만들었습니다. 배고픈 동물들 동물들은 항상 배가고픕니다. 다양한 동물들이 어떻게 살아가는지, 사냥은 어떻게 하는지 알아보도록 합시다. 북극 여우 북극에 사는 여우입니다. 일반적인 여우와는 다르게 북극은 항상 겨울이기에 북극곰을 따라다니며 먹고.. 사자 사자는 동물의 왕이라고 하죠, 고양이과 포유류이며, 의외로 사냥에 참여하지 않고, 사냥해온 고기를.. 표범 표범또한 고양이과 포유류입니다. 고기를 주식으로 섭취하며 고릴라들또한 위협하는 몇안되는 포식자.. 햄스터 햄스터는.. 2022. 8. 9.
사이트 만들기 - 카드 유형01 사이트 만들기 카드 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 시멘틱 태그를 이용해서 구역에 맞게 태그를 작성합니다. 큰 틀을 만들면서 확인해 가면서 제작합니다. 축구 강의⚽ 축구에 관한 기초, 드리블, 슈팅 강의 리스트 입니다. 축구 기초 강의 축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다... 더 자세히 보기 드리블 기초 강의 드리블 할 때는 툭툭 발 바로 앞에 공이 있다고 생각을 하면서 합니다. 드리블 하면서 공을 보면서 하지 말고 시선을 정면으로 유지한채 연습하도록 합시다... 더 자세히 보기 슈팅 기초 강의 슈팅 할 때는 일단 어디로 찰지.. 2022. 8. 8.
광고 준비중입니다

티스토리툴바