SlideShare a Scribd company logo
BASIC HTML & CSS
6. box model, shorthand
[ 2017.01.19. Tue ]
To Do
1. Selector, Units
○ selector, px, %, em, rem
2. Box model, Display, Border, Background
○ box-sizing, display, margin, padding
○ border, background
3. Text, Font, Web Font, Position, Float
○ font-family, font-size, font-weight, color, text-decoration, text-shadow
○ position, float, clear
4. Inheritance, Cascading, Effect
○ inherit, box-shadow, transition, transform, animation, keyframes
box model
CSS Box Model
box sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
box-sizing: content-box
box-sizing: border-box
box-sizing: padding-box
box-sizing: padding-box
display
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Display formal syntax
https://developer.mozilla.org/en-US/docs/Web/CSS/display
none | inline | block | list-item | inline-list-item |
inline-block | inline-table | table | table-cell |
table-column | table-column-group | table-footer-group |
table-header-group | table-row | table-row-group | flex |
inline-flex | grid | inline-grid | run-in | ruby | ruby-base |
ruby-text | ruby-base-container | ruby-text-container |
contents
border
https://developer.mozilla.org/en-US/docs/Web/CSS/border
border: 1px solid #ff0000
Border formal syntax
border-width border-colorborder-style
background
https://developer.mozilla.org/en-US/docs/Web/CSS/background
Background formal syntax
● background: red
○ background-color: red
● background: url('img.jpg') no-repeat center top / cover
○ background-image: url('img.jpg')
○ background-repeat: no-repeat
○ background-position: center top
○ background-size: cover
Practice오늘의 연습
@zineeworld
Ryan
http://codepen.io/collection/DzKOkZ/
Facebook / Twitter / Codepen
@zineeworld

More Related Content

What's hot (6)

Presentation on CSS !!Designed By Sunaina
Presentation on CSS   !!Designed By SunainaPresentation on CSS   !!Designed By Sunaina
Presentation on CSS !!Designed By Sunaina
Batra Computer Centre
 
The Box Model [CSS Introduction]
The Box Model [CSS Introduction]The Box Model [CSS Introduction]
The Box Model [CSS Introduction]
Nicole Ryan
 
Lab#8 page layouts
Lab#8 page layoutsLab#8 page layouts
Lab#8 page layouts
Yaowaluck Promdee
 
CSS Boc model
CSS Boc model CSS Boc model
CSS Boc model
Yaowaluck Promdee
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
SiddharthBorderwala
 
WooCommerce: Intro to CSS
WooCommerce: Intro to CSSWooCommerce: Intro to CSS
WooCommerce: Intro to CSS
Rodolfo Melogli
 

Viewers also liked (18)

[Basic HTML/CSS] 7. project
[Basic HTML/CSS] 7. project[Basic HTML/CSS] 7. project
[Basic HTML/CSS] 7. project
Hyejin Oh
 
[CSS Drawing] Basic Tutorial (라이언 그리기)
[CSS Drawing] Basic Tutorial (라이언 그리기)[CSS Drawing] Basic Tutorial (라이언 그리기)
[CSS Drawing] Basic Tutorial (라이언 그리기)
Hyejin Oh
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units
Hyejin Oh
 
javascript3
javascript3javascript3
javascript3
osman do
 
Java script introducation & basics
Java script introducation & basicsJava script introducation & basics
Java script introducation & basics
H K
 
PROGRESS - CSS BASIC
PROGRESS - CSS BASICPROGRESS - CSS BASIC
PROGRESS - CSS BASIC
UKM PROGRESS
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
Nosheen Qamar
 
HTML Dasar : #10 Form
HTML Dasar : #10 FormHTML Dasar : #10 Form
HTML Dasar : #10 Form
Sandhika Galih
 
