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

P 태그 사용법

P태그 사용법에 대해서 다루어 본다.
Paragraph 의 약자로 문단을 나타낸다. 문단이라 함은 하기처럼 무언가 설명을 하고자 하는 글들의 덩어리 라고 생각하면 된다.

문단 예제

HTML 웹 문서에서 문단을 만들기 위해서는 P태그를 사용한다.
하기 예제에서는 H1으로 키워드가 되는 제목을 설정하였고, 그 밑에 해당 키워드에 대한 설명으로 문단을 사용한다.

브라우저 상에서 보이는 결과는 하기와 같다.


문단 이기에 글 처음과 마지막에 한줄의 공백이 생긴다.
추가로 하나의 문단을 더 추가하게되면, 결과는 하기와 같다.

요즘 웹 페이지가 사진과 영상 및 여러 애니메이션 효과가 있지만 그래도 가장 기본이 되고 많이 노출이 되는 콘텐츠는 바로 글자 이다. 그렇기에 P태그 는 HTML 태그 중 가장 많이 사용되는 태그 중 하나이다.

감사합니다.


더미 텍스트 사용을 위해서는 Lorem Ipsum
사이트를 사용하면 된다. 더미 텍스트 란 "프린팅 과 타이핑" 등을 위한 의미없는 글자 텍스트를 의미하며, Lorem Ipsum 에서는 그러한 텍스트를 무료로 공급한다.
웹 페이지에 많은 양의 예제 텍스트가 필요하다면 하기 사이트를 적극 활용하자.






댓글

이 블로그의 인기 게시물

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

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

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