HTML&CSS 마스터북 : 좋은땅

책 소개 > 컴퓨터/인터넷 HTML&CSS 마스터북

HTML&CSS 마스터북HTML 기초부터 반응형 쇼핑몰 레이아웃 제작까지

어포스트
좋은땅
2021년 03월 15일

컴퓨터/인터넷

HTML&CSS 마스터북

HTML 기초부터 반응형 쇼핑몰 레이아웃 제작까지

어포스트
좋은땅
2021년 03월 15일

도서 기본 정보

분야
면수
판형
제본
ISBN
전자책
가격

컴퓨터/인터넷
720쪽
188mm × 257mm
무선
9791197122828
없음
24,500원

도서 판매처

이 책과 관련된 게시글

상세 이미지

책 소개

웹의 초창기 무렵에는 위지위그 웹 에디터로 워드프로세서를 쓰듯이 웹페이지를 만들거나, HTML 기초 정도를 배워서 내 홈페이지를 만들어 보는 것이 유행이기까지 했습니다. 그때는 알아야 할 내용도 많지 않았고, 기술적 난이도도 낮았습니다.
돌이켜보면 이때가 웹 개발자였던 시간 중 가장 재미가 있었던 것 같습니다. 기술적으로는 많이 허술하고 단순했지만, 새롭고 신선했으며, 재미있었습니다.
오랜 시간이 지나면서 HTML과 CSS를 배워서 웹페이지를 제작하는 영역은 이제 전문 직업의 영역이 되었습니다. 그만큼 HTML과 CSS로 웹페이지를 제작하기 위해서 알아야 하는 기술적인 내용들이 많아졌고, 전문가적인 손길을 필요로 하게 되었습니다.
이 책 한권으로 HTML과 CSS의 모든 고급 영역까지 다 배울 수는 없습니다. 그만큼 전문적이고 어려운 부분들이 웹 페이지 제작 영역에도 존재하며, 이런 영역까지 알기 위해서는 많은 실무 경험을 필요로 하기도 합니다.
이 책을 통해 최소한 초보에서는 충분히 벗어날 수 있도록 하기 위해 HTML 기초 부분부터 웹페이지 제작의 꽃이라고 할 수 있는 쇼핑몰 메인 레이아웃을 만드는 과정까지 꼼꼼하게 내용을 담았습니다.
이 책을 통해 부디 웹 디자이너, 또는 웹 개발자로서 한발자국 앞을 내딛는데 도움이 되기를 바랍니다.

책을 학습하기 전 꼭 알아야할 내용.............................................................10
1부 HTML 기초
1장. HTML의 역사 ......................................................................................................... 14
2장. 하이퍼텍스트 마크업 언어(Hypertext Markup Language) ....................................... 15
3장. CSS의 역사............................................................................................................. 16
4장. 뷰어와 웹 브라우저 .................................................................................................. 18
5장. 웹 에디터와 통합 개발 도구 ....................................................................................... 20
6장. HTML 문서의 기본 구조 이해.................................................................................... 26
7장. HTML 5.2의 개선 내용 알기 ..................................................................................... 30
8장. 기본 HTML 문서 만들어 보기.................................................................................... 32
9장. HTML 문서에 이미지() 연결하기..................................................................... 38
10장. 하이퍼링크()로 HTML 문서를 연결하기 ............................................................. 42
11장. 웹에서 사용할 수 있는 이미지 포맷들 ....................................................................... 45
12장. 시멘틱 태그로 검색에 최적화된 HTML 문서 만들기 ................................................... 50
13장. 멀티미디어 컨텐츠를 HTML 문서에 연결하기 ........................................................... 53
14장. 사라져가는 태그와 속성들 ...................................................................................... 55
15장. 폼(

) 크기 조절 차단하기 .................................................. 572
<br />21장. 플레이스홀더(placeholder) 속성 스타일 정의하기................................................. 573
<br />22장. CSS로 텍스트 영역 선택 차단하기 ......................................................................... 574
<br />23장. 배경 SVG 이미지가 크기 조절이 안되는 문제 해결하기............................................. 576
<br />24장. 모바일 웹 줌인아웃(Zoom In/Out) 차단하기......................................................... 577
<br />25장. 프린트용 미디어쿼리 설정하기.............................................................................. 578
<br />26장. 괜찮은 CSS 배경 그림자 효과 4가지 ...................................................................... 581
<br />9부 실전 레이아웃 디자인
<br />1장. 반투명 유리 배경 효과 만들기.................................................................................. 584
<br />2장. 이미지 슬라이드 만들기1 - 투명 전환 효과 ............................................................... 592
<br />3장. 이미지 슬라이드 만들기2 - 이동 효과....................................................................... 599
<br />4장. 이미지 슬라이드 만들기3 - 입체 3D 효과 ................................................................. 605
<br />5장. 체크박스로 펼침 메뉴 만들기................................................................................... 613
<br />6장. 플렉스박스로 포토갤러리 만들기............................................................................. 617
<br />7장. 플렉스박스로 쇼핑몰 레이아웃 만들기...................................................................... 631
<br />8장. 그리드로 포토갤러리 만들기1 ................................................................................. 676
<br />9장. 그리드로 포토갤러리 만들기2 ................................................................................. 690
<br />10장. 그리드로 쇼핑몰 레이아웃 만들기.......................................................................... 699
<br />색인.........................................................................................................709</p>
                </div>
                <div class="drop-area">
                  <button onclick="contentBtn()" class="content-more drop-btn"><span>펼쳐보기</span> <i class="fa-solid fa-angle-down"></i></button>                  
                </div>
              </div>
              <div class="inn-author">
                <h5 class="sub-name">작가 정보</h5>
                <div class="intro-author">
                  <div class="cover">
                  
                    
													<img src="/assets/images/round1.png" class="" alt="">
                 
                  </div>
                  <div class="content">
                  	<div class="item">
                      <div class="m-plus">

