html, css 클론코딩

0.목차

1. 복습
2. 경일 사이트 main content 클론코딩

1.복습

어제 한거 다시 만들어 보면서 hover를 배웠다.

1-1. hover

영어 단어 뜻을 찾아보니

이렇다.

커서가 해당영역의 공중을 맴돌 때 지정되는 스타일을 정할 수 있는 선택자로 생각하면 될듯하다.

#visual > #visual_menu > ul > li > a:hover {
  background-color: black;
  opacity: 1;
}

이렇게 스타일을 지정해주면 

마우스가 올라가 있을 때 저렇게 스타일이 변한다.

2. 경일사이트 main content 클론코딩

돌아온 클론코딩

이부분 중에서 저 박스 6개 부분만 만들 거다.

2-1. 마크업

<div id="content">
      <div id="left">
        <ul>
          <li>
            <h2>
              <!-- 조그만 요소를 구분지을때 사용 -->
              <!-- div는 큰 영역을 나눌때 사용 -->
              <span>Game Architecture</span>
              게임기획
            </h2>
            <!-- 블록속성을 가진 태그 내용 구분을 위해 사용한다. -->
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>
        </ul>
      </div>
      <div id="right"></div>
    </div>

6개를 만든다고 한번에 6개를 다 만들 필요가 없다.

안에 들어있은 텍스트와 이미지만 다를 뿐 

지정되어있는 스타일은 동일하니까 우선 하나만 만들어서 스타일을 지정해 줄 거다.

2-2. 스타일

#content {
  width: 1200px;
  margin: 0 auto;
  background-color: gray;
}
/*경로를 명확하게 표기해주는 것이 오류를 줄일 수 있다. */
/* 지금은 하나의 페이지만 만드니까 상관 없지만  여러페이지를 만드는 경우 오류가 생길 수 있음*/
#content > #left {
  float: left;
  width: 600px;
  border: solid 1px #eeeeee;
  border-bottom: none;
  border-right: none;
}

#content > #left > ul > li {
  width: 300px;
  height: 230px;
  float: left;
  padding: 20px;
  box-sizing: border-box;
  border-right: solid 1px #eeeeee;
  border-bottom: solid 1px #eeeeee;
  background: url(../img/con_ic1.png) no-repeat bottom 20px right 20px;
}

#content > #left > ul > li > h2 {
  font-size: 23px;
  color: #2d2d2d;
}

#content > #left > ul > li > h2 > span {
  display: block;
  font-size: 12px;
  color: #468921;
}

#content > #left > ul > li > p {
  width: 50%;
  margin-top: 30px;
  font-size: 12px;
}

#content > #left > ul > li > a {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #81b4fe;
  /* 높이의 반을 border-radius의 값으로 설정하면 양 옆이 둥근 형태가 된다. */
  border-radius: 15px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  /* 줄간격 조절하는 속성. */
  /* 텍스트에만 적용가능 */
  /* 태그라면 padding 사용 */
  /* 높이만큼 line-height 설정하면 세로 중앙정렬 */
  line-height: 30px;
  margin-top: 22px;
}

이렇게 스타일을 지정해줬다.

새롭게 배운 부분만 하나하나 뜯어서 보면 좋을 것 같다.

 

 

2-2-1. CSS선택자

#content > #left {
  float: left;
  width: 600px;
  border: solid 1px #eeeeee;
  border-top: none;
  border-right: none;
}

#left {
  float: left;
  width: 600px;
  border: solid 1px #eeeeee;
  border-top: none;
  border-right: none;
}

위의 코드와 아래의 코드은 완전히 똑같이 작동한다.

타자 덜치면 편할텐데 왜 굳이 id 선택자를 중복해서 사용하는지가 의문이었다.

지금은 우리가 하나의 html만 작성 하고 있기때문에  아래처럼 사용해도 무리가 없지만,

만약 여러개의 html을 작성하고, 하나의 css로 link를 건다면,

1번 html에도 id = 'left' 가 있을 수 있고, 

2번 html에도 id = 'left'가 있을 수 있다.

그런 경우에 모든 left에 스타일이 지정될 것이다.

그러므로 선택자의 모든 경로를 명시적으로 표기하는게 오류를 줄이는 데 도움이 된다. 

 

2-2-2. border-radius

 <div style="width: 200px; 
             height: 100px; 
             background-color: tomato">
 </div>

위의 코드를 입력하면 이렇게 생긴 박스가 생성되는데,

 <div
      style="
        width: 200px;
        height: 100px;
        background-color: tomato;
        border-radius: 50px;
      "
    ></div>

border-radius 속성을 추가하고,

높이의 반만큼 값을 지정해주면,

양옆이 둥글게 줄어든다.

https://9elements.github.io/fancy-border-radius/#30.30.30.38--.

Fancy Border Radius Generator

여기 링크에서 원하는 모양을 만들어보며 작동원리를 이해하면 좋을 듯 하다.

