Do it 웹사이트 따라 만들기 - 회사소개 페이지 만들기

# 5-1. 사용자와 콘텐츠

좋은 웹 사이트와 콘텐츠란?

• 검색 엔진이 검색에 대한 답을 잘 찾을 수 있도록 웹 사이트를 만들어야 한다.
• 사용자가 흥미를 느낄 수 있도록 CSS로 디자인하고 JS로 동적인 내용을 전달하여 사용자가 오래 사이트에 머물 수 있도록 정보를 제공해야 한다.

---

# 5-2. 회사소개 페이지 본문 채우기

1. section class = "content_wrap" 태그의 제목을 <h3> 태그로 작성한다.
2. 전체 내용의 제목이 되는 <h3> 태그의 클래스를 pargrph_tit로 지정한다.
3. css를 열어 .pargrph_tit 클래스에 margin-bottom의 속성값, 폰트 크기, 색상을 지정한다.
4. 제목과 본문을 나누는 디자인 요소는 특별한 정보를 전달하지 않으므로 태그를 사용하지 않고 css의 가상요소인 after를 생성하여 디자인 한다. position을 이용해 <h3> 태그 영역의 하단에 위치할 수 있게 소스를 작성한다.

.pargrph_tit{margin-bottom:50px; font-size:24px; color:#fff; position:relative;}
.pargrph_tit:after{content:""; display:block; width:30px; height:8px; background:#ed3140; position:absolute; left:0; bottom:-10px;}

1. html 파일에 문단 전체 영역을 <div> 태그로 작성해 .pargrph 클래스를 지정한다.
2. 각 문단은 소제목과 본문 내용으로 구성되 있으므로 한 문단은 <div> 태그로 영역을 만들어 .text_box로 클래스를 지정하고 <h4> 태그와 <p> 태그를 사용하여 내용을 작성한다.
3. 문단 내 소제목 <h4> 태그를 디자인한다.
4. 본문 내용 <p> 태그를 디자인하고, 각 문단의 여백을 지정하기 위해 margin-bottom 속성값을 지정한다.

.text_box{position:relative;}
.text_box h4{font-size:40px; color:#d6d4d4; font-weight:700;}
.text_box p{margin-bottom:50px; color:#ababab; line-height:20px;}

따로 적어봤당ㅎ 이건 이번 챕터 완성본임.

1. 화면에 따라 텍스트 영역의 너비를 고정시키기 위해 <div class="conbox"> 태그의 최대값을 지정하여 웹 브라우저 중앙에 위치시킨다. 분할된 영역에서 페이지가 열릴 때, 즉 this 클래스가 추가될 때 .conbox 영역에 width가 지정되어야 한다.
2. 모니터가 작을 경우, 콘텐츠 영역에 스크롤을 만들어 콘텐츠를 볼 수 있도록 작성한다. #container .content.this에 overflow-y의 속성값을 auto로 지정하여 콘텐츠가 브라우저 영역보다 길어지면 자동으로 스크롤이 생기게 한다. overflow:hidden으로 지정하면 가로축으로는 스크롤이 생성되지 않게 한다.

#container .content.this{width:100%; left:0 !important; height:100%; overflow:hidden; overflow-y:auto}

 

---

# 5-3. 다양한 CSS 활용법

1. .text_box의 형제 중 첫 번째 문단은 왼쪽으로 정렬하고, 두 번째 문단은 오른쪽으로 정렬한다. 정렬 방향은 text-align 속성값을 지정한다. 각 문단을 다르게 지정하기 위해 CSS의 가상 클래스 선택자인 nth-child를 추가로 사용한다.

.text_box:nth-child(odd){text-align:left;}
.text_box:nth-child(even){text-align:right;}

1. 텍스트 옆에 이미지를 추가하기 위해 첫번째 문단의 div class="text_box" 태그를 기분으로 가상 요소를 만든다.
2. 이미지 위치를 지정하기 위해 .text_box로 선택자를 만들고 position 속성값을 absolute로 지정하며 그림이 오른쪽으로 위치할 수 있도록 right와 top 속성값을 지정한다.
3. 그림과 텍스트가 겹치지 않도록 .text_box p로 선택자를 만들고 padding_right의 속성값을 이미지의 width만큼 지정한다. 

.text_box{position:relative;}
.text_box:nth-child(1):after{content:""; display:block; width:206px; height:100%; position:absolute; right:0; top:0; background:url(../images/content_img1.png) no-repeat right top; background-size:206px auto;}
.text_box:nth-child(1) p{width:100%; padding-right:206px;}

1. 앞에 다른 문단이 추가되더라도 유지보수를 변경하지 않기 위해 마지막 태그부터 순서를 정한다. :nth-last=child 선택자로 작성한다.
2. 마지막 문단에 이미지를 넣기 위해 가상 요소인 before를 만들고 background 속성으로 이미지를 넣은 후 position을 지정한다.
3. 마지막 문단은 오른쪽에도 이미지를 지정한다. 가상요소인 after를 만들고 이미지 및 position을 지정한다.
4. 양쪽의 이미지와 텍스트가 겹치지 않도록 padding 좌우에 속성값을 지정한다.
5. 마지막 문단은 강조 색상으로 표시하여 다른 문단과 차별화한다.

.text_box:nth-last-child(1):before{content:""; display:block; width:150px; height:250px; position:absolute; left:0; top:70px; background:url(../images/content_img2.png) no-repeat right top; background-size:150px;}
.text_box:nth-last-child(1):after{content:""; display:block; width:170px; height:280px; position:absolute; right:0; top:-20px; background:url(../images/content_img3.png) no-repeat right top; background-size:170px;}
.text_box:nth-last-child(1) p{padding:0 200px 0 280px;}
.text_box:nth-last-child(1) h4{color:#ed3140;}

 

---

# 5-4. CSS 애니메이션 고도화 구현하기

1. 애니메이션 동작이 끝난 후 텍스트가 나오게 하기 위해 transition-delay 속성을 지정한다. 앞에서 지정한 #container .content이 transition-delay의 시간을 고려해야 하므로 시간차를 둔다.

#container .content.this .conbox .content_wrap{padding:30px 50px 50px 50px; opacity:1; transition:all 1.7s; transition-delay:.8s;}

 

---

# 회고

 

일단 다 따라하고 나중에 페이지 내용을 내 스타일로 수정해볼까 고민중이다.

근데 딱히 넣을만한 내용이...없음

다음이 도서 소개 페이지인데 내가 최근에 읽은 책이나 넣을까..?