<img src="/assets/images/round1.png" class="" alt="">
                        
                      </div>
                      <div class="name">
                        <h6>저자(글) <span class="bold">어포스트</span></h6>
                        <a href="/author/authors/4964">인물 상세 정보</a>
                      </div>
                    </div>
                    <div class="profile">
                    	<p></p>
                    </div>
                    <div class="drop-area">
	                  <button onclick="authorBtn()" class="author-more drop-btn"><span>펼쳐보기</span> <i class="fa-solid fa-angle-down"></i></button>                  
	                </div>
                  </div>
                </div>
                <div class="swiper-container series-slide">
                  <div class="swiper-wrapper slide">
                    
                    
                    <div class="swiper-slide">
                      <a class="item" href="/book/3105">
                         <img src="/img/book/3105/%ED%81%B0_guetzli.jpg" alt="" />
                         <p class="twoline">ES6로 기초부터 다시 배우는 자바스크립트 파워북</p>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                      <a class="item" href="/book/3365">
                         <img src="/img/book/3365/%ED%81%B0_guetzli.jpg" alt="" />
                         <p class="twoline">HTML&CSS 마스터북</p>
                      </a>
                    </div>

</div>
                </div>
              </div>
              <div class="comm-five-slide">
                <div class="title-sec">
                  <h5 class="sub-name">같은 분야의 도서</h5>
                  <div class="btn-sec">
                    <a href="/book/class?pubbookcate=%EC%BB%B4%ED%93%A8%ED%84%B0/%EC%9D%B8%ED%84%B0%EB%84%B7">더보기</a>
                    <div class="btn-side-prev more-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
                    <div class="btn-side-next more-button-next"><i class="fa-solid fa-chevron-right"></i></div>
                  </div>
                </div>
                <div class="swiper-container same-field">
                  <div class="swiper-wrapper">
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/5087">
                        <img src="/img/book/5087/4a707a53-0673-4b3f-a2ea-268b984dda85.%ED%91%9C%EC%A7%80(%ED%81%B0).jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">비전공자도 이해하며 경험할 수 있는 AI 왕국</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4967">
                        <img src="/img/book/4967/053ed16c-d9aa-4f74-baf7-68cedad0ad27.Understanding%20Employee%20Information%20Behavior-%ED%91%9C%EC%A7%80%ED%81%B0.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">Understanding Employee Information Behavior</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4923">
                        <img src="/img/book/4923/87721624-b6a2-471a-9630-2ca8007638ac.%ED%91%9C(%ED%81%B0)_guetzli.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">차근차근 SGIS플러스 활용 실습-고급편</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4893">
                        <img src="/img/book/4893/01284b51-cb4f-45a9-a340-2427a089a950.%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EB%B6%84%EC%84%9D%20%EB%B0%8F%20%ED%86%B5%EA%B3%84%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%ED%91%9C%EC%A7%80450.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">데이터 분석 및 통계 애플리케이션</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4839">
                        <img src="/img/book/4839/4af2e249-b798-4723-aabf-f9d5571717c4.%EC%9D%B8%ED%85%94%EB%A6%AC%EC%A0%9C%EC%9D%B4-%ED%91%9C%EC%A7%80%ED%81%B0.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">인텔리제이 IntelliJ IDEA 자바 프로그래밍 필수 도구</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4723">
                        <img src="/img/book/4723/CMMI%203.0-%ED%91%9C%EC%A7%80%ED%81%B0.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">CMMI 3.0</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4681">
                        <img src="/img/book/4681/%ED%91%9C%EC%A7%80(%ED%81%B0)_guetzli.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">아이와 함께 생성형 AI</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4653">
                        <img src="/img/book/4653/%ED%8C%8C%EC%9D%B4%EC%8D%AC%EB%B6%80%ED%84%B0%20%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94%20%EC%9D%B8%EA%B3%B5%EC%A7%80%EB%8A%A5-%ED%91%9C%EC%A7%80%ED%81%B0.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">파이썬부터 시작하는 인공지능: 강화학습과 심층학습을 중심으로</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4481">
                        <img src="/img/book/4481/%ED%91%9C(%ED%81%B0)_guetzli.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">지구과학을 위한 차근차근 파이썬 코딩 실습 volume 2</h6>
                        </div>
                      </a>
                    </div>
                    
                    
                    <div class="swiper-slide">
                     <a class="item" href="/book/4480">
                        <img src="/img/book/4480/%ED%91%9C(%ED%81%B0)_guetzli.jpg" alt="" />
                        <div class="txtarea">
                          <h6 class="twoline">지구과학을 위한 차근차근 파이썬 코딩 실습 volume 1</h6>
                        </div>
                      </a>
                    </div>
                    
                    
        
                    
                    
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>

