https://www.acmicpc.net/problem/1000

 

1000번: A+B

두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

www.acmicpc.net

문제 

두 정수 A와 B를 입력 받은 다음, A+B를 출력하는 프로그램을 작성하시오

입력

첫째 줄에 A와 B가 주어진다.

출력 

첫째 줄에 A+B를 출력한다 

 

정답

A, B = map(int,input().split())
print(A+B)

'알고리즘' 카테고리의 다른 글

[파이썬/python] 백준 10869번: 사칙연산  (0) 2023.01.08
[파이썬/python]백준 1008번:A/B  (0) 2023.01.08
[파이썬/python]백준 10998번: AxB  (0) 2023.01.08
[파이썬/python]백준 1001번:A-B  (0) 2023.01.08
[파이썬/Python] 백준 2557번: Hello World!  (0) 2023.01.08

https://www.acmicpc.net/problem/2557

 

2557번: Hello World

Hello World!를 출력하시오.

www.acmicpc.net

백준 단계별 풀어보기

print("Hello World!")

'알고리즘' 카테고리의 다른 글

[파이썬/python] 백준 10869번: 사칙연산  (0) 2023.01.08
[파이썬/python]백준 1008번:A/B  (0) 2023.01.08
[파이썬/python]백준 10998번: AxB  (0) 2023.01.08
[파이썬/python]백준 1001번:A-B  (0) 2023.01.08
[파이썬/python]백준 1000번: A+B  (0) 2023.01.08 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>  
  <h1>레드향</h1> # h1~h6까지 있고 h1이 가장 크고 h6이 가장 작다 
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p> # p태그로 묶인 것을 하나의 덩어리로 묶어준다 
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br> 알맹이가 굵고 통통해 식감이 좋으며<br> 비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>  

  <hr>
  <h2>상품 구성</h2>

</body>
</html>

h: h1~h6까지 존재하며 제목을 나타냄 

p: 하나의 텍스트 덩어리로 묶어줌 

em: 기울기

strong: 강조 

br : 줄바꿈 , 닫는 태그가 없음 

hr : 가로줄을 만들어줌 , 닫는 태그가 없음 

b: 강조 strong과의 차이점은 b는 단지 진하게만 표시됨 , 눈으로는 큰 차이는 없지만 기능에서는 차이가 있음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>  
  <ol>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
</body>
</html>

ol: 리스트를 만드는 공간, type을 설정해줌에 따라 1,2,3,4 a,b,c,d로도 나타낼 수 도 있다

ul: 순서가 없는 리스트 

