실습 코딩의민족

 

 

 

위의 도면대로 스타일링 해주면

 

이제 이녀석을 해주자

html만 있으면 역시 멋이 안나

div 태그는 가로길이를 전체를 차지한당

하지만 우리가 원하는 건 300px이기 때문에

width 300px주기

그리고 가운데로 맞추기 위해서

이제 글자들을 스타일링 해보자

<h3>코딩에 빠진 닭</h3>
            <p>주머니가 가벼운 당신의 마음까지 생각한 착한 가격</p>
            <a href="#">바로 결제</a>

 

도면 자료들

그래두 안이쁘다

다시 위의 도면을 보면서 여백들을 설정해주자

h3와 p는 이미 margin이  적용되어 있다

각각 32px 16px 로 적용 되어있는데 내가 원하는건 h3태그 위에 0px  아래 20px p태그 위에 0px 아래에 16px 이므로

margin들을 설정해준다

이렇게 내가 원하는 만큼 여백을 준다 아까 위에

border-box로 설정되어 따로 계산할 필요가 없음

이제 padding 을 넣어줘야하는데 위아래 좌우 모두 20px 을 넣어준다

그랬더니 사진도 튀어나온다 그래서 .food에 하면 사진까지 패딩을 먹기때문

그래서 아까

  이렇게 info로 나눠놓았다

이러면 정상적으로 info로 묶은 부분에만 padding 20px 이 적용이 된다

도면처럼 꼭짓점을 10px 둥글리라고 해서 border-radius를 넣어주었다

그랬더니 아래만 둥글려지고 위에는 똑같다 왜냐하면 사진은 직각인데 바로 아래는 둥근부분이다 이 둥근부분에서 직각인 사진이 튀어나온 것

따라서

튀어나온 부분 숨김처리 overflow: hidden

을 해주면

위에도 둥글게 됩니다

info안의 글자들을 가운데 정렬하기위해

text-align: center를 해줬고 그중 p태그만 가운데 정렬이 아니기 떄문에

p태그는 text-align: left;를 해줍니다

 

이후 다른 메뉴들도 똑같이 추가해줍니다

클래스 이름들은 전부 똑같이 food와 info로 저장되어있기 때문에 css를 똑같이 먹는다

그리고 마지막으로 콘텐츠들간 간격이 50px 이므로

해주면

끝!!!