반응형
반응형

autofocus

문서가 로드되면 autofocus 속성이 들어간 input 태그에 자동으로 focus가 이뤄집니다.

  <form action="" method="">
    <input type="text" autofocus>
    <input type="text">
    <input type="text">
  </form>

 

required

회원가입을 할 때 필수항목을 입력하지 않으면 경고 문구가 뜨고 넘어가지 않죠? 원래는 스크립트로 구현해야 하는데 HTML로 쉽게 할 수 있는 방법이 바로 required 속성입니다.

input태그 모두 required속성을 주겠습니다.
그리고 한 칸을 비운채로 submit버튼을 누르면 어떻게 될까요?

  <form action="" method="">
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <button type="submit">다음</button>
  </form>

placeholder  

고객이 회원가입을 할 때 해당 입력창에 뭘 입력해야 하는지 힌트를 주는 속성이 바로 placeholder입니다.
물론 응용해서 회원가입 뿐만 아니라 다양한 용도로 사용할 수도 있겠죠?

  <form action="" method="">
    <input type="text" placeholder="아이디">
    <input type="password" placeholder="비밀번호">
  </form>

readonly  

입력은 받지 않고 읽기와 복사만 가능한 속성입니다.
어디에 사용하는지가 제일 중요하죠?

스크립트를 이용해서 특정 조건을 만족하면 활성화가 되게끔 합니다. 예를 들면 은행 대출을 받을 때 사전 설문조사로 특정 조건을 만족한 고객만 해당 입력창에 입력이 가능하도록 하는 것이죠.

  <form action="" method="">
    <input type="text" readonly value="조건 만족 전 입력 불가">
  </form>
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

Best 15 CSS Trends To Watch For 2023  (0) 2023.07.04
[HTML] 24 Powerful HTML Attributes Every Senior Web Engineer Should Master!  (0) 2023.06.08
웹폰트 사용하기,구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기  (0) 2022.10.31
Pixabay 이미지  (0) 2022.10.13
브라우저 화면 드레그 안되게 css  (0) 2022.10.04
반응형

[SOTO] ST-942 헥사화로대 백패킹 화로대 솔캠

https://smartstore.naver.com/outdoorlandm/products/5208275669

 

[SOTO] ST-942 헥사화로대 백패킹 화로대 솔캠 : 아웃도어랜드마크

아웃도어랜드마크

smartstore.naver.com

반응형
저작자표시 비영리 (새창열림)

'생활의 발견 > Bushcraft.survival' 카테고리의 다른 글

"세대적인" 북극 폭발은 토요일 미국 북동부와 캐나다 지역에 위험할 정도로 추운 기온을 가져왔고 예보관들은 단 5분 안에 동상이 발생할 수 있다고 경고했습니다.뉴햄프셔 주 워싱턴 산 정..  (0) 2023.02.06
붐비는 공공 장소에서의 공격  (0) 2022.11.02
페트병 새총으로 참새 대소탕작전  (0) 2022.08.25
ROGER, 료카이(了解) - 수신완료(received)  (0) 2021.11.24
[코로나] COVID19 실시간 현황 - https://corona-live.com/  (0) 2021.08.11
반응형

실수는 하게 마련이다.
우리의 실수는 대부분 처음 소프트웨어 개발 당시에는 미처 생각하지 못한 것들이었다.
몇 번이고 수정하여 완성했다.
문제는 계획과 실행이다.
우리는 업무 첫날 실행에 돌입한다.
경쟁사들은 수개월동안 어떻게 계획할지를 계획한다.
- 마이클 블룸버그, 블룸버그 통신 창업가


로또를 구입하지 않고 당첨되길 기다릴 수 없습니다.
직접 시추작업을 해야만 석유를 얻을 수 있습니다.
일반적으로 전략에 비해 실행은 과소평가되어 있습니다.
처음부터 잘 할 수는 없습니다.
일을 그르치는 것은 탁월하게 될 가능성이 있다는 것과 동의어입니다.

반응형
저작자표시 비영리 (새창열림)

'생활의 발견 > 행복한 경영' 카테고리의 다른 글

잘못된 길을 가고 있다는 신호  (0) 2022.11.03
빨리 바꿀 줄 아는 조직이 승리한다  (0) 2022.11.02
신상필벌(信賞必罰) 대신 신상필상(信賞必賞)하라  (0) 2022.10.31
지름길이 망하는 길이다  (0) 2022.10.28
디테일(Detail)의 힘  (0) 2022.10.28
반응형

가끔 나는 생각했다.
내가 그 조기 신호를 조금만
더 진지하게 생각했다면, 그렇게
가벼이 넘겨버리지 않았다면, 최악의 사태는
막을 수 있었을 것이라고. 결국 귀를 틀어막은
내 선택의 대가는 비쌌고, 나는 그 값을
참으로 호되게 치렀다.


- 노라 마리 엘러마이어의《나는 괜찮을 줄 알았습니다》중에서 -


* 모든 일에는
'조기 신호'가 있습니다.
경악할 만한 대형 참사도 반드시 '전조'가 있습니다.
타성에 젖어 있으면 보이지 않습니다. 보였어도
'괜찮을 줄 알았다'며 무심히 지나치고 맙니다.  
그 대가는 너무도 비싸고 참혹합니다.
'조기 신호'만 제대로 작동했으면
최악의 사태는 막을 수
있었습니다.

반응형
저작자표시 비영리 (새창열림)

'아침편지' 카테고리의 다른 글

'적정 긴장'  (0) 2022.11.03
편가르기  (0) 2022.11.02
아비규환  (0) 2022.10.31
언어 너머의 우주  (0) 2022.10.31
겸손한 성품  (0) 2022.10.28
반응형

