메뉴 건너뛰기

2020.10.08 01:20

실습문제 5장 9번

조회 수 211 댓글 1

<!DOCTYPE html>

<html>

<head>

<title>카푸치노 만들기</title>

<style>

div {

display :inline-block;

border : 3px solid brown;

width :22em;

}

ol {

list-style-type : none;

}

li {

position : relative;

right : 15px;

}

span {

color : olivedrab;

padding : 10px;

font-size : 3em;

}

p {

display : inline-block;

width: 15em;

}

</style>

</head>

<body>

<h3><b>

카푸치노

</b>

</h3>

<hr>

<div>

<b>

<h3 style = "text-align : center;">

카푸치노 만드는 순서

</h3>

</b>

<ol id=“style”>

<li><span><b>1.</b></span>

<p>

에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.

</p>

</li>

<li><span><b>2.</b></span>

<p>

적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.

</p></li>

<li><span><b>3.</b></span>

<p>

몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.

</p></li>

<li><span><b>4.</b></span>

<p>

컵에 계피 막대를 꽂고 커피를 부은후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.

</p></li>

</ol>

</div>

</body>

</html>

첨부 파일에서 1. 옆에 바로 글씨가 나오는게 아니라 약간 올라가서 나오는데 해결방법이 있나요?

 

?
  • ?
    관리자 2020.10.09 01:17
    잘 만들었네요.
    만드는 방법이 워낙 다양할 수 있는데 질문한 분의 코드상에서
    옆에 바로 글씨가 나오는게 아니라 약간 올라가서 나오게 하기 위해서는
    1) <span>태그로 둘러쌓인 숫자를 절대 위치로 만들고,
    2) <span>의 패팅을 0으로만들고
    3) 뒤에 따라오는 <p> 부분의 왼쪽 마진을 크게 주어 숫자 뒤에서 부터 텍스트를 출력하면 됩니다.

    다음과 같이 3부분에 손을 봐보았습니다.
    <!DOCTYPE html>

    <html>

    <head>

    <title>카푸치노 만들기</title>

    <style>

    div {

    display :inline-block;

    border : 3px solid brown;

    width :22em;

    }

    ol {

    list-style-type : none;

    }

    li {

    position : relative;

    right : 15px;

    }

    span {
    position:absolute; /* 이부분 추가(1) */

    color : olivedrab;

    /*padding : 10px;*/ /* 이부분 삭제(2) */

    font-size : 3em;

    }

    p {

    display : inline-block;

    width: 15em;
    padding-left:50px; /*이 부분 추가 (3)*/

    }

    </style>

    </head>

    <body>

    <h3><b>

    카푸치노

    </b>

    </h3>

    <hr>

    <div>

    <b>

    <h3 style = "text-align : center;">

    카푸치노 만드는 순서

    </h3>

    </b>

    <ol id=“style”>

    <li><span><b>1.</b></span>

    <p>

    에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.

    </p>

    </li>

    <li><span><b>2.</b></span>

    <p>

    적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.

    </p></li>

    <li><span><b>3.</b></span>

    <p>

    몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.

    </p></li>

    <li><span><b>4.</b></span>

    <p>

    컵에 계피 막대를 꽂고 커피를 부은후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.

    </p></li>

    </ol>

    </div>

    </body>

    </html>

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18177
302 9장 연습문제 4번 1 초보 2020.10.16 1007
301 303p. 12번에 2질문 드립니다 1 2020.10.15 96
300 302p. 7번에 (2)번 문제 2020.10.15 73
299 264p 문의 1 . 2020.10.15 65
298 282p. 예제 6-14 출력 문의 드려요 1 file . 2020.10.15 82
297 z-index 관련 질문 번역봇 2020.10.13 63
296 2장 인라인프레임만들기 예제 2-24 다시질문해요 2 고수가되고싶어요 2020.10.11 89
295 실습 문제 4장 4번 문제에 대해서 질문드립니다. 1 ㅇㅇ 2020.10.11 121
294 2장 인라인프레임만들기 예제 2-24 file 고수가되고싶어요 2020.10.10 75
293 연습문제 5장 10번 문제 질문드립니다. 1 . 2020.10.08 246
» 실습문제 5장 9번 1 file 2020.10.08 211
291 연습문제 3장 p.155 5번 문제 1 열심히해보자 2020.10.07 412
290 연습문제 4장 8번문제 1 file 도라에몽 2020.10.02 252
289 실습문제 4장 8번 1 2020.09.27 449
288 이거 1장 부터 시작해서 답을 어디서 확인해야 되죠? 2020.09.27 222
287 6장 실습문제 2번 3번문제 초보 2020.09.16 146
286 p.583 4번 질문드립니다. 6 열심히 공부하는 독자 2020.09.14 287
285 p.524 쿠키 질문드립니다. 2 열심히 공부하는 독자 2020.09.12 71
284 예제 13-9 질문드립니다. 4 열심히 공부하는 독자 2020.09.12 100
283 page 46 마우스 올릴시 이미지 출력 2 file 공부중 2020.09.10 318
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로