qqqwe

사이트 제작 - 메인 사이트 디자인 시안 주제로 선정한 사이트의 관련 사이트들을 조사하여 참고 자료료 사용하기 위해 필요한 부분을 짜집기 하여 디자인 시안을 만들어보았습니다. 조사한 사이트들의 목록은 다음과 같습니다. 굿닥 굽네몰 뉴닭 네이처온 다신샵 닭형 랭킹닭컴 바르닭 미트리 허닭 맛있닭 마이닭 아임닭 하림몰 헬스앤뷰티 햇살닭 에잇템 브랜드닭 오쿡 꼬꼬빌 마이닭 조아닭 육식토끼 이렇게나 많은 사이트들이 있었지만 그중에 마음에 드는 디자인의 사이트들만 추려서 직접 가져왔습니다. 추려낸 사이트들은 다음과 같습니다. 굿닥 - 카드,푸터 부분 뉴닭 - BEST 상품 부분 아임닭 - 추천 상품 부분 맛있닭 - 슬라이드 부분 허닭 - 헤더,네비 부분 미트리 - 신제품 부분 배너 부분은 직접 디자인 해놓았던 디자..

사이트 만들기 지금까지 만든 사이트 조각들을 한 사이트에 모아서 제대로된 사이트 하나를 디자인 해보았습니다. 사이트 사이트를 합치면서 요소들의 속성들에 대해서 기본적인 세팅을 해주었고 미디어쿼리를 통해 반응형웹으로 디자인 하였습니다. 기본 CSS 세팅 /* 여백 초기화 */ body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, table, th, td, input, figure, figcaption, blockquote { margin: 0; padding: 0; } /* 폰트 초기화 */ body, button, input, select, table, textarea { font-fa..

사이트 만들기 푸터 유형편 보더콜리를 주제로 한 사이트 푸터 유형 부분입니다. 기준선과 레이아웃 그리드는 카드, 이미지, 슬라이드,텍스트 유형과 동일합니다. 피그마 디자인 아래는 코드로 만든 과정입니다. HTML 푸터 네이버 카페 강아지를 사랑하는 모임 보돌이 다방 유기견 도움주기 블로그 알렉스 보더콜리를 사랑한 늑대 제주농부 유튜브 보더로운생활 강혁욱의 보듬TV 언제나가을 ALWAYSFALL 보더콜리 장점 높은 지능 민첩성 충성심 보더콜리 단점 지치지 않는 체력 과도한 충성심 보더콜리 분양 더독스 도그마루 주세요닷컴 2023 CSS CSS 코드 설명 text-decoration: 텍스트의 장식을 지정하는 속성입니다. 기본값은 none이며, underline, overline, line-through, ..

사이트 만들기 텍스트 유형편 보더콜리를 주제로 한 사이트 텍스트 유형 부분입니다. 기준선과 레이아웃 그리드는 카드, 이미지, 슬라이드 유형과 동일합니다. 피그마 디자인 아래는 코드로 만든 과정입니다. HTML notice 보더콜리의 어두운면 참을 수 없는 지루함 보더콜리는 매우 지능적인 개 종 중 하나이지만, 충분한 정신 자극이 부족하면 지루함을 느끼게 됩니다. 이는 보더콜리가 학습 능력을 잃게 만들 수 있습니다. 더보기 운동 부족 시 파괴적인 행동 보더콜리는 매우 활발하고 에너지가 많기 때문에 충분한 운동이 제공되지 않을 경우 이러한 에너지를 적절하게 소비하지 못하게 되어 파괴적인 행동을 할 가능성이 있습니다. 더보기 필요 이상의 충성심 보더콜리는 사육 개체와 밀접한 관계를 형성하여 강아지 복종성에 대..

사이트 만들기 슬라이드 유형편 보더콜리를 주제로 한 사이트 슬라이드 부분입니다. 기준선과 레이아웃 그리드는 카드, 이미지 유형과 동일합니다. 피그마 디자인 아래는 코드로 만든 과정입니다. HTML 메인 슬라이드 영역 Loyal 충성심 보더콜리는 주인과의 유대관계를 매우 중요하게 생각하며, 충실하게 따르는 경향이 있습니다. 높은 지능과 민첩성을 지니고 있어서, 주인의 지시에 따라 다양한 일을 수행할 수 있습니다. 그러나 외로움을 잘 타기 때문에, 충분한 관심과 애정이 필요합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 CSS css 코드 설명 background-position: 배경 이미지의 위치를 지정하는 속성입니다. x축 y축의 값을 이..

이미지/텍스트 유형 만들기 사이트에서 이미지/텍스트 부분을 피그마로 디자인 하고 코드로 만들어 보았습니다. 피그마 디자인 CSS HTML notice 보더콜리의 키워드 보더콜리는 많은 장점들을 가지고 있는 강아지 입니다. 보더콜리를 보았을때 생각나는 키워드들은 정말 많죠 스마트 (Smart) 민첩 (Agile) 활발 (Energetic) 경주 개 (Racing dog) 지능적 (Intelligent) 높은 학습 능력 (High learning ability) 반응 속도 (Quick reaction time) 허드링 (Hurdling) 양치기 (Herding) 농장 개 (Farm dog) 코드 설명 flex-wrap: wrap; 속성은 Flexbox 컨테이너 내의 아이템들이 한 줄에 모두 표시되지 않고 여..

사이트 만들기 이미지 유형편 보더콜리를 주제로 한 사이트 이미지 부분입니다. 카드 유형과 동일한 레이아웃 그리드를 잡아주었고, 기준선들을 잡아 주었습니다. 피그마에서 완성된 디자인입니다. 이제 코딩으로 만들었을때 코드입니다. CSS CSS 코드 설명 margin: 요소의 바깥쪽 여백을 지정합니다. 개별적으로 margin-top, margin-right, margin-bottom, margin-left 등을 지정할 수 있습니다. padding: 요소의 안쪽 여백을 지정합니다. 개별적으로 padding-right, padding-bottom, padding-left 등을 지정할 수 있습니다. text-decoration: 텍스트의 장식 효과를 지정합니다. underline, overline, line-thr..

사이트 만들기 저는 보더콜리를 주제로 하여 사이트를 디자인 해보았습니다. 1. W1920 H932의 프레임을 만들어 주었고 2. Columns 유형, 갯수는 12, 간격은 380 기준의 그리드를 넣어 주었습니다. 3. 위 사진 기준선들을 기준으로 사진이 들어갈 자리와 문구들을 적어 넣었습니다. 완성된 모습 이제 이 디자인 코딩하여 만들었을때 코드입니다. CSS css 코드 설명 margin: 요소의 바깥쪽 여백을 지정합니다. margin-top, margin-right, margin-bottom, margin-left 등과 같이 개별적으로 지정할 수도 있습니다. padding: 요소의 안쪽 여백을 지정합니다. padding-right, padding-bottom, padding-left 등과 같이 개별적..