Oh no! It looks like JavaScript is not enabled in your browser.
Reload
LearnFit
YouTube, CSS 강의 Ep05_2 - Box Model | border | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?
-3
+3
🤩
🧐
🤔
😵💫
🤯
00:04
-3
+3
🤩
🧐
🤔
😵💫
🤯
00:04
테크주니어
님의 학습노트
도움돼요
5
CSS 강의 Ep05_2 - Box Model | border | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?
#전체
#개발자
#프론트엔드
#border
#css
#html
#강의
#강좌
#boxmodel
00:18
Border에 대한 개념적 설명 : border는 HTML 요소의 테두리를 설정
00:33
Border의 속성 'border-style'에 대한 설명
01:15
Border의 속성 'border-width', 'border-color'에 대한 설명
01:38
Border의 속성 'border'에 대한 설명
02:02
Border의 속성 'border-radius'에 대한 설명
02:13
Border 속성들에 대해 코드로 실습 시작
05:14
Box Sizing에 대한 개념적 설명: HTML 요소의 너비와 높이를 계산하는 방법을 지정
05:37
HTML요소의 너비와 높이를 계산하는 방법을 변경할 수 있는 'box-sizing' 속성인 'content-box', 'border-box'에 대해 실습 시작
07:49
box-sizing: content-box; 는 기본 컨텐츠 크기에 padding 값과 border 값의 크기가 더해진 형태를 말함
07:59
box-sizing: border-box; 속성이 적용된 엘리먼트의 width, height가 100px 인 경우, border, padding, content 등의 모든 값을 더해서 100px로 보는 형태를 말함
08:31
box-sizing: border-box; 설정할 경우 html크기를 정확하게 알 수 있으므로, 컨텐츠를 배치할 때 레이아웃 크기를 계산할 때 편리
✔ 학습 완료
댓글
0
취소
작성하기
이 학습노트
가 포함된 러닝패스예요.
무료
테크주니어
의 러닝패스
CSS Box Model 이해하기
테크주니어
님의 다른 노트는 어때요?
테크주니어
의 학습노트
React JS #6 이벤트 처리(Handling Events) - 초보자를 위한 리액트 강좌
Video
⏱ 핵심 스탬프
2
개
00:24
이벤트 핸들링 방법 1
01:19
이벤트 핸들링 방법 2
테크주니어
의 학습노트
HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
Video
⏱ 핵심 스탬프
11
개
00:18
이전 학습노트에서 배운 중요포인트 복습 이전학습노트 링크: https://lab.learnfit.ai/note/lBJ43G5hAZ/Ii1rr4uw3C
01:57
HTML 태그를 2가지로 분류
👍
1
다시 보지않기
👋 다양한
인사이트
를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기