2-2-3. line-height

 <div
      style="
        width: 200px;
        height: 100px;
        background-color: tomato;
        border-radius: 50px;
        text-align: center;
      "
    >
      안녕하세요
    </div>

위의 코드를 입력하면 이렇게 나오는데,

text-align을 이용해서 가로 중앙정렬은 마쳤지만,

세로축으로도 중앙정렬을 하고 싶을 때는 

line-height를 이용한다.

   <div
      style="
        width: 200px;
        height: 100px;
        background-color: tomato;
        border-radius: 50px;
        text-align: center;
        line-height: 100px;
      "
    >
      안녕하세요
    </div>

line-height 속성을 부여하고,

영역의 높이와 동일한 값을 지정해주면,

이렇게 이쁘게 정렬된다.

line-height의 작동원리는 좀더 공부를 해봐야 할 것 같다.

2-2-4. background: url() 이용해서 이미지 삽입

 <div
      style="
        width: 50px;
        padding: 50px;
        border: solid 1px black;
      "
    ></div>

background 속성을 이용해서

위의 코드를 이용해 만든 박스(위)에 이미지(아래)를 삽입할 수 있다.

    <div
      style="
        width: 50px;
        padding: 50px;
        border: solid 1px black;
        background: url(./img/con_plus.gif);
      "
    ></div>

이미지가 삽입은 됐지만 바둑판 배열로 반복되며 생성 되었다.

이미지는 영역에 삽입될 될 때, 그 영역에 들어갈 수 있는 만큼 반복되며 생성된다. 

만약 이미지를 하나만 삽입하고 싶다면, no-repeat을 추가해주면 된다.

<div
      style="
        width: 50px;
        padding: 50px;
        border: solid 1px black;
        background: url(./img/con_plus.gif) no-repeat;
      "
    ></div>

top/bottom/left/right 에도 값을 지정해주면 원하는 위치로 옮길 수 있다.

   <div
      style="
        width: 50px;
        padding: 50px;
        border: solid 1px black;
        background: url(./img/con_plus.gif) no-repeat top 50px left 50px;
      "
    ></div>

이때 주의할 점은 top 50px의 의미는 위로 50px이 아닌, 위로부터 50px 이동한 것이다.

 

만약 정중앙으로 이동 시키고 싶으면 center를 넣어주면 된다.

 <div
      style="
        width: 50px;
        padding: 50px;
        border: solid 1px black;
        background: url(./img/con_plus.gif) no-repeat center;
      "
    ></div>

2-2-5. class 지정으로 각각 다른 텍스트와 이미지 입력

위의 속성들을 이용해서 만들면 li 영역이 이렇게 나온다.

 이제 이걸 html에서 복붙해서 6개로 만들면

이렇게 나온다.

텍스트야 html 문서에서 타이핑만 하면 되니까 괜찮지만,

이미지를 하나하나 바꾸려면 조금 곤란하다.

그래서 html에서 각각의 li에 class를 지정해주고

CSS에서 선택자를 이용해 background 속성을 부여해주면 된다.

          <li class="con1">
            <h2>
              <span>Game Architecture</span>
              게임기획
            </h2>
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>

          <li class="con2">
            <h2>
              <span>Game Architecture</span>
              게임기획
            </h2>
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>

          <li class="con3">
            <h2>
              <span>Game Architecture</span>
              게임기획
            </h2>
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>

          <li class="con4">
            <h2>
              <span>Game Architecture</span>
              게임기획
            </h2>
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>

          <li class="con5">
            <h2>
              <span>Game Architecture</span>
              게임기획
            </h2>
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>

          <li class="con6">
            <h2>
              <span>Game Architecture</span>
              게임기획
            </h2>
            <p>게임기획자를 위한 정석 Class</p>
            <a href="#">바로가기</a>
          </li>

하나하나 클래스를 부여하고,

#content > #left > ul > li {
  width: 300px;
  float: left;
  padding: 20px;
  box-sizing: border-box;
  border-right: solid 1px #eeeeee;
  border-bottom: solid 1px #eeeeee;
}

#content > #left > ul > li.con1 {
  background: url(./img/con_ic1.png) bottom 20px right 20px no-repeat;
}

#content > #left > ul > li.con2 {
  background: url(./img/con_ic2.png) bottom 20px right 20px no-repeat;
}

#content > #left > ul > li.con3 {
  background: url(./img/con_ic3.png) bottom 20px right 20px no-repeat;
}

#content > #left > ul > li.con4 {
  background: url(./img/con_ic4.png) bottom 20px right 20px no-repeat;
}

#content > #left > ul > li.con5 {
  background: url(./img/con_ic5.jpeg) bottom 20px right 20px no-repeat;
}

#content > #left > ul > li.con6 {
  background: url(./img/con_ic6.jpeg) bottom 20px right 20px no-repeat;
}

하나하나 이미지도 지정해준 뒤에

 

텍스트도 수정해주면

이렇게 나온다.

끝.