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

ins 와 del 태그 사용법

<ins> 와 <del> 태그 사용법 을 정리해봅니다.

ins 는 insert 의 약자.

del 는 delete 의 약자 이다.

웹 문서에서 새롭게 삽입(추가)된 글 과 기존 글이 삭제된 상태임을 텍스트에 표식 해줄때 사용하는 태그 이다. 해당 태그들은 대형 포털 사이트 보다는 나무위키 등의 텍스트 기반의 웹 백과 사전등에서 자료가 갱신될때 주로 사용되는 모습을 보인다.

각 태그의 사용법은 

<ins>추가된 글자</ins>

<del>삭제된 글자</del>

하기처럼 문단에 각각 ins, del 태그를 적용한다.


그럼 결과는 브라우저에서 하기처럼 나온다.

추가됨을 나타내는 글자들에는 밑줄이 <ins>

삭제됨을 알려주는 글자들에는 중간에 취소선이 생긴다.

위에서 말한 것 처럼, 이력을 관리하는 텍스트 기반의 웹 문서에는 유용하게 사용될 수 있다.



댓글

이 블로그의 인기 게시물

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

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

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