프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...)
및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다.
바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다.
<div>태그는 브라우저에서 보여지는 시각적 기능은 없다.
단지, 구역을 나누는 역할을 한다. 코드를 만들어 본다.
및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다.
바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 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 very low temperatures (below 2 °C or 35 °F).
It becomes more malleable as its temperature increases.
</p>
</div>
</body>
</html>
두개의 문단을 각각 div 태그 사이에 넣었다. 이제 두개의 문단은 구별이 된다.
각자 독립적으로... 물론 브라우저에 나타난 시각적 효과는 없다.
그럼, div 태그로 나뉘어진 두 문단에 배경색을 설정해 본다.
HTML 언어 이외에 디자인 부분을 담당하는 또 하나의 언어가 있다.
바로 CSS 이다. Castcading Style Sheets 의 약자로 HTML 은 웹 문서의 뼈대를 잡는 역할에 충실하고 CSS 는 디자인에 초점을 맞추는 프로그래밍 언어이다.
HTML 로 글자와 이미지만 코딩하고, CSS를 여러형태로 바꾼다면
내용은 동일하지만 디자인은 확연히 다른 웹 사이트를 구성 할 수 있다.
여기서는 HTML로 코딩된 두개의 문단의 배경색을 바꾸어본다.
CSS 는 HTML 태그에 속성값 처럼 줄 수 있다.
style = "속성이름 : 속성값;"
의 syntax (구문) 를 가지고 있다.
CSS 속성의 이름들은 대체적으로 영어 단어의 본뜻을 가지고 있다.
하기 두 문단에서는 background-color 배경색 이란 속성이름에
yellowgreen 과 royalblue 라는 속성값을 설정했다.
<div>
<p style="background-color: yellowgreen;">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 style="background-color: royalblue;">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 very low temperatures (below 2 °C or 35 °F).
It becomes more malleable as its temperature increases.
</p>
</div>
위 코드를 *.html 파일 형식으로 저장하고, 브라우저에서 실행 해보면
두개의 문단에 배경색이 잘 적용되었음을 확인 할 수 있다.
div 태그를 사용해서
구역(섹션) 을 나누었다. 구역별로 디자인 과 배치등을 쉽게 하기 위해서 이다.
CSS 의 style 속성을 사용해서
디자인 을 div 구역별로 세팅 했다.
이렇게 조금 더 진화한 웹 페이지가 만들어진다.
댓글
댓글 쓰기