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

project2 - 문단 쓰기와 한줄 띄우기

프로젝트2 에서는 문단 과 한줄 띄우기 방법을 코딩해본다.

<!DOCTYPE html>

<head>

  <title>Mini Project2</title>

</head>

<body>

  <p>

    P 태그를 사용해서 문단을 만들수 있다.HTML에서는 별도의 공백을 준다고 해서

    띄어쓰기가 되지 않는다. 띄워쓰기를 할려면 <br/> 태그를 사용해야 한다.

    <br/>태그는 닫힘태그로 하나만 써주어도 동작한다. 열림 태그로 표시해도 되지만

    html태그의 일관성을 위해서 닫힐때는 "/" 를 닫힘 태그를 해주는 것이 보기는 좋다.

  </p>

</body>

</html>

브라우저에서 코드를 실행한다.

p 태그를 사용하면 P태그 사이의 내용들이 문단으로 보여진다.

br 태그는 띄어쓰기를 위해서 사용된다. 
html 에서는 공백이 띄어쓰기 가 아니기에 별도로 br태그를 써 줘야 한다.
br 태그를 쓸때는 닫힘태그 하나만 써도 되며, 코드 직시성을 위해 </br> 로 표기해주면 좋다.

p와 br 태그만을 썼을 뿐인데, 웹페이지에 그럴듯한 텍스트 기사를
써내려 갈 수 있게 되었다.


댓글

이 블로그의 인기 게시물

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

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

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