CSS
CSS
Open
tutorials.org
도움말
로그인
로그인
닫기
아이디
비밀번호
로그인 유지
로그인
후원
공동공부
(
908
명)
박스모델
2016-08-19 00:33:28
봤어요
(
582
명)
이전
다음
댓글
댓글 본문
댓글을 작성하려면 로그인하셔야 합니다.
datsciseol
어제
20210116
답글
티치
20일 전
2020.12.29
답글
SRC
한 달 전
201214
답글
milati
한 달 전
201202 술안주로 빗대서 설명해주시는 거 진짜 웃겨요 ㅋㅋㅋㅋ 감사합니다!
답글
켄드릭
2개월 전
2020년 11월 03일(화) 15:59 1차 수강완료
답글
박병진
3개월 전
박스모델이 중요한것이라는것을 명심하겠습니다. 2020.10.04 완료
답글
콜라
3개월 전
20200927 완료
답글
김성곤
6개월 전
20200719 감사합니다!
답글
jaehyunlee
6개월 전
완료
답글
한강
7개월 전
테두리 border 겨울에 입는 padding 장사는 margin
width, height 는 inline에 적용안됨.
오늘도 감사합니다. ^^! 200603
답글
green diseny
9개월 전
ㅋㅋㅋ 술안주로 비유한거 재미있네요!
답글
리코더
9개월 전
완료
답글
수정
삭제
찡
11개월 전
술안주 패딩ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
답글
수정
삭제
laqah
11개월 전
그래서 게임도 접시였나...
답글
무지개반사
1년 전
완료
답글
수정
삭제
opper
1년 전
2020. 1. 6 수업완료
답글
수정
삭제
Blanc
1년 전
2020.01.05
답글
gogossing
1년 전
<!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>
답글
수정
삭제
jinxiong
1년 전
clear~
답글
수정
삭제
Grigo
1년 전
완료
답글
수정
삭제
alpha
1년 전
191002 수강완료
답글
수정
삭제
태태
1년 전
수강완료! 인라인에는.. width 와 height이 적용되지 않는다 ...
답글
수정
삭제
치디우기
1년 전
수강완료 - 2019/8/29
답글
류석현
1년 전
수강완료
답글
이성현
1년 전
CSS3을 초보들에게 너무 유익한 수업내용 입니다 감사합니다
답글
수정
삭제
FIRE
1년 전
20190729 완료
답글
수정
삭제
다나가
1년 전
190723 - 수업완료!!
답글
chaposaaa@gmail.com
1년 전
마지막 이야기 재밌어요 ㅋㅋㅋㅋ
답글
수정
삭제
김주엽
1년 전
수업완료
답글
옌
1년 전
완료 감사합니다
답글
수정
삭제
노혜주
1년 전
완료
답글
lygon
1년 전
2019-03-02 완료
답글
jello
1년 전
박스 모델(box model)
각 태그들이 웹 페이지에 표현될 때
사각형의 형태(box)로 그 태그의 부피감을 결정한다
박스모델 관련 속성들
width, height, margin, padding, display, border ...
- margin : 태그와 태그 사이의 여백.
- padding : 태그와 내부 컨텐츠 사이의 여백
border: width style color; 순서로 값 지정
* inline element는 width, height 값이 무시된다.
답글
김진욱
2년 전
완료!
답글
수정
삭제
김도윤
2년 전
중간 중간 드립에 공중제비 돌았습니다.
답글
수정
삭제
숨이
2년 전
완료했습니당
답글
김민영
2년 전
완료
답글
수정
삭제
쏘르
2년 전
하하하 too
답글
하하하
2년 전
비트박스
답글
수정
삭제
Meflow
2년 전
정말 감사합니다
답글
SlowStarter
2년 전
감사합니다!
답글
스페이스몽키
2년 전
감사합니다. 열심히 따라가겠습니다
답글
Park
2년 전
강의가 정말 좋습니다. 머리에 쏙쏙 들어옵니다. 감사합니다!
답글
이고잉쌤치킨사줘요
3년 전
박스박스박스박스 겨울에 안에 입는 padding 술안주와 접시사이의 간격 패딩
접시와 접시사이 마진
답글
수정
삭제
푸른하늘
3년 전
10일차 공부 감사합니다
답글
violet
3년 전
이고잉님 마지막 예제가 재밌어요.. 하하하
접시 안에 든 음식에 비해 접시가 크다. 이거 패딩이 왜 이렇게 커? (padding : 술 안주(컨텐트)와 접시 테두리 사이의 간격)
접시와 접시 사이의 간격이 너무 떨어져 있어서 다른 접시를 놓기에는 식탁이 좁다. 접시와 접시 사이의 간격을 줄이려면? 마진 좀 줄여~ (margin : 엘리먼트와 엘리먼트 사이의 간격)
답글
이성준
3년 전
좋은 예 감사합니다.
이해가 잘됩니다.
답글
수정
삭제
오빠는다르다
3년 전
감사합니다.
답글
MunBe
3년 전
<!--박스모델-->
<!--마진 : 테두리와 테두리의 간격-->
<!--패딩 : 안의 내용과 테두리간의 간격-->
<!--인라인 엘리먼트는 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>
답글
최규선
3년 전
이고잉님 유우머감각까지 !!!
답글
더 보기
버전 관리
닫기
2016-08-22 09:05:19
egoing
현재 버전
2016-08-22 09:05:19
선택 버전
선택한 버전으로 복원
버전 비교
graphittie
자세히 보기
토픽
0
모듈
0
코스
0
봤어요
0
댓글
0
명예의 전당
0