목록[3] Development/HTML5&CSS3 (14)

DBA

더 심화된 Sass 지시자들

아래는 더 심화된 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의미: 경고 메시지를 출력하..
[3] Development/HTML5&CSS3 2025. 5. 19. 15:56
Sass(SCSS)에서 자주 쓰이는 추가 @ 지시자 5가지입니다.

아래는 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: ..
[3] Development/HTML5&CSS3 2025. 5. 19. 15:51
Sass(SCSS)에서 자주 쓰이는 @ 로 시작하는 지시자 5가지입니다.

아래는 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: #..
[3] Development/HTML5&CSS3 2025. 5. 19. 15:48
Web Site 화면에 폰트 적용 하기

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..
[3] Development/HTML5&CSS3 2024. 2. 22. 14:05
<div></div> 사이에 Text 넣기 - jquery

$("#div사용자명").html("이름: " + "코볼"); 이름: 코볼
[3] Development/HTML5&CSS3 2023. 3. 3. 11:13
css class 추가 / 삭제

아래 함수에 함축해 두었습니다. Script function MenuActivation(pViewName) { $("ul li a").removeClass("active"); $("#li" + pViewName).addClass("active") } MenuActivation("PageName1"); Html $("ul li a") : CSS 선택자 $("#liPageName1") : Tag ID
[3] Development/HTML5&CSS3 2023. 3. 3. 11:09
<span></span> 내용 변경

AA 정보 입력 jquery : $("#sDivision").text("BB정보 입력");
[3] Development/HTML5&CSS3 2022. 8. 26. 16:00
<textarea> 줄바꿈 포함 문자열 <div>에 보여줄 때

@{ string content = Model.content.Replace("\n", " "); } @*상단에 줄바꿈으로 치환해서 보여줌*@ @*@Html.Raw(content)*@ @*바로 줄바꿈으로 치환해서 보여줌*@ @Html.Raw(Model.content.Replace("\n", " ")) @*태그로 감싸서 보여줌*@ @*@Html.Raw("" + Model.content + "")*@ @*줄바꿈 없이 보여줌, 태그도 적용 안됨*@ @*@(Model.content)*@
[3] Development/HTML5&CSS3 2022. 4. 14. 09:34
Prev 1 2 Next