Mingg's Diary

2025-01-31

w3.css 포트폴리오를 만드는 방법 주목을 받으려면 포트폴리오가 필수다. 포트폴리오를 만드는 것은 온라인 존재감을 키우는 좋은 방법이다. 포트폴리오는 여러분의 기술과 프로젝트를 보여주는 데 사용된다. 이는 일자리, 프리랜서 일, 인턴십을 얻는 데 도움이 될 수 있다. 포트폴리오란 무엇인가 포트폴리오는 이력서와 같은 목적을 가질 수 있다. 대부분의 이력서는 텍스트로 작성되는 반면, 포트폴리오는 쇼케이싱을 위한 것이므로 이미지가 있는 시각적이고 종종 이력서보다 더 자세하다. 여러분의 업무 경험을 보여주고 가장 자랑스러워하는 프로젝트를 선보일 수 있는 곳이다. 온라인 포트폴리오는 회사, 채용 관리자 및 채용 담당자에게 링크를 통해…

2025-01-30

How To – 링크 트리 웹사이트

w3.css 링크 트리 웹사이트 링크 트리 웹사이트를 사용하면 모든 링크를 한 사이트에서 공유할 수 있다. 이는 내 소셜 네트워크, 블로그 게시물, 사업체, 프로젝트 등에 대한 링크를 표시할 수 있는 랜딩 페이지다. 링크 트리 웹사이트를 만드는 이유 링크 웹사이트는 온라인 존재감을 키우는 데 매우 좋다. 콘텐츠가 있는 곳에 대한 링크를 쉽게 공유할 수 있다. 또한, 링크 웹사이트는 사람들이 여러 곳에서 소통할 수 있도록 도와준다. 스스로 링크 웹사이트를 만들면 링크 웹사이트를 완벽하게 제어할 수 있다. 링크 트리 웹사이트를 만들려면 무엇을 알아야 하나요?…

2025-01-29

How To – 웹사이트 만들기 및 보기

w3.css 웹사이트 만들기 및 보기 컴퓨터에서 웹 페이지를 만들고 보는 방법을 알아보자. 1단계 메모장(Windows PC) 열기 Windows 8 이상: 시작 화면을 연다(화면 왼쪽 하단에 있는 Windows 기호). 검색창에 Notepad를 입력한다 . Windows 7 또는 이전 버전: 시작 > 프로그램 > 보조 프로그램 > 메모장을 연다. 텍스트 편집기(Mac) 열기 Finder > 응용 프로그램 > 텍스트 편집기를 연다. 또한 일부 기본 설정을 변경하여 응용 프로그램이 파일을 올바르게 저장하도록 한다. 기본 설정 > 형식 > “일반 텍스트”를 선택한다. 그런 다음 “열기 및 저장”에서…

2025-01-27

How To – Bootstrap 5로 웹사이트 구축