li: 각각의 리스트 내용들 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    table, th, td {
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    th, td { padding:10px 20px; }
  </style>
</head>
<body>
  <img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
  <ol>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
  <img src="images/salad.jpg" width="320">
  <hr>
  <h2>상품 구성</h2>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <tr>
      <th>용도</th>
      <th>중량</th>
      <th>갯수</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>선물용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>35,000원</td>
    </tr>
    <tr>
      <td>선물용</td>
      <td>5kg</td>
      <td>18~26과</td>
      <td>52,000원</td>
    </tr>
    <tr>
      <td>가정용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>30,000원</td>
    </tr>   
    <tr>
      <td>가정용</td>
      <td>5kg</td>
      <td>18~26과</td>
      <td>47,000원</td>
    </tr>   
  </table>
</body>
</html>

table: table을 만들어줌

caption: table 제목 

tr: 행을 만드는 태그 

td: 열을 만드는 태그 

th: 제목

style: 표의 테두리를 만드는 기능 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
  <ol>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
</body>
</html>

img : 이미지 파일, src=' 이미지 파일 경로' alt ='대체 텍스트'  

audio: 오디오 파일, src='오디오 파일 경로' controls = 재생막대 표시

video: 비디오 파일, src=' 비디오 파일 경로' 

 

audio, video태그 속성 

contorls 플레이어 화면에 컨트롤 바를 표시한다 

autoplay 오디오나 비디오를 자동으로 실행한다 

loop 오디오나 비디오를 반복 재생한다 

muted 오디오나 비디오의 소리를 제거한다 

preload  페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩 할 것인지 지정한다. 

사용할 수 있는 값은 auto, metadata,none이다. 기본적으로 preload='auto'가 사용된다. 

width,height: 비디오 플레이어의 너비와 높이를 지정한다. width,height의 값 중에서 하나만 지정 하면 나머지는 자동으로 계산해서 표시해준다. 

poster ='파일이름' 비디오 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다. 

 

하이퍼 링크 만들기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/poster.css">
</head>
<body>
  <div id="container">
    <a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    <hr>
    <div>
      <p><a href="../05/order.html" target="_blank">주문서 작성하기</a></p>
    </div>
    <hr>
    <h2>레드향 샐러드 레시피</h2>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ol>
      <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
      <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
      <li>드레싱 재료를 믹서에 갈아줍니다.</li>
      <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ol>
    <video src="medias/salad.mp4" controls width="700"></video>
    <hr>
    <h2>상품 구성</h2>
    <table>
      <caption>선물용과 가정용 상품 구성</caption>
      <colgroup>
        <col style="background-color:#eee;">
        <col>
        <col span="2" style="width:150px">
      </colgroup>
      <thead>
        <tr>
          <th>용도</th>
          <th>중량</th>
          <th>갯수</t>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">선물용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>35,000원</td>
        </tr>
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>52,000원</td>
        </tr>
        <tr>
          <td rowspan="2">가정용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>30,000원</td>
        </tr>   
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>47,000원</td>
        </tr>
      </tbody>        
    </table>
  </div>
</body>
</html>

'web-frontend' 카테고리의 다른 글

5. 입력 양식 작성하기  (0) 2023.02.05
3. HTML 기본 문서 만들기  (0) 2023.01.08
2. 웹 개발 환경 설정  (0) 2023.01.08
1. 웹 개발 시작하기  (0) 2023.01.08

본 내용은 'Do it! HTML + CSS +JS웹 표준의 정석' 책을 참고 하여 작성하였습니다 

 

HTML

Hyper Text Mark Language 

--> HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 

 

HTML의 기본구조 

<!DOCTYPE html>   # 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
<html lang="ko"> # <html>~</html>은 웹 문서의 시작과 끝을 나타냄, lang은 사용되는 언어를 나타냄
  <head> # <head>~</head>은 웹 브라우저가 웹문서를 해석하는 데 필요한 정보를 입력하는 곳
    <meta charset="UTF-8"> # meta는 문서에 대한 정보를 주는 태그이고 utf-8은 한글로 된 내용을 표시하기 위해 사용된다
    <title>웹 개발 입문</title> # 문서 제목 
  </head>
  <body> # <body>~</body>는 실제로 웹 브라우저 화면에 나타나는 내용
    <h1>웹 개발 기초</h1>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바스크립트</p>
  </body>
</html>

 

'web-frontend' 카테고리의 다른 글

5. 입력 양식 작성하기  (0) 2023.02.05
4. 웹 문서에 다양한 내용 입력하기  (0) 2023.01.08
2. 웹 개발 환경 설정  (0) 2023.01.08
1. 웹 개발 시작하기  (0) 2023.01.08

본 내용은 'Do it! HTML + CSS +JS웹 표준의 정석' 책을 참고 하여 작성하였습니다 

 

웹 브라우저 -> 크롬

웹 편집기-> vscode

 

 

'web-frontend' 카테고리의 다른 글

5. 입력 양식 작성하기  (0) 2023.02.05
4. 웹 문서에 다양한 내용 입력하기  (0) 2023.01.08
3. HTML 기본 문서 만들기  (0) 2023.01.08
1. 웹 개발 시작하기  (0) 2023.01.08

본 내용은 'Do it! HTML + CSS +JS웹 표준의 정석' 책을 참고 하여 작성하였습니다 

 

웹 개발이란 

웹 브라우저 화면에 보이는 것 뿐만 아니라 웹 사이트에서 사용자에게 제공할 기능과 서비스를 포함하는 내용

 

서버vs 클라이언트 

클라이언트

- 사용자가 웹 사이트에 접근 할 대 사용하는 기기

- 웹 브라우저(좁은 의미) 

서버

- 인터넷에 연결된 컴퓨터 

- 웹 요소와 여러 정보가 저장됨 

 

프론트 엔드 vs 백엔드

프론트엔드 

-웹 브라우저 화면에 보이는 부분을 다룸-> 웹 사이트 제작 

-html,css,자바스크립트 등을 사용 

 

백엔드 

-사용자 뒤에서 보이지 않는 영역, 즉 서버를 다룸 

-데이터 베이스를 설계하거나 데이터를 처리함

-자바, php, 파이썬 등 프로그래밍 언어를 사용 

 

웹 개발의 기본 

HTML

-웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속 

-HTML에서 약속한 표기법을 사용해서 문서 작성해야 함 

 

CSS 

-웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법 

-다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 함 

 

자바스크립트 

-사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술 

-자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉬움 

 

 

'web-frontend' 카테고리의 다른 글

5. 입력 양식 작성하기  (0) 2023.02.05
4. 웹 문서에 다양한 내용 입력하기  (0) 2023.01.08
3. HTML 기본 문서 만들기  (0) 2023.01.08
2. 웹 개발 환경 설정  (0) 2023.01.08

[22서울런x아람코코딩스쿨]발표ppt양식.pptx - Google Slides

https://drive.google.com/drive/folders/13vUcvAUlcahtPU2NZ26I2QdF6eXm8Qsj

+ Recent posts

티스토리툴바