[211223] 클론코딩 / 게시판 만들기

목차

클론코딩 / 게시판 만들기

1. 구역 나누기

2. 이미지 삽입하기

3. 선 삽입하기

   3-1 border과 문제점

   3-2 해결방식

4. 모서리 둥글게 만들기

5. 텍스트 가운데 정렬

6. 마우스 오버 기능

 

---

클론코딩 / 게시판 만들기

대략적인 구역 나누기

1. 구역 나누기

table을 사용할 수도 있겠지만 보다 깔끔하고 수정이 용이한 ul, li기능을 사용한다.

좌측 초록색 박스와 우측 초록색 박스의 행렬이 다르기때문에 각각 다르게 작성한다.

• 빨간 박스
  • 초록박스(좌) -> ul
    • 보라색박스 6개 -> li
      • 오렌지색박스 3개
      • 배경에 이미지 삽입
  • 초록박스(우)
    • 보라색박스(상) 2개
    • 보라색박스(하) 1개

---

작성한 html

con1과 con2는 동일하기때문에 접어놓았다.

---

2. 이미지 삽입하기

끝도없이 들어가있는 이미지들

 

#container > #left>ul>li{
    background: url("../img/con_ic1.png");
}

url()안에는 ""나 ''나 상관없음.

이렇게 될 경우 이미지가 해당 영역에 계속 늘어놓는다.

하나만 들어가있는 이미지

 

 

background: url("../img/con_ic1.png") no-repeat;

이를 방지하기 위해서 no-repeat을 사용.

 

 

 

 

 

 

 

이동된 위치

 

    background: url("../img/con_ic1.png")
    bottom 30px right 40px no-repeat;

여기서 위치를 이동할때.

 

 

 

 

 

---

3. 선 삽입하기

3-1. border과 문제점

가운데에 1px 선이 2개가 합쳐져 2px로 보인다

border:1px solid #000;

이 방식의 문제점. 선을 그리기때문에 마주한 면은 1픽셀 선이 1개가 겹치기때문에 1+1=2 픽셀로 보이게 된다.

 

3-2. 해결방식

해결방법 : (개별박스) 우측과 하단에 선 / (전체박스) 좌측과 상단에 선

전체박스와 개별박스에 개별적으로 코딩한 모습

이 방식의 문제점. 박스 크기를 300px로 넣어도 선의 크기가 각각 1px씩이므로 전체적으로는 302px이 된다.

---

4. 모서리 둥글게 만들기

 

원래는 초록색 박스처럼 생성되나 지금은 둥글둥글하다

border-radius를 사용해서 모서리를 둥글게 만들 수 있다.

border-radius: 15px;

---

5. 텍스트 가운데 정렬하기

좌우정렬 말고도 상하정렬을 해보자

텍스트를 좌우정렬은 text-align을 사용하면 되는데, 상하정렬은 2가지 방법이 있다.

1. padding-top을 이용해 위에 공간을 주는 방법

2. line-height을 이용해 문장간에 거리를 띄우는 방법.

line-height: 30px;

---

6. 마우스 오버 기능

마우스를 올려놓으면 반응하는 코드

#left > ul> li > a:hover{  }