Program(480)
-
[HTML5+CSS] Layout 만들기 03 (반응형)
반응형HTML layout 03 아래와 같은 레이아웃을 만드는 연습용 코드입니다. [Sample Image] 이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다. [Source Code] 아래는 소스코드입니다. header side contents article footer REFFERENCE SITE WEBSTORYBOY님의 온라인 강의 사이트 wtss.tistory.com/207
2021.02.10 -
[HTML5+CSS] Layout 만들기 02 (반응형)
반응형HTML layout 02 아래와 같은 레이아웃을 만드는 연습용 코드입니다. [Sample Image] 이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다. [Source Code] 아래는 소스코드입니다. header side contents footer REFFERENCE SITE WEBSTORYBOY님의 온라인 강의 사이트 wtss.tistory.com/206#
2021.02.10 -
[HTML5+CSS] 반응형 HTML 미디어쿼리 연습하기
반응형HTML의 기본! 미디어쿼리 연습하기 화면사이즈에 따라 반응하는 반응형 사이트를 만들기위해 가장 핵심적으로 알아야 하는 미디어쿼리를 만들어보는 연습입니다. [Sample Image] 이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다. [Source Code] 아래는 소스코드입니다. 미디어쿼리 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다. @media only all and (조건문) {실행문} @media : 미디어 쿼리가 시작됨을 표시합니다. only : 미디어 퀴리 구문을 해석하라는 명령업니다. (생략가능) all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다. (생략가능) all : 모든 미디어 유형에서 사용할 CSS를 정의..
2021.02.10 -
[HTML+CSS+JS] 코딩연습 001 (웹 표준 사이트 만들어보기)
HTML 코딩연습 첫번째! : 웹 표준 사이트 만들어보기 WEBSTORYBOY 쌤 강의 열심히 쫒아가며 처음으로 만들어본 웹 표준 사이트입니다. [Smaple Image] 이미지를 클릭하시면 해당사이트 연결됩니다. [Source Code] 아래 링크를 통해 소스코드를 다운받으실 수 있습니다. github.com/ywc1085/webstandard 나름 강의내용에서 조금씩 응용하여 변경적용하며 만들어봤는데 한번 만들어보니 막상 막막했던 코딩에 조금은 자신감도 생기네요... 좋은강의 만들어주신 WEBSTORYBOY님께 감사드립니다. [REFFERENCE SITE] WEBSTORYBOY wtss.tistory.com/category/SITE/01%20WEBSTANDARD
2021.02.10 -
[HTML5+CSS] Layout 만들기 01
반응형HTML layout 01 아래와 같은 레이아웃을 만드는 연습용 코드입니다. [Sample Image] 이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다. [Source Code] 아래는 소스코드입니다. header nav side contents footer REFFERENCE SITE WEBSTORYBOY님의 온라인 강의 사이트 https://wtss.tistory.com/204
2021.02.10 -
[python 3.9.1] cgitb 디버깅 모듈
파이썬 코드를 작성하다보면 종종, 아니 아주 자주 오타나 문법오류등으로 인하여 에러가 발생하는 것이 어쩌면 너무나 당연하다고 할 수 있습니다. 이때 터미널을 통하거나 기타의 에러 로그들을 이용하여 확인하는 등 여러 방법이 있을 수 있는데요, 만약 cgi 모듈을 사용하여 python코드를 작성할 경우 웹에서 실행을 시키다가 오류가 난다면 브라우저에 바로 오류 내용을 알려주는 모듈이 있어 공유합니다. 코드는 아래와 같습니다. import cgitb import sys cgitb.enable() 우선 먼저 cgitb와 sys 모듈을 임포트하고cgitb모듈을 활성화시키는 함수를 실행합니다. 만약 코드에서 에러가 있다면 실행시 브라우저에 위의 이미지와 같이 에러 내용을 바로 표시하여 주기때문에 디버깅을 하기에 매..
2021.02.09 -
[python 3.9.1] windows10 cgi 모듈 에러 해결
생활코딩 이고잉 쌤의 'WEB2 - Python - 7. 활용 - URL query string을 가져오는 방법' 온라인 강의를 보며 열심히 파이썬을 cgi에 연결하여 웹을 제어하는 공부를 하는데... 아무리 강의를 보며 따라해도 발생하는 에러에 골머리가 지끈.... www.youtube.com/watch?v=sX-9oG6IPc0&feature=emb_logo #!python print("Content-Type: text/html") print() 첫번째 줄에 shebang을 입력하고~ OK~ (만약 저 코드가 안되신다면 파이썬 설치경로를 직접 입력하거나 환경설정을 하셔야 합니다.) 그다음 타입설정하고 줄바꿈 까지도 OK~ print(""" HTML HTML CSS JavaScript {title} Lo..
2021.02.09 -
HTML + CSS에 유용한 참고 사이트
Can I Use 사용하고자 하는 기술이 전세계에서 얼마나 사용하고 있는지 확인 할 수 있는 사이트 caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 페이스북 공유 디버깅사이트 developers.facebook.com/tools/debug/ 공유 디버거 - Facebook for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com 트워터 공유 디버깅사이트 cards-dev.twitter.com/validator ..
2021.01.26 -
HTML 무료 웹 서비스 장착하기
소셜 댓글 서비스 디스커스(Disqus) 위젯 형태로 서비스에 삽입할 수 있는 소셜 댓글 서비스. disqus.com/ https://disqus.com/ disqus.com 라이브리(LiveRe) 디스커스와 같은 댓글 서비스를 제공하는 국내 서비스. www.livere.com/ 라이브리 간편한 사진/동영상 첨부 www.livere.com 실시간 채팅 서비스 척(tawk) www.tawk.to/ 100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a fre..
2021.01.26 -
HTML Tag (태그 정리)
HTML 태그의 정리 순서는 사용 빈도수 순 Tag Usage Definition Summary ... 머리말 ... 본문 ... 웹페이지(문서)제목 metadata에 대한 정보(information) ... 문서영역 또는 섹션의 분할 정의 ... (Anchor) 링크연결, inline요소 클라이언트 사이드 스크립트를 정의할때 사용 스타일시트(등 의) 링크 적용 이미지삽입 ... 줄바꿈, 단락 ... inline요소들을 그룹화 ... (List) 리스트화 ... (Unordered List) 리스트를 그룹으로 묶음 ... (Ordered List)리스트 그룹 자식들 앞에 숫자 넘버링 줄바꿈, break CSS 스타일 정의 ~ ... 제목(heading), 글씨크기 체크박스 삽입 ... 글씨를 두껍게 강조..
2021.01.22