분류 전체보기

[CSS] MDN 과제: 학교 커뮤니티 홈페이지 만들기 ("Assessment wanted for Typesetting a community school homepage")

Give the first paragraph after each heading in the a little bit of text-indentation, say 20px. section>p{ text-indent: 20px; } Make it so that external links have the external link icon inserted next to them. section p a{ background: url("external-link-52.png") no-repeat 100% 0; background-size: 1em; padding-right: 1.2em; } flex flex 컨테이너 : 전체 공간 설정 아이템 : 배치 형태에 관여 inline 요소처럼 내용물 만큼의 공간만 차지 컨테이..

[CSS] MDN CSS 정리3

기본적인 텍스트 및 글꼴 스타일링 글꼴 스타일링 색상 color : 요소의 내용 색상 설정 텍스트, text-decoration의 밑줄&오버라인 모든 CSS 색상 단위 사용 가능 p { color: red; } 글꼴 종류 font-family : 글꼴 지정 브라우저는 액세스하는 컴퓨터가 그 글꼴을 사용할 수 있을 경우에만 적용 그렇지 않을 경우 default font 사용 p { font-family: arial; } 웹 안전 글꼴 가장 많이 사용하는 운영체제의 대부분에서 사용 가능 이름 유형 참고 Arial sans-serif Helvetica로 대체 Courier New monospace 고정폭 로마자, Courier의 대체버전 Georgia serif MS Times New Roman serif 타..

[CSS] MDN 과제: 멋진 박스 만들기 (Assessment wanted for A cool-looking box)

This is a cool box html { font-family: sans-serif; } /* Your CSS below here */ p { /* box */ width: 200px; height: 200px; margin: auto; /* 좌우 가운데 설정 */ border-radius: 10px; border: 1px solid darkred; background-color: red; background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 100%); box-shadow: inset 2px 2px 3px rgba(255,255,255,0.6), inset -2px -2..

[CSS] MDN 과제: 이쁜 레터 모양 종이 만들기 (Assessment wanted for Creating fancy letterheaded paper)

Awesome Company The Awesome Company 102-112 Frail Bend Bridge The Dwindlings Little Hornet HX3 9ZQ UK * { box-sizing: border-box; } html { font-family: sans-serif; } body { margin: 0; background: #ccc; } article { width: 210mm; height: 297mm; margin: 20px auto; position: relative; } address { position: absolute; bottom: 8mm; right: 20mm; } h1 { position: absolute; top: 12mm; left: 20mm; width: 1..

[CSS] MDN 과제: 기본적인 CSS이해

Chris Mills 50 My Street The Town Gray Peach UK ZO50 1MU Tel: 01234 567 890 Mail: chris@nothere.com Editing, writing, and web development services /* General styles - put these straight into your stylesheet */ body { margin: 0; } html { font-family: 'Helvetica neue', Arial, 'sans serif'; font-size: 10px; background-color: #ccc; } .card { width: 35em; height: 22em; margin: 5em auto; background-co..