기업형 웹 페이지
- 작업 폴더 준비하기
- 레이아웃 구조 파악하기
<header>태그안에 메뉴,<figure>태그 안에<video>태그를 활용한 비주얼 영억, 가운데<section>태그에는 콘텐츠 영역, 마지막<footer>태그에는 기업 정보
- header 영역 완성하기
<header>태그로 그룹을 묶고, 자식인<div>태그에 클래스명inner를 추가해 로고, 메뉴와 같은 실제 콘텐츠를 가로 가운데로 정렬해 줄 그룹을 만든다.- 웹 페이지 제목인 로고를
<h1>태그로 작성. - 로고 아래 주 메뉴인
<ul>태그를 생성하고id를gnb라고 설정실무에서 기업형 웹 페이지를 제작할 때 주 메뉴의 아이디명을 'gnb'라고 쓰는데 이것은 global navigation bar의 약자.
- 상단에 배치할 유틸 메뉴 클래스명
util
- 전체 스타일 초기화
- 자식 요소를
absolute로 설정하는 이유는float로 배치할 때 HTML의 콘텐츠 순서를 변경할 수 없기 때문
- 유틸메뉴도
absolute를 이용하여.inner안쪽 왼쪽 상단에 배치한 뒤 각 메뉴를float로 배치 - 부모 요소인 .util에 float를 해제하지 않은 이유는 어차피 해당 요소 자체가 이미 absolute로 적용되어서 부모 요소가 인식을 못하기 때문
- figure 영역 완성하기
- 사용자 브라우저 크기에 상관없이 한 화면에 header와 figure 영역이 모두 보이도록 하고, 배경 동영상을 무한 반복 재생
- 영상파일 업로드 코드를 유튜브로 변경 진행
- 아래의 코드 참고하여 작성
<head>
<style type="text/css">
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
</style>
</head>
<body>
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/sbc2yBheAbo?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=sbc2yBheAbo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
calc()는 괄호 안에 수칫값과 연산자 사이를 무조건 한 칸씩 띄어야 연산 오류를 방지할 수 있다.
- section 영역 완성하기
<article>태그 4개를 묶어서 float를 해체할<div class="wrap">태그를 작성
- float를 이용해 article을 좌우로 배치한 뒤 오른쪽으로 margin-right를 20px만큼 설정하고 맨 마지막 요소에는 오른쪽의 간격이 없어야 하므로 :last-child 구문을 이용해 가장 오른쪽에 있는 마지막 article의 여백을 제거한다.
- 만약 마지막 article의 여백을 제거하지 않으면 .inner의 너빗값은 1180px인데 article 요소의 오른쪽 여백을 포함한 전체 너빗값이 1200px이므로 부모 영역의 너빗값보다 커서 4번째 article 요소 아래쪽으로 떨어져서 배치된다.
- 섬네일의 프레임인 .pic의 모양을 잡고 자식 요소인 img를 꽉 차게 배치하기 위해 object-fit:cover를 지정
- footer 영역 완성하기
- upper 부분에는 기업명과 메뉴 영역이 좌우로 배치되므로 가상 선택자를 이용하여 float를 해제
신입 개발자가 되기 위해 공부하고 있습니다.