본문 바로가기

전체 글402

HTML에 JavaScript 적용시키기 body 의 가장 하단 부에서 load --- 별도의 script.js 파일 필요 --- 여러 방식이 있으나 이 방식이 가장 많이 사용됨. ※ 참고 : HTML의 기본 파일 요소 (index.html, script.js, style.css) ※ 참고 : 자바스크립트를 Body의 가장 마지막에 위치시키는 이유 Programing/JavaScript 2024. 2. 23.
상수와 변수 상수와 변수 name = 'leezche'; alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim "+name+", quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid.. Programing/JavaScript 2024. 2. 23.
웹 사이트 만드는 데 필요한 지식 등 개관 영상 참고 https://www.youtube.com/watch?v=ORI4-EXhgC4 내용 정리 웹사이트를 구성하는 요소 프론트엔드 : UI/UX (페이지 레이아웃 등) HTML, CSS, JavaScript HTML : 웹사이트의 골격 CSS : 웹사이트의 디자인 요소 JavaScript : 제작된 웹사이트에서 발생한 Action을 처리 CAFE24, 가비아, WIX 등의 솔루션 서비스가 프론트엔드 개발을 대신해주기도 함. 백엔드 : 언어, DB, Framework 언어 : Python, Ruby, Java, JS 등... DB 이것을 간편하게 해주는 것이 Framework Ra:Is Django Flask Serverless (백엔드 서버가 없어도 작동할 수 있게 해주는 서비스) Firebase,.. Programing 2024. 2. 22.
부트스트랩 사용 1. 안에 아래 CSS CDN 태그를 입력 2. 위에 JavaScript CDN을 입력 Programing/CSS 2024. 2. 22.
웹 폰트 웹폰트 CSS3부터 웹 폰트를 표준으로 채택하여 웹 페이지에 폰트를 일괄적으로 적용할 수 있게 되었다. 웹 폰트는 직접 업로드하여 변환해 사용할 수 있다. PC에서 사용하는 폰트는 TrueType(TTF)이나 용량이 커서 웹에서 적합하지 않다. 웹에서는 EOT(Embedded open type)이나 WOFF(Web Open Foot Format)을 사용하며 최근에는 WOFF2 파일도 많이 사용한다. 한글까지 웹 폰트 변환 가능한 사이트 : Transfonter (https://transfonter.org) 출처 : 웹 표준의 정석 (고경희 저) 웹 폰트 사용의 기본형 (@font-face) @font-face { font-famliy: ; src: ; } 눈누 웹 폰트 이용 하기 눈누 사이트 https:.. Programing/CSS 2024. 2. 22.
별도의 CSS 파일을 불러 모든 웹페이지에 동일하게 적용하기 style.css 만들고 적용 시키기 코드를 제외한 내부의 CSS 태그를 별도로 style.css 파일로 만들어 저장한 뒤 해당 파일의 CSS를 적용할 문서의 별도의 CSS 파일을 웹에서 로드하여 다운로드하면 효율상 문서에 CSS 포함시키는 것보다 효율이 떨어지지만, 브라우저에서는 캐시를 사용하여 이용자의 PC에 CSS 파일을 저장하고 로드하기 때문에 네트워크 비용 절감과 속도면에서 이익이 크니, 무조건 사용하는 게 좋다. CSS 파일의 내용을 한 문서에만 적용시키기 해당 CSS를 적용시킬 문서의 body에 별도의 class를 선언 그리고 style.css 문서에서 해당 class에만 CSS를 주면 된다. .HTML-page .main { padding-left: 50px; sursor: pinter; } Programing/CSS 2024. 2. 22.
CSS Media Query Responsible Web(반응형 웹)을 만들기 위한 CSS 사용예제 - 화면 크기가 800px을 넘으면 test라는 클래스가 보이지 않도록 해라. 화면 크기가 800px 밑으로 떨어지면 test라는 클래스가 보이지 않도록 해라. Programing/CSS 2024. 2. 22.
CSS의 기본 문법 CSS는 HTML의 뼈대 중 내에 작성한다. 그리고 /* h1 태그는 원래 block이지만 inline 형태로 바꿈 */ /* a 태그는 원래 inline이지만 block 형태로 바꿈 */ 기본문법 컬러 바꾸기 color:black; 밑줄 넣기 / 빼기 text-decoration:underline; /* 밑줄 넣기 */ text-decoration: none; /* 밑줄 빼기 */ Programing/CSS 2024. 2. 22.
CSS란 . Programing/CSS 2024. 2. 22.
유용한 사이트 모음 댓글 상담/하단 대화창 tawk.to https://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 free customizable page. www.tawk.to 웹사이트 방문자 분석기 Google Analytics Caniuse.com : 해당 태그가 브라우저별로 지원이 되는지 얼마나 사용 중인지 통계를 보여줌 https://caniuse.com Programing 2024. 2. 22.

티스토리툴바