자율과제 2 - html,css 연습하기

아래와 똑같은 페이지를 만들어보세요.

배우지 않은 내용

우측 아래 모서리만 둥글게 만들기

모서리를 둥글게 하는 스타일은 border-radius였죠. 하지만 사방이 모두 둥글게 변해지기 때문에 위의 그림처럼 만들 수는 없어요. 이럴 때는, border-bottom-right-radius: 10px를 사용해보세요.
모든 내용을 배우는 것은 불가능합니다.
모든 내용을 알고 있는, 외우고 있는 개발자는 없어요. 자주 쓰는 분야의 몇가지 사용방식만 자연스럽게 암기되어 있는거죠.
네 방향의 모서리를 둥글게 만드는 border-radus 스타일은를 배웠지만, 우측아래만 둥글게 만드는 border-bottom-right-radius는 배운적이 없습니다.
왼쪽 위의 모서리를 둥글게 하려면 어떻게 해야할까요? 우리는 지금부터 추측을 해보고 검색을 해봐야 합니다. 우선 border-bottom-right-radius에서 위치 부분만 바꾸면 되지 않을까요? border-top-left-radius 이렇게요.
결과는 실제로 잘 작동합니다. 이렇게 충분히 추측할 수 있는 선에서는 최대한 시도해보는게 좋아요.
만약, 전혀 감을 잡기 어렵다면? 반드시 구글에서 검색하셔야 합니다. 지금 당장 css 우측 상 모서리 둥글게라고 검색해보세요. 어렵지 않게 방법을 찾으실 수 있습니다.
두번째 검색결과에 바로 표시되는 방법
(추천) 영문검색시 보다 정확하고 많은 자료를 확인할 수 있습니다.

이미지 주소

Could not load image
http://weac.org/wp-content/uploads/2014/06/instagram-logo_100px.jpg

방법

다음 단계를 따라 진행하면 쉽습니다.

[단계1] 어떤 태그, 스타일을 사용할지 나열해봅니다. [단계2] 각 태그, 스타일의 용도와 사용법을 생각해봅니다. [단계3] 스케치하듯 태그만 간단하게 배치해봅니다. [단계4] 코딩을 시작하세요!
아까처럼 스케치하듯 구조부터 짜보기