<footer>
        <section class="border_t foot-d-item">
          <div class="footer-top">
            <div class="item">
              <ul>
                <li><a href="/notice">공지사항</a></li>
                <li><a href="/policy/terms">이용약관</a></li>
                <li class="point"><a href="/policy/privacy">개인정보취급방침</a></li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li><a href="#">제휴문의</a></li>
               	<li id="app_android"><a target="_blank"
						href="https://play.google.com/store/apps/details?id=co.kr.gworld.webbrowser"><img src="/assets/images/m-icon-android.png" alt="Android앱">
								<p>Android앱</p></a></li>
				<li id="app_ios"><a target="_blank"
						href="https://apps.apple.com/kr/app/좋은땅출판사/id6443909022"><img src="/assets/images/m-icon-ios.png" alt="iOS앱">
								<p>iOS앱</p></a></li>
              </ul>
            </div>
          </div>
        </section>
        <section class="border_t  foot-d-item">
          <div class="footer-main">
            <div class="item">
              <h5>
                우리는 당신과 함께<br />
                좋은 책을 만드는<br />
                좋은땅 출판사입니다
              </h5>
            </div>
            <div class="item">
              <h6>좋은땅 고객센터</h6>
              <div class="counsel">
                <p>상담 가능 시간</p>
                <p>평일 오전 9시 ~ 오후 6시 (점심 시간 12 ~ 1시 제외)<br />주말, 공휴일은 이메일로 문의부탁드립니다</p>
              </div>
              <div class="inquiry">
                <div class="call">
                  <p>유선 문의</p>
                  <p><a  href="tel:023748616">02.374.8616~7</a></p>
                </div>
                <div class="email">
                  <p>이메일 문의</p>
                  <p><a href="mailto:gworldbook@naver.com">gworldbook@naver.com</a></p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="box">
                <ul>
                  <li>서비스</li>
                  <li><a href="/notice">공지사항</a></li>
                  <li><a href="/faq">자주 묻는 질문</a></li>
                  <li><a href="#">채팅 상담하기</a></li>
                  <li><a href="/room">자료실</a></li>
                </ul>
              </div>
              <div class="box">
                <ul>
                  <li>회사</li>
                  <li><a href="/corp">회사 소개</a></li>
                  <li><a href="/corp/lounge#location">찾아오는 길</a></li>
                </ul>
              </div>
            </div>
            <div class="item">
              <h6>원고 및 파일 전송</h6>
              <div class="web">
                <button><a href="https://only.webhard.co.kr/" target="_blank" title="좋은땅 웹하드">웹하드 접속하기</a></button>
                <div class="login">
                  <p>아이디 : so20s　</p>
                  <p>비밀번호 : so20s</p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="border_t  foot-m-item">
          <div class="footer-main">
            <div class="item">
              <h5>
                우리는 당신과 함께<br />
                좋은 책을 만드는<br />
                좋은땅 출판사입니다
              </h5>
            </div>
            <div class="item">
              <h6>좋은땅 고객센터</h6>
              <div class="counsel">
                <p>상담 가능 시간</p>
                <p>평일 오전 9시 ~ 오후 6시 (점심 시간 12 ~ 1시 제외)<br />주말, 공휴일은 이메일로 문의부탁드립니다</p>
              </div>
              <div class="inquiry">
                <div class="call">
                  <p>유선 문의</p>
                  <p><a  href="tel:023748616">02.374.8616</a></p>
                </div>
                <div class="email">
                  <p>이메일 문의</p>
                  <p>gworldbook@naver.com</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="box">
                <ul>
                  <li>회사</li>
                  <li><a href="/corp">회사 소개</a></li>
                  <li><a href="/corp/lounge">찾아오는 길</a></li>
                </ul>
              </div>
              <div class="box">
                <ul>
                  <li>서비스</li>
                  <li><a href="/notice">공지사항</a></li>
                  <li><a href="/faq">자주 묻는 질문</a></li>
                  <li><a href="#">채팅 상담하기</a></li>
                  <li><a href="/room">자료실</a></li>
                </ul>
              </div>
            </div>
            <div class="item">
              <h6>원고 및 파일 전송</h6>
              <div class="web">
                <div class="login">
                  <p>아이디 : so20s</p>
                  <p>비밀번호 : so20s</p>
                </div>
                <button><a href="https://only.webhard.co.kr/" target="_blank" title="좋은땅 웹하드">웹하드 접속하기</a></button>
              </div>
            </div>
          </div>
        </section>
        <section class="border_t foot-m-item footer-middle">
          <ul>
            <li><a href="/notice">공지사항</a></li>
            <li class="point"><a href="/policy/privacy">개인정보취급방침</a></li>
            <li><a href="#">앱다운로드</a></li>
          </ul>
          <ul>
            <li><a href="/policy/terms">이용약관</a></li>
            <li><a href="#">제휴문의</a></li>
          </ul>
        </section>
        <section class="foot-d-item">
          <div class="footer-bottom">
            <div class="item">
              <ul>
                <li>좋은땅㈜</li>
                <li>대표이사 이기봉</li>
                <li>사업자등록번호 196-81-00877</li>
                <li>출판사 신고번호 제 2001-000082호</li>
                <li>FAX 02-374-8614</li>
              </ul>
              <p>서울특별시 마포구 양화로12길 26 GWORLD(지월드)빌딩 - 좋은땅㈜ B1 ~ 5F <span class="bold">©G-WORLD</span></p>
            </div>
            <div class="item">
              <ul>
                <li>
                 <a href="https://ko-kr.facebook.com/gworldbooks/" target="_blank" title="좋은땅 페이스북"><img src="/assets/images/sns01.png" alt="페이스북"></a>
                </li>
                <li>
                 <a href="https://www.instagram.com/gworldbook" target="_blank" title="좋은땅 인스타그램"><img src="/assets/images/sns02.png" alt="인스타그램"></a>
                </li>
                <li>
                  <a href="https://blog.naver.com/so20s" target="_blank" title="좋은땅 블로그"><img src="/assets/images/sns03.png" alt="블로그"></a>
                </li>
                <li>
                  <a href="https://www.youtube.com/channel/UCXLzpXulAx7wg9q_v7liDrw" target="_blank" title="좋은땅 유튜브"><img src="/assets/images/sns04.png" alt="유튜브"></a>
                </li>
              </ul>
            </div>
          </div>
        </section>
        <section class="foot-m-item">
          <div class="footer-bottom">
            <div class="item">
              <p>좋은땅㈜ <span>|</span> 대표이사 이기봉 <span>|</span></p>
              <p>사업자등록번호 196-81-00877 <span>|</span></p>
              <p>출판사 신고번호 제 2001-000082호 <span>|</span>FAX 02-374-8614 </p>
              <p>서울특별시 마포구 양화로12길 26 GWORLD(지월드)빌딩<br  />좋은땅㈜ B1 ~ 5F</p>
            </div>
            <div class="item">
              <ul>
                <li>
                 <a href="https://ko-kr.facebook.com/gworldbooks/" target="_blank" title="좋은땅 페이스북"><img src="/assets/images/sns01.png" alt="페이스북"></a>
                </li>
                <li>
                 <a href="https://www.instagram.com/gworldbook" target="_blank" title="좋은땅 인스타그램"><img src="/assets/images/sns02.png" alt="인스타그램"></a>
                </li>
                <li>
                  <a href="https://blog.naver.com/so20s" target="_blank" title="좋은땅 블로그"><img src="/assets/images/sns03.png" alt="블로그"></a>
                </li>
                <li>
                  <a href="https://www.youtube.com/channel/UCXLzpXulAx7wg9q_v7liDrw" target="_blank" title="좋은땅 유튜브"><img src="/assets/images/sns04.png" alt="유튜브"></a>
                </li>
              </ul>
            </div>
            <div class="item">
              <p>©G-WORLD</p>
            </div>
          </div>
        </section>
      </footer>

