web
·⏱ 1m
CSS - visibility
visibility의 값을 수정하여, 상황에 따라 보이도록 혹은 보이지 않도록 할 수 있습니다. 기본적으로는 visible하지만, 마우스를 올리면(hover) 보이지 않도록 설정합니다. 렌더링해보면, 마우스를 올리면 보여지지 않는 것을 알 수 있...
Page 2 of 4
web
·⏱ 5m
Toast UI Grid - Basic
toast-ui Grid를 사용하여 table을 그리는 방법을 정리합니다. 일반적으로 html에서 table은 다음의 형태로 표현해줍니다. 뭐...이렇게 해줘도 문제는 없는데 table은 워낙 많이 쓰이는 요소이기 때문에 javascript 단에...
web
·⏱ 3m
CSS - Box Shadow
요소의 글 상자 만큼의 를 만드는 방법을 정리합니다. 는 로 정의됩니다. - : boxshadow의 위치 양수(오른쪽), 음수(왼쪽) - : boxshadow의 위치 양수(아래쪽), 음수(위쪽) - : 그림자를 얼마나 뿌옇게 뿌려질지 정합니다. ...
web
·⏱ 4m
html - Google Font 연결하기
Google - Font에 존재하는 다양한 font를 가져와서, html 문서에 적용할 수 있습니다. local computer에 font를 다운 받은 다음 적용하는 것이 아니라, 웹피이지를 열 때 직접 Google - Font에서 font를 가...
web
·⏱ 3m
html - form tag
html에서 form tag를 사용해서 사용자로부터 입력을 받는 방식을 정리하였습니다. 입력받는 방식도 다양한 형식이 있고, 입력받은 값을 다른 html 문서로 GET 혹은 POST 방식을 사용해서 보낼 수 있습니다. 그리고 입력받은 값은 전달받...
web
·⏱ 2m
html - img tag
tag를 활용하여 image를 html 문서에 작성하는 방법을 정리하였습니다. tag는 다음의 5가지 format을 허용합니다. - - - - -
web
·⏱ 2m
html - Ordered, Unordered, Definition List
간단하게, tag를 사용해서 List를 만들어 줬습니다. 로 묶으면 Ordered List, 로 묶으면 Unordered List가 되죠. 번호를 매기는 순서나, 형태, 모양 등을 변경할 수 있죠. 마지막에는 이라는 를 의미하는 tag도 있습니다...
web
·⏱ 2m
html - a tag
html 문서 내에서 hyperlink를 표현할 수 있는 tag를 사용하는 방법을 정리합니다. href attribute에 을 그대로 넣을 수도 있고 혹은 를 넣어줌으로써 해당 요소가 있는 곳으로 움직이도록 할 수도 있죠.
web
·⏱ 1m
html 내에 CSS 연결하기
아래와 같이, html 문서 내 태그 내에 다음 부분을 넣어줍니다. 전체 html 문서를 보면 다음과 같죠. 사실 꼭 에 들어갈 필요는 없습니다. 그냥 에 넣어도 css가 적용되기는 해요. 과 같은 폴더 내에 를 둡니다. 혹은 그냥 다음처럼 내부...
web
·⏱ 1m
html - table 만들기
간단한 table을 만들었습니다. - : 테이블 요소를 의미하는 tag - : row를 의미하는 tag - : 내 각 cell을 의미하는 tag - : table header를 의미하는 tag - : 테이블 제목을 의미하는 tag
web
·⏱ 2m
JavaScript 코드 html에 연결하기
1 - html 내에 javascript 코드 그대로 넣기 다음처럼 html 파일 내에 javascript 소스를 그대로 집어넣을 수도 있구요. 2 - html 내에 javascript 파일 경로 넣기 아래처럼 파일에는 다음을 작성하고 에는 다음...
web
·⏱ 2m
html의 select 로 정해진 값 javascript로 가져오기.
select로 정해진 값 가져오기. html에서는 다양한 요소를 통해서 사용자가 원하는 input을 정의할 수 있습니다. 이 때, 라는 드롭다운형태의 박스를 정의할 수도 있죠. 이것을 정의하고, 값이 변경되었을때(정확히는 input이 발생했을 때...
web
·⏱ 2m
html에서 range를 이용해서 input을 받고 input 변화값 보여주기.
사용자가 직접 키보드를 이용해서 원하는 값을 매번 선택할 수도 있습니다. 그게 기본적인 input이죠. 그런데, 아주 정확한 값을 측정하지는 않아도 되고 대략적인 값만 해도 되고, 또 입력해야 하는 값이 매우 많다면, 그냥 scroll의 형식으로...
others
·⏱ 1m
onclick을 이용하기
아주 간단합니다. 그냥 html의 특정 부분을 눌렀을때, 어떤 javascript요소가 수행되도록 하려면 그냥 을 설정해주면 됩니다. 기본적으로는 에 대해서만 가능한 것 같지만, 도, 도 어떤 html 요소든 모두 가능하죠. 다음처럼 해주면 됩니...