댓글
-
그래서 게임도 접시였나... -
완료
-
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 값 무시 -
레이아웃의 시작이라고 볼 수 있는 단계인 박스모델입니다.
댓글보신 분 중 이해가 안가신다면 이 챕터 꼭 이해하셔야 나중에 안헤맵니다.
정리도 잘하셔서 복습만 해도 쉽게 이해되게 해놓으셨네요. -
감사영!
-
5.19.
-
막판에 빵 터졌어요// -
^^ 패딩.... 마진... 강의 감사합니다. 강의 듣다가 순간 빵 터졌네요~ 감사합니다~
-
안주 비유로 완전히 이해할 수 있었습니다. ^^ -
박스모델 : 태그의 부피와 태그간의 여백등을 결정.
- 마진 : 태그와 태그 사이의 여백.
- 패딩 : 태그와 태그를 감싸는 테두리 사이의 여백
*인라인 엘리먼트는 width, height 값 무시 -
고맙습니다!
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