<footer id="mobileMenu">
        <div class="m-menu">
          <a class="list" href="/">
            <img src="/assets/images/m-menu-1.png" alt="" >
            <p>홈</p>
          </a>
          <a onclick="searchBtnO()" class="list">
            <img src="/assets/images/m-menu-2.png" alt="" >
            <p>검색</p>
          </a>
          <a id="plusBtnO" onclick="plusBtnO()" class="list"> <img src="/assets/images/m-menu-3.png" alt="" ></a>
          <a onclick="hamBtnO()" class="list">
            <img src="/assets/images/m-menu-4.png" alt="">
            <p>전체</p>
          </a>
          
          
          <a onclick="loginBtnO()" class="list">
            <img src="/assets/images/m-menu-5.png" alt="" >
            <p>내 정보</p>
           </a> 
           
           
           
           <p id="flutterMessageTitle"></p>
        </div>
      </footer>

<script type="text/javascript"> 
if (!wcs_add) var wcs_add={};
wcs_add["wa"] = "s_290d836c663d";
if (!_nasa) var _nasa={};
if(window.wcs){
wcs.inflow();
wcs_do(_nasa);
}
</script>
 
 
 

<script language='javascript'>
	var _AceGID=(function(){var Inf=['gtc17.acecounter.com','8080','BS4A42960874616','AW','0','NaPm,Ncisy','ALL','0']; var _CI=(!_AceGID)?[]:_AceGID.val;var _N=0;var _T=new Image(0,0);if(_CI.join('.').indexOf(Inf[3])<0){ _T.src ="https://"+ Inf[0] +'/?cookie'; _CI.push(Inf);  _N=_CI.length; } return {o: _N,val:_CI}; })();
	var _AceCounter=(function(){var G=_AceGID;var _sc=document.createElement('script');var _sm=document.getElementsByTagName('script')[0];if(G.o!=0){var _A=G.val[G.o-1];var _G=(_A[0]).substr(0,_A[0].indexOf('.'));var _C=(_A[7]!='0')?(_A[2]):_A[3];var _U=(_A[5]).replace(/\,/g,'_');_sc.src='https:'+'//cr.acecounter.com/Web/AceCounter_'+_C+'.js?gc='+_A[2]+'&py='+_A[4]+'&gd='+_G+'&gp='+_A[1]+'&up='+_U+'&rd='+(new Date().getTime());_sm.parentNode.insertBefore(_sc,_sm);return _sc.src;}})();
