반응형 HTML4 [HTML.007] 글자 나타나게 하기(<p>,<h>) [HTML.007] 글자 나타나게 하기(,) 📂 웹 브라우저에 글자를 나타나게 하기 웹 브라우저에 글자를 나타내는 방법은 여러 가지가 있습니다. 그 중에서도, "제목/단락" 을 나타내는 방법에 대해 알아보겠습니다. 🚩 [단락을 나타내자] p 태그 (paragraph, 단락) p 태그는 단락 태그라고도 부릅니다. p 태그를 사용하는 방법은 ~ 사이에 글자를 적는 것입니다. p 태그 다음에 오는 글자들은 한 줄 띄어져서 나타납니다. 위에 있는 코드처럼, 3개의 문장이 전부 한 줄씩 띄어져서 웹 브라우저에 나타났습니다. 🏁 p 태그 퀴즈 1 아래 그림의 HTML 코드를 웹 브라우저에서 실행하면 2줄로 나타납니다. 3줄로 나타날 수 있도록 고쳐보세요. (퀴즈 정답은 아래 더보기 클릭) 더보기 ❓ HTML이 깨져.. 2022. 3. 23. [CSS-015] 레이아웃 배치(Float활용) [CSS-015] 레이아웃 배치(Float활용) HTML 화면 레이아웃을 배치할 때, CSS에서 Float 명령어를 이용하여 배치를 할 수 있습니다. 그 방법에 대해서 아래와 같이 소개합니다. [1] 레이아웃 1 See the Pen CSS-layout01 by wootekken (@wootekken) on CodePen. [2] 레이아웃 2 See the Pen CSS-layout02 by wootekken (@wootekken) on CodePen. [3] 레이아웃 3 See the Pen CSS-layout03 by wootekken (@wootekken) on CodePen. [퀴즈] 레이아웃 4 아래 그림과 같이 레이아웃을 만들어 보세요. (퀴즈 정답은 아래의 "더보기"에서 확인) 더보기 See.. 2022. 2. 25. [JS-017] Input 요소 입력값 연습문제 [1] 원 둘레와 넓이 계산 프로그램 원의 반지름 Input 창에 숫자값을 입력한 뒤, "계산" 버튼을 누르면 아래에 원둘레와 원넓이 값이 나타나는 프로그램입니다. HTML/CSS 부분을 따라 입력한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_1 by wootekken (@wootekken) on CodePen. [2] 피자 추가주문 자동 계산기 위 그림은 체크박스를 누르면 피자 가격에 추가 주문가격이 자동으로 더해지고 체크박스를 해제하면 합계에서 가격이 빠지는 프로그램입니다. 아래 코드에서 HTML/CSS를 따라 코딩한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_2 by wo.. 2022. 2. 18. [JS-015] 스톱워치 *이번 시간에는 HTML/CSS/JS를 이용하여 스톱워치를 만들어 보도록 하겠습니다. [1] HTML은 다음과 같이 코딩을 합니다. 코딩할 양이 적고 아주 쉽습니다. [2] 위의 HTML 코드를 실행한 결과는 다음과 같습니다. [3] 스톱워치를 작동시키기 위해서는 자바스크립트 코드를 작성해야 합니다. 다음과 같이 코딩해 주세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 let seconds = 0; // seconds let centiseconds = 0; // 1/100 seconds let spanSeconds =.. 2022. 2. 8. 이전 1 다음 728x90 반응형
