외부 스타일시트 사용 (Using external stylesheets)

출처: 외부 스타일시트 사용 Using external stylesheets #hopper-pic { width: 100px; float: left; margin-right: 6px; margin-bottom: 6px; } #hopper-links { float: right; width: 30%; margin-left: 10px; } All about Hopper Cool links Here’s how you can learn more about Grace Hopper, and everything she’s inspired. Wikipedia article Grace Hopper on Letterman Grace Hopper conference I’m Hopper! I was named after Grace Hopper, one of the first American computer scientists and an admiral in the Navy. Grace Hopper invented the term “debugging” for fixing computer bugs, after finding a moth in a computer, plus she invented the first compiler. Contact me for more info at 1-800-HOPPER. Using external stylesheets /*body { […]

inline CSS 스타일 사용 (Using inline CSS styles)

출처: inline CSS 스타일 사용 Using inline CSS styles body { font-family: sans-serif; } h2 { color: rgb(230, 107, 0); } Salmon Mania What’s in a name? The term “salmon” comes from the Latin salmo, which in turn may have originated from salire, meaning “to leap”. That makes a lot of sense, because salmon are known for leaping out of the water! I saw one leap just the other day, in an Oregon river. Predators! Bears Beavers Parasites Humans Using inline CSS styles body { font-family: sans-serif; } h2 { color: rgb(230, 107, 0); } Salmon Mania What’s in a name? The term “salmon” comes from the Latin salmo, which […]

CSS 우선순위 (CSS specificity)

출처: CSS 우선순위 CSS specificity p { font-family: sans-serif; color: orange; } p.info-paragraph { color: blue; background-color: orange; } .important { background-color: yellow; } #main-paragraph { font-weight: bold; color: green; } This is a snippet from the longer Wikipedia article. The Pacific Ocean The Pacific Ocean is the largest of the Earth’s oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by Asia and Australia in the west and the Americas in the east. At 165.25 million square kilometers (63.8 million square miles) in area, this largest division of the World Ocean […]

CSS 동적 가상클래스 (dynamic pseudo-classes)

출처: CSS 동적 가상클래스 CSS dynamic pseudo-classes body { font-family: sans-serif; } h1, h2 { font-family: cursive; } a:hover, a:active, a:focus { background-color: rgb(255, 0, 251); } Famous paintings You can learn more about these famous paintings on Khan Academy. Baroque Velázquez, Las Meninas Caravaggio, Calling of St. Matthew Rembrandt, Night watch Mannerism Parmigianino, Madonna of the Long Neck El Greco, View of Toledo Abstract Picasso, Guernica Braque, The Portuguese CSS dynamic pseudo-classes body { font-family: sans-serif; } h1, h2 { font-family: cursive; } a:hover, a:active, a:focus { background-color: rgb(255, 0, 251); } Famous paintings You can learn more about these famous paintings on Khan Academy. Baroque Velázquez, Las Meninas […]

CSS 선택자 그룹핑 (Grouping CSS selectors)

Grouping CSS selectors body { font-family: sans-serif; } h1, h2 { font-family: cursive; } 출처: CSS 선택자 그룹핑 Famous paintings You can learn more about these famous paintings on Khan Academy. Baroque Velázquez, Las Meninas Caravaggio, Calling of St. Matthew Rembrandt, Night watch Mannerism Parmigianino, Madonna of the Long Neck El Greco, View of Toledo Abstract Picasso, Guernica Braque, The Portuguese Grouping CSS selectors body { font-family: sans-serif; } h1, h2 { font-family: cursive; } Famous paintings You can learn more about these famous paintings on Khan Academy. Baroque Velázquez, Las Meninas Caravaggio, Calling of St. Matthew Rembrandt, Night watch Mannerism Parmigianino, Madonna of the Long Neck El Greco, View […]

CSS 하위 선택자 (descendant selectors)

CSS descendant selectors .orange { background-color: orange; } .yellow { background-color: yellow; } .purple { background-color: purple; color: white; } p .purple { color: purple; background-color: transparent; } ul.spacey li strong { line-height: 2em; } 출처: CSS 하위 선택자 Carrot Facts Colors that carrots come in: Orange Purple Yellow Did you know? Carrots were purple before the 17th century, but then were cultivated by Dutch farmers until they became the sweet orange carrots that we know today. CSS descendant selectors .orange { background-color: orange; } .yellow { background-color: yellow; } .purple { background-color: purple; color: white; } p .purple { color: purple; background-color: transparent; } ul.spacey li strong { line-height: […]

CSS class와 tag 선택자 결합 (Combining CSS class and element selectors)

출처: CSS class와 tag 선택자 결합 Combining CSS class and element selectors p { font-family: monospace; } #donut-header { font-family: “Garamond”, “Palatino”, serif; } .fact { border-top: 1px solid rgb(222, 222, 222); border-bottom: 1px solid rgb(222, 222, 222); padding-top: 6px; padding-bottom: 6px; } .warning { background-color: red; color: white; } p.warning { border: 5px solid orange; } Donut Nutrition Facts Warning: Eating too many donuts can be bad for your health. Just ask Winston. A donut is a type of deep fried dough confectionery or dessert food. The doughnut is popular in many countries and prepared in various forms as a sweet snack that can be homemade or purchased in […]

CSS class 여러 개 사용 (Using multiple CSS classes)

출처: CSS class 여러 개 사용 Using multiple CSS classes p { font-family: monospace; } #donut-header { font-family: “Garamond”, “Palatino”, serif; } .fact { border-top: 1px solid rgb(222, 222, 222); border-bottom: 1px solid rgb(222, 222, 222); padding-top: 6px; padding-bottom: 6px; } .warning { background-color: red; color: white; } Donut Nutrition Facts Warning: Eating too many donuts can be bad for your health. Just ask Winston. A donut is a type of deep fried dough confectionery or dessert food. The doughnut is popular in many countries and prepared in various forms as a sweet snack that can be homemade or purchased in bakeries, supermarkets, food stalls, and franchised specialty outlets. Did […]

CSS float, clear (floating elements)

출처: CSS 요소에 floating 적용 CSS floating elements #hopper-pic { width: 100px; float: left; margin-right: 6px; margin-bottom: 6px; } #hopper-footer { background-color: rgb(232, 232, 232); padding: 6px; clear: both; } #hopper-links { float: right; width: 30%; margin-left: 10px; } Cool links Here’s how you can learn more about Grace Hopper, and everything she’s inspired. Wikipedia article Grace Hopper on Letterman Grace Hopper conference I’m Hopper! I was named after Grace Hopper, one of the first American computer scientists and an admiral in the Navy. Grace Hopper invented the term “debugging” for fixing computer bugs, after finding a moth in a computer, plus she invented the first compiler. Contact me for […]