'HTML' 태그의 글 목록

일	월	화	수	목	금	토
			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

[Google Icon Font 삽입하기]

2020. 8. 1. 13:33 | Posted by 붉은kkk

Documentation - Materialize

materializecss.com

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

구글 Icon Font 삽입은 위 예제에 나온 것처럼, html 문서의 head내에 link로 처리하면 됩니다.

^^ 요즘은 문서들이 보기 쉽게 나와있어서 보고 활용하기 편한것 같네요.

그럼 오늘도 즐거운 프로그래밍 생활 되세요.

'프로그래밍 > HTML' 카테고리의 다른 글

[2. HTML Menu 정렬] 상단 Menu 항목 정렬 방법 (0)	2020.05.14

프로그래밍/자바스크립트

[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기

2020. 5. 1. 10:38 | Posted by 붉은kkk

이번 시간엔 Javascript를 이용하여 동적 테이블을 간단히 만드는 방법에 대해 포스팅 하도록 하겠습니다.

이번 포스팅은 사실 알고나면 간단한거지만, 알기까지의 과정이 쉽지 않았던 거 같네요.

(제가 동적 테이블의 유용성을 잘 인지를 못했던 거 같아요.)

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    

    </head>

    <body>
    동적 테이블 Test입니다.
    <table class="table test">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
        </tr>

        <tbody id="table1">

        </tbody>
    </table>



<script>
var myArray = [
    {'이름' : '홍', '나이' : '20', '성별' : '남'},
    {'이름' : '이', '나이' : '25', '성별' : '여'},
    {'이름' : '박', '나이' : '30', '성별' : '여'},
    
]

buildTable(myArray)

function buildTable(data) {
    var table = document.getElementById('table1')

    for (var i=0; i < data.length; i++)
    {
        var row = `<tr>
                    <td>${data[i].이름}</td>
                    <td>${data[i].나이}</td>
                    <td>${data[i].성별}</td>
                   </tr>`
        table.innerHTML += row
    }
}


</script>

    </body>
</html>

코드 블록 설명

1. HTML 기본 문서 생성

2. Table 생성 (id를 지정해줍니다.)

3. Javascript (Data 저장, Data 크기에 따른 Table 만들기)

간단한 코드이므로 설명은 굵직한 토대만 드렸습니다.

보면 간단히 알 수 있는 부분이므로 자세한 설명은 생략할게요^^

그럼 오늗도 즐거운 프로그래밍 생활 되세요.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[9. Chart.js] JAVASCRIPT 차트 라이브러리 (0)	2020.05.12
[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기 (0)	2020.05.12
[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기 (0)	2019.10.20

프로그래밍/자바스크립트

[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기

2019. 10. 20. 18:50 | Posted by 붉은kkk

이번엔 자바스크립트에서 변수 사용하는 방법에 대한 포스팅입니다.

변수의 종류와 사용법 모두를 정리하고 싶은 맘이 있긴한데... 우선은 간단한 것부터 시작하겠습니다.

아직까지는 코드가 직관적으로 보이고 있으니까 이해하기 쉽네요.

1. var : 자바스크립트에서 변수(Variable) 선언을 하려면 변수명 앞에 var을 써주시면 됩니다.

2. 연산자 (산술연산자 위주)

1	=	왼쪽에 대입
2	+	더하기
3	-	빼기
4	*	곱하기
5	/	나누기
6	%	나머지

???

의도한 연산결과가 보이지 않네요.

크롬 브라우저에서 F12(버튼)를 눌러주세요.

이상으로 자바스크립트로 변수를 사용하는 방법을 연습해 봤습니다.

하나하나 차곡차곡 쌓아가다 보면 멋진 프로젝트도 완성할 수 있는 날이 있겠죠?

저부터 실천해 나가보겠습니다.

오늘도 즐거운 프로그래밍 생활되세요^^

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기 (0)	2019.10.20
[2. 추천에디터] 무료 프로그램인 Notepad++ (0)	2019.10.18
[1. 자바스크립트 시작] 자바스크립트 시작하기. (0)	2019.10.18

프로그래밍/파이썬

[13. 파이썬으로 웹페이지 PDF로 만들기] HTML to PDF

2019. 1. 12. 00:50 | Posted by 붉은kkk

- HTML to PDF -

웹에 있는 HTML을 PDF로 변환해야될 일이 생겨서 파이썬으로 구현해보았습니다.

PDF관련 라이브러리들이 동작안되는 것들이 꽤 있어서 현시점 기준 작동하는 라이브러리로 설명 드리겠습니다.

필요한 준비물

1. PDFkit (https://pypi.org/project/pdfkit/)

2. WKHTMLTOPDF (https://wkhtmltopdf.org/downloads.html)

PDFkit은 pip으로 install 해 줍니다.

pip install PDFkit

WKHTMLTOPDF는 다운로드 페이지에서 사용하고 있는 OS에 맞는 버전을 선택하여 설치해 주시면 됩니다.

[예제 Sample]

import pdfkit

pdfkit.from_url('http://google.com', 'out.pdf')
pdfkit.from_file('test.html', 'out.pdf')
pdfkit.from_string('hello!', 'out.pdf)

...

분명 에제를 따라 했는데...

안되더군요. 에러가 딱!!!

...

네, 처음 보이던 샘플코드로 끝이 아니었습니다. 조금 더 설정해 줘야될 부분이 남아있었습니다.

같이 기재해두면 되지, 이렇게 띄엄띄엄 분리를 해놔서 잠시 헤맸네요.

...블라블라... path설정을 해줘라! 라는 내용이네요.

다시 적용해서 예제 코드를 변경하면

[예제 Sample]

import pdfkit config = pdfkit.configuration(wkhtmltopdf='C:/Program Files/wkhtmltopdf/bin/wkhtmltopdf.exe')
pdfkit.from_url('http://google.com', 'out.pdf', configuration=config)

잘 됩니다!!!

휴~ HTML to PDF도 이제 완료!

고민하는 만큼 늘어나는 코딩실력, 프로그래밍이 점점 재밌어 지고 있습니다.

ㅎㅎ 즐거운 파이썬 되세요^^

'프로그래밍 > 파이썬' 카테고리의 다른 글

[15. 파이썬으로 자동화 도구 만들기(1) - 매크로] (0)	2019.05.10
[14. 파이썬으로 유튜브 영상 다운로드하기] (0)	2019.01.18
[12. 파이썬 에디트 도구] 파이참 사용하기 (2)	2019.01.01
[11. 웹크롤링] 네이버 영화 리뷰 크롤링 (0)	2018.12.25
[10. 웹크롤링] 네이버 실시간 검색어 가져오기 - 1 (0)	2018.12.23

옆집오빠

태그목록

공지사항

최근에 올라온 글

최근에 달린 댓글

글 보관함

링크

calendar

카테고리

'HTML'에 해당되는 글 4건

[Google Icon Font 삽입하기]

'프로그래밍 > HTML' 카테고리의 다른 글

[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[13. 파이썬으로 웹페이지 PDF로 만들기] HTML to PDF

'프로그래밍 > 파이썬' 카테고리의 다른 글

티스토리툴바