ㅁ 큰 것부터 작은 것순으로 설계한다.
ㅁ 반응형을 생각하지 않고 브라우저 화면 제일 큰 화면을 기준으로 생각한다.
- 테두리는 레이아웃 다 잡고 지워주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { /* 모든 요소를 가리킴 */
box-sizing: border-box;
border: 1px solid red;
}
.wrap {
width: 100%; /* 상위요소(화면전체)의 100*를 다 사용 */
max-width: 1300px; /* 단, 최대 너비는 1300px로 고정한다. */
margin: auto;
/* header, navigator, content, footer를 세로로 배치 */
display: flex;
flex-direction: column;
/* header, navigator, content, footer 자동으로 width가 부모의 100%를 차지하도록 설정된다. */
}
.header, .footer {
height: 150px;
}
.navigator {
height: 50px;
}
.content {
min-height: 500px;
/* content는 고정 픽셀로 높이를 고정시키면 안 됨. 벗어날 수도 있다.
안에 정보가 많아지면 자동으로 늘어나게. 내용물 영역은 유동적으로 늘어나게.
단, 정보가 적을 경우 최소 높이는 지정해두는 것이 좋다.*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="header1"></div>
<div class="header2"></div>
<div class="header3"></div>
</div>
<div class="navigator">
</div>
<div class="content">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
ㅁ header, content를 3등분 한다.
* { /* 모든 요소를 가리킴 */
box-sizing: border-box;
border: 1px solid red;
}
.wrap {
width: 100%; /* 상위요소(화면전체)의 100*를 다 사용 */
max-width: 1300px; /* 단, 최대 너비는 1300px로 고정한다. */
margin: auto;
/* header, navigator, content, footer를 세로로 배치 */
display: flex;
flex-direction: column;
/* header, navigator, content, footer 자동으로 width가 부모의 100%를 차지하도록 설정된다. */
}
.header, .footer {
height: 150px;
}
.navigator {
height: 50px;
}
.content {
min-height: 500px;
/* content는 고정 픽셀로 높이를 고정시키면 안 됨. 벗어날 수도 있다.
안에 정보가 많아지면 자동으로 늘어나게. 내용물 영역은 유동적으로 늘어나게.
단, 정보가 적을 경우 최소 높이는 지정해두는 것이 좋다.*/
}
.header {
display: flex;
/* flex-direction: rox; 기본값 */
/* headr1, 2, 3의 높이가 자동으로 부여됨. */
}
.header1 { width: 20%; }
.header2 { width: 60%; }
.header3 { width: 20%; }
.content {
display: flex;
}
.content1 { width: 15%; }
.content2 { width: 60%; }
.content3 { width: 25%; }
- 각각 부모 요소의 몇%를 차지하게 할건지.
- 부모의 width가 가변이기 때문에 같이 늘어나고 같이 줄어든다. 단 1300px보다 커지지는 않고.
ㅁ semantic
- nav를 따로 두지 않고 header안에 둔다.
header를 2등분하여 위쪽에 header-top, 아래쪽에 header-nav를 둔다.
- content는 2등분하여 왼쪽은 content-news, 오른쪽은 content-side로 좌우 분리한다.
- footer는 2등분하여 위쪽은 footer-link, 아래쪽은 footer-info를 둔다.
- header-top은 3등분하여 수평으로 header-logo, header-search, header-alarm을 둔다.
- content-side는 2등분하여 수직으로 side-myinfo, side-ad를 둔다.
- 파랑색 노랑색 초록색 순으로 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
border: 1px solid gray;
}
.wrap {
width: 100%;
max-width: 1300px;
margin: auto;
display: flex;
flex-direction: column;
}
.header, .footer {
height: 150px;
}
.content {
min-height: 500px;
}
.header { display: flex; flex-direction: column;}
.header-top { height: 70%; display: flex; flex-direction: row;}
.header-nav { height: 30%; }
.header-logo { width: 30%; }
.header-search { width: 50%; }
.header-alarm { width: 20%; }
.content { display: flex; flex-direction: row; }
.content-news { width: 65%; }
.content-side { width: 35%; display: flex; flex-direction: column;}
.content-side-myinfo { height: 150px; } /* content 영역 늘어 나면 같이 늘어나서 비율로 안함 */
.content-side-ad { height: 350px; } /* content 영역 늘어 나면 같이 늘어나서 비율로 안함 */
.footer { display: flex; flex-direction: column;}
.footer-link { height: 30%; }
.footer-info { height: 70%; }
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="header-top">
<div class="header-logo"></div>
<div class="header-search"></div>
<div class="header-alarm"></div>
</div>
<div class="header-nav">
</div>
</div>
<div class="content">
<div class="content-news"></div>
<div class="content-side">
<div class="content-side-myinfo"></div>
<div class="content-side-ad"></div>
</div>
</div>
<div class="footer">
<div class="footer-link"></div>
<div class="footer-info"></div>
</div>
</div>
</body>
</html>
ㅁ < 시맨틱 태그 >
- 모든 요소를 div로 묶었는데 거의 div로 하긴 하지만 html5에서부터 제공되는 semantic 태그가 있다.
- 시멘틱 태그를 꼭 쓰라는 것은 아님.
생각보다 쓰는 사이트가 없다. 대부분 div로 다 한다. 간혹 가다 있다.
- HTML5 부터 제공되는 태그
- div 태그 같이 블럭요소로 생각하면 된다.
단, 해당 영역 내에 어떤 정보가 담겨있는지 보다 쉽게 파악하기 위해서 의미있는 태그명을 제공함.
- 명확한 구분 가능
- 타인이 해석할 때도 동일하게 해석 가능
ㅇ 종류
- header : 가장 위에 나타나는 머리말 (로고 이미지 등)
- nav : 목차 형태의 메뉴바
- section : 본문 내용(컨텐츠)를 의미
- article : 따로 분할해서 다른 곳에 쓸 수 있는 컨텐츠들을 묶는 태그 [잘안쓰임]
- aside : 본문 외의 내용 / 광고 배너같은 / 링크 모음집 (필수적이지 않은 것들) [잘안쓰임]
- footer : 웹 문서의 바닥글 (제작정보, 회사정보, 저작권 등)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 시맨틱 태그를 쓴다면 항상 써줘야 함. */
header, nav, section, article, aside, footer {
display: block;
}
* {
box-sizing: border-box;
border: 1px solid gray;
}
.wrap {
width: 100%;
max-width: 1300px;
margin: auto;
display: flex;
flex-direction: column;
}
.header, .footer {
height: 150px;
}
.content {
min-height: 500px;
}
.header { display: flex; flex-direction: column;}
.header-top { height: 70%; display: flex; flex-direction: row;}
.header-nav { height: 30%; }
.header-logo { width: 30%; }
.header-search { width: 50%; }
.header-alarm { width: 20%; }
.content { display: flex; flex-direction: row; }
.content-news { width: 65%; }
.content-side { width: 35%; display: flex; flex-direction: column;}
.content-side-myinfo { height: 150px; } /* content 영역 늘어 나면 같이 늘어나서 비율로 안함 */
.content-side-ad { height: 350px; } /* content 영역 늘어 나면 같이 늘어나서 비율로 안함 */
.footer { display: flex; flex-direction: column;}
.footer-link { height: 30%; }
.footer-info { height: 70%; }
</style>
</head>
<body>
<div class="wrap">
<header class="header">
<div class="header-top">
<div class="header-logo"></div>
<div class="header-search"></div>
<div class="header-alarm"></div>
</div>
<nav class="header-nav">
</nav>
</header>
<section class="content">
<div class="content-news"></div>
<div class="content-side">
<div class="content-side-myinfo"></div>
<div class="content-side-ad"></div>
</div>
</section>
<footer class="footer">
<div class="footer-link"></div>
<div class="footer-info"></div>
</footer>
</div>
</body>
</html>
- div가 header 등으로 바뀌었다.
- 똑같은 블럭 요소. 의미만 부여했을 뿐.
- article, aside로 둬도 되고 그냥 div로 둬도 됨.
- 시맨틱 태그 꼭 안써도 됨. div로 그냥 해도 됨.
ㅇ 시맨틱 태그를 사용한다면 유의사항
- IE 8 이하에서는 시맨틱 태그를 (블럭 요소가 아닌) 인라인 요소로 인식함.
그래서 블럭요소로 인식하게끔 display: block 처리를 해줘야 함.
ㅁ 각각의 영역 안에 들어가서 세부영역 작업
- 메인메뉴3, 4, 5에는 마우스 갖다대면 서브메뉴가 아래에 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 시맨틱 태그를 쓴다면 항상 써줘야 함. */
header, nav, section, article, aside, footer , div {
display: block;
/* border: 1px solid gray; */
}
.wrap * {
box-sizing: border-box;
}
.wrap {
width: 100%;
max-width: 1300px;
margin: auto;
display: flex;
flex-direction: column;
}
.header{
height: 200px;
}
.footer {
height: 200px;
}
.content {
min-height: 500px;
}
.header { display: flex; flex-direction: column;}
.header-top { height: 80%; display: flex; flex-direction: row;}
.header-nav { height: 20%; }
.header-logo { width: 20%; }
.header-search { width: 60%; }
.header-alarm { width: 20%; }
.content { display: flex; flex-direction: row; }
.content-news { width: 75%; }
.content-side { width: 25%; display: flex; flex-direction: column;}
.content-side-myinfo { height: 150px; } /* content 영역 늘어 나면 같이 늘어나서 비율로 안함 */
.content-side-ad { height: 350px; } /* content 영역 늘어 나면 같이 늘어나서 비율로 안함 */
.footer { display: flex; flex-direction: column; border-top: 1px solid gray;}
.footer-link { height: 20%; }
.footer-info { height: 80%; }
/* footer 관련 스타일 */
.footer-link {
margin: 0; /* ul요소라 마진과 패딩을 가지고 있다 */
padding-left: 20px;
list-style: none; /* 불릿 기호 삭제 */
display: flex; /* 수직이 아닌 수평으로 배치된다 */
align-items: center; /* 수평 가운데 정렬 */
/* justify-content: space-evenly; 직접 주고 싶으면 이거 안주고 margin으로도 간격 조절 가능. */
}
.footer-link a {
text-decoration: none; /* 밑줄 제거 */
color: darkred;
font-weight: 900;
margin: 15px;
}
.footer-link > li + li::before{ /* 2번째, 3번째, 4번째 li 선택됨. ::before로 가상공간 선택 */
content: '|';
}
.footer-info {
display: flex;
flex-direction: column;
}
.company-info {
height: 80%;
margin: 0; /* ul요소라 마진과 패딩을 가지고 있다 */
list-style-type: '- '; /* 불릿기호 내맘대로 줄 수 도 있음. */
display: flex; /* li요소들에 gap 넣으려면 여기가 display:flex여야 함 */
flex-direction: column;
gap: 5px;
padding-top: 5px;
}
.company-info > li {
font-size: 14px;
color: darkgray;
}
.copyright-info {
height: 20%;
text-align: center;
color: burlywood;
}
/* content 관련 스타일 */
.content-side-myinfo {
display: flex;
flex-direction: column;
}
.login-form {
height: 70%;
/* border: 1px solid green; 잠깐 확인용* */
display: flex;
margin-top: 15px; /* 마진, 패딩은 다 끝나고 하나씩 넣어주면 된다. */
}
.login-etc {
height: 30%;
/* border: 1px solid green; 잠깐 확인용*/
margin: 0;
padding: 0;
list-style-type: none;
display: flex; /* 수평으로 배치 */
align-items: center; /* 교차축으로 가운데 정렬 */
justify-content: center; /* 메인축으로 가운데 정렬 */
gap: 10px;
}
.login-etc a {
text-decoration: none;
color: blue;
font-size: 14px;
}
.login-input {
width: 70%;
display: flex;
flex-direction: column;
}
.login-btn { width: 30%; }
.login-input > input { /* 둘 다 선택 */
height: 50%;
}
.login-btn > input {
width: 100%;
height: 100%; /* 부모에 flex 없어도 되네 */
}
/* header 관련 스타일 */
.header-logo img {
width: 100px;
}
.header-logo { /* 상위 요소에 이 3개를 주면 된다. */
display: flex;
justify-content: center;
align-items: center;
}
.search-form { /* 검색창을 가운데에 두고 싶으니 상위 요소에 3개 쓰기 */
width: 500px;
height: 30px;
/* border: 1px solid green; */
display: flex;
}
.header-search { /* 검색창을 가운데에 두고 싶으니 상위 요소에 3개 쓰기(여기) */
display: flex;
justify-content: center;
align-items: center;
}
.search-form > input {
/* width: 400px; 브라우저를 줄여도 크기가 줄어들게 하고 싶다. */
flex-basis: 400px;
/* flex-basis는 브라우저가 늘어날 때 요소가 늘어나진 않지만 브라우저가 줄어들 땐 줄어듦. */
}
.search-form > button {
/* width: 100px; */
flex-basis: 100px;
}
/* header-nav 관련 스타일 */
.header-nav a {
text-decoration: none;
color:darksalmon;
font-weight: 900;
}
.main-menu {
/* border: 1px solid green; */
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
height: 100%;
display: flex;
justify-content: space-evenly;
/* align-items: center; 서브메뉴 가지고 있는 애들이 이상하게 나와서 이번엔 이거 못 씀. */
/* line-height: 100%; 이상하게 나옴. line-height는 고정픽셀로 줘야 됨. */
line-height: 40px; /* 부모 높이 px을 알아내서 작성. */
}
.main-menu > li {
/* border: 1px solid green; */
width: 100px;
text-align: center;
}
.sub-menu {
/* border: 1px solid blue; */
margin: 0;
padding: 0;
list-style-type: none;
z-index: 10000; /* 어떤 요소보다도 위에 있도록.
근데 이래도 안 됨. position이 static일땐 z-index가 안 먹힘. */
position: relative;
background-color: white; /* 배경색 지정 안하면 기본이 투명색 */
display: none; /* 요소를 숨기려면 display: none. 존재는 하는데 안보임 */
top: -1px; /* position이 relative여야 top, bottom, left, right 가능 */
/* 메인메뉴 테두리와 서브메뉴 테두리 사이에 미세한 빈 공간이 있음 */
}
.main-menu > li:hover > ul {
display: block; /* 원래 ul요소가 블럭요소임. */
}
/* 마무리 */
.header-nav {
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<div class="wrap">
<header class="header">
<div class="header-top">
<div class="header-logo">
<a href=""><img src="../assets/assets/image/naver_logo.png" alt=""></a>
</div>
<div class="header-search">
<form action="/server/search/do" class="search-form">
<input type="search" name="keyword">
<button type="submit">검색</button>
</form>
</div>
<div class="header-alarm"></div>
</div>
<nav class="header-nav">
<ul class="main-menu">
<li><a href="">메인메뉴1</a></li>
<li><a href="">메인메뉴2</a></li>
<li>
<a href="">메인메뉴3</a>
<ul class="sub-menu">
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
</ul>
</li>
<li>
<a href="">메인메뉴4</a>
<ul class="sub-menu">
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="">메인메뉴5</a>
<ul class="sub-menu">
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="content">
<div class="content-news"></div>
<div class="content-side">
<div class="content-side-myinfo"> <!-- 2등분 -->
<form action="/server/signin.me" class="login-form"> <!-- 요청 넘기려면 form -->
<div class="login-input"> <!-- 또 2등분해서 좌우분리 -->
<input type="text" name="userId" placeholder="ID 입력" required>
<input type="password" name="userPwd" placeholder="PW 입력" required>
</div>
<div class="login-btn">
<input type="submit" value="로그인">
</div>
</form>
<ul class="login-etc">
<li><a href="">회원가입</a></li>
<li><a href="">ID/PWD찾기</a></li>
</ul>
</div>
<div class="content-side-ad">
</div>
</div>
</section>
<footer class="footer">
<ul class="footer-link">
<li><a href="">이용약관</a></li>
<li><a href="">개인정보취급방침</a></li>
<li><a href="">인재채용</a></li>
<li><a href="">고객센터</a></li>
</ul>
<div class="footer-info"> <!-- 상하 2등분 -->
<ul class="company-info">
<li>상호명 : GooDee Academy</li>
<li>대표자 : 이승엽</li>
<li>전화 : 02-818-7950</li>
<li>팩스 : 02-818-7964</li>
<li>사업자등록번호 : 457-85-00300</li>
</ul>
<div class="copyright-info">
Copyright ⓒ GooDee Academy. All rights reserved.
</div>
</div>
</footer>
</div>
</body>
</html>
'03. 웹 표준 기술 > CSS' 카테고리의 다른 글
| [css] 마무리 (0) | 2024.08.08 |
|---|---|
| [CSS] 05. Flex 스타일 (0) | 2024.08.07 |
| [CSS] 04. 레이아웃 스타일 (0) | 2024.08.06 |
| [CSS] 실습문제 (0) | 2024.08.06 |
| [CSS] 테이블 관련 스타일 (0) | 2024.08.06 |
