동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
먼저, 웹사이트에 사용할 아이콘을 위해 <head>부분에 아이콘 라이브러리를 추가하겠습니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">아래 <header>부분안을 구체적으로 코딩해 보겠습니다.
<!--Header-->
<div id="header">
<div class="SocialBarContainer">
상단 소셜 + 전화
</div>
<div class="logo">
회사로고
</div>
<!--Menu -->
<div class="nav">
메뉴
</div>
<!--/Menu -->
</div>
<!--/Header -->1. 상단 소셜 + 전화
<div class="SocialBarContainer">
<div class="SocialRow">
<div class="h_SocialIcons">
<!-- Facebook -->
<a href="#" class="snsIcon"><i class="fa fa-facebook-square"></i></a>
<!-- Twitter -->
<a href="#" class="snsIcon"><i class="fa fa-twitter-square"></i></a>
<!-- GooglePlus -->
<a href="#" class="snsIcon"><i class="fa fa-google-plus-square"></i></a>
</div>
<div class="h_Contact">
Phone: <a href="tel:#">012-3456-8910</a>
</div>
</div>
</div>2. 회사 로고
<div class="logo">
<a href="index.html"><img class="img" alt="회사 로고" src="logo"></a>
</div>위에서 이미지 요소내 src속성에는 회사로고가 있는 경우 해당 이미지 주소를 적어 줍니다.
로고 이미지가 준비되지 못한 경우에는 텍스트로 회사명을 적어도 됩니다.
3. 메뉴
<!--Menu -->
<div class="nav">
<ul>
<li>
<a href="sub.html">회사소개</a>
</li>
<li>
<a href="#">사업분야</a> <i class="fa fa-angle-down"></i>
<ul>
<li>
<a href="#">온라인강좌</a>
</li>
<li>
<a href="#">프로그램</a>
</li>
<li>
<a href="#">자료실</a>
</li>
</ul>
</li>
<li>
<a href="#">내용소개</a>
</li>
<li>
<a href="#">자료실</a>
</li>
<li>
<a href="#">고객센터</a>
</li>
</ul>
</div>
<!--/Menu -->등록된 댓글이 없습니다.