박스모델의 속성
컨텐츠(Content) : 박스의 내용물이다. 텍스트와 이미지가 나타나는 부분
패딩(Padding) : 컨텐츠 주위의 영역이다. 투명하다.
경계(Border) : 패딩과 내용물을 감싸는 경계이다.
마진(Margin) : 경계 주위의 영역이다. 투명하다.
<!DOCTYPE html>
<html>
<body>
<p style-"border-style: none">none</p>
<p style="border-style: dotted">dotted</p>
<p style-"border-style: none">dashed</p>
<p style-"border-style: none">solid</p>
<p style-"border-style: none">double</p>
<p style-"border-style: none">groove</p>
<p style-"border-style: none">ridge</p>
<p style-"border-style: none">inset</p>
<p style-"border-style: none">outset</p>
</body>
</html>
한 줄에서 모든 변에 대한 값을 지정하는 방법
margin : 10px 20px 30px 40px;
top right bottom left
링크 스타일
a:link { color: red; } a:link - 방문되지 않은 링크의 스타일
a:visited { color:green; } a:visited - 방문된 링크의 스타일
a:hover { color:blue; } a:hover - 마우스가 위에 있을 때의 스타일
a:active { color:yellow; } a:active - 마우스로 클릭되는 때의 스타일
레이아웃이란?
웹페이지에서 HTML 요소의 위치, 크기 등을 결정하는 것
블록(block)요소 : 화면의 한줄을 전부 차지한다.
ex) <h1>, <p>, <ul>. <li>, <table>, <pre>, <div>
인라인(inline)요소 : 한줄에 차례대로 배치된다.
ex) <a>, <img>, <strong>, <em>, <br>
float 속성 : 하나의 콘텐츠 주위로 다른 콘텐츠들이 물처럼 흘러가는 스타일 지정
float의 용도 : 레이아웃에 많이 사용된다.
clear 속성 : float 속성을 중단할 때 사용된다.
clear:both로 지정하면 빈칸을 채우지 않고 정상적으로 배치된다.
'Programming > Web' 카테고리의 다른 글
| Web 글자크기, 이미지 가져오기, 마우스 이미지 바꿈 ( eclipse ) - 2 (0) | 2020.08.18 |
|---|---|
| Web (apache tomcat) 시작 (Eclipse) - 1 (0) | 2020.07.27 |
| 웹서버응용 정리3 (0) | 2020.07.03 |
| 웹서버응용 정리2 (0) | 2020.07.03 |
| 웹서버응용 정리 1 (0) | 2020.07.02 |
