게시글

반응형 웹에서 기본 구조

반응형 웹 기본 템플릿 :root { --main-color: #333; --nav-bg: #444; --dropdown-bg: #555; --text-color: #fff; --link-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.6; } a { text-decoration: none; color: inherit; } header { background: var(--main-color); color: var(--text-color); } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .site-logo { font-size: 20px; } .menu-toggle { display: none; font-size: 24px; background: none; border: none; color: var(--text-color); cursor: pointer; } nav.main-nav { display: flex; justify-content: center; background: var(--nav-bg); } .nav-item { position: relative; } .main-nav > .nav-item > a { display: block; padding: 15px 20px; color: var(--text-color); } .dropdown { display: none; position: absolute; background: var(--dropdown-bg); min-width: 120px; z-index: 10; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 10px; color: var(--text-color); } .layout { display: flex; gap: 20px; max-width: 1200px; margin: auto; padding: 20px; } aside.sidebar { width: 250px; } .sidebar ul { list-style: none; } .sidebar li { margin-bottom: 5px; } .sidebar a { display: block; padding: 10px; background: #eee; color: var(--link-color); } main.main-content { flex: 1; } footer.site-footer { background: #f0f0f0; text-align: center; padding: 20px; margin-top: 40px; font-size: 14px; color: #666; } /* 모바일 우선 스타일 */ @media (max-width: 768px) { .menu-toggle { display: block; } nav.main-nav { flex-direction: column; display: none; } nav.main-nav.show { display: flex; } .main-nav > .nav-item > a { padding: 12px 16px; border-top: 1px solid #555; } .dropdown { position: static; } .nav-item:hover .dropdown { display: none; } .nav-item .dropdown { display: none; flex-direction: column; } .nav-item.show .dropdown { display: flex; } .layout { flex-direction: column; } aside.sidebar { width: 100%; } .sidebar ul { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; } .sidebar li { margin-bottom: 0; } .sidebar a { white-space: nowrap; } } /* PC에서 우측 정렬되는 본문 내 텍스트 */ .main-content .page-message { text-align: left; margin-top: 20px; } 로고 ☰ 회사소개. 인사말 오시는길 제품소개. 제품A 제품B 고객센터 공지사항 자주묻는질문 회사소개 인사말 오시는길 안녕하세요 ⓒ 2025 나의 웹사이트. 모든 권리 보유. function toggleMenu() { document.getElementById("mainNav").classList.toggle("show"); } function toggleDropdown(event) { if (window.innerWidth

#CSS #웹퍼블리싱 #반응형웹 #미디어쿼리 #웹레이아웃 #드롭다운메뉴 #HTML템플릿

게시글

text 내에 안내문구 넣는 placeholder 태그

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: red; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: red; }

#프로그램 #CSS #HTML #소스 #placeholder #입력안내문구 #브라우저호환 #HTML폼

게시글

테스트를 깜빡 깜빡 하게 하는 효과

텍스트 깜박이는 효과 만들기이다 jquery,자바스크립트 등으로 만들수 있지만 CSS로 간단하게 만드는 방법이다 class="red_to_blue" 선언만 하면 적용된다

#프로그램 #CSS #소스 #style

게시글

테이블 사이즈 고정하는 css table-layout:fixed

테이블의 내용에 따라 테이블이 유동적으로 변하는 경우가 있다 이때 고정하고 싶은 경우가 있다 이때 사용하는 스타일이다 table-layout:fixed 이걸 사용하면 테이블의 사이즈가 고정되어 내용이 길어질 경우 짤린 부분은 감춰지는 효과가 있다

#프로그램 #CSS #소스 #style #table-layout #테이블고정 #테이블사이즈 #HTML테이블

게시글

투명처리 하는 방법 opacity alpha

기본적으로 opacity:0 사용하면 된다 그러나 IE8은 지원하지 않아 filter:alpha(opacity=0)을 상용하는데 버전에 상관없이 사용하기위해서는 해당 버전에 적용되는 스타일을 모두 적용시키면된다

#프로그램 #CSS #소스 #style

게시글

<hr> 태그 가로선 태그에 색상을 넣는 방법이다

태그에 색상을 넣고 싶으면 이렇게 CSS를 통해 넣으면 적용될것 같지만 그렇지않다 그이유는 hr는 top,bottom라인이 존제한다 해서 기본적으로 하면 라인이 2px로 된다 top,bottom 각각 1px씩 2px이된다 해서 1px로 하고자 할때 border-bottom:1px solid #000000;border-top:none; 이런식으로 라인 하나를 제거하면된다

#프로그램 #CSS #HTML #소스 #hr태그 #가로선 #border-bottom #선색상

게시글

스타일 여러게를 한꺼번에 변경하는 방법

스타일 여러게를 한꺼번에 변경하는 방법 여러옵션을 사용하는 방법이다 {}를 통해서 사용할수 있으며 형식은 {"옵션명1":"값1","옵션명2":"값2"} 이런식으로 사용한다 다음은 예시이다 $(this).css({'border':'2px solid #f9cd00','padding':'0px'}) 하나만 사용할때는 {} 없이 "옵션1","값1" 이런식이다 다음은 예시이다 $(this).css("border","2px solid #f9cd00");

#프로그램 #자바스크립트 #CSS #소스 #Jquery #css함수 #스타일변경 #여러스타일

게시글

일반적으로 사용하는 클래스명