</script>

</div>
	
 
    <script src="/assets/plugins/jquery/jquery.js"></script>
    <script src="/assets/plugins/jqueryui/jquery-ui.min.js"></script>
    <script src="/assets/js/jquery.easing.1.3.js"></script>
    <script src="/assets/js/custom.js"></script>
    
    
    <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    
    
    <script src="/assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
    <script src="/assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
    <script src="/assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
    
    <script src="/assets/js/swiper/swiper.min.js"></script>
    
    <script src="/assets/js/bxslider/jquery.bxslider.min.js"></script>

var broswerInfo=navigator.userAgent.toLowerCase();

if(broswerInfo.indexOf("gworldapp")>-1){

$("#apps").hide();
	$("#app_android").hide();
	$("#app_ios").hide();
	$("#naverlogin").hide();
	$(".btn-naver").hide();
	
	
	function fromAppToWeb(msg) {
		
		var isAuth = false;
		var isErr = null;
		
		if(isAuth == false && isErr == null){
			
			
			
			document.loginForm.username.value = msg.split(' ')[1];
			document.loginForm.password.value= msg.split(' ')[3];
			document.loginForm.submit();
		}
	
	}
	
}else{
	$("#apps").show();
	$("#app_android").show();
	$("#app_ios").show();
	$("#naverlogin").show();
	$(".btn-naver").show();
}

