뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, CSS Tutorial For Beginners 42 - Width & Height

CSS Tutorial For Beginners 42 - Width & Height

#전체
#개발자
#프론트엔드
#css
#css tutorial
#css for beginners
#css tutorial for beginners
#css tutorials
#css basics
#css lesson
#css lessons
#css lesson for beginners
#css lessons for beginners
#cascading style sheet
#web design
#web design tutorial
#web design lesson
#beginner web design tutorials
#basic css
#css and html
#css rules
#width css
#height css
#width and height css
#width property
#height property css
#percentage width css
#dynamic width css
#box model width
00:39width, height 설명을 위한 예제 코드에 대한 설명
01:51'px'(본 강의에서는 static width로 표현)로 block level 엘리먼트에 width, height 값을 적용
02:40'%' 단위로 block level 엘리먼트에 width 값을 적용
04:21Box model은 block level의 element만 적용됩니다. 그러므로 두 개의 Element를 한 개의 행에서 나란히 배치하기 위해 영상에서는 width : 40%; 속성을 "inline-block"이라는 클래스 이름의 div 태그에 적용하는데, 중요한 것은 display: inline; 이 아니라 display: inline-block; 이 되어야 합니다.
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

테크주니어님의 다른 노트는 어때요?

테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS 강의 Ep05_2 - Box Model | border | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
11
00:18
Border에 대한 개념적 설명 : border는 HTML 요소의 테두리를 설정
00:33
Border의 속성 'border-style'에 대한 설명
👍
5
스크랩
테크주니어의 프로필 이미지
테크주니어
의 학습노트

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
8
02:08
본 미니 프로젝트를 잘 활용하는 방법
02:41
웹 사이트 만들기 전 해야할 작업 : (1) 레이아웃 구조 분석하기
👍
1
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기