07.28 네이버 블로그 카피캣_2

네이버 블로그 카피캣

실습 코드 깃허브 링크

네이버 블로그 우측영역 실습

• 계속 선택자를 잘못적어 css가 적용이 안되는 실수를 하고있다. id와 class를 꼭 구분하자!!
• 로그인 버튼 부분은 버튼 전체가 cursor가 pointer가 되고, 옆부분을 눌러도 작동할 수 있도록 display:block으로 설정하였다.
• 아이디 비밀번호찾기 / 회원가입 부분은 flex를 이용하여 좌우 배치를 하였다.

• 공지사항 부분을 코딩하다가 말줄임 표시를 어느 영역에 설정해야할지 기억이 잘 나지않아서 참고할 만한 사이트를 찾아보았다.
  참고사이트
  
  
  CSS에서 ellipsis('...')를 처리하는 방법
  
  
• 한줄라인 글자수 제한
  *한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다.

<div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다   </div>
  <style>
 .txt_line {
      width:200px;
      padding:0 5px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
  }
  </style>

• Block레벨 테그에서만 적용됨.
• overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
• text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
• white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

• 강의에서는 아이콘을 따로 구해서 작성하였는데, 예전에 배웠던 background-position을 복습할겸 이미지를 네이버에서 구해서 position을 이용하여 아이콘 배치를 해봤다.
  
  
• CSS 스프라이트 이미지
  참고사이트
  • 웹페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화 해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법이다.
  • 원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들 처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 이미지의 특정 부분만 노출되도록 하는 것이다. 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄여줄 수있는 효과를 얻을 수 있다.

학습소감

강의를 듣고 혼자 코딩을 해보면서 css에서 말줄임표를 사용하는 방법이나, 스프라이트 이미지를 활용하는 방법에 대해서 다시 공부하는 시간이었다. 말줄임표에 대해서 찾아보다가 실제 웹사이트를 운영하는 실무에서도 프론트엔드쪽에서 말줄임표 코드를 사용하는지, 혹은 백엔드쪽에서 시스템으로 관리하는지 문득 궁금해졌다. 그리고 잊고 있었던 스프라이트 이미지에 대해서도 자료를 찾아보았다. 이미지의 포지션 속성을 이용하여 특정부분만 노출시켜 웹피이지의 로딩속도를 줄여주는 스프라이트 이미지에도 단점이 있었다. 스프라이트 이미지의 시작점과 크기에 대한 정보가 필요하고 적용시킬 이미지의 직접 크기를 구해야 한다는 것이다. 그리고 그래픽툴을 열고 픽셀값을 확인 하는 작업을 해야한다. 용량을 줄여주는 스프라이트 이미지이지만, 상황에 따라 이미지를 따로 제작하여 넣기도 한다는 것을 유념해야할 것 같다.