프로젝트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

strong 태그 와 b 태그 사용법 과 예제

strong 태그는 말 그대로 강조를 뜻합니다.
strong 태그의 콘텐츠는 웹 페이지에서 굵은 글씨로 표현되며, 웹 브라우저에게 중요한 텍스트 임을 강조하는 의미를 내포한다.
그에 반해, b 태그는 bold 의 약자로 글자가 굵은 볼드체로 보여줍니다. 다만 중요한 텍스트임을 강조하지는 않는다. 그렇기에 브라우저는 단지 해당 텍스트를 그저 볼드체로만 인식한다.
강조됨을 표현하고 싶을때는 strong 태그를 사용해야 한다.


예제 와 결과 화면이다.

strong 태그 와 b 태그 사용법 과 예제

웹페이지 상으로는 둘다 볼드체 이기에 구별이 어렵지만
SEO를 판별하는 로봇 들이나 브라우저 엔진은 strong 콘텐츠(내용) 부분을 강조하는 텍스트 라고 인식 한다.

strong 태그 와 b 태그 사용법 과 예제2

감사합니다.

댓글

이 블로그의 인기 게시물

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

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

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