댓글
-
박스모델이 중요한것이라는것을 명심하겠습니다. 2020.10.04 완료 -
20200927 완료 -
20200719 감사합니다! -
완료
-
테두리 border 겨울에 입는 padding 장사는 margin
width, height 는 inline에 적용안됨.
오늘도 감사합니다. ^^! 200603 -
ㅋㅋㅋ 술안주로 비유한거 재미있네요!
-
완료
-
술안주 패딩ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
-
그래서 게임도 접시였나...
-
완료
-
2020. 1. 6 수업완료
-
2020.01.05
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
p, a {
border:10px solid red;
padding:20px;
margin:40px;
width:100px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Animi, sit?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Animi, sit?
</p>
안녕하세요.<a href="hppts://a.com">생활코딩</a>입니다.
</body>
</html>
<body>
</body>
</html> -
clear~
-
완료
-
191002 수강완료
-
수강완료! 인라인에는.. width 와 height이 적용되지 않는다 ...
-
수강완료 - 2019/8/29
-
수강완료
-
CSS3을 초보들에게 너무 유익한 수업내용 입니다 감사합니다
-
20190729 완료
-
190723 - 수업완료!!
-
마지막 이야기 재밌어요 ㅋㅋㅋㅋ
-
수업완료 -
완료 감사합니다
-
완료 -
2019-03-02 완료
-
박스 모델(box model)
각 태그들이 웹 페이지에 표현될 때
사각형의 형태(box)로 그 태그의 부피감을 결정한다
박스모델 관련 속성들
width, height, margin, padding, display, border ...
- margin : 태그와 태그 사이의 여백.
- padding : 태그와 내부 컨텐츠 사이의 여백
border: width style color; 순서로 값 지정
* inline element는 width, height 값이 무시된다. -
완료!
-
중간 중간 드립에 공중제비 돌았습니다.
-
완료했습니당
-
완료
-
하하하 too
-
비트박스
-
정말 감사합니다
-
감사합니다!
-
감사합니다. 열심히 따라가겠습니다
-
강의가 정말 좋습니다. 머리에 쏙쏙 들어옵니다. 감사합니다!
-
박스박스박스박스 겨울에 안에 입는 padding 술안주와 접시사이의 간격 패딩
접시와 접시사이 마진 -
10일차 공부 감사합니다
-
이고잉님 마지막 예제가 재밌어요.. 하하하
접시 안에 든 음식에 비해 접시가 크다. 이거 패딩이 왜 이렇게 커? (padding : 술 안주(컨텐트)와 접시 테두리 사이의 간격)
접시와 접시 사이의 간격이 너무 떨어져 있어서 다른 접시를 놓기에는 식탁이 좁다. 접시와 접시 사이의 간격을 줄이려면? 마진 좀 줄여~ (margin : 엘리먼트와 엘리먼트 사이의 간격) -
좋은 예 감사합니다.
이해가 잘됩니다. -
감사합니다.
-
<!--박스모델-->
<!--마진 : 테두리와 테두리의 간격-->
<!--패딩 : 안의 내용과 테두리간의 간격-->
<!--인라인 엘리먼트는 width와 height가 적용이 안된다.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p, a{
border: 10px solid red;
padding: 20px;
margin: 40px;
width: 1000px;
height: 100px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, repudiandae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, repudiandae.
</p>
안녕하세요. <a href="#">MunBe</a>입니다.
</body>
</html> -
이고잉님 유우머감각까지 !!! -
박스모델 항상 헷갈렸는데...술 안주에서 빵터짐...! 이제 확실히 기억할 것 같아요~!^^
-
마지막에 글이 기억에 남네요ㅋㅋㅋ
술안주가 나왔는데 패딩이 너무 넓어~ㅋㅋㅋ -
재밌어요! 이고잉님 ㅎㅎ 눈높이교육감사해요 'ㅡ'ㅎㅎ
-
박스모델!
테두리는 중요! 박스모델의 기준점.
패딩 ㅋㅋ잠바 padding ㅋㅋㅋ
장사를 하면...마진이 남는다 마진 ㅋㅋㅋㅋ
테투리와 다른 요소들 사이의 간격 떨어짐
p태그는 블럭레벌 엘리먼트. 블럭은 화면전체를 사용함.
인라인 레벨 엘리먼트는 다르게 작용함. a태그.... width , height 값 무시됨. -
박스모델 : 태그의 부피와 태그간의 여백등을 결정.
- 마진 : 태그와 태그 사이의 여백.
- 패딩 : 태그와 태그를 감싸는 테두리 사이의 여백
*인라인 엘리먼트는 width, height 값 무시
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
