728x90 반응형 SMALL CSS17 티스토리 목차 적용하기 (TOC) html 블로그 관리 → 스킨 편집 → html 편집으로 이동한다. head 태그 밑에 다음 코드를 추가한다. 위치를 검색하여 다음 코드를 추가한다. html 편집기 맨 밑에 다음 스크립트 코드를 추가한다. css css로 이동하여 다음 코드를 추가하여 스타일을 적용한다. .toc-absolute { position: absolute; margin-top:165px; } .toc-fixed { position: fixed; top: 165px; } .toc { right: 8%; width: 250px; padding: 10px; box-sizing: border-box; } .toc-list { margin-top: 10px !important; font-size: 0.9em; } .toc > .toc.. 2023. 6. 15. [Website] 부트스트랩 (Bootstrap) 부트스트랩 (Bootstrap) 부트스트랩은 웹 개발자들이 빠르게 반응형 웹사이트를 만들 수 있도록 도와주는 오픈 소스 프레임워크이다. 부트스트랩 5는 HTML, CSS, JavaScript를 사용하여 제공되며 다양한 레이아웃, 그리드 시스템, 컴포넌트 등을 제공하여 웹 개발을 손쉽게 만들어 준다. jQuery 제거 : 부트스트랩 5에서는 jQuery를 사용하지 않는다. 대신, Vanilla JavaScript로 작성된 코드로 대체되어 더 가볍고 빠른 웹사이트를 제공한다. 사용자 정의 및 확장성 : 부트스트랩 5는 사용자 정의가 더욱 쉽도록 설계되었다. 개발자들은 SCSS 변수를 활용하여 기본 스타일을 쉽게 변경할 수 있으며, 더 많은 유틸리티 클래스를 통해 디자인을 빠르게 조정할 수 있다. 개선된 그리.. 2023. 6. 1. [JavaScript] 함수 (Function) 함수 (Function) 함수는 JavaScript에서 기본 구성 요소 중 하나이다. JavaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 프로시저 (procedure)와 비슷하지만, 프로시저가 함수로 쓰이려면 입력을 반드시 받아야 하고 입력과 명확한 관계가 있는 출력을 반환해야 한다. html js // 매개변수가 없는 함수 생성 function message() { document.write("function without parameter" + " ") } // 한 개의 매개변수를 가진 함수 생성 function welcomeMessage(name) { document.write("welcome " + name + " ") } // 여러 개의 매개변수를 가진 함수 생성 fun.. 2023. 6. 1. [JavaScript] do-while 루프 do-while 루프 do-while 문은 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만든다. html js var i = 1 do { document.write("dowhile" + " ") i++ } while (i 2023. 6. 1. [JavaScript] 모음 자음 구별 html js var letter = prompt("Enter a letter : ") // 대문자 입력을 소문자로 변환하고 조건에 맞추어 설정 letter = letter.toLowerCase() // 조건 확인 if ( letter == "a" || letter == "e" || letter == "i" || letter == "o" || letter == "u" ) { console.log("Vowel") } else { console.log("Consonant") } 2023. 6. 1. [JavaScript] 조건문 조건문 if : 조건이 참인 경우 실행할 코드 블록을 정의한다. else if : 이전 조건이 거짓이고 현재 조건이 참인 경우 실행할 코드 블록을 정의한다. else : 모든 이전 조건이 거짓인 경우 실행할 코드 블록을 정의한다. switch : 두 개 이상의 조건을 비교할 때 사용한다. html js // 두 숫자 중 큰 숫자를 찾는 프로그램 var num1 = parseInt(prompt("Enter first numebr : ")) var num2 = parseInt(prompt("Enter second numebr : ")) // if if (num1 > num2) { console.log("Large Number is : " + num1) } if (num1 < num2) { console.lo.. 2023. 5. 31. [JavaScript] 데이터 타입 변환 데이터 타입 변환 자바스크립트에서 숫자를 문자열로, 문자열을 숫자로 변환하는 방법이 존재한다. toString() 숫자를 문자열로 변환 Number() 문자열을 숫자로 변환 toFixed() 소수점 이하 자릿수 설정 toPrecision() 전체 자릿수 설정 html js var num = "20" num = num.toString() console.log(typeof num) var number = 20 console.log(typeof number) number = toString(20) console.log(typeof number) var x = 2.56789 // 소수점 이하 자릿수 설정 console.log(x.toFixed(1)) console.log(x.toFixed(2)) // 전체 자릿.. 2023. 5. 31. [Website] Columns / TextBox / Flexbox Columns / TextBox / Flexbox 컬럼 (Column) 컬럼을 사용하면 긴 텍스트를 더 쉽게 읽을 수 있는 형식으로 나눌 수 있다. 기사, 블로그 글 등의 콘텐츠를 여러 개의 컬럼으로 분할하여 가독성을 높이고, 모던한 디자인을 구현할 수 있다. CSS의 column-count와 column-gap 속성을 사용하여 컬럼의 개수와 간격을 조절할 수 있다. 텍스트 박스 (Text Box) 텍스트 박스는 사용자 입력을 받기 위한 공간을 제공한다. CSS를 사용하여 텍스트 박스의 모양, 크기, 테두리, 그리고 배경색 등을 조절할 수 있다. 또한, resize와 outline 속성을 사용하여 텍스트 박스의 크기 조절 가능 여부와 외곽선 스타일을 설정할 수 있다. 플렉스박스 (Flexbox) 플렉스박.. 2023. 5. 26. [Website] 트랜지션 (Transition) 트랜지션 (Transition) CSS 트랜지션과 애니메이션은 웹 페이지에서 요소의 스타일 변경에 부드러운 효과를 적용하는 데 사용된다. 트랜지션은 요 소의 두 가지 상태 간의 스타일 변경을 부드럽게 처리하는 반면, 애니메이션은 여러 키 프레임에 따라 요소의 스타일을 변경할 수 있게 해준다. 이 두 기능은 웹 페이지에 독특한 효과와 동적인 요소를 추가하는 데 도움이 된다. html 2023. 5. 26. [Website] 그림자 (Shadows) 그림자 (Shadows) 그림자는 웹 페이지에서 요소에 깊이와 입체감을 추가하는 데 사용되는 CSS 효과이다. 그림자는 주로 text-shadow와 box-shadow 두 가지 유형으로 사용된다. text-shadow는 텍스트에 그림자를 적용하고, box-shadow는 요소의 경 계 상자에 그림자를 적용한다. html Hello World Hello World Hello World 1 This is a card 2023. 5. 26. 이전 1 2 다음 728x90 반응형 LIST
