clone 페이지 구현을 위한 html태그, css속성 -2-

웹페이지 하단 content 내용 추가작업을 위해 먼저 2개의 영역을 잡아준다.

.
.
.
<div id="content">
	<div class="content-lecture">
  	.
  	.
  	.
	</div>
	<div class="content-community">
    	.
    	.
    	.
  	</div>
</div>
.
.
.

• id 와 class의 차이
  id는 큰 레이아웃을 나타날때 사용하고
  class는 반복적인 내용을 나타낼 때 사용한다.

content 영역에 ul, li 태그를 이용해 작성한다.

<div class="content-lecture">
  <ul>
    <li class="con1">
      <h2>
        <span>Game Architecture</span>
        게임 기획1
      </h2>
      <p>
        게임 기획자를 위한 정석 class
      </p>
      <a href="#">바로가기</a>
    </li>
  </ul>
  <ul>
    <li class="con2">
  .
  .
  .

• p
  문단을 나눌때 쓰는 태그다. block속성을 가지고 있는 엔터키?
  정도로 이해하자.

설정한 영역(content-lecture, content-community)를 좌우로 정렬한다.
영역을 감싸고 있는 content의 width를 먼저 설정하고,
감싸져 있는 영역들의 width도 설정한다.

#content {
	width: 1200px;
	height: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
}

#content > .content-lecture {
	width: 49%;
	float: left;
}

#content > .content-community {
	width: 49%;
	float: right;
}

• float: right;
  우측영역은 좌측영역에 밀려 오른쪽에 위치되었는데,
  이것 때문에 기준점이 하단에 잡히게 되었다.
  float: right를 사용하니 기준점이 왼쪽상단으로 돌아오게되었다.

• width: 49%;
  content의 width는 1200px이라서, 둘로 나누기위해 각 영역을
  600px로 설정했다....만, 왜인지 둘의 width 합이 1200px을
  넘기게 되어서, 절반보다 약간 못 미치는 49%로 설정했다.

이제 2*3으로 정렬된 내용에 css를 적용한다.

/* ul li에 외곽선 그리기 */
.content-lecture {
    /* 50% 설정시 영역 벗어남 이슈 */
    width: 49%;
    /*display: inline-block;*/
    float: left;
    border-top: 1px solid #323232;
    border-left: 1px solid #323232;
}

.content-lecture > ul > li{
    width: 49%;
    display: inline-block;
    box-sizing: border-box;
    padding: 20px;
    /* 요소의 공간만큼 이미지가 계~속 들어간다. */
    /* no-repeat 계~속 들어가던 반복을 없애줌. */
    /* bottom 10px right 10px 아래, 오른쪽으로 각 10px 띄겠다 */
    /* 외곽선 그리기 */
    /*border: 1px solid #323232;*/
    border-right: 1px solid #323232;
    border-bottom: 1px solid #323232;
}


/* li에 들어간 내용을 꾸며주기 */
.content-lecture > ul > li > h2 {
    font-size: 23px;
    color: #323232;
}

.content-lecture > ul > li > h2 > span {
    display: block;
    font-size: 12px;
    color: #4689E1;
}

.content-lecture > ul > li > p {
    width: 50%;
    margin-top: 30px;
    font-size: 13px;
    color: #666666;
}

#content > .content-lecture > ul > li > a {
    display: inline-block;
    width: 100px;
    height: 30px;
    /* 높이에서 2를 나누면 둥글게둥글게 나온다. */
    background: #81b4f2;
    border-radius: 15px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    margin-top: 20px;
}

왼쪽 영역에 공지사항과 상담/문의 내용을 추가한다.

<li class="con7">
  <h3>공지사항</h3>
  <dl>
    <dt>
      <a href="#">
        -프로그래밍 33기 모집 안내
      </a>
    </dt>
    <dd>12-23</dd>
    <dt>
      <a href="#">
        -프로그래밍만 32기 모집마감
      </a>
    </dt>
    <dd>12-14</dd>
    .
    .
    .
<li class="call">
  <h3>상담/문의</h3>
  <p>
    <img src="../img/call1.png">
  </p>
  <p>
    <img src="../img/call2.png">
  </p>
  <button type="button" class="btn_kakao">
    <img src="../img/call3.png">
  </button>
</li>

• dl dt dd
  description 태그
  table과 비슷하게 출력된다. 주로 웹페이지에 설명을 적기 위해 사용한다.

• button
  나중에 js로 동적화면 구성을 위해 button태그를 사용했다.

위의 html코드를 꾸며주는 css코드

/* 공지사항을 꾸밈 */
.con7 > dl,dt > a,dd {
    color: #323232;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}

/* 상담/문의를 꾸밈 */
.call > button {
    cursor: pointer;
    margin-left: 70px;
    border-style: none;
}

• cursor: pointer;
  마우스 커서를 올렸을시(over) 커서 모양이 바뀐다.
• border-style: none;
  button에 default로 출력되는 외곽선을 안보이게 한다.

완성된 화면