<head>
1. link 태그
<link rel="icon" type="image/png" href="imgs/coin.png" />
rel: 링크하는 문서와 현재 문서와의 관계, 즉 용도를 적으면 됨
(지금 거는 링크는 아이콘이니 icon이라고 적어준다.쉽다)
type: 말그대로 타입. image/png 타입
href: 실제 파일의 위치주소
2. nav 태그
<nav id="navbar">
<div class="navbar_logo">
<i class="fab fa-diaspora"></i>
<a href="#">Yong</a>
</div>
<div class="navbar_menu">
<ul class="navber__menu">
<li class="navbar__menu__item">Home</li>
<li class="navbar__menu__item">About</li>
<li class="navbar__menu__item">Skills</li>
<li class="navbar__menu__item">My work</li>
<li class="navbar__menu__item">Testimonial</li>
<li class="navbar__menu__item">Contact</li>
</ul>
</div>
</nav>
nav 태그는 메뉴, 목차, 인덱스등 네비게이션 링크(navigation link)를
합친 것을 정의할때 사용하는 태그다.
위 코드는 nav태그가 navbar_logo,menu,menu의 item등을 모두 포함한 모습.
3. div 태그
.example을 입력하면
<div class="example"></div>이 생성된다.
element별로 구간을 나눌때 항상 div태그를 통해 하나씩 그룹을 정해두고,
그 아래 자식 노드를 생성해 코딩한다.
4. ul과 li태그
ul.abc>li.def*6 는
<ul class="abc">
<li class="def"></li>
<li class="def"></li>
<li class="def"></li>
<li class="def"></li>
<li class="def"></li>
<li class="def"></li>
</ul> 로 빠르게 작성할 수 있다.
계속해서 사용하다보면 손에 익숙해질듯.
5. section 태그
<!-- Navbar -->
<nav id="navbar">
<div class="navbar_logo">
<i class="fab fa-diaspora"></i>
<a href="#">Yong</a>
</div>
<div class="navbar_menu">
<ul class="navber__menu">
<li class="navbar__menu__item">Home</li>
<li class="navbar__menu__item">About</li>
<li class="navbar__menu__item">Skills</li>
<li class="navbar__menu__item">My work</li>
<li class="navbar__menu__item">Testimonial</li>
<li class="navbar__menu__item">Contact</li>
</ul>
</div>
</nav>
<!-- Home -->
<section id="home">
<img
src="imgs/profile.png"
alt="Yong's profile photo"
class="home__avatar"
/>
<h1 class="home__title">Hello, <br />Im a Daemool</h1>
<h2 class="home__description">A freakin dick King of the korea</h2>
<button class="home__contact">Contact Me</button>
</section>
아래에 section이 다섯개 더 있지만 너무길어질까봐 넣지 않음.
어쨌뜬 이렇게 홈페이지 위에서 부터 순서대로 nav-section-section...
이렇게 섹셜별로 구간을 나누고 그 안에서 차근차근 한 섹션씩 작성한다.
6. img 태그
<img
src="imgs/profile.png"
alt="Yong's profile photo"
class="home__avatar"
/>
src : 이미지의 실제 파일 경로
alt : 이미지에 대한 설명
class : 클래스 값
7. a 태그
특정 글자나 이미지등에 하이퍼링크를 생성해주고 싶을때 사용.
<a href = "http://www.naver.com">GO Naver</a>
8. p 태그
paragraph(문단)의 약자로, 문단을 작성할때 사용한다.
<p class="contact__rights">2022 five star M.C 1 byung's health company</p>
9. 기타 오늘 배운 단축키
커맨드 + 슬래시 : 주석 생성
옵션 + 시프트 + 마우스 드래그(or 클릭) : 동시에 여러 구간 선택 후
시프트 누르면서 방향키로 위치 조정하면 서로 한칸씩만 감.
.abc 는 바로 <div class="abc"></div>를 만들어주고,
a.abc는 <a href="" class="abc"></a>를 만들어준다.
즉, .을 치고 그 뒤에 적는건 div태그를 만들고 바로 그 뒤에 적은 값이 클래스 값으로 생성.
어떤 특정 태그에 . 치고 뒤에 적는건 특정 태그에 그 뒤에 적은 값이 클래스 값이 된다.
이 또한 매일같이 코딩을 손에 익혀두면 자연스레 익숙해질듯.
용호의 코딩블로그 22.11 코딩공부 시작 23.2 부트캠프 입소