프로그래머 도전기 59일차

프로그래머가 될거야!

by Choyee 2023. 10. 30. 23:43

오늘은

오늘은 월요일입니다

제 주말은 할일 목록을 만드는데에 다 써버렸군요...

그렇게 월요일이 돼서 홀가분한 마음으로 학원을 다녀왔습니다

학원 수업

* 텍스트에 그림자 효과
text-shadow 속성
text-shadow: 가로(-:좌, +:우) 세로(-:위, +:아래) 번짐정도 색상

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그림자 속성</title>

    <style>
        p{
            /* h1 크기 */
            font-size: 32px; 
            font-weight: bold;
        }

        h1{
            font-size: 64px;
        }
        
        .shadow1{
            color: skyblue;
            text-shadow: 3px 5px 5px black;
        }

        .shadow2{
            text-shadow: 5px 5px 3px orange;
        }


    </style>

</head>
<body>
    <h1 class="shadow1">HTML</h1>
    <h1 class="shadow2">CSS</h1>
    <p>HTML</p>
</body>
</html>

* table 헤드 바디 풋터
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>
=> <thead>태그안에서는 <th>태그를 사용한다
     <tfoot>태그는 없을 수도 있다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>월별 저축액</title>

    <style>
        table{
            text-align: center;
            border: 1px solid #aaa;
        }
        
        th, td {
            padding: 10px;
            border: 1px solid #aaa;
        }
        thead {
            background-color: aliceblue;
        }
        tfoot {
            background-color: #ccc;
        }
    </style>

</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Sum</td>
                <td>$180</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

수평정렬
* display - 객체가 없어지면 공간도 사라짐
display: inline, inline-block
display: block
display: none

* visibility - 객체가 없어져도 공간 유지
visibility: visible
visibility: none

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 숨기기/보이기</title>
    <style>
        .pic{
            /* <img>태그는 기본 수평 배치가 됨 */
            /* 표시하지 않고 숨기기 할 때 - display: none 사용 */
            /* 이미지의 공간 유지됨 */
            /* 숨기기 */
            visibility: hidden;
            /* 보이기 */
            /* visibility: visible; */
        }
    </style>
</head>
<body>
    <img src="./images/bear.jpg" alt="곰인형">
    <img src="./images/cat.jpg" alt="고양이" class="pic">
    <img src="./images/photo.jpg" alt="손">
</body>
</html>

<body>
    <header>
        <div id="logo"></div>
        <nav></nav>
    </header>

    <section>
    </section>
    <section>
    </section>
    <section>
    </section>

    <footer>
    </footer>
</body>

* <fieldSet>
  <legend>

* 여러줄 입력 - mutiline tag
<textarea> </textarea>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea 태그</title>
    <style>
        fieldset {
            width: 500px;
        }
        /* input태그의 속성에 스타일을 줄 때 대괄호[속성="값"]를 사용한다 */
        input[type="submit"] {
            margin-top: 10px;
        }
        textarea {
            /* 입력창 크기 조절 불가능 */
            resize: none;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <fieldset>
            <legend>배송업무</legend>
            <textarea name="memo" cols="60" rows="5" placeholder="배송시 요청사항을 적어주세요"></textarea>
        </fieldset>
    </form>
    <input type="submit" value="전송">
</body>
</html>

java
* 크롤링
= 웹 스크래핑, 웹 크롤링
웹 페이지에서 자료를 수집하는 일
공공 api(라이브러리)에서 자료를 수집하는 일

(제이수프) Jsoup
= html 문서에 저장된 데이터를 추출 및 조작하도록 설계된 오픈 소스 라이브러리

package exchange;

import java.io.IOException;

import org.jsoup.Connection;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class ExchangeRate {

	public static void main(String[] args) {
		try {
			// 환율정보를 가져올 웹 페이지 url 
			// 네이버 -> 증권 -> 시장지표
			String url = "https://finance.naver.com/marketindex/";
			
			// Connection 객체 생성
			Connection conn = Jsoup.connect(url);
			
			// 접속 페이지의 데이터 가져오기
			Document doc = conn.get();
			//System.out.println(doc);
			//System.out.println(doc.html());  // html 보기
			
			// 태그와 태그 선택자를 이용해서 데이터를 가져옴
			Elements contents = doc.select(".data_lst li");
			//System.out.println(contents);
			
			for(Element element : contents) {
				// 통화(currency), 환율(rate)
				//String currency = element.select("span.blind").text();
				// selectFirst() = class blind중 처음 값만 가져옴
				// 나라이름을 제외한 통화 이름만 출력 - split()함수 사용
				String currency = element.selectFirst("span.blind").text();
				String rate = element.selectFirst("span.value").text();
				// currency.split(" "); -> 공백을 이용해서 문자를 나눔
				// String[] currencyArr -> 나눈 문자를 새 배열에 저장
				// currencyArr[1] -> 1번 인덱스만 출력
				String[] currencyArr = currency.split(" ");
				//System.out.print(currencyArr[0] + " " + currencyArr[1] + "\n");
				System.out.println(currencyArr[1] + ": " + rate);
				if(currency.equals("중국 CNY")) {
					break;
				}
			}
			
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

}

2023. 10. 30 (월)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 61일차 (2)	2023.11.01
프로그래머 도전기 60일차 (1)	2023.10.31
프로그래머 도전기 58일차 (0)	2023.10.29
프로그래머 도전기 57일차 (1)	2023.10.28
프로그래머 도전기 56일차 (1)	2023.10.26