Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 다형성
- File 클래스
- property
- 설치
- 연산자
- 연락처 프로그램
- Java
- function
- String
- css
- javaservlet
- GUI
- kotlin #return #jump
- jQuery
- 오라클
- Event
- 상속
- jsp
- 윈도우 #단축키
- 데이터베이스
- spring
- html
- 자바
- 코틀린#클래스#상속
- Method
- list
- array
- springframework
- JavaScript
- 파일 입출력
Archives
- Today
- Total
Binary World
<CSS> Box Model 본문
<Box Model>
<05_boxmodel.html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Box Model</title> <style> .c1 { border: 4px solid black; } .c2 { border: 4px dotted red; margin: 10px; } .c3 { border: 4px dashed blue; padding: 10px; margin: 20px; } .c4 { border-width: 10px; border-style: groove; /* solid, dotted, dashed, groove, ridge, inset, none, ... */ border-color: red; } .c5 { height: 100px; border-width: 10px; border-top-style: solid; border-right-style: dotted; border-left-style: dashed; border-bottom-style: double; border-radius: 20px; } </style> </head> <body> <h1>Box Model</h1> <!-- Box Model: 1. margin: 자기 자신과 외부 요소와의 간격 2. border: 테두리선 3. padding: 테두리선과 요소 내부의 컨텐트와의 간격 4. width/height: 컨텐트의 가로/세로 길이 --> <div class="c1">여기는 단락1입니다.</div> <div class="c2">여기는 단락2입니다.</div> <div class="c3">여기는 단락3입니다.</div> <div class="c4">Border 테스트</div> <div class="c5">Border 테스트 2</div> </body> </html> | cs |
<출력화면>
'개발자의 길 > Web Programming' 카테고리의 다른 글
<CSS> Text (0) | 2017.03.30 |
---|---|
<CSS> Margin (0) | 2017.03.30 |
<CSS> Color삽입 (0) | 2017.03.30 |
<CSS> Selector(선택자) (0) | 2017.03.30 |
<CSS> CSS 적용 순서 (0) | 2017.03.30 |
Comments