겁나 빠른 웹 레시피

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

여기서는 다자인된 웹사이트 전체를 코드를 통해서 만들어가는 과정을 함께해보겠습니다. 작은 부품이 되는 요소들을 유기적으로 결합하는 연습을 자주 해봐야 어떤 웹사이트도 만들 수 있다는 자신감이 생기게 됩니다. 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. 이현석
    서비스를 더이상 운영하지 않고 있나보네요.
    대화보기
      답글
    • 율초이
      혹시 저만 templated.co url이 접속되지 않는건가요? 구글 애드 센스만 존재하는 사이트가 뜨네요
      답글
    • jeisyoon
      2021.07.02 사진 중심의 웹사이트 만들기 - OK

      2021.07.07 한국의 명산이라는 간단한 웹사이트 구축 - OK
      답글
    • 남산 다람쥐
      안녕하세요!
      혹시 지금은 css 적용 문제 해결 하셨나요??
      같은 문제로 html 파일 여러 번 검토 했는데 어떤 부분이 문제인지 모르겠네요ㅠ
      대화보기
        답글
      • 늦은나이가아님
        2020.12.15 감사합니다
        답글
      • 호우야아아앙
        이거보고 연습삼아 비슷하게 만드는 중인데

        <!DOCTYPE html>
        <html lang="ko">
        <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="C:/Users/내꺼/Desktop/웹페이지만들기/css/style.css">
        <link rel="stylesheet" href="C:/Users/내꺼/Desktop/웹페이지만들기/css/reset.css">
        <title>굿모닝 인테리어</title>
        </head>


        <body>
        <div id="wrap">
        <header id="header">
        <ul id="left_nav">
        <li id="goodmorning">굿모닝 인테리어</li>
        </ul>
        <nav id="right_nav">
        <ul>
        <li id="right-1">인테리어</li>
        <li id="right-2">고객센터</li>
        </ul>
        </nav>
        </header>


        <main id="main">
        <div class="scrip">degine</div>
        <div class="imgfy">
        <div class="picture">
        <a href="#">
        <img class="picture1"src="../꾸미기/사진1.jpg" alt="">
        <h2>거실</h2>
        </a>


        <a href="#">
        <img class="picture2"src="../꾸미기/사진2.jpg" alt="">
        <h2>부엌</h2>
        </a>


        <a href="#">
        <img class="picture3"src="../꾸미기/사진3.jpg" alt="">
        <h2>화장실</h2>
        </a>

        <a href="#" class="picture4text">
        <img class="picture4"src="../꾸미기/사진4.jpg" alt="">
        <h2 >중문+현관</h2>
        </a>

        <a href="#" class="picture5text">
        <img class="picture5"src="../꾸미기/사진5.jpg" alt="">
        <h2 >베란다</h2>
        </a>

        </div>
        </div>
        </main>

        <footer id="footer"></footer>
        </div>

        </body>
        </html>


        .body{
        margin:0; padding:0;
        }

        #wrap{
        max-width: 1000px;
        margin: 0 auto;
        }

        #header{
        background-color: rgb(254, 223, 225);
        height: 4rem;
        position: relative;
        }

        #left_nav{
        position: absolute;
        }

        #goodmorning{
        margin-top: 1.5rem;
        margin-left: 20px;
        }

        #right_nav{

        position: absolute;
        right: 14px;
        top: 1.5rem;
        }

        #right_nav>ul>li{
        display: block;
        float:left;
        margin-right: 20px;
        }

        #main{
        width: 100%;
        height: 800px;
        background: #111;
        border: 2px solid red;
        }

        .scrip{
        border: 2px solid blue;
        }

        .imgfy{

        margin: 0 auto;
        margin-top: 2rem;
        border: 2px solid green;
        height: 700px;
        width: 950px;
        text-align: center;

        }

        .picture{
        display: flex;
        }

        .picture a{
        border: 2px solid yellow;
        margin-top: 2rem;
        margin-left: 20px;
        margin-right: 20px;
        border-radius: 15px;
        flex-grow: 1;
        text-decoration: none;
        cursor: pointer;
        }

        .picture a img{
        width:100%;
        border-radius: 15px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        }

        .picture a h2{
        border-left: 1px solid white;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        padding: 0.5rem;
        outline: 0px;
        }


        #footer{
        border: 2px solid rgb(222, 136, 34);
        width: 100%;
        height: 6rem;
        }

        여기서 사진 두장을 밑으로 내려서 위에 사진들과 사이즈를 맞추고
        좌우 마진을 주고싶은데 안되여
        답글
      • 규몽
        완료
        답글수정삭제
      • 공부중
        재밌게 보았습니다!
        답글수정삭제
      • testrestbestwest
        감사합니다!
        답글
      • Cmd_
        강의 잘 보았습니다. 마지막에 힘 되는 이야기들 해주셔서 좋네요.
        답글
      • 원코드
        제목 : 웹호스팅시 css 적용이 안되네요 .

        이고잉님 강의 잘 보고 있습니다.
        웹페이지 만들어보고 싶어서 가르쳐주신 내용들 보고 부단히 따라 가고 있습니다.

        다름이 아니라
        모든 내용을 작성하고, 인터넷 페이지 컨트롤+o 로 할때는 잘 되던 웹페이지가 깃허브에 올려 주소로 접속하게 되면 희안하게 CSS작성한 내용이 풀리는 현상이 발생합니다.

        index.html 상단부와 와 main.css 파일 첨부합니다

        index.html


        <html>
        <head>
        <title>Song's introduction</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-5bfc156d/css/fontello.css">
        <link rel="stylesheet" href="assets/css/main.css" />
        </head>
        <body>

        main.css


        #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-bottom:1.5rem;
        }

        #header .avatar img{
        border-radius: 100%;
        display: block;
        }
        #header h1{
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 200;
        margin-bottom: 1.5rem;
        line-height: 2.5rem;

        }
        #header h1 strong{
        color : white;
        font-weight: 200;

        }
        #grid ol a{
        text-decoration: none;
        border-bottom: 1px dotted rgb(255, 255, 255,0.5);
        }

        #header ul.icons li{
        display: inline-block;
        border:1px solid rgba(255, 255, 255, 0.25);
        border-radius: 100%;
        background-color: rgba(255,255,255,0.05);
        width:2rem;
        height:2rem;
        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 .label{
        display: none;
        }
        #main .thumbnails{
        display:flex;
        }
        #main .thumbnails>div{
        flex-grow:1;
        margin-left: 1rem;
        margin-right: 1rem;
        }
        #main .thumbnails a{
        margin-bottom: 1.5rem;
        display: block;
        }
        #main .thumbnails img{
        width: 100%;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        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:0.5rem;
        text-align: center;
        background-color: rgba(255,255,255,0.1);
        color :rgba(255,255,255,0.6);
        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: 3rem auto;
        width: 10rem;
        border-top: 1px solid rgba(255,255,255,0.2);
        }

        @media(max-width:480px){
        #main .thumbnails{
        display:block;
        }
        }

        #grid ol{

        width : 150px;
        padding-left: 70px;

        font-size: 1.0rem;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 200;

        line-height: 1.4rem;
        }

        #grid ol a{
        color : rgba(255,255,255,0.5);
        }
        #grid{
        display : grid;
        grid-template-columns: 150px 1fr;
        }
        #article p{
        align-content: center;

        font-size: 1.0rem;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 200;

        line-height: 1.5rem;

        padding-bottom: 60px;

        }
        #article p a{
        color :rgb(255,255,255,0.5);
        text-decoration: none;
        border-bottom: 1px dotted rgba(255,255,255,0.5);
        }
        @media(max-width:620px){
        #grid{
        display :block;
        }
        #grid ol{
        margin:auto;
        margin-bottom: 40px;

        font-size: 1.0rem;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 200;

        line-height: 1.5rem;

        }
        #article p{
        padding-bottom: 60px;
        }
        }



        이 부분 궁금하네요. 알고 계시면 답변 부탁드립니다
        답글
      • 아이린보드
        조금 되었지만, WEBn 공부와 겁나빠른 레시피를 보며, 깃허브호스팅을 이용한 포트폴리오입니다:)
        댓글로나마 많은 분들이 봐주시고 공부하시길 원해 올리네요ㅎㅎ
        깃허브 주소 : github.com/Irenebode/irenebode.github.io
        페이지 주소 : irenebode.github.io
        답글수정삭제
      • Comming
        컬러에서 rgba로 바로갈쑤있는 플러그인이 있나요?
        답글
      • Ye-ji Jeon
        배경 이미지도 바꿔보고, 썸네일 사진도 바꿔보고,
        이것저것 제 입맛대로 맞춰가면서 예제를 따라해보니까
        나름의 커스터마이징이 되었네요 ㅎㅎㅎ

        이고잉님께서 예제를 만들기위해 10번을 하셨다니,
        저는 20번이고 100번이고 계속 다른 템플릿을 보아가면서 노력해야겠습니다.
        강의 너무 감사합니다!
        답글
      • Noel J Park
        잘 봤습니다. css 선택자 찾는데 좋은 연습이 되네요.
        답글
      • 고고싱
        정말 좋은 강의입니다!!!! 감사합니다
        답글수정삭제
      • dnflwlq601@naver.com
        이고잉님 서브라임텍스트3에서 border가 출력되지 않는데 어떻게 해야 합니까??
        답글수정삭제
      • David
        좋은 강의 잘들었습니다. 감사합니다. 반복하며 연습할때 언젠가는 자유롭게 활용하게 되겠지요 ^^
        답글수정삭제
      • 폭스킴
        Font-Family찾는법 : 개발자도구 - 검사 - Computed(화면오른쪽항목) - Filter에서 검색 ( show all 체크)
        CSS reset
        magin: 0 auto;
        답글
      • 묘로리
        강의마지막 부분 너무나 공감입니다. 이공잉님 경험 그대로 말씀주시고, 한번에 끝났다고 여기려했던마음을 돌아보게되네요, 몇번이고 반복해서 스텝을 밟아가려합니다!! 수업 너무나 감사드려요!!!!!!!
        답글
      • 날고기는람쥐
        #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를 똑같이 맞춰도 이러네요.


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

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

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

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

                무엇이 문제일까요?
                답글
              • solar
                화면에서 사용하시는 웹에디터는 어떤건가요 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를 활용해서 리플레이 한 걸 스크린캐스트한거예요 ㅎㅎ
                                대화보기
                                  답글
                                • 김성국
                                  영상 잘봤습니다. 사이트가 만들어지는 과정을 짧은 타임랩스로 보여주니 굉장히 신기하네요.
                                  영상은 어떻게 찍으셨나요??
                                  답글수정삭제