여행하는 코딩끄적끄적

목차 ls 명령과 옵션 ls 명령은 Linux와 Unix 시스템에서 사용되며, 현재 디렉토리 또는 지정된 디렉토리의 내용을 나열합니다. 파일과 하위 디렉토리의 목록을 보여주어 사용자가 디렉토리의 내용을 파악할 수 있게 합니다. 기본 사용법 ls 이 명령은 현재 디렉토리에 있는 파일과 하위 디렉토리의 목록을 표시합니다. 명령 옵션 ls 명령은 다양한 옵션을 통해 출력을 조정할 수 있습니다. 몇 가지 유용한 옵션을 예로 들어보겠습니다: -l: 자세한 정보를 출력합니다. 파일/디렉토리 권한, 소유자, 그룹, 크기, 마지막 수정 날짜 등의 정보를 포함합니다. -a: 숨김 파일을 포함한 모든 파일을 표시합니다. 파일 이름이 .으로 시작하는 파일이 숨김 파일입니다. -h: 파일 크기를 쉽게 읽을 수 있도록 KB, ..

목차 [Bootstrap] col offset col-*-offset 클래스는 그리드 시스템에서 열의 오프셋을 설정하는 데 사용됩니다. 이를 통해 열을 가운데 정렬하거나 여백을 추가할 수 있습니다. 아래 예제는 offset을 사용한 경우와 사용하지 않은 경우를 비교해서 사용한 경우 어떤 차이가 발생하는지를 쉽게 알려 줍니다. 예제 코드>> 예제 카드 1 카드 1은 기본 그리드 시스템을 따릅니다. 예제 카드 2 카드 2는 기본 그리드 시스템을 따릅니다. 예제 카드 3 카드 3은 offset 클래스를 사용합니다. 결과>> 주석>> 10, 18, 28번 줄의 내용만 살펴 보시면 됩니다. 28번째 라인에만 offset-md-6이 들어가 있습니다. md는 모니터 사이즈로 앞서 포스터에서 상세하게 설명하였으므로 넘..

목차 [Bootstrap]리스트 태그, 리스트 표시 없애기, css와 비교 예제(ol, ul, li) 예제 코드를 통해 쉽게 설명하도록 하겠습니다. 예제 코드>> Default List Item 1 Item 2 Item 3 List with Bootstrap's list-unstyled Item 1 Item 2 Item 3 List with CSS list-style: none; Item 1 Item 2 Item 3 결과>> 주석>> 참고로 저는 visual studio에서 html을 작성합니다. 위와 같이 list 값이 여러개 일 경우 아래와 같이 작성하고 탭키를 누르면 자동으로 html 형식에 맞춰서 생성이 됩니다. ul>li*3>{리스트내용} 이 예제에서는 태그를 사용하여 순서 있는 리스트를 생성하..

