웹페이지 모양을 만들기 위해 구조를 잡는다
hearder
- 로고 삽입
- 검색 상자 생성 및 삽입
- 로그인 블럭 생성.
로고 삽입
<div>
<a href="#" >
<img src="../images/logo.jpg" alt="logo" id="home-logo">
</a>
</div> .header>div:nth-child(1){
display: flex;
justify-content: center;
align-items: center;
}
/* 로고(logo) */
#home-logo{
width: 120px;
}대구분인 header의 div의 첫번째 자식에
중앙 정렬을 위해 display:flex 속성과
justify 와 align를 사용하였다.
그 후 로고 이미지에 가로폭을 120px으로 고정한다
이때 이미지는 이미 자체적인 사이즈를 가지고 있으니 한쪽만 정렬해도
자동적으로 모두 정렬 된다.
검색창 삽입
검색창 삽입을 위한 코드
<!-- 아이콘 추가를 위한 링크 -->
<script src="https://kit.fontawesome.com/ea629e8085.js"
crossorigin="anonymous"></script>
<div>
<div class="search-area">
#입력 받은 값을 서버나 페이지로 전송하기 위해 form 태그로 감싼다.
<form action="#" name="search-form">
<fieldset>
#입력받는 창을 만든다 autocomplete는 자동완성 사용안함.
<input type="search" id="query" name="query"
autocomplete="off" placeholder="검색어를 입력해주세요">
#검색 모양 버튼을 만드는 submit 버튼
이 때 버튼의 이미지 아이콘을 웹사이트에서 따온다
따온 아이콘은 텍스트 취급(색 , 크기 지정 가능)
<button type="submit" id="search-bth"
class="fa-solid fa-magnifying-glass"></button>
</fieldset>
</form>
</div>
</div>.header> div:nth-of-type(2){
#header에서 두번째 순서인 검색창을 조정
display: flex; #화면을 flex형태로 구현한다.
justify-content: center; #화면의 흐름방향으로 중앙 정렬 (justify)
align-items: center; #화면의 흐름의 반대축으로 중앙정렬한다(align).
}
<실제 검색 영역에 가로폭을 500px 주면서 테두리를 없앤다.>
.search-area{ width: 500px; border: none;}
<후손인 fieldset에 스타일을 지정한다.>
.search-area fieldset{
padding: 2px; # content와 border의 색
margin: none; # margin을 없앤다.
border: 2px solid #455ba8; # 테두리 두깨와 색
border-radius: 5px; #모서리 곡률
display:flex; # 출력 방식을 flex로 바꾼다.
}
<fieldset 안에 있는 검색 타이핑 범위>
#query{
padding: 10px; # border와 content 간격을 10px 부여
내부의 placeholder도 이로인해 띄어지게됨.
font-size: 18px; #입력되는 글자의 크기를 지정
font-weight: bold; #글자를 굵게 설정
border: none; #테두리 삭제
outline: 0; #선택됬을때 색 안변하게 설정
width: 92%; # 가로폭 92% 할당
}
<fieldset 안에 검색 버튼>
#search-bth{
width: 8%; #검색 입력 부분을 제외한 나머지 8% 부분을 할당
cursor: pointer; #마우스가 올라갔을때
font-size: 1.2em; #부모에게 물려받는 글자 크기에서 1.2배 확장한다.
color: #455ba8; #글자의 색 지정
background-color: white; #배경색 흰색으로 지정.
border: none; # 테두리 없애기. 테두리를 없애서 아이콘만 표시하게 한다.
}
모양 예시
Nav
<nav>
<ul>
<li><a href="#">공지</a></li>
<li><a href="#">자유 게시판</a></li>
<li><a href="#">질문 게시판</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1:1 문의</a></li>
</ul>
</nav>
nav{
height:50px; #nav의 높이를 기정
position:sticky;
/* sticky : 스크롤이 임계점(최상단 / 최하단)에 도달 했을 때
화면에 스티커 처럼 붙인다.
평소에는 static(기본 Position상태)
임계점 도달시에는 (fixed 화면 특정위치에 고정)
* top , bottom ,left, right 속성이 필수로 작성되어야 한다.
->임계점 도달 시 어느 위치에 부착할지 지정해야 하기 때문에.
*/
top: 0; /* 최상단에 위치. */
border-bottom: 2px solid black; # 아래쪽 밑줄 긋기용
background-color: white;#붙어서 움직이지만 투명한 뒤쪽이 안보이게 뒷배경색
}
/*nav 내부 스타일 */
nav>ul{
display: flex; # 리스트형 자료를 가로로 정렬하기 위해 flex
list-style: none; # 앞쪽에 리스트 순서 표기를 없애기 위해 사용
margin: 0; # 리스트 간의 margin를 제거
padding: 0; # 리스트의 padding을 삭제.
height: 100%; #높이는 nav의 높이와 동일하게
}
nav li{
flex: 0 1 150px; # 수축 정도를 1 기본 크기를 150px으로 설정
/* 팽창 수축 기본 크기 */
}
nav a{
display: block; # li 태그를 다 차지하게 block형으로 설정
height: 100%; #block으로 한줄은 다 차지했으니 높이를 차지하게 설정
text-align: center; # 한 칸을 다 차지한 후 글자를 중앙 정렬한다
/* 글자를세로 가운데 지정하는 방법 */
/* line-height: 48px; */
padding: 11px 0; #상하에 패딩 11px을 줘서 정 중앙으로 위치한다
/* a태그의 밑줄 없애기 */
text-decoration: none; #하이퍼링크의 밑줄을 긋는다
font-size: 18px; #글자 크기 설정
font-weight: bold; #글자 두께 설정
color: black; # 글자 색
border-radius: 5px; #블럭 상자의 곡률
transition-duration:0.5s; #색이 변화하는 시간 0.5s 부여
}
nav a:hover{ # a태그에 마우스가 올라갔을 '때'
background-color: #455ba8; # 배경 색을 변경
color: white; # 글자 색 변경
}
ID/PW Section
<section class="content-2">
<form action="#" name="login-form">
# 입력된 값을 서버나 다른페이지로 전송하기 위한 form태그
<!--아이디/ 비밀번호 / 로그인 버튼 영역 -->
<fieldset id="id-pw-area">
#아이디와 비밀번호를 입력하기 위한 section
<section>
<input type="text" name="inputId" placeholder="아이디">
<input type="password" name="inputPw" placeholder="비밀번호">
</section>
#button의 기본값은 submit이라 생략 가능
<section>
<button>로그인</button>
</section>
</fieldset>
#회원가입/ ID,PW 찾기 영역.
<article id="signup-find-area">
<a href="#">회원 가입</a>
<span>|</span> #회원가입과/id,pw 찾기를 위한
<a href="#">ID/PW 찾기</a>
</article>
</form>
</section> #form 태그 자체의 사이즈를 조정
form[name="login-form"]{
height: 140px;
padding: 10px;
#내부의 가로 정렬을 위해 사용
display: flex;
#flex의 기본 축인 왼쪽에서 오른쪽으로 이동하는 것을
세로로 변경한다.
flex-direction: column;
# 중심 축에 대한 정렬 (세로 가운데 정렬)
justify-content: center;
}
#아이디 박스와 비밀번호 박스 area 세팅
#id-pw-area{
margin: 0px; #아이디/비밀번호 박스를 딱 붙힌다
padding: 0px; #input 박스가 기본적으로 가지고 있는 패딩을 지움
border:1px solid #ddd; #회색 테두리선
#flex모양으로 정렬한다.
이 때 세로 축으로 정렬되있어 정렬도 세로로 된다(?)
display: flex;
#id-pw-area안에서 60%를 차지한다.
flex-basis: 60%;
}
# id/ pw input 영역
#id-pw-area > section:first-child{
flex-basis: 75%;
display: flex; # 화면 값을 flex로 정렬한다
flex-direction: column; # 세로로 정렬한다
}
#로그인 버튼 영역
#id-pw-area > section:last-child{
flex-basis: 25%; # 검색 상자의 크기를 설정
display: flex; # 검색 상자 정렬를 위해 사용
justify-content: center; #안해도 정렬되는데 머지 왜 했지
}
# 로그인 상자의 후손중 input태그(id/pw블록)
#id-pw-area input{
border: none; #테두리 없애기
border-right: 1px solid #ddd; 오른쪽면에 회색선
flex-basis: 50%; # 아이디와 비밀번호 반반씩 공간할당
outline:0; #선택시 강조선 안뜨게
margin: 0; #margin을 삭제해 딱 붙힌다.
padding: 5px; #로그인 상자에서 살짝 떨어트림
}
#id-pw-area input:first-child{ #id상자
border-bottom: 1px solid #ddd; #아래쪽에 선 긋기
}
#id-pw-area input:focus{ #아이디/비밀번호 입력 눌렀을 때
border: 2px solid #455ba8; #색 강조.
}
/* 로그인 버튼 */
#id-pw-area button{
width: 100%; #로그인 박스에서 가로폭 전부 차지
border: 0; #id/pw에 딱 붙힘
background-color: white; #배경색 흰색
cursor: pointer; #마우스 올렸을 때 손가락 모양
}
#id-pw-area button:hover{ 눌렀을 때
background-color: #455ba8; #색 바꾸고
color: white; #글자색 흰색으로 바꿈
}
/* 회원가입 , id/pw찾기 영역 */
#signup-find-area{
margin-top: 10px;
padding-left: 5px;
border: none;
}
#signup-find-area>a{
color: black;
text-decoration: none;
font-size: 14px;
}
#signup-find-area>span{
padding: 0 10px;
/* 상하, 좌우*/
}
footer은 간단해서 스킵
시멘틱 태그(Semantic)
시멘틱(semantic,의미)태그 (의미있는 태그)
기존 영역 분할에 주로 사용되던 div, span등의 태그는
태그 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없음.태그만 봤을 때 태그의 목적을 알 수 없어
id 또는 class를 반드시 추가해야 했다.
이런 문제점을 해결하고자
태그 이름만으로 어느 정도 어떤 역할을 하는지 알 수 있고
추가적으로 웹 접근성 향상을 도움이 되는
시멘틱 태그가 추가됨 (HTML5)
[제공하는 태그]
header 태그 : 문서의 제목, 머리말 영역
footer 태그 : 문서의 하단부분, 꼬리말, 정보 작성 영역
nav 태그 : 나침반 역할(다른 페이지, 사이트 이동)의 링크 작성 영역
main 태그 : 현재 문서의 주된 콘텐츠 작성 영역
section 태그 : 구역 구문을 위한 영역
article(작은 토막) 태그 : 본문과 독립된 콘텐츠를 작성하는 영역
aside 태그 : 사이드바(보통 양쪽), 광고 영역