​클래스명을 자기 마음대로 정의하여 사용할수 있다 그러나 표준처럼 사용하는 명을 따라주면 다른 사람이 접근했을때 또는 내가 다른 사람의 소스를 보았을때 많은 도움이되므로 될수 있으면 묵시적으로 합의된 표준은 지켜주는것이 좋다 GNB ( Global Navigation Bar ) 사이트 최상위 전체 공통네비게이션. 메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바 LNB ( Local Navigation Bar ) 현재 서비스 영역(Local)만 해당되는 네비게이션. 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바 SNB ( Side Navigation Bar ) 메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바 FNB ( Foot Navigation Bar ) 하단메뉴, 하단로고, 주소, 카피라이팅 영역​

#프로그램 #CSS #소스 #style #웹퍼블리싱 #클래스명 #GNB #LNB #SNB #FNB #네비게이션바

게시글

width:100% 에서 특정 픽셀만큼 빼기

100px만큼 뺀 div값

#프로그램 #CSS #소스 #style

게시글

마우스 오버시 이미지 안쪽으로 테둘이 넣는 방법

이미지에 마우스를 오버했을경우 이미지 안쪽으로 테둘이를 넣는 방법이다 바깥쪽으로 테두리를 넣게되면 이미지영역이 커져서 깨지는 경우가 발생되기 때문에 안쪽에 넣은것이다 a.image01, a.image01 img {float:left;overflow:hidden;} a.image01:hover{border:4px solid #DDDDDD;} a.image01:hover img {margin:-4px;}

#프로그램 #CSS #소스 #style #마우스오버 #hover #이미지테두리 #안쪽테두리 #border

게시글

한글,영문입력방법 적용하는 스타일

스타일을 적용해서 텍스트 입력 형식을 결정할수 있다 한글인지 영문인지 등등 style = "ime-mode:auto" (자동변경) (한/영 전환 가능) style = "ime-mode:active" (한글 모드) (한/영 전환 가능) style = "ime-mode:inactive" (영문 모드) (오직 영문) style = "ime-mode:disabled" (영문 모드) (한/영 전환 불가) style = "ime-mode:deactivated" (한글 모드) (한/영 전환 가능)

#프로그램 #CSS #소스 #style #ime-mode #한글입력 #영문입력 #한영전환 #입력모드

게시글

백그라운드 이미지에 padding값을 주는 방법

백그라운드를 노출할때에 공간을 띄우고 하고 싶을때가 있다 이럴때 다음과 같이 하면된다. style="background-image:url('이지지경로'); background-position:10px 20px;" x=>10px y=>20px 띄우게된다

#프로그램 #CSS #소스 #style #배경이미지 #스타일시트 #background-position #배경위치 #여백

게시글

비밀번호 입력문구 input 이지미 삽입

input type이 password인경우 value="비밀번호" 이렇게 입력하면 ****이렇게 내용을 볼수 없다그렇기때문에 해당 문구를 넣고 싶은경우 이미지를 활용하는 방법을 사용한다 input_pw.gif 이미지에 "비밀번호입력" 이런식으로 만들어지 이미지를 호출하는 형태이다 그리고 onfocus 되었을때 이미지를 비우는 식으로 문구를 제거한다

#프로그램 #CSS #소스 #style #비밀번호입력칸 #inputpassword #안내문구 #입력칸이미지 #onfocus

게시글

웹폰트를 사용해서 텍스트 폰트변경하기

웹폰트를 사용하는 방법이다 스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고 사용하고자 하는곳에 다음과같이 사용하면적용된다 웹폰트 NanumGothic.eot 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다 이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다 그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다 아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다 그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다

#프로그램 #CSS #소스 #style #웹폰트 #font-face #eot #글꼴변경 #폰트적용

게시글

자간,행간,단어간격

단어간 간격,글자간 간격, 줄간 간격을 스타일로 조절할수 있다 ​ word-spacing:5px;//단어간 간격 letter-spacing:7px;//자간 line-height:18px;//행간

#프로그램 #CSS #소스 #style

게시글

영문,숫자,대문자로만 입력가능

입력할때 영문 숫자 대문자로만 입력가능함 style="ime-mode:disabled;text-transform:uppercase;"

#프로그램 #CSS #소스 #style

게시글

웹폰트를 사용한 텍스트 폰트변경하는 방법

@font-face{font-family:fontstyle01;src:url(NanumGothic.eot);} @font-face{font-family:fontstyle02;src:url(NanumGothicBold.eot);} @font-face{font-family:fontstyle03;src:url(NanumGothicExtraBold.eot);} 웹폰트 NanumGothic.eot 웹폰트 NanumGothicBold.eot 웹폰트 NanumGothicExtraBold.eot 웹폰트를 사용하는 방법이다 스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고 사용하고자 하는곳에 다음과같이 사용하면적용된다 웹폰트 NanumGothic.eot 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다 이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다 그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다 아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다 그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다

#프로그램 #CSS #소스 #웹폰트 #font-face #나눔고딕 #eot #글꼴변경

게시글

자간(문자간격)넣는 방법

자간(문자와 문자 사이)를 넓게 하고자 할때 사용하는 스타일이다 문자간격

#프로그램 #CSS #소스 #style

게시글

textarea내에 엔터를 통해 자동으로 늘리는 방법

글을 작성할때 엔터키를 누르면 자동으로 세로 사이즈가 늘어나게 하고 싶을때가 있다 이때 사용하는 방법이다

#프로그램 #CSS #소스 #style

게시글

이미지를 커팅하는 방법

실제로 이미지가 커팅되는것이 아닌 보여지는 부분을 제한 하는 형식이다 CSS로 특정 이미지 만큼 잘라서 보여주기

#프로그램 #CSS #소스 #style