목차 [부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절 간단한 예제와 함께 결과를 통해 쉽게 이해해 보도록 하겠습니다. 예제 코드>> Logo Home About Services Contact 결과>> [부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절 코드 주석 은 HTML 문서에서 사용되는 메타 태그 중 하나입니다. 이 메타 태그는 웹 페이지의 뷰포트(viewport)를 설정하는 데 사용됩니다. 뷰포트는 웹 페이지가 어떻게 표시되는지를 결정하는 화면 영역을 의미합니다. 데스크탑 컴퓨터, 태블릿, 스마트폰과 같은 다양한 기기에서 웹 페이지를 볼 때, 각 기기마다 화면 크기가 다르기 때문에 뷰포트 설정은 중요합니다. 이 메타 태그는 뷰포트의 너비를 장치의 너비에 맞추고, 초기 확대/축소 비율을 1로 설..

목차 기본 Templates 구성하기 이번에는 기존에 가져온 무료 Bootstrap(부트스트랩) Templates에 댓글(Comment)창을 추가하려고 합니다. 기본 Templates 구조는 블로그 형태 입니다. 무료 Templates를 가져와서 사용하는 방법은 아래 링크를 참조 하시면 됩니다. https://scribblinganything.tistory.com/404 [Bootstrap] Templates 무료 예제로 Flask와 연동하기 목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/..

목차 Jquery 기본 구조 Jquery는 Javascript를 기본으로 만들어진 라이브러리로 보시면 됩니다. Javascript의 복잡한 기능을 사용자가 사용하기 편하게 단순하게 만들었다고 보시면 됩니다. 우선 Jquery를 사용하기 위해서는 라이브러리를 불러와야 합니다. 마치 파이썬(Python)에서 라이브러리(Library)를 사용하기 위해 import를 하는 것과 마찬 가지 입니다. Jquery를 사용하고자 하는 HTML 문서의 사이에 아래와 같이 선언해 줍니다. 다음은 Jquery 사용 기본 골격입니다. 2번 라인: DOM 즉, html 문서가 준비 되면 function() 을 시행합니다. 3번 라인: $(selector).action() 으로 selector는 한국말로는 선택자로 HTML 문서..

목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/simple-sidebar Simple Sidebar - Bootstrap Sidebar Template - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com 심플한 디자인이고 각 각 하나의 HTML, JS, CSS 파일로 구성되어 있습니다. "startbootstrap-simple-sidebar-gh-p..

목차 [Javascript] Jquery HTML 내용 변경하기 javascript로 만든 Jquery에서 html(바꿀내용)함수를 사용하여서 기존의 내용을 변경할 수 있습니다. 우선 jquery 사용을 위해서 에 아래와 같이 선언해주어야 합니다. 사이에 아래와 같이 함수를 정의 합니다. 3번 라인 : #set_btn 이라는 아이디를 가진 버튼을 클릭할 경우 아래 함수를 실행합니다. 4번 라인 : #id_id의 html 구문을 괄호안의 값으로 변경 합니다. 전체 코드>> 나는누굴까? Set Html 결과>> [Javascript] Jquery TEXT(텍스트) 내용 변경하기 이번에는 앞서 동일 예제의 라벨의 텍스트값만 변경해보겠습니다. 구성은 동일하고 앞서 전체 코드에서 19~23번 라인만 아래와 같이 ..

목차 [Javascript] Jquery HTML 불러오기 javascript로 만든 Jquery에서 html()함수를 사용하게 되면 선택자(selector)로 선택된 범위 내에 html 구문 내용을 가져옵니다. 우선 jquery를 사용하기 위해 아이디는 무엇? 비밀번호 Get Html info 결과>> [Javascript] Jquery 텍스트(text)값 가져오기 선택한 태그내의 텍스트 값을 가져 옵니다. 구성은 위에 html 함수와 동일 합니다. 코드>> 아이디는 무엇? 비밀번호 Get Html info 결과>> [Javascript] Jquery 속성(attribute)값 가져오기 attr(속성값) 함수를 사용하여서 속성의 값을 가져옵니다. 구성은 앞 예제들과 동일 합니다. 코드>> 아이디는 무엇..

목차 [Bootstrap]HTML 버튼(button) 오른쪽 정렬 HTML 문서를 작성하면 버튼(Button), 라벨(Label), 입력창(Input)을 마음대로 배치하고 싶은데, 생각한 위치로 가지가 않는 경우가 많습니다. 가령 오른쪽으로 정렬할 경우 버튼을 오른쪽 끝에 붙여서 아래로 하나 둘씩 배치하고 싶은데 일반적인 방법이 css의 float를 사용하는 방법인데 코드>> 로그인 로그인 이 경우 아래 그림 처럼 아래 위가 아닌 오른쪽에 붙어서 배치가 됩니다. 결과>> 코드 라인1 : bootstrap button class 를 사용해서 버튼을 만들고 style을 이용해서 float로 오른쪽에 배치하였습니다. 이방법이 인터넷에 일반적으로 오른쪽 정렬 방법으로 올라와 있습니다. [Bootstrap]HTM..