겁나 빠른 웹 레시피

사진 중심의 웹사이트 만들기

여기서는 다자인된 웹사이트 전체를 코드를 통해서 만들어가는 과정을 함께해보겠습니다. 작은 부품이 되는 요소들을 유기적으로 결합하는 연습을 자주 해봐야 어떤 웹사이트도 만들 수 있다는 자신감이 생기게 됩니다. templated.co에서 제공하는 템플릿과 똑같은 모습으로 코딩을 해보면서 CSS로 코딩하는 감각을 익혀보시기 바랍니다. 

결과물은 아래와 같이 생겼습니다. 실제 동작하는 모습을 보고 싶다면 DEMO를 방문해주세요. 

작업 미리 보기 

사용기술

주요개념

수업소개

 

배경 이미지 지정하기

 

헤더 - 아바타 이미지 

 

헤더 - 슬로건 

 

헤더 - 소셜 공유

 

헤더 - 다듬기

 

메인 - 섬네일

 

 푸터 

 

최종 마무리와 반응형 디자인 적용

 

예제 

전체 파일을 다운로드 받으려면 아래 링크를 클릭하세요. 

전체 소스 코드 다운로드

index2.html

<!DOCTYPE HTML>
<!--
    Visualize by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
	<head>
		<title>Visualize by TEMPLATED</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="assets/css/reset.css">
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,400i" rel="stylesheet">
		<link rel="stylesheet" href="fontello-bcf36fd2/css/fontello.css">
		<link rel="stylesheet" href="assets/css/main2.css" />
		<style>
      body{
        background-image: url(images/bg.jpg);
        background-size: cover;
      }
    </style>
	</head>
	<body>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Header -->
					<header id="header">
						<span class="avatar"><img src="images/avatar.jpg" alt="" /></span>
						<h1>This is <strong>Visualize</strong>, a responsive site template designed by <a href="http://templated.co">TEMPLATED</a><br />
						and released for free under the Creative Commons License.</h1>
						<ul class="icons">
							<li><a href="#" class="icon-twitter"><span class="label">Twitter</span></a></li>
							<li><a href="#" class="icon-facebook"><span class="label">Facebook</span></a></li>
							<li><a href="#" class="icon-instagram"><span class="label">Instagram</span></a></li>
							<li><a href="#" class="icon-mail"><span class="label">Email</span></a></li>
						</ul>
					</header>

				<!-- Main -->
					<section id="main">

						<!-- Thumbnails -->
							<section class="thumbnails">
								<div>
									<a href="images/fulls/01.jpg">
										<img src="images/thumbs/01.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
									<a href="images/fulls/02.jpg">
										<img src="images/thumbs/02.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
								</div>
								<div>
									<a href="images/fulls/03.jpg">
										<img src="images/thumbs/03.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
									<a href="images/fulls/04.jpg">
										<img src="images/thumbs/04.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
									<a href="images/fulls/05.jpg">
										<img src="images/thumbs/05.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
								</div>
								<div>
									<a href="images/fulls/06.jpg">
										<img src="images/thumbs/06.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
									<a href="images/fulls/07.jpg">
										<img src="images/thumbs/07.jpg" alt="" />
										<h3>Lorem ipsum dolor sit amet</h3>
									</a>
								</div>
							</section>

					</section>

				<!-- Footer -->
					<footer id="footer">
						<p>&copy; Untitled. All rights reserved. Design: <a href="http://templated.co">TEMPLATED</a>. Demo Images: <a href="http://unsplash.com">Unsplash</a>.</p>
					</footer>

			</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.poptrox.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>

main2.css

#wrapper{
/*  border:5px solid red;*/
}
#wrapper>*{
/*  border:5px solid green;*/
}
#wrapper>*>*{
/*  border:5px solid blue;*/
}
body{
  background-image: url(../../images/bg.jpg);
  background-size:cover;
  font-family: 'Source Sans Pro', sans-serif;
}
#wrapper{
  max-width:68rem;
  margin:0 auto;
}
#header{
  text-align: center;
  padding-top:2rem;
  padding-bottom: 6rem;
}
#header .avatar {
  border-radius: 100%;
  display:inline-block;
  padding:0.5rem;
  background-color: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.25);
  margin: 2rem 0;
}
#header .avatar img{
  border-radius: 100%;
  display:block;
}
#header h1{
  font-size:1.8rem;
  color:rgba(255,255,255,0.5);
  font-weight: 200;
  margin-bottom: 1.5rem;
  line-height: 2.3rem;
}
#header h1 strong{
  color:white;
  font-weight: 200;
}
#header h1 a{
  color:rgba(255,255,255,0.5);
  text-decoration: none;
  border-bottom:1px dotted rgba(255,255,255,0.5);
}
#header ul.icons li{
  display: inline-block;
  border-radius: 100%;
  border:1px solid rgba(255,255,255,0.25);
  background-color: rgba(255,255,255,0.05);
  width:3rem;
  height:3rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right:1rem;
}
#header ul.icons li:hover{
  border:1px solid rgba(255,255,255,0.25);
  background-color: rgba(255,255,255,0.2);
}
#header ul.icons li a{
  color:rgba(255,255,255,0.5);
  text-decoration: none;
}
#header ul.icons li a:before{
  font-size:1.5rem;
}
#header ul.icons li .label{
  display: none;
}
#main .thumbnails {
  display: flex;
}
#main .thumbnails>div{
  flex-grow: 1;
  margin-right:1rem;
  margin-left:1rem;
}
#main .thumbnails a{
  margin-bottom: 1.5rem;
  display: block;
}
#main .thumbnails img{
  width:100%;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  display: block;
}
#main .thumbnails h3{
  border-left:1px solid rgba(255,255,255,0.3);
  border-right:1px solid rgba(255,255,255,0.3);
  border-bottom:1px solid rgba(255,255,255,0.3);
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  padding:1rem;
  text-align: center;
  background-color: rgba(255,255,255,0.1);
  color:white;
  font-size:0.8rem;
  font-weight: 200;
}
#footer{
  text-align: center;
  color:rgba(255,255,255,0.5);
  font-weight: 200;
  padding-bottom: 3rem;
  font-size:0.8rem;
}
#footer a{
  color:rgba(255,255,255,0.5);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.5);
}
#footer:before{
  content:'';
  display: block;
  margin:2rem auto;
  width:10rem;
  border-top:1px solid rgba(255,255,255,0.2);
  margin-bottom:3rem;
}
@media(max-width:480px){
  #main .thumbnails {
    display: block;
  }
}

 

