[project]_1

공부한 CSS, HTML활용하여 SITE 만들기

기본 HTML 구조 잡기

내가 생각하는 사이트는 기본적인 재밌는 자료,유용한 정보를 갖고 있는 자료를 올리는 사이트를 만드려고 한다.

  <header>
    <p class="header">
      <a id="HomeLink" href="http://127.0.0.1:5500/studyindex.html">My site</a>
    </p>
    <div class="HomeImage">Duckey's Blog</div>
    <div class="siteA">
      <div>Duckey</div>
      <div>2020.3.1</div>
      <div>version 0.1</div>
    </div>
  </header>

header부분을 3개의 영역으로 분할하였다.

1. 클릭을 하면 홈페이지로 오는 부분
2. 대문이미지와 홈페이지 문구를 적는 부분
3. 홈페이지 제작에 대한 정보를 적는 부분

부분을 구분할때 처음에는 display:flex를 사용할지 아니면 display:grid를 사용할지 고민이 많았다.
어차피 1줄로 된 영역을 구분하기 때문에 display:flex를 쓰는게 맞다고 생각하였지만 display:flex보다 더 최근에 배운게 display:grid이기때문에 그리드를 사용하였다. 그리고 물론 flex도 grow를 통하여 크기를 배정할 수 있지만 좀 더 최근에 배운 grid를 활용하였다.

header{
  display:grid;
  grid-template-columns:1fr 3fr 1fr;    header 를 grid container로 설정하고 아래에 있는 3영역을 배치한다. 
  background:darkgray; 
}
a{ text-decoration:none;}              a 태그는 밑줄이 그어지게 되는데 그것을 없애기위해 text-decoration을 설정하였다.

header p{
  
  font-weight:bold;
  position:relative;
  transform:translateX(10px);           p 태그의 위치를 변화시키기 위해 position과 transform의 값 translateX를 활용하여 X 축으로 10px만큼 옮겨주었다. 
  align-self:center;                    수직정렬을 시켜서 가운데에 content가 오게하였다.
}
header .HomeImage{
  justify-self:center;          수평정렬 중앙
  align-self:center;            수직정렬 중앙
  font-style:italic;            글씨체 italic   
  font-size:2em;                글자크기는 기본크기의 2배
  font-weight:bold;             글자스타일은 두껍게
  
}

header .siteA{
  font-weight:600;              수평정렬은 끝부분에 맞춘다
  justify-self:end;             defalut값이 좌>우 이기때문에 우축정렬이 된다.
}

그 다음으로 하려고 하는 작업은

1. header의 부분과 경계선을 만든다.
2. Menu부분을 만든다.nav태그로 묶어준다.
3. Menu부분은 left와 right를 구분해 준다.
4. left에는 일반 메뉴를 right에는 로그인과 회원가입 부분으로 나누려한다.
5. Menu부분의 item들은 메뉴를 누르면 링크가 되어야 하기 때문에 a태그를 사용한다.

<div id="nonebox"></div>
<div id="nonebox"></div>
<nav id="UpMenu">
    <div class="menuContainer">
        <ul class="leftContainer">
            <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>
        <ul class="rightContainer">
            <li><a href="">로그인</a></li>
            <li><a href="">회원가입</a></li>
        </ul>
    </div>
</nav>

#nonebox {
  
  height: 2px;
  background: tomato;         높이 2px짜리 빈칸을 만든다 background 지금 적용되는 것을 확인하기 위해 입력한값.
}

.menuContainer {
  display: grid;            left 메뉴와 right 메뉴의 grid-container를 만들어준다.
  background: yellow;
  grid-template-columns: 3fr 1fr;       3:1 비율로 left,right 메뉴 container를 배정한다.
}

.menuContainer .leftContainer {
  background: blue;
  display: flex;
  justify-content: space-around;  left containerd의 item들을 여분의 공간을 사용하여 배정한다
}

.menuContainer .rightContainer {
  background: red;
  display: flex;
  justify-content: space-between; right container의 item들을 양쪽 끝에 배정한다.
  ;
}

nav li {
  font-size: 16px;   nav에 있는 li 즉 메뉴에 쓰이는 li태그의 fontsize를 16px로 한다.        
}

Aside 와 section부분

1. sectionWrap을 통해 leftAd section rigthAd를 구분한다.
2. leftAd 와 rightAd를 position:fixed를 활용하여 화면고정시킬 것이다.

<div class="sectionWrap">
  <aside class="Ad leftAd"><div class="adbox">광고1</div></aside>
  <section>asdf!!Asdfasdf</section>
  <aside class="Ad rightAd"><div class="adbox">광고2</div></aside>
</div>

여기서 문제가 생겼다. 처음에는 그저 sectionWrap을 통해서 Ad부분과 section부분을 나눈디 Ad부분을 position:fixed;를 적용하려하였지만 원하는 결과가 나오지 않았다.
어차피 aside와 section은 한 줄로 배열되기때문에 display:grid;,display:fixed;을 다 적용해 보았지만 내가 생각하는 결과가 나오지 않았다.
그래서 aside태그로 구역만 나누고 adbox라는 div태그를 활용하여 div태그에 css를 추가하여 원하는 aside영역을 만들었다.

.sectionWrap {
    display:grid;
    grid-template-columns:100px 1fr 100px;   grid를 통해 크기가 100px 1fr 100px짜리로 열을 만든다.
    grid-template-rows:600px;                높이가 600px인 행을 만든다.
    margin: 10px;                            여백은 10px 준다.
}
.sectionWrap .Ad{
    position:relative;                      100px의 aside태그의 position 기준점을 잡아준다.
}


.sectionWrap section{
    background: lightblue;                   aside태그의 영역과의 구분을 주기 위해서 왼쪽과 오른쪽에 여백을 주었다.
    margin-left: 10px;
    margin-right: 10px;
    
}


.Ad .adbox{                                화면에 고정되는 adbox를 설정해주었다.
    width: 100px;
    height: 600px;
    position:fixed;                        aside태그에 기준점을 주고 화면고정시킨다.
    background:tomato;
}

<footer>
<span>Copyright(c) 2020 DuckHwan.Kim all rights reserved.</span>
<div class="nonebax"></div>


</footer>