- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
완성된 화면입니다.
html코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>싸이트만들기1</title>
<!-- SEO -->
<meta name="author" content="juneyoungi">
<meta name="description" content="juneyoungi와 함께 만드는 사이트 튜토리얼입니다.">
<meta name="keyword" content="juneyoungi, 사이트, 사이트 만들기, 튜토리얼">
<meta name="roboots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="asset/ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="asset/ico/favicon.png"/>
<link rel="apple-touch-icon" href="asset/ico/favicon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="asset/css/fonts.css">
<link rel="stylesheet" href="asset/css/reset.css">
<link rel="stylesheet" href="asset/css/common.css">
<link rel="stylesheet" href="asset/css/style.css">
</head>
<body>
<div id="skip">
<a href="#">헤더 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지/텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">배너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</a>
</div>
<!-- //skip -->
<header id="headerType" class="hide">
<div class="header_inner">
<h1 class="header_logo">Cat</h1>
<nav class="header_memu">
<ul>
<li><a href="#">소개</a></li>
<li><a href="#">입양문의</a></li>
<li><a href="#">주의할점</a></li>
<li><a href="#">지점</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">찾아오시는길</a></li>
</ul>
</nav>
<div class="header_member">
<a href="#">로그인</a>
</div>
</div>
</header>
<!-- headerType -->
<main id="mainType">
<section id="silderType" class="nexon hide">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider_inner">
<div class="slider">
<div class="silder_info container">
<span class="small">event</span>
<h3 class="title">반려묘와 함께하는 싸이트</h3>
<p class="desc">고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청,
고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면,
고양이와 함께 휴식을 공유 합니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">상담 신청</a>
</div>
</div>
<div class="slider_arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="slider_dot">
<a href="#" class="dot active"><span class="blind">첫번쨰 이미지</span></a>
<a href="#" class="dot"><span class="blind">두번쨰 이미지</span></a>
<a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
<a href="#" class="play"><span class="blind">플레이</span></a>
<a href="#" class="stop"><span class="blind">정지</span></a>
</div>
</div>
<!-- <div class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
<!-- silderType -->
<section id="imageType" class="nexon section center ">
<h2 class="blind">이미지 영역</h2>
<h2 class="section_h2">고양이를 키우는 방법</h2>
<p class="section_desc">반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다.</p>
<div class="image_inner container">
<article class="image">
<figure>
<img src="./asset/img/imgType01.jpg" alt="경제적 능력">
</figure class="image_header">
<div class="image_body">
<h3 class="title">경제적 능력</h3>
<p class="desc">반려묘가 아플떄 병원도 가야하고 사료,모래 끊이지 않게 공급해야함
아무튼 돈이 많이 들어감</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="image">
<figure class="image_header">
<img src="./asset/img/imgType02.jpg" alt="고양이 알레르기">
</figure>
<div class="image_body">
<h3 class="title">고양이 알레르기</h3>
<p class="desc">고양이는 생각보다 털이 많이 날리는 동물임
천식있으시면 정말 신중하게 생각 해야함</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</section>
<!-- imageType -->
<section id="imgTextType" class="nexon section">
<h2 class="blind">이미지 텍스트 영역</h2>
<div class="imgText__inner container">
<article class="text">
<span>notice</span>
<h3>고양이 종류 10가지</h3>
<p>GPT한테 물어본 고양이 종류가 10가지가 있습니다.다음은 그 목록입니다.</p>
<ul>
<li><a href="#">샴 고양이 (Siamese Cat)</a></li>
<li><a href="#">페르시안 고양이 (Persian Cat)</a></li>
<li><a href="#">스코티시 폴드 고양이 (Scottish Fold Cat)</a></li>
<li><a href="#">먼치킨 고양이 (Manx Cat)</a></li>
<li><a href="#">시베리안 고양이 (Siberian Cat)</a></li>
<li><a href="#">아비시니안 고양이 (Abyssinian Cat)</a></li>
<li><a href="#">브리티시 쇼트헤어 고양이 (British Shorthair Cat)</a></li>
<li><a href="#">미묘 (Munchkin Cat)</a></li>
<li><a href="#">벵골 고양이 (Bengal Cat)</a></li>
<li><a href="#">러시안 블루 고양이 (Russian Blue Cat)</a></li>
</ul>
</article>
<article class="img i1">
<a href="#">인기있는 고양이</a>
</article>
<article class="img i2">
<a href="#">스트레칭 고양이</a>
</article>
</div>
</section>
<!-- imgTextType -->
<section id="cardType" class="nexon section">
<h2 class="blind">카드 영역</h2>
<div class="container">
<h2 class="section_h2">고양이를 키우는 방법</h2>
<p class="section_desc">반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 예방접종 및 기본검사로 돈이 많이 듭니다.
키울실려면 신중하시길 바랍니다.</p>
<div class="card_inner">
<acticle class="card">
<figure class="card_header">
<img src="./asset/img/cardType01_01.jpg" alt="경제적 여건">
</figure>
<div class="card_body">
<h3 class="title">경제적 여건</h3>
<p class="desc">다치거나 아프게 되고 병원에서 입원/수술을 하는경우는 100만원 단위 이상으로 발생할 수 있습니다. 그러므로 돈을 많이 벌어야 합니다.
신중신중신중</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</acticle>
<acticle class="card">
<figure class="card_header">
<img src="./asset/img/cardType01_02.jpg" alt="집에서 보내는 시간">
</figure>
<div class="card_body">
<h3 class="title">집에서 보내는 시간</h3>
<p class="desc">반려동물은 함께 행동하고 함께 생활해야
하는만큼 오랜시간 함께 있는 것이
좋습니다. 함께있는 시간이 많을수록 정서적 교류가 많습니다.많을수록 정서적 교류가 많습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</acticle>
<acticle class="card">
<figure class="card_header">
<img src="./asset/img/cardType01_03.jpg" alt="동물에 대해 공부했는가">
</figure>
<div class="card_body">
<h3 class="title">동물에 대해 공부했는가</h3>
<p class="desc">고양이의 성향이 다르고 또 품종마다 가지고 있는 성질이 다르므로로 이를 꼭 확인하고 입양을 고민해야합니다. 강아지도 같습니다. 신중히 입양 하세요.
신중신중신중</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</acticle>
</div>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="nexon section">
<h2 class="blind">배너</h2>
<div class="banner_inner container">
<h3>고양이 키우는 비용</h3>
<p>고양이 키우는 비용 ,월 평균 10만원<br>2021년 KB금융지주의 경영연구소가 발표한 통계</p>
<a href="#">https://mypetlife.co.kr/109271</a>
</div>
</section>
<!-- bannerType -->
<section id="textType" class="nexon section center container">
<h2>텍스트 영역</h2>
<span class="section_small">notice</span>
<h2 class="section_h2 mb70">고양이를 키울떄 주의할점</h2>
<div class="text_inner container">
<div class="text t1">
<h3 class="text_title">건강 검진</h3>
<p class="text_desc">새로운 고양이를 입양하면 즉시 수의사를 방문하여 건강 검진을 받도록 하십시오. 정기적으로 예방 접종, 통합 검진, 벼룩 예방 등을 시행하십시오.</p>
<a href="#" class="text_btn">더보기</a>
</div>
<div class="text t2">
<h3 class="text_title">실내 환경</h3>
<p class="text_desc">고양이는 실내에서 살아가므로 안전한 실내 환경을 제공해야 합니다. 미끄러운 바닥이나 위험한 물건을 없애고, 고양이에게 안전한 장소를 마련하십시오. 캣타워와 스크레처는 꼭 준비하세요.</p>
<a href="#" class="text_btn">더보기</a>
</div>
<div class="text t3">
<h3 class="text_title">적절한 사료</h3>
<p class="text_desc">고양이는 고양이 전용 사료를 먹어야 합니다. 고양이에게 인간 식품을 주면 안 되며, 물과 식사 그릇은 매일 청소하십시오.물과 식사 그릇은 매일 청소하십시오. 그릇은 매일 청소하십시오.</p>
<a href="#" class="text_btn">더보기</a>
</div>
<div class="text t4">
<h3 class="text_title">꼬리 취급</h3>
<p class="text_desc">고양이의 꼬리는 중요한 신호입니다. 꼬리가 고개를 향하면 고양이는 기분이 좋다는 신호이고, 꼬리가 어느 정도 옆으로 튀어나오면 겁을 먹거나 화를 내는 신호입니다. 고양이의 꼬리를 강하게 잡거나 휘두르면 안 됩니다.</p>
<a href="#" class="text_btn">더보기</a>
</div>
<div class="text t5">
<h3 class="text_title">놀이</h3>
<p class="text_desc">고양이는 활발한 동물이므로 놀이 시간을 가지고 놀이를 할 수 있는 장난감을 제공해야 합니다. 굳이 비싼 장난감일 필요는 없고, 종이나 박스, 뒤집은 종이컵 등 간단한 물건으로도 고양이의 호기심을 자극할 수 있습니다.</p>
<a href="#" class="text_btn">더보기</a>
</div>
<div class="text t6">
<h3 class="text_title">사랑</h3>
<p class="text_desc">고양이는 집안에서 가장 사랑받는 가족 중 한 명이어야 합니다. 고양이는 훈련과 관심을 통해 지능과 행동을 향상시킬 수 있습니다. 따라서 고양이와 교감하며 사랑으로 가득 찬 환경을 제공하는 것이 중요합니다.</p>
<a href="#" class="text_btn">더보기</a>
</div>
</div>
</section>
<!--textType -->
</main>
<!-- mainType -->
<footer id="footerType" class="section gray">
<div class="footer_inner">
<div class="footer_menu container">
<div>
<h3>고양이 사이트</h3>
<ul>
<li><a href="#">소개하기</a></li>
<li><a href="#">고양이 이야기</a></li>
<li><a href="#">유기묘 도움주기</a></li>
<li><a href="#">반려묘 만들기</a></li>
</ul>
</div>
<div>
<h3>고양이 음식</h3>
<ul>
<li><a href="#">건식사료</a></li>
<li><a href="#">습식사료</a></li>
<li><a href="#">캣잎</a></li>
<li><a href="#">츄르</a></li>
</ul>
</div>
<div>
<h3>고양이 놀이</h3>
<ul>
<li><a href="#">장난감</a></li>
<li><a href="#">캣휠</a></li>
<li><a href="#">스크래처</a></li>
<li><a href="#">캣타워</a></li>
</ul>
</div>
<div>
<h3>고양이 자랑하기</h3>
<ul>
<li><a href="#">앨범</a></li>
<li><a href="#">사진올리기</a></li>
<li><a href="#">장기자랑</a></li>
</ul>
</div>
<div>
<h3>고양이 주의점</h3>
<ul>
<li><a href="#">책임감</a></li>
<li><a href="#">털날림</a></li>
<li><a href="#">비용의 측면</a></li>
<li><a href="#">물건 치우기</a></li>
</ul>
</div>
<div>
<h3>안내사항</h3>
<ul>
<li><a href="#">찾아오시는길</a></li>
<li><a href="#">회사소개</a></li>
</ul>
</div>
</div>
</div>
<address class="footer_right">
2023 ture403 고양이 사이트 PortFoilo is Power<br>All Right Reserved
</address>
</footer>
<!-- footerType -->
</body>
</html>- 전에 만들었던 소스들을 합쳐서 만들었습니다.
- 반응형도 같이 처리해 주었습니다. (헤더/슬라이더 제외)
- 하나씩 작업을 할려고 hide 클래스를 만들어 display="none"을 주었습니다.
- 각각 센션 마다 css 만들어서 그걸 style.css로 묶었습니다.
css코드입니다.
<link rel="stylesheet" href="asset/css/fonts.css">
<link rel="stylesheet" href="asset/css/reset.css">
<link rel="stylesheet" href="asset/css/common.css">
<link rel="stylesheet" href="asset/css/style.css">- css를 4개로 구분지어서 링크를 걸었습니다.
- fonts 는 폰트를 넣었고 reset 은 초기화 해주는 코드, commom 공통요소, style import 시킨 소스들이 있습니다.
style.css입니다.
@import url(header.css);
@import url(slider.css);
@import url(image.css);
@import url(imageText.css);
@import url(card.css);
@import url(banner.css);
@import url(text.css);
@import url(footer.css);- 하나씩 구역마다 css 만들었습니다.
- 각각 import를 시켜서 불러와서 html안에 간결하게 표현을 했습니다.
#skip 코드
#skip {
position: relative;
z-index: 100000;
}
#skip a {
background-color: #000;
color: #fff;
position: absolute;
left: -400px;
top: 0;
padding: 20px 40px;
}
#skip a:active,
#skip a:focus {
left: 0;
}- 스킵 링크는 웹 페이지 내비게이션에서 건너뛰기 위한 링크로, 웹 페이지의 접근성을 높이기 위해 사용됩니다.
- #skip a:active, #skip a:focus 요소에 left: 0 속성을 적용하여, 활성화되거나 초점이 잡힌 경우 왼쪽으로 0px 이동시킵니다. 이를 통해 스킵 링크를 클릭하거나 초점을 잡으면 메뉴가 나타나도록 합니다.
ir 코드
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}- 이 코드는 보통 이미지에 대체 텍스트를 제공하지만, 텍스트로 표현하는 것이 적절하지 않은 경우에 대체 텍스트를 제공합니다.
- ir 클래스에 text-indent: -9999px 속성을 적용하여, 텍스트를 화면 밖으로 숨깁니다. 이를 통해 이미지 대체 텍스트를 제공할 수 있습니다. text-indent 속성은 텍스트를 들여쓰는데 사용되지만, 음수 값을 주면 텍스트를 왼쪽으로 들여쓰지 않고 왼쪽으로 이동시킬 수 있습니다.
완성된 코드 전체 화면 입니다.
https://ture403.github.io/web2023/site1/index.html
코드입니다.
https://github.com/ture403/web2023/blob/main/site1/index.html
GitHub - ture403/web2023: 수업시간예제입니다.
수업시간예제입니다. Contribute to ture403/web2023 development by creating an account on GitHub.
github.com
전에 코드 입니다.
푸터유형입니다.
https://ture403.tistory.com/50
텍스트 유형입니다.
https://ture403.tistory.com/44
슬라이드유형입니다.
https://ture403.tistory.com/40
이미지텍스트 타입입니다.
https://ture403.tistory.com/39
이미지 타입 입니다.
https://ture403.tistory.com/35
카드 타입입니다.
https://ture403.tistory.com/31
이미지 타입 유형
피그마를 이용한 그리드 지정 해준 화면 입니다. 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12
ture403.tistory.com
이미지 텍스트 타입
피그마에서 작업한 화면입니다. 넓이를 1920 으로 지정 해주고 높이를 800로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정했습니다. HTML 코딩 입니다. notice 고양이 종
ture403.tistory.com
슬라이드 타입 유형
피그마에서 작업한 프레임 입니다. HTML 코드입니다. 메인 슬라이드 영역 event 반려묘와 함께하는 싸이트 고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청, 고양이와와 함께 산책, 고
ture403.tistory.com
텍스트 유형 페이지 만들기 !
피그마에 만든 텍스트 유형입니다. HTML 코드 입니다. notice 고양이를 키울떄 주의할점 건강 검진 새로운 고양이를 입양하면 즉시 수의사를 방문하여 건강 검진을 받도록 하십시오. 정기적으로 예
ture403.tistory.com
푸터 영역 만들기
피그마 화면 입니다. html코드 입니다. 푸터 고양이 사이트 소개하기 고양이 이야기 유기묘 도움주기 반려묘 만들기 고양이 음식 건식사료 습식사료 캣잎 츄르 고양이 놀이 장난감 캣휠 스크래처
ture403.tistory.com
텍스트 유형 페이지 만들기 !
피그마에 만든 텍스트 유형입니다. HTML 코드 입니다. notice 고양이를 키울떄 주의할점 건강 검진 새로운 고양이를 입양하면 즉시 수의사를 방문하여 건강 검진을 받도록 하십시오. 정기적으로 예
ture403.tistory.com
텍스트 유형 페이지 만들기 !
피그마에 만든 텍스트 유형입니다. HTML 코드 입니다. notice 고양이를 키울떄 주의할점 건강 검진 새로운 고양이를 입양하면 즉시 수의사를 방문하여 건강 검진을 받도록 하십시오. 정기적으로 예
ture403.tistory.com