[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags
Hyejin Oh
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
mohamed ashraf
 
Basic css
Basic cssBasic css
Basic css
Gopinath Ambothi
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction
Hyejin Oh
 
Java script basic
Java script basicJava script basic
Java script basic
Vithushan Vinayagamoorthy
 
Java script basics
Java script basicsJava script basics
Java script basics
Shrivardhan Limbkar
 
[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags
Hyejin Oh
 
Basic Java script handouts for students
Basic Java script handouts for students Basic Java script handouts for students
Basic Java script handouts for students
shafiq sangi
 
Culture
CultureCulture
Culture
Reed Hastings
 
[Basic HTML/CSS] 7. project
[Basic HTML/CSS] 7. project[Basic HTML/CSS] 7. project
[Basic HTML/CSS] 7. project
Hyejin Oh
 
[CSS Drawing] Basic Tutorial (라이언 그리기)
[CSS Drawing] Basic Tutorial (라이언 그리기)[CSS Drawing] Basic Tutorial (라이언 그리기)
[CSS Drawing] Basic Tutorial (라이언 그리기)
Hyejin Oh
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units
Hyejin Oh
 
javascript3
javascript3javascript3
javascript3
osman do
 
Java script introducation & basics
Java script introducation & basicsJava script introducation & basics
Java script introducation & basics
H K
 
PROGRESS - CSS BASIC
PROGRESS - CSS BASICPROGRESS - CSS BASIC
PROGRESS - CSS BASIC
UKM PROGRESS
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
Nosheen Qamar
 
[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags
Hyejin Oh
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction
Hyejin Oh
 
[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags
Hyejin Oh
 
Basic Java script handouts for students
Basic Java script handouts for students Basic Java script handouts for students
Basic Java script handouts for students
shafiq sangi
 
Ad

Similar to [Basic HTML/CSS] 6. css - box sizing, display, margin, padding (20)

Chapter 14: Box Model
Chapter 14: Box ModelChapter 14: Box Model
Chapter 14: Box Model
Steve Guinan
 
Working with the CSS Box Model, syntaxxx
Working with the CSS Box Model, syntaxxxWorking with the CSS Box Model, syntaxxx
Working with the CSS Box Model, syntaxxx
MaggieCasiro
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
Ivano Malavolta
 
Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
How to Create flex box and design box model for a particular section
How to Create flex box and design box model for a particular sectionHow to Create flex box and design box model for a particular section
How to Create flex box and design box model for a particular section
ferdouszihadph
 
CSS-Tutorial-boxmodel
CSS-Tutorial-boxmodelCSS-Tutorial-boxmodel
CSS-Tutorial-boxmodel
tutorialsruby
 
CSS-Tutorial-boxmodel
CSS-Tutorial-boxmodelCSS-Tutorial-boxmodel
CSS-Tutorial-boxmodel
tutorialsruby
 
11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college
shwan it
 
CSS for Developers
CSS for DevelopersCSS for Developers
CSS for Developers
Nascenia IT
 
Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1
Barak Drechsler
 
Lecture-8.pptx
Lecture-8.pptxLecture-8.pptx
Lecture-8.pptx
vishal choudhary
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
Reed Crouch
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
Box Model
Box ModelBox Model
Box Model
Amit Kumar Singh
 
Css Essential
Css EssentialCss Essential
Css Essential
Yue Tian
 
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
CSS: Box Model
CSS: Box ModelCSS: Box Model
CSS: Box Model
utsav singh
 
Web Design & Development - Session 3
Web Design & Development - Session 3Web Design & Development - Session 3
Web Design & Development - Session 3
Shahrzad Peyman
 
CSS3 For Study
CSS3 For StudyCSS3 For Study
CSS3 For Study
ปอ sd
 
Css3 cheat-sheet
Css3 cheat-sheetCss3 cheat-sheet
Css3 cheat-sheet
Fhahry Fhahry
 
Chapter 14: Box Model
Chapter 14: Box ModelChapter 14: Box Model
Chapter 14: Box Model
Steve Guinan
 
Working with the CSS Box Model, syntaxxx
Working with the CSS Box Model, syntaxxxWorking with the CSS Box Model, syntaxxx
Working with the CSS Box Model, syntaxxx
MaggieCasiro
 
Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
How to Create flex box and design box model for a particular section
How to Create flex box and design box model for a particular sectionHow to Create flex box and design box model for a particular section
How to Create flex box and design box model for a particular section
ferdouszihadph
 
CSS-Tutorial-boxmodel
CSS-Tutorial-boxmodelCSS-Tutorial-boxmodel
CSS-Tutorial-boxmodel
tutorialsruby
 
CSS-Tutorial-boxmodel
CSS-Tutorial-boxmodelCSS-Tutorial-boxmodel
CSS-Tutorial-boxmodel
tutorialsruby
 
11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college
shwan it
 
CSS for Developers
CSS for DevelopersCSS for Developers
CSS for Developers
Nascenia IT
 
Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1
Barak Drechsler
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
Reed Crouch
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
Css Essential
Css EssentialCss Essential
Css Essential
Yue Tian
 
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
Web Design & Development - Session 3
Web Design & Development - Session 3Web Design & Development - Session 3
Web Design & Development - Session 3
Shahrzad Peyman
 
CSS3 For Study
CSS3 For StudyCSS3 For Study
CSS3 For Study
ปอ sd
 
Ad

Recently uploaded (20)

ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)
Brian Ahier
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
soulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate reviewsoulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate review
Soulmaite
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
AI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never BeforeAI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never Before
SivaRajan47
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
The case for on-premises AI
The case for on-premises AIThe case for on-premises AI
The case for on-premises AI
Principled Technologies
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)
Brian Ahier
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
soulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate reviewsoulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate review
Soulmaite
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
AI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never BeforeAI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never Before
SivaRajan47
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 

[Basic HTML/CSS] 6. css - box sizing, display, margin, padding