[project]_2
나의Site만들기2
첫번째의 계획안은 엎어버렸다. 홈페이지와 메뉴와의 차이점을 주기위하여 다른 계획을 짜보았다.
전체적인 틀 구성
display:grid;를 활용하여 전체적인 홈페이지의 구성을 분배하려 한다.
grid-template와 grid-area를 활용하려고 한다.
body {
display: grid;
grid-template: "header header header"
"nav nav nav" 2em
"subTitle subTitle subTitle"
"main main main"
"footer footer footer" 200px;
background: #888;
}
header { grid-area 를 통하여 이름을 부여하여 준다.
grid-area: header;
}
nav { 메뉴통합
grid-area: nav;
}
#subTitle { subTitle 이름부여
grid-area: subTitle;
}
.Main { Main 이름부여
grid-area: main;
}
footer { footer 이름부여
grid-area: footer;
}
HTML의 간단한 구성이고 큰 구획이다. 여기에서 좀더 뼈대를 붙일 것이다.
<body>
<header>
Header
</header>
<nav id="UpMenu">
nav
</nav>
<div id="subTitle">
Blog!!
</div>
<div class="Main">
Main
</div>
<footer>
Footer
</footer>
</body>
필요없는 decoration 없애기
홈페이지에서 많은 부분이 a태그를 활용하기 때문에 a태그의 데코레이션들을 없애주는 부분을 만들었다.
a:link {
color:black;
text-decoration: none;
}
a:visited { 링크를 누른 a 태그
color: black;
text-decoration: none;
}
a:hover { a태그에 마우스를 올려놓았을 때
color:black;
text-decoration: none;
}
메뉴에서 사용하는 li태그는 그냥 사용하게되면 앞에 dot가 생성된다. 그렇기때문에 그 dot를 없애주려고 한다.
li{
list-style:none; li 태그의 dot를 없애준다.
}
header 부분 구성하기
header에는 1. 홈페이지로 가는 문자열 2. 대문이미지 또는 문자열 3. 제작자와 버전등을 표현하고 싶었다.
header {
display: grid;
grid-template-columns: 1fr 1fr 1fr; header를 grid container로 하여
3개의 구역을 만든다.
}
a {
text-decoration: none; a태그의 데코레이션을 없애준다.
color: black;
}
header p {
font-size: 1.6em; header container 의 1번째 아이템 p 태그 설정
position: relative;
transform: translateX(10px); 위치를 오른쪽으로 10px옮기기위한 설정
align-self: center; 수직정렬을 중앙으로
}
header .HomeImage { header container의 2번째 아이템 .HomeImage
justify-self: center; 수직 정렬 중앙
align-self: center; 수평 정렬 중앙
font-style: sans-serif; 글씨체 변경
font-size: 2.8em; 글씨크기 기본의 2.8배 설정
}
header .siteA { header container의 3번째 아이템 .siteA
font-weight: 600; 글씨 굵기 설정
justify-self: end; 오른쪽에 붙이기 위해 수평정렬을 오른쪽붙인다
font-size: 1.6em; 글씨크기의 기본의 1.6배
}
header의 HTML부분
<header>
<p class="header">
<a id="HomeLink" href="#">Home Sweet Home</a>
</p>
<div class="HomeImage">
<img height="100px" src="https://user-images.githubusercontent.com/57125670/76160276-09fa9200-616c-11ea-8bdd-ccdffb1de4a9.jpg"
alt="HomepageImage"></div>
<div class="siteA">
<div>Duckey</div>
<div>2020.3.1</div>
<div>version 0.1</div>
</div>
</header>
nav menuContainer 설정
기획: Left에 있는 menu들을 갖는 leftContainer, Right에 있는 menu들을 갖는 rightContainer를 만들고 그 둘을 묶는 menuContainer를 만든다.
leftContainer에는 게시판의 메뉴 4개를 갖게 한다. rightContainer에는 로그인과 회원가입란을 갖게한다.
nav .menuContainer { menuContainer는 left 와 right container들의 container이다.
height: 2em; 높이는 글자크기의 2배
display: grid;
background: #888; display:grid를 활용하여 3:1비율로 left 와 right 분배한다.
grid-template-columns: 3fr 1fr;
align-content: end; 수직정렬은 하단에 놓고 밑줄을 넣어준다.
border-bottom: 4px solid black;
}
nav .menuContainer .leftContainer { leftContainer의 설정
display: flex; Container를 display:flex 해서
justify-content: space-around; 4개의 item들이 남은 공간등을 분배하여 배치하였다.
}
nav .menuContainer .rightContainer { rightContainer 의 설정
display: flex; display:flex 해서
justify-content: space-between; 2개의 item들을 양쪽에 두게 설정한다.
}
nav .menuContainer li { menuContainer에 들어가는 li태그의 설정
font-size: 1.4em; 글자의 크기를 기본크기의 1.4배로 설정
}
nav UpMenu의 HTML설정
nav로 구역을 나누어 주고 leftContainer가 메뉴4개 rightContainer가 메뉴 2개를 갖게된다.
<nav id="UpMenu">
<div class="menuContainer">
<ul class="leftContainer">
<li><a href="menu1index.html">메뉴 1</a></li>
<li><a href="menu2index.html">메뉴 2</a></li>
<li><a href="menu3index.html">메뉴 3</a></li>
<li><a href="menu4index.html">메뉴 4</a></li>
</ul>
<ul class="rightContainer">
<li><a href="">로그인</a></li>
<li><a href="">회원가입</a></li>
</ul>
</div>
</nav>
subTitle 부분 CSS
부분을 나누려고 만든 subTitle부분이다 솔직히 필요없는 부분이지만 작성을 했기때문에 작성한 CSS를 적어본다.
#subTitle { class가 아닌 id를 부여했기때문에 # 을 사용하였다.
margin-top: 10px;
display: flex;
height: 1.6em;
font-size: 1.5em;
align-items: center;
}
HTML부분
<div id="subTitle">Blog!!!</div>
section 과 aside 구역 구분
Main에서는 게시판 구역 80% ,광고판 구역 20% 정도를 생각하고 있다.
.Main {
display: flex; section 과 aside 2개의 item 갖는 flexcontainer로 설정한다.
justify-content: space-between; 2개의 아이템을 양쪽 끝에 놓는다.
font-size: 1.25em;
padding: 10px;
position: relative;
}
.Main section {
display:block;
width: 79%;
height: 1000px;
}
.Main .asideWrap {
width: 19%;
height: 600px;
display: grid; aside 2개를 item으로 갖는 GridContainer 로 설정한다
position: fixed; 위치를 Main에서 구역에 fixed한다.
right: 0; 오른쪽에다 붙인다.
}
.Main aside {
background: tomato;
margin: 2px;
}
section과 aside 부분의 HTML 설정
Main이라는 FlexContainer가 section태그와 div.asideWrap를 flexitem으로 갖는 형태를 가져야 한다.
<div class="Main">
<section class="mainSection">
<div class="menuboard">...
</div>
</section>
<div class="asideWrap">
<aside class="rightAd">...
</aside>
</div>
</div>
menu4개의 게시판을 보여주는 홈페이지 Main CSS
홈페이지에 접속하면 메뉴4개의 게시판을 미리보여주는 식의 게시판을 만드려고 한다.
mainSection에 들어가는 4개의 menuboard를 갖게한다. 구역배분은 2행2열 느낌으로 하려고 한다.
.mainSection {
display: grid; grid container 로 설정하고
grid-template: 10em 10em /1fr 1fr; 높이는 10em 가로크기는 여분의 크기 1:1로 배분한다.
}
.mainSection .menuboard {
margin: 10px;
overflow: hidden; menu들을 보여주는 board로서 크기를 넘어가게 되면
text-overflow: ellipsis; overflow을 보여주지 않게 한다.
white-space: nowrap;
}
.mainSection .menuboard .boardTitle { menu 4개의 title의 css
display: block;
font-weight: bold;
border-bottom: 1px solid darkgray;
}
.mainSection div p {
width: 70%; menuboard 안에서의 크기를 70%로 갖고
float: left; 왼쪽정렬한다. 게시판의 제목을 적는 부분
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mainSection div span {
font-size: 0.8em; menuboard에 date를 작성하는 부분
float: right;
font-weight: 200;
}
.mainSection div button {
float: right;
background: darkgoldenrod; 더보기를 설정하는 button부분 오른쪽 정렬
border-radius: 5px;
}
HTML부분
<section class="mainSection">
<div class="menuboard">
<div class="boardTitle">
<a href="menu1index.html">Menu1 board</a>
</div>
<p>아무거나 쓰고있는중 여러분도 아무거나 읽고 있는중 코로나 대위기.ㅠ</p>
<span>2020.02.28</span>
<p>아무거나 쓰고있는중 여러분도 아무거나 읽고 있는중 내가사는 동네는 코로나 없나..</p>
<span>2020.02.27</span>
<p>아무거나 쓰고있는중 여러분도 아무거나 읽고 있는중 니가 사는 그집</p>
<span>2020.02.18</span>
<p>아무거나 쓰고있는중 여러분도 아무거나 읽고 정말 왈왈소리다</p>
<span>2020.01.05</span>
<button>
<a href="menu1index.html">더보기</a>
</button>
</div>
</section>
menuboard안에 있는 boardTitle과 p,span태그로 게시글에대한 정보를 주고 button으로 더보기를 만든다.
footer 부분
footer { 아래부분은 다 footer부분이다.
display: flex; dispaly:flex 설정후 중앙정렬 시키고
justify-content: center; 글씨의 폰트와 투명도를 설정하였다.
font-style: italic;
font: small-caps 1em sans-serif;
opacity: 0.4;
}
완성된 HomePage 대문
