| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- MSSQL
- league of legends
- 블록코딩
- jquery
- 중1코딩
- html
- 프론트엔드
- python
- JavaScript
- data-attributes
- MYSQL
- 코딩입문
- 아이코딩습관
- c# 학습
- Excel
- ASP.NET MVC
- Android
- 중학생코딩
- 일본여행
- swift 화면전환
- 한글깨짐
- MS-SQL
- httpclient timeout
- Linq
- upbit
- C# 프로그래밍
- cc챔피언
- largelanguagemodels
- 엔트리
- c#
- Today
- Total
목록[3] Development/HTML5&CSS3 (15)
DBA
HTML data-*에 값 넣고 JS로 읽는 기본 패턴 1) 기본 패턴 복사const btn = document.getElementById('copyBtn');// 1) dataset(권장): data-foo-bar → js에서는 fooBarconst url = btn.dataset.url; // "https://example.com/page"const id = btn.dataset.id; // "123" (문자열)const enabled = btn.dataset.enabled === 'true'; // boolean 변환const count = Number(btn.dataset.count); // 숫자 변환// 2) getAttribute..
아래는 더 심화된 Sass 지시자들입니다. 간단한 예시와 함께 확인해 보세요.1. @content의미: 믹스인 내부에서 블록 형태의 스타일을 삽입할 때 사용@mixin card($bg) { background: $bg; padding: 1rem; @content; // 호출부에서 추가 스타일 삽입}.panel { @include card(#f5f5f5) { border: 1px solid #ccc; }}2. @while의미: 조건이 참인 동안 반복 실행$i: 1;@while $i 3. @debug의미: 컴파일 시 터미널에 변수나 표현식 값을 출력$spacing: 8px * 2;@debug $spacing; // “8px * 2 = 16px” 출력4. @warn의미: 경고 메시지를 출력하..
아래는 Sass(SCSS)에서 자주 쓰이는 추가 @ 지시자 5가지입니다. 필요에 따라 조합해서 써보세요.6. @function의미: 재사용 가능한 사용자 정의 함수를 만들 때사용법: @return으로 값 반환// 함수 정의@function rem($px) { @return $px / 16 * 1rem;}// 호출.title { font-size: rem(24); // → 1.5rem}7. @if / @else의미: 조건문으로 분기 처리사용법: @if, @else if, @else$theme: dark;.body { @if $theme == light { background: #fff; color: #333; } @else if $theme == dark { background: ..
아래는 Sass(SCSS)에서 자주 쓰이는 @ 로 시작하는 지시자 5가지입니다. 각 지시자의 역할과 사용법을 예시와 함께 간단히 정리했습니다.1. @mixin의미: 재사용 가능한 스타일 블록(함수 같은)을 정의할 때 사용사용법: 매개변수도 받을 수 있으며, 호출 시 @include 로 삽입// mixin 정의@mixin center-flex($direction: row) { display: flex; justify-content: center; align-items: center; flex-direction: $direction;}// mixin 사용.box { @include center-flex(column); width: 200px; height: 200px; background: #..
1. 폰트 파일을 알맞은 경로에 넣어두고 프로젝트에 추가 한다. 2. 폰트 파일을 지정할 스타일시트(nanumSquareRound.css) 파일을 생성 한다. @font-face { font-family: 'NanumSquareRound'; src: url('fonts/NanumFontSetup_TTF_SQUARE_ROUND/NanumSquareRoundR.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NanumSquareRound'; src: url('fonts/NanumFontSetup_TTF_SQUARE_ROUNDNanumSquareRoundB.ttf') format('tru..
$("#div사용자명").html("이름: " + "코볼"); 이름: 코볼
아래 함수에 함축해 두었습니다. Script function MenuActivation(pViewName) { $("ul li a").removeClass("active"); $("#li" + pViewName).addClass("active") } MenuActivation("PageName1"); Html $("ul li a") : CSS 선택자 $("#liPageName1") : Tag ID