w3.css Bootstrap 5로 웹사이트 구축 Bootstrap 5를 사용하여 반응형 웹사이트를 만드는 방법을 알아보자. Bootstrap 5로 웹사이트 만들기 예제 <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap 5 Website Example</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script> <style> .fakeimg { height: 200px; background: #aaa; } </style> </head> <body> <div class=”p-5 bg-primary text-white text-center”> <h1>My First Bootstrap 5 Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <nav class=”navbar navbar-expand-sm bg-dark navbar-dark”> <div class=”container-fluid”> <ul class=”navbar-nav”> <li class=”nav-item”> <a…

2025-01-26

How To – Bootstrap 4로 웹사이트 구축

w3.css Bootstrap 4로 웹사이트 구축 Bootstrap 4를 사용하여 반응형 웹사이트를 만드는 방법을 알아보자. Bootstrap 4로 웹사이트 만들기 예제 <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap 4 Website Example</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css”> <script src=”https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js”></script> <script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js”></script> <script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js”></script> <style> .fakeimg { height: 200px; background: #aaa; } </style> </head> <body> <div class=”jumbotron text-center” style=”margin-bottom:0″> <h1>My First Bootstrap 4 Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <nav class=”navbar navbar-expand-sm bg-dark navbar-dark”> <a class=”navbar-brand” href=”#”>Navbar</a> <button…

2025-01-25

How To – Bootstrap 3로 웹사이트 구축

w3.css Bootstrap 3으로 웹사이트 구축 Bootstrap CSS 프레임워크로 반응형 웹사이트를 만드는 방법을 알아보자. Bootstrap 3으로 웹사이트 만들기 예제 <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Website Example</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script> <style> .fakeimg { height: 200px; background: #aaa; } </style> </head> <body> <div class=”jumbotron text-center” style=”margin-bottom:0″> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <nav class=”navbar navbar-inverse”> <div class=”container-fluid”> <div class=”navbar-header”> <button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#myNavbar”> <span…

2025-01-24

How To – W3.CSS 프레임워크로 웹사이트 구축

w3.css W3.CSS 프레임워크로 웹사이트 구축 모든 기기(PC, 노트북, 태블릿, 휴대폰)에서 작동하는 빠르고 반응형 웹사이트를 만드는 방법을 알아보자. 레이아웃 초안 웹사이트를 만들기 전에 페이지 디자인의 레이아웃 초안을 그려보는 것이 좋다. “레이아웃 초안”이 있으면 웹 사이트를 만드는 것이 훨씬 쉬워진다. Doctype, 메타 태그 및 CSS doctype은 페이지를 HTML5 문서로 정의해야 한다. <!DOCTYPE html> 메타 태그는 문자 집합을 UTF-8로 정의해야 한다. <meta charset=”UTF-8″> 뷰포트 메타 태그는 웹 사이트가 모든 기기와 화면 해상도에서 작동하도록 해야 한다. <meta name=”viewport” content=”width=device-width, initial-scale=1″> W3.CSS는 모든 스타일링 요구…

2025-01-23

How To – 웹사이트 만들기

w3.css 웹사이트 만들기 PC, 노트북, 태블릿, 휴대폰 등 모든 기기에서 작동하는 반응형 웹사이트를 만드는 방법을 알아보자. 레이아웃 초안 웹사이트를 만들기 전에 페이지 디자인의 레이아웃 초안을 그려보는 것이 좋다. 첫 번째 단계 – 기본 HTML 페이지 HTML은 웹사이트를 만드는 표준 마크업 언어이고 CSS는 HTML 문서의 스타일을 설명하는 언어다. HTML과 CSS를 결합하여 기본 웹 페이지를 만들 것이다. 1단계) HTML 추가 <!DOCTYPE html> <html lang=”en”> <head> <title>Page Title</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style> body { font-family: Arial, Helvetica, sans-serif; } </style>…

2025-01-22

How To – Iframe 요소 가져오기

w3.css Iframe 요소 가져오기 JavaScript를 사용하여 iframe 내부의 요소를 알아보자. Iframe에서 요소 가져오기 iframe 내부의 첫 번째 <h1%rt; 요소를 가져와 숨긴다. 1단계) JavaScript 추가 var iframe = document.getElementById(“myFrame”); var elmnt = iframe.contentWindow.document.getElementsByTagName(“H1”)[0]; elmnt.style.display = “none”;

2025-01-21

How To – 현재 화면 크기 가져오기

w3.css 현재 화면 크기 가져오기 JavaScript를 사용하여 현재 화면 크기/브라우저 창을 가져오는 방법을 알아보자. 현재 화면 크기 페이지의 현재 화면 크기를 얻으려면 window.innerWidth 및 window.innerHeight를 사용한다. 이 예제에서는 브라우저 창의 높이와 너비를 표시한다(도구 모음/스크롤바는 포함하지 않음). 1단계) JavaScript 추가 var w = window.innerWidth; var h = window.innerHeight;