본문 바로가기

728x90

CSS/Layout_Site15

사이트 만들기 ⭐️ site 만들기 ⭐️ 결과보기 ☛ 원본 소스 보기 2022. 9. 14.

푸터 유형 (1) ⭐️ 푸터 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형 01 메뉴 유형 02 슬라이드 영역 슬라이드 유형 01 슬라이드 유형 02 이미지 영역 이미지 유형 01 이미지 유형 02 이미지/텍스트 유형 01 이미지/텍스트 유형 02 텍스트 유형 01 컨텐츠 영역 카드 유형 01 카드 유형 02 카드 유형 03 푸터 영역 푸터 메뉴 유형 01 푸터 컨텍트.. 2022. 9. 6.

배너 유형 (1) ⭐️ 배너 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 배너 영역 조명 디자인 더 다양한 조명 디자인을 살펴보세요 http://www.youtube.com 배너 유형 01 02. style(css) 설정하기 : /* bannerType */ .banner__inner { background-image: url(../site01/assets/img/banner_bg01.jpg); background-repeat: no-repeat; background.. 2022. 9. 6.

슬라이드 유형 (1) ⭐️ 슬라이드 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 슬라이드 영역 DEVELOPER Way to Go 너무 무리하지 말아요! 지금도 잘하고 있어요 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 02. style(css) 설정하기 : /* slideType */ .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { /* h.. 2022. 9. 6.

헤더 유형 (1) ⭐️ 헤더 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 02. style(css) 설정하기 : /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; /* 폰트 지정 */ font-weight: 400; /* 폰트 두께 설정 */ } /* reset */ * { margin: 0; /* 기본 브라우저의 빈 공간 없애기 */ paddin.. 2022. 9. 2.

이미지 텍스트 유형 (1) ⭐️ 이미지 텍스트 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 유용한 사이트 살펴보기 이미지 텍스트 유형 01 유용한 사이트 살펴보기 웹 디자이너, 웹 퍼블리셔, 프론트 앤드 개발자를 위한 유용한 사이트 입니다. 튜토리얼 사이트 래퍼런스 사이트 웹 폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 02. style(css) 설정하기 : /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'Nex.. 2022. 9. 2.

텍스트 유형 (3) ⭐️ 텍스트 유형 03 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 사용 후기 바디워시를 사용하신 분들의 후기를 참고해보세요! 아토피가 심한 피부라, 늘 많은 것을 따져보며 구매하는데요. 제품이 천연 성분이라는 것과, 자극이 거의 없다는 리뷰 보고 구매해봤어요. 제형은 엄청 물 같이 묽고, 인위적이지 않은 향에 저자극 맞습니다..! 큰 기대하지 않고 구매했는데 상당히 만족스러워요 ^*^ 다만 타월 사용하지 않고 손으로 문지르 sumi*** 22.08.31 ⭐️⭐️⭐️⭐️⚝ 자세히 보기 세안제와 바디제품을 더 순한 제품으로 바꿔야겠다 하면서 찾아보다가 발견했어요. 주문한 샴푸가 아직 안 와서 - 올인원이라길.. 2022. 9. 1.

텍스트 유형 (2) ⭐️ 텍스트 유형 02 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 두번째 텍스트 유형 입니다. 텍스트 유형 02 휴대폰 연락하기 아이콘 설명서 휴대폰으로 연락하기 위한 아이콘에 대해 알아봅시다. 아이콘 모양을 기억해주세요! 연락처 보기 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을 통화하기 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을 메세지 보내기 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을.. 2022. 9. 1.

텍스트 유형 (1) ⭐️ 텍스트 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 텍스트 유형 01 음악 플레이어 아이콘 설명서 라이브러리 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다. 더보기 앨범 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다. 더보기 아티스트 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다. 더보기 반복 듣기 아이콘을 누르면 화면이 바뀝니다... 2022. 9. 1.

이미지 유형 (3) ⭐️ 이미지 유형 03 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 컬러풀 아트 뮤지엄 다채로운 색감이 전하는 역동적인 에너지를 느껴보세요. Color Dance untitled - 03 페이스북 트위터 인스타 인 Color Dance untitled - 03 페이스북 트위터 인스타 인 Color Dance untitled - 03 페이스북 트위터 인스타 인 Color Dance untitl.. 2022. 8. 22.

이미지 유형 (2) ⭐️ 이미지 유형 02 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 이 달의 컨셉 모델 선정 이 달의 컨셉 모델로 선정되신 분들을 소개합니다. 컨셉 29기 베아킴 자세히보기 컨셉 29기 로즈문 자세히보기 컨셉 29기 에일리 자세히보기 02. style(css) 설정하기 : /* fonts */ @import url('https://webfontworld.github.io/gmarket/Gma.. 2022. 8. 18.

이미지 유형 (1) ⭐️ 이미지 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 나의 쉴 곳은 어디에 우리 모두의 마음이 편안해지는 힐링 장소를 소개합니다. 들꽃이 가득한 유원지에서 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 자세히보기.. 2022. 8. 17.

카드 유형 (3) ⭐️ 카드 유형 03 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 기본 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. // 과 같이 시멘틱 마크업을 하면 제목을 반드시 적어줘야 하므로 를 작성합니다. (이후 눈에 보이지 않도록 숨겨놓기) 펠트 공예 후기 카드 제목 카드 내용 카드 제목 카드 내용 카드 제목 카드 내용 02. 기본 style(css) 설정하기 : /* font */ @import url('https://webfontworl.. 2022. 8. 11.

카드 유형 (2) ⭐️ 카드 유형 02 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상하고, 어떤 정보의 내용을 담을지도 구체적으로 스케치합니다. 02. div 만들기 section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 큰 div 상자를 만들고, 정확한 경로에 따른 style 설정을 위해 class 로 이름을 지어줍니다. 세부 div 상자를 만들고, 정보의 내용을 입력합니다. 인테리어 둘러보기 인테리어 디자인을 위한 이미지 모음 자료 입니다. 라이프 스타일에 따라 나눠진 다양한 디자인을 살펴보세요. 💁🏽 북유럽 인테리어 북유럽 기후에 맞게 화이트 컬러를 기본으로 강한 그레이나 블랙을 포인트로 주는 것이 특징이며, 실용... 웨인스코팅 인테리어 웨인스코팅은 벽의 일정 부분을 사각 프레임 형태로 패널을 덧대는 시.. 2022. 8. 10.

카드 유형 (1) ⭐️ 카드 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상하고, 어떤 정보의 내용을 담을지도 구체적으로 스케치합니다. 02. div 만들기 section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 큰 div 상자를 만들고, 정확한 경로에 따른 style 설정을 위해 class 로 이름을 지어줍니다. 세부 div 상자를 만들고, 정보의 내용을 입력합니다. // class 에 card__wrap 경로이고 nexon글자 사용하며, section 🏡 우리집 강아지 🐶 반려견과 함께하는 행복한 삶에 도움이 되는 자료들을 리스트 합니다. // W3C 준수하기 : 이미지를 볼 수 없는 사용자를 위해 alt 를 꼭 작성해 주어야 함. 반려견의 다양한 표정 바로알기 간혹 강아지가 우리를 보며 입꼬리를 .. 2022. 8. 9.

이전 1 다음

728x90

티스토리툴바