1. CheckBox 체크

$('#ckBox').prop('checked',true);
$('input:checkbox[name="네임"]').prop('checked',true);

첫 번째 라인과 같이 체크박스의 id를 지정해서 체크하여도 되고, 두 번째 라인과 같이 name, id 등을 선택하여 체크할 수 있다.

true로 설정하면 체크가 되고, false로 설정하면 체크가 해제 된다.

2. CheckBox 체크여부 확인

$('#ckBox').is(':checked');

.is(':checked') 를 이용하여 체크되어 있는지 아닌지를 알 수 있다.

(true : 체크되어 있음, false : 체크되어 있지 않음)

3. CheckBox 전체 체크

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

위와 같은 checkbox가 있을 때, 전체 체크하는 방법은 간단하다.

	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});

allCk 체크박스를 클릭 했을 때, allCk가 체크되어 있다면 checkbox를 전부 다 true로 해주면 된다.

 

 

테스트 소스

<!DOCTYPE html>
<html>
<head>
	<script src="./jquery-3.4.1.min.js"></script>
</head>

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

<button type="button" id="btn1">1번 체크/언체크</button>
<button type="button" id="btn2">2번 체크/언체크</button>
<button type="button" id="btn3">3번 체크/언체크</button>
<script>
	$('#btn1').click(function(){
		var checked = $('#ck1').is(':checked');
		$('#ck1').prop('checked',!checked);
	});
	
	$('#btn2').click(function(){
		var checked = $('#ck2').is(':checked');
		$('#ck2').prop('checked',!checked);
	});
	
	$('#btn3').click(function(){
		var checked = $('#ck3').is(':checked');
		$('#ck3').prop('checked',!checked);
	});
	
	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});
</script>
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05
반응형

웹폰트 사용하기


웹사이트의 주소를 복사하여 스타일 시트나 html의 ‘<link href~'로 연결-스타일 시트에서 font-family로 지정합니다.
② 직접 웹서버에 업로드하는 방법 : *.eot, *woff 로 변환 - 서버로 업로드 -
@font-face{
 font-family:글꼴이름;
 src:local('글꼴이름‘),
 url('글꼴이름.eot),
 url('글꼴이름.woff') format('woff'),
 url(‘글꼴이름.ttf') format('truetype);}

 

폰트 연결하기


1. font-family : 글꼴 속성지정


윈도우의 기본글꼴은

영문 : sans-serif, serif   

한글:굴림, 궁서, 돋움, 바탕

 

 


-css3 에서 웹폰트를 웹표준으로 설정하여 글꼴을 연결하여 사용하거나, 서버로부터 다운로드하여 스타일을 적용할 수 있습니다. 

 

 

구글 폰트 다운로드 사이트▼


http://fonts.google.com
http://fonts.google.com/earlyaccess

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

직접 폰트 변환하여 연결하기

 

변환 사이트▼

https://onlinefontconverter.com/웹폰트를 변환한 후, 변환된 폰트 파일들을 fonts라는 폴더를 생성하여 넣어 주고 html에 연결하여 사용하면 됩니다.

웹폰트의 확장자에는 otf, eot, svg, ttf, woff, woff2 등이 있습니다.

 

웹에서 사용 가능한 폰트 : woff, 트루타입(ttf), 오픈타입(ttf, otf), 임베디드 오픈타입(eot), svg폰트(svg, svgz)

: 컴퓨터에서 사용하는 글꼴은 ‘*.ttf’이지만,다른 확장자들에 비해 용량이 크다는 단점이 있어 웹코딩을 할때에는 ‘*.eot', '*.woff'이 가장 적합합니다.

 

---> 대부분의 모던 브라우저에서 지원하는 woff 글꼴 파일을 먼저 선언하고 ttf파일은 그 다음에 선언한다.(ttf가 용량이 크기 때문에) woff파일의 형식을 지원하는 브라우저는 woff를 다운로드 하고 굳이 ttf는 따로 다운로드 하지 않습니다.

 

외부 스타일 css파일로 연결할 경우

<link href="css파일경로" rel="stylesheet" type="text/css">

 

html파일의 <head>부분에 외부 스타일 link을 연결해 놓고

css파일에는 다음과 같이 입력합니다.

@font-face{

font-family :‘글꼴이름‘;

src : local('글꼴명‘),

url('경로명/글꼴이름‘) format(’파일유형‘),

url('경로명/글꼴이름‘) format(’파일유형‘),

url('경로명/글꼴이름‘) format(’파일유형‘),

url('경로명/글꼴이름‘) format(’파일유형‘);

 

@font-face{

font-family :‘NanumPenScript-Regular‘;

src : local('NanumPenScript-Regular‘),

url('./fonts/NanumPenScript-Regular.eot‘),

url('./fonts/NanumPenScript-Regular.woff‘) format(’woff‘),

url('./fonts/NanumPenScript-Regular.ttf‘) format(’truetype‘),

url('./fonts/NanumPenScript-Regular.otff‘) format(’opentype‘);

}

 

폰트를 문서 전체( body)에 적용할 경우

body{font-family:'NanumPenScript-Regular‘,’serif','sans-serif'}

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

[HTML] 24 Powerful HTML Attributes Every Senior Web Engineer Should Master!  (0) 2023.06.08
[Html] autofocus, required , placeholder, readonly  (0) 2022.11.01
Pixabay 이미지  (0) 2022.10.13
브라우저 화면 드레그 안되게 css  (0) 2022.10.04
텍스트나 배경에 순수한 검정을 사용하면 안 되는 이유  (0) 2022.07.15

+ Recent posts

티스토리툴바