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

Ul 태그 사용법 과 예제

웹 페이지 에서 목록(list) 등을 표현할때 사용되는 태그 이다.
Ul 은 unordered list 의 약자로 순서가 없는 리스트를 뜻한다.
Ul 태그로 만든 리스트 웹페이지 예제를 보면 하기처럼 나온다.

Ul 태그 사용법

리스트 목록 앞에 점모양의 기호가 들어가 있다. 기본 값이다.
Ul 태그의 속성을 변경하면 이 기호의 형태도 수정할 수 있다. 하지만 여기서는 Ul 태그 자체의 기능만 살펴보자.
위 결과를 만들기 위한 예제코드는 다음과 같다.

Ul 태그 사용법2

Body 태그 안에 Ul 요소를 만들어 보았다.
Ul 태그는 혼자서만 사용해서는 리스트를 만들 수는 없고, 자식 관계에 놓인 li 태그를 사용해야 된다. li 는 짐작하듯 list 의 약자 이다.


해당 코드는
ul 순서가 없는 리스트를 만든다
li 리스트 아이템(항목) 을 열거한다.
의 순으로 웹페이지가 이해하게된다.


이렇듯 li 태그는 ul 태그와 쌍으로 같이 구현되게 된다.
ul 이외에도 ol(ordered list) menu 등에서도 사용이 된다.
감사합니다.





댓글

이 블로그의 인기 게시물

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

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

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