function login() {
	var mgs = document.loginForm.username.value+","+ document.loginForm.password.value;
	if(broswerInfo.indexOf("gworldapp")>-1){
		toApp.postMessage(mgs);
	}
	document.loginForm.submit();
}

function fromWebToApp(msg) {
	toApp.postMessage(msg);
}

</script>

// 관련 게시글 Swiper
      var swiper = new Swiper('.comm-post-slide', {
        slidesPerView: 'auto',
        spaceBetween: 28,
        pagination: {

},
        // Navigation arrows
        navigation: {
          nextEl: '.btn_next',
          prevEl: '.btn_prev',
        },
      });

// 저자정보 밑에 swiper
      var swiper = new Swiper('.series-slide', {
        slidesPerView: 5,
        spaceBetween: 28,
        navigation: {

},
        breakpoints: {
          320: {
            slidesPerView: 3.1,
            spaceBetween: 16,
          },
          500: {
            slidesPerView: 3.3,
            spaceBetween: 16,
          },
          768: {
            slidesPerView: 4,
            spaceBetween: 16,
          },
          1097: {
            slidesPerView: 5,
            spaceBetween: 28,
          },
        },
      });
      
      // 같은 분야 swiper
      var swiper = new Swiper('.same-field', {
        // Optional parameters
        
        slidesPerView: 5,
        spaceBetween: 28,
        pagination: {
          //  el: '.swiper-pagination',
        },
        // Navigation arrows
        navigation: {
          nextEl: '.btn-side-next',
          prevEl: '.btn-side-prev',
        },
        breakpoints: {
            320: {
              slidesPerView: 3.1,
              spaceBetween: 16,
            },
            500: {
              slidesPerView: 3.3,
              spaceBetween: 16,
            },
            768: {
              slidesPerView: 4,
              spaceBetween: 16,
            },
            1097: {
              slidesPerView: 5,
              spaceBetween: 28,
            },
          },
      });
	});
	
	function bookBtn(){
		if (
			$('.book-more.drop-btn > i').hasClass('fa-solid fa-angle-down')) {
	      		$('.book-more.drop-btn > i').attr('class', 'fa-solid fa-angle-up');
		  		$('.book.summary > p').css('overflow-y', 'visible');
		 		$('.book.summary > p').css('max-height','none'); 
				$('.book-more.drop-btn > span').text('접어보기');			
	    } 
		else {
	  		$('.book-more.drop-btn > i').attr('class', 'fa-solid fa-angle-down');
			$('.book.summary > p').css('overflow-y', 'hidden'); 
			$('.book.summary > p').css('max-height','800px'); 
			$('.book-more.drop-btn > span').text('펼쳐보기');
	    }
	}
	
	function contentBtn(){
		if (
			$('.content-more.drop-btn > i').hasClass('fa-solid fa-angle-down')) {
	      		$('.drop-btn > i').attr('class', 'fa-solid fa-angle-up');
		  		$('.contents.summary > p').css('overflow-y', 'visible');
		 		$('.contents.summary > p').css('max-height','none'); 
				$('.content-more.drop-btn > span').text('접어보기');			
	    } 
		else {
	  		$('.content-more.drop-btn > i').attr('class', 'fa-solid fa-angle-down');
			$('.contents.summary > p').css('overflow-y', 'hidden'); 
			$('.contents.summary > p').css('max-height','800px'); 
			$('.content-more.drop-btn > span').text('펼쳐보기');
	    }
	}
	
	function authorBtn(){
		if (
			$('.author-more.drop-btn > i').hasClass('fa-solid fa-angle-down')) {
	      		$('.author-more.drop-btn > i').attr('class', 'fa-solid fa-angle-up');
		  		$('.profile > p').css('overflow-y', 'visible');
		 		$('.profile > p').css('max-height','none'); 
				$('.author-more.drop-btn > span').text('접어보기');			
	    } 
		else {
	  		$('.author-more.drop-btn > i').attr('class', 'fa-solid fa-angle-down');
			$('.profile > p').css('overflow-y', 'hidden'); 
			$('.profile > p').css('max-height','800px'); 
			$('.author-more.drop-btn > span').text('펼쳐보기');
	    }
	}
    </script>
