22. 06. 21 - [ CSS 레이아웃 ] 내가 만든 웹페이지 발표

 

 

G-STORY

 

TISTORY의

메인 페이지와 

포럼 페이지를

클론 해보았다.

 

 

 

 

---

 

 

 

 

1. T-Story 메인 페이지 따라서 만든 main 페이지

 

 

 

 

# < header > + < main >부분

 

---

# < content > 부분

 

---

# < footer > 부분

 

 

 

 

 

 

 

---

 

 

 

 

 

2. T-Story 포럼 페이지 클론 해서 만든 포럼 페이지

 

 

 

 

 

# < header > + < main > 부분

---

# < sector > 부분

 

---

# < footer > 부분

 

 

 

---

 

 

 

 

---

 

 

G-Stroy -- Main 페이지

 

 

 

< main >

• 기본 화면에서 특정 시간 흐르거나 화살표 버튼 (<,>)를 누르면
• 다음 이미지로 넘어가는 것이 반복되는데 구현하지 못함.

 

 

---

 

 

<content>

• 텍스트 효과로 마우스 hover 하였을 때
• 회색 글씨 검은색 글씨로 바꿔주면서 - 밑줄 그어지도록 해줌

 

 

 

 

 

---

 

 

 

G-Stroy -- 포럼 페이지

 

 

 

<main + header >

• 메인 태그의 백그라운드 이미지를 가리지 않도록 background-color: none;적용

 

 

 

---

 

 

<sector>

• 전체 / 블로그 소개 / 블로그 운영 팁 이 라인에
• 마우스 올라가면 효과 적용해줌

 

 

 

---

 

 

< sector > 

• 게시글 구성 -- [  a / div / dl ]
• 3개의 부분으로 나눠서 float : left로 정렬 후 작업

 

 

 

세부적인 애들도 float : left를 이용해서 자리 잡아 줌

 

 

---

 

 

 

< sector >

•  img 부분 - 이미지 칸에 꽉 채우기

 

 

 

 

 

 

---

 

 

 

 

review 

메인 페이지를 만들어 볼 때는
레이아웃 잡는 것부터 쉽지 않았다.
잡아 놓은 레이아웃이
요소가 들어가면 커지고 작아지고
효과를 적용하면 위로가고 아래로 가고..
ㅜㅜㅜ

그래도 포럼 페이지를 만들어볼 때는
레이아웃은 나름 괜찮았다.
틀 잡는 것이 정말 중요하구나 느꼈다.


하나하나 해볼 때는
어떻게 나오는지 쉽게 확인도 되고
효과도 원하는 대로 잘 적용되었는데
요소가 많아지니까 위에서
적용된 스타일 때문에
내가 적용한 스타일이 적용되지 않거나
예상하지 못한 반응이 나타나거나 하는 문제가 많았다.


그 문제를 해결하기 위해 생각보다
더 많은 시간을 들여야 했다.
정말 AtoZ 처음부터 하나하나 만드려고 하면
끝도 없을 것 같다.
그래도 두 번째 할 때는 조금 나았던 것처럼

익숙하게 사용하기 위해서는 
많은 작업을 해보며 실습해보는 것이
필요할 것 같다.