겁나 빠른 웹 레시피

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

여기서는 다자인된 웹사이트 전체를 코드를 통해서 만들어가는 과정을 함께해보겠습니다. 작은 부품이 되는 요소들을 유기적으로 결합하는 연습을 자주 해봐야 어떤 웹사이트도 만들 수 있다는 자신감이 생기게 됩니다. 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. 폭스킴
    Font-Family찾는법 : 개발자도구 - 검사 - Computed(화면오른쪽항목) - Filter에서 검색 ( show all 체크)
    CSS reset
    magin: 0 auto;
  2. 묘로리
    강의마지막 부분 너무나 공감입니다. 이공잉님 경험 그대로 말씀주시고, 한번에 끝났다고 여기려했던마음을 돌아보게되네요, 몇번이고 반복해서 스텝을 밟아가려합니다!! 수업 너무나 감사드려요!!!!!!!
  3. 날고기는람쥐
    #header ul.icons li .label{
    display: none;

    html을 보시면 ul의 클래스명이 icons이기 때문에 붙여서 쓴것이고 .label 띄운것은 li 태그 안에 있는 클래스명이 label이기때문에 띄어쓴것입니다.

    #header ul li .label {
    dispaly:none;
    }
    이렇게 보시면 이해가 되시나요? 같은코드입니다
    대화보기
    • 김상준
      오픈튜토리어은 나에게 멋진신세계를 보여준 곳이라고 생각합니다.
      감사.
    • 황지현
      감사합니다 ㅎㅎ 항상 잘보고 있어요!! 정말 모르는 점들이 생길때마다 너무 많은 것을 얻어갑니다.
    • 강준하
      감사합니다 ~
      대화보기
      • egoing
        https://opentutorials.org......500

        선택자 부분은 중요하니까 한번 보셔요~ 알고 보면 쉽습니다. 띄어쓰면 부모가 li인 것 중 클래스가 label인 것을 의미합니다
        대화보기
        • 강준하
          브라켓 에디터 인 것 같습니다
          대화보기
          • 강준하
            안녕하세요 강의 잘 보고 있습니다

            질문드릴게 있는데요,

            ============================

            #header ul.icons li .label{
            display: none;
            }

            ============================

            와 같은 코드에서 왜 ul 다음 .icons 는 붙여써야하고,
            li 다음 .label은 띄어써야하나요 ?

            .icons를 띄우거나 .label을 붙이면 코드가 실행이 안되는걸 보니 꼭 저렇게 써야하는 것 같더라구요 ?

            혹시 이해할 수 있는 규칙이 있는 것인지,
            아니면 익숙해지면서 외우는 수 밖에 없는 것인가요 ?

            감사합니다
          • 김형호
            에디터 어떤거 쓰시는건가용?? 그리고 혹시 아톰이면 저렇게 세팅할려면 어떻게 해야되나용??
          • 문돌이
            감사합니다. 늘 좋은 강의 감사합니다.

            그런데 혹시 저 사진들을 바꿔봤는데 그럴 때마다 section의 사진들이(7장) 부분마다 너비가 달라집니다.

            가장 왼편에 위치한 사진들이 작아지고, 중간, 오른쪽에 있는 사진들은 너비가 커지는 데요.

            무엇이 문제일까요?

            소스가 되는 사진들의 width를 똑같이 맞춰도 이러네요.


            -----------------------------

            크롬 캐시가 남아서 그런 것 같습니다. 정확히 어떤 문제인지는 모르겠지만

            크롬 캐시를 삭제하니 제대로 너비가 나오네요. 그런데 여기서 어떤 사진은 클릭시 화면에 활성화되면 나오는데,

            어느 사진은 배경에 검은색 음영만 질 뿐 화면에 나오지 않고, 그러면서 인터넷이 멈춰버립니다.

            무엇이 문제일까요?
          • 화면에서 사용하시는 웹에디터는 어떤건가요 html 코드를 붙여넣기해서 사이트 첫 화면에 어떻게 나타나도록 할수있나요(마치 워드프레스사이트 wp-admin 대시보드에서의 테마설정하는것 같이요)
            도메인,호스팅은 있지만 호스팅의 cpanel에서 wordpress 선택해서 들어가도 어떻게하면 보이게할지 모르겠군요
          • astronaut.sion
            확장기능관리자에서 color Highlighter 설치하시면 됩니다
            대화보기
            • 곰뿅이
              어도비에서 만든 브라켓을 다운받으시면 그런 기능이 있습니다
              대화보기
              • 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 자세히 보기