프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

구글 블로그 대표이미지 설정하기

구글 블로그에서
대표 이미지를 설정 하는 방법을 알아봅니다.

구글 블로그 대표이미지 설정하기

글을 적으면, 자동으로 글에 포함된 첫번째 이미지가 대표 이미지로 설정됩니다.
다른 이미지 로 변경하고 싶다면 어떻게 해야될까요?
여기서는 위 파란색 네모 박스의 이미지를 설정해봅니다.
먼저 이미 대표 이미지가 설정된 글로 이동 후 수정모드 로 들어갑니다.구글 블로그 대표이미지 설정하기2
편집모드를 HTML 로 변경 합니다.
해당 페이지에는 이미 대표이미지 로 설정될 이미지 엘리먼트가 들어있습니다. 

구글 블로그 대표이미지 설정하기3

여러분들이 처음 만들때는 대표이미지 로 사용될 이미지를 '새 글쓰기' 로 업로드 한뒤 html 모드로 변경한뒤 이미지 코드를 확인 해야 합니다.
이미지 소스는 각자 다 다르겠죠.  대표이미지로 설정을 위해서는 해당 코드가 첫줄에만 있어야 합니다.  왜그런지는 정확히 잘 모르겠습니다. 

이미지가 글 내부에서는 보이지 않고, 썸네일 이미지에만 보이기 위해서 
Style 속성값을 줍니다. 이미지를 보이지 않겠다는 뜻 입니다.

구글 블로그 대표이미지 설정하기4

해당 코드를 복사 한뒤,
여러분이 원하는 글로 이동합니다. 
글을 HTML 모드로 변경 뒤, 해당 코드를 위에서 언급한 것 처럼 글 제일 처음에 붙여넣기 합니다.

구글 블로그 대표이미지 설정하기5

첫줄에 붙여넣기 가 완료 되었습니다.
저장 하고 리스트 와 블로그 미리보기에서 확인 해봅니다.
썸네일이 잘  업데이트 되었네요.
구글 블로그 대표이미지 설정하기6
구글 블로그 대표이미지 설정하기7

감사합니다.

댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)