참고

댓글

댓글 본문
작성자
비밀번호
  1. 곰뿅이
    어도비에서 만든 브라켓을 다운받으시면 그런 기능이 있습니다
    대화보기
    • sSll바버미니llSs
      존경합니다. 이고잉님!
    • 히스토
      와.. 전문가이신데도 강의를 위해서 10번을 반복하셨다니.. 감동입니다. ㅠㅠ
      사진 촬영이 취미라서 꼭 저만의 페이지를 가지고 싶었는데 감사합니다!
    • rainystar
      혹시 마우스 오버 즉 :hover시에 테두리가 흰색이 섞인 핑크배경색(box-shadow)효과 구현하시는 법 아시나요? 검사 기능을 이용해서 CSS를 비슷하게 적용해도 안되네요. ㅋ
    • Lee Hyungbum
      브라켓 기능중에 실시간 미리보기 기능이에요~ 오른쪽 상단에 번개표시
      대화보기
      • 호동
        강의를 보면서 따라해 보고 있는데요. 인터넷 익스플로러 11에서는 강의 내용과 같이 출력되지 않는데요. 현제 정상적으로 출력되게 하려면 어떻게 해야 하나요?
      • 사탕나무
        templeted.co 의 데모용 에서 아이콘들을 astronautweb.co 로부터 가져다 썼더라구요.
        쏘스만 가져와편집했지만 아이콘들이 살아있어서요.
        © Untitled. Design: TEMPLATED. 이렇게 footer 부분에 처리하였습니다.
        대화보기
        • egoing
          두번째 사이트는 잘 모르겠고요. 첫번째 사이트는 Cc이기 때문에 이미지등을 쓰신다면 홈페이지 어딘가에 designed by와 같은 문구가 포함되어야 할 것 같아요. 만약 코드를 쓰신다면 특별히 언급하지 않으셔도 됩니다.
          대화보기
          • 사탕나무
            templeted.co
            astronautweb.co
            여기에 있는 자료들 수정하여 도메인이있는 홈페이지에 무료로 써도 되는지요
          • Nudger
            2016.10.10.월 봤어요~! /

            질문이 하나 있습니다. Brackets 에서 예를 들면 border:1px solid red; 라는 코드를 입력했을 때, ongoing님의 화면에는 red 자체가 빨간색으로 변하더라구요. 어떤 설정을 하면 가능할까요? 찾아보다가 포기하고 질문드립니다.ㅠ
          • 사탕나무
            고수이신 이고잉님도 여러번의 연습을 하신다니 제 자신이 부끄럽네요.
            css는 언제나 즐겁습니다.
            항상 감사합니다~~~
          • sugarui
            코딩을 자주 안하니까 많이 잊어버립니다 ;ㅅ;! 이 강의는 리마인드도 되고 스타일도 최신이고 디테일해서 너무 좋았습니다 감사해요!
            대화보기
            • Joo Han Lee David
              네 감사합니다. ^^
            • egoing
              그건 brackets editor의 기능이랍니다~
              대화보기
              • Joo Han Lee David
                안녕하세요, 이번 강의 너무 잘 설명해 주셔서 감사합니다.
                너무 좋은 강의 덕분에 완주 할 수 있었습니다. ^^

                제가 강의 보면서 텍스트 에디터에서 CSS 코드를 hover 하실 때, 해당 요소가 브라우저에서 색으로 표기가 되셨는데 아무리 인터넷에서 검색해봐도 그런 플러그인을 못 찾아서 문의 드립니다.

                저는 Sublime Text 3 를 사용하고 있는데, 혹시 거기서도 받을 수 있는 플러그인이 있을까요?

                감사합니다.
              • egoing
                고맙습니다. 그런데 이미 고수실텐데 이걸 보셨네요! ^^
                대화보기
                • sugarui
                  정말 감사합니다!
                • egoing
                  undo와 redo를 활용해서 리플레이 한 걸 스크린캐스트한거예요 ㅎㅎ
                  대화보기
                  • 김성국
                    영상 잘봤습니다. 사이트가 만들어지는 과정을 짧은 타임랩스로 보여주니 굉장히 신기하네요.
                    영상은 어떻게 찍으셨나요??
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기