</body>
</html>

저자님들이 자주 묻는 질문을 확인해보세요

나의 도서 관리

좋은땅 도서 이야기

책 소개

책 이야기

요즘 트렌드

저자들의 생생한 이야기

저자들의 이야기

좋은땅 TV

좋은땅 가이드

좋은땅 출판 가이드

회사 소개

고객센터

우리는 당신과 함께
좋은 책을 만드는
좋은땅 출판사입니다

좋은땅 고객센터

누구나 뜻한 바 충분히 배려 받고, 쉽고 편하게 소통할 수 있는 곳

귀한 작물은 좋은 땅에 심어야 잘 자랄 수 있듯이 귀한 글들도 좋은 땅 출판사에 맡겨진다면 좋은 책이 될 수 있는 출판사

책 내는 A부터 Z 까지 편리한 출판사

출판의 첫걸음을 따뜻하게 이끌어주는 믿을 수 있는 동반자입니다.

판 진행과정이 체계적이고 저자와 소통이 긴밀하였으며, 담당자들의 성실함이 엿보였습니다.

출간을 망설이는 저자에게 소망을 이루게 하는 마중물 한 바가지 역할을 해준다.

책 소개

함께 "좋은 책"을 만들어 갑니다.

책 소개 > 컴퓨터/인터넷 HTML&CSS 마스터북

HTML&CSS 마스터북

이 책과 관련된 게시글

상세 이미지

책 소개

목차

저자님들이 자주 묻는 질문을 확인해보세요

나의 도서 관리

좋은땅 도서 이야기

책 소개

책 이야기

요즘 트렌드

저자들의 생생한 이야기

저자들의 이야기

좋은땅 TV

좋은땅 가이드

좋은땅 출판 가이드

회사 소개

고객센터

우리는 당신과 함께 좋은 책을 만드는 좋은땅 출판사입니다

좋은땅 고객센터

누구나 뜻한 바 충분히 배려 받고, 쉽고 편하게 소통할 수 있는 곳

귀한 작물은 좋은 땅에 심어야 잘 자랄 수 있듯이 귀한 글들도 좋은 땅 출판사에 맡겨진다면 좋은 책이 될 수 있는 출판사

책 내는 A부터 Z 까지 편리한 출판사

출판의 첫걸음을 따뜻하게 이끌어주는 믿을 수 있는 동반자입니다.

판 진행과정이 체계적이고 저자와 소통이 긴밀하였으며, 담당자들의 성실함이 엿보였습니다.

출간을 망설이는 저자에게 소망을 이루게 하는 마중물 한 바가지 역할을 해준다.

책 소개 > 컴퓨터/인터넷 HTML&CSS 마스터북

HTML&CSS 마스터북

이 책과 관련된 게시글

상세 이미지

책 소개

목차

우리는 당신과 함께
좋은 책을 만드는
좋은땅 출판사입니다