web
·⏱ 5m
Toast UI Grid - Basic
toast-ui Grid를 사용하여 table을 그리는 방법을 정리합니다. 일반적으로 html에서 table은 다음의 형태로 표현해줍니다. 뭐...이렇게 해줘도 문제는 없는데 table은 워낙 많이 쓰이는 요소이기 때문에 javascript 단에...
Page 2 of 3
web
·⏱ 4m
CSS - linear gradient
css를 사용해서 html 요소의 background를 linear gradient로 설정합니다. 으로 정의해줍니다. - : gradient를 그려주는 방향을 결정해줍니다. 일 경우에는 위쪽으로, 일 경우에는 오른쪽으로 그려주죠. - : 는 어떤...
web
·⏱ 7m
CSS - position property
문서 내 작성된 순서에 따라 배치되는 경우 position property의 다음 세 값은 문서 내에서 작성된 순서에 따라서 배치됩니다. 이미 현재의 요소 위에 다른 요소가 있다면, 그 요소의 아래에 그려지게 된다는 이야기죠. - : defaul...
web
·⏱ 7m
CSS - background properties
css의 background의 다양한 설정값을 변경합니다. - : 요소의 background를 image로 설정합니다. - 값을 으로 설정하면 gradient로 예쁘게 설정됩니다. 호호. - : background의 크기를 설정합니다. - : b...
web
·⏱ 3m
CSS - Box Shadow
요소의 글 상자 만큼의 를 만드는 방법을 정리합니다. 는 로 정의됩니다. - : boxshadow의 위치 양수(오른쪽), 음수(왼쪽) - : boxshadow의 위치 양수(아래쪽), 음수(위쪽) - : 그림자를 얼마나 뿌옇게 뿌려질지 정합니다. ...
web
·⏱ 1m
CSS - List Style
html 요소인 들에 대해서 스타일을 적용하는 방법을 정리하였습니다. 한 줄로 표현하려면 다음과 같이 정의하면 됩니다. 저는 각 스타일별로 하나씩 적용해주는 것을 더 좋아하는 편이라서, 다음처럼 처리합니다.
web
·⏱ 3m
CSS - margin, padding, border
html의 각 요소는 모두 content, padding, border, margin이라는 값을 가집니다. - : 일반적으로 각 요소에 정의하는 , 는 content의 너비, 높이를 의미합니다. 이 값은 padding, border, margin...
web
·⏱ 1m
CSS - z index
z-index는 html 내에서 요소들이 서로 겹쳐졌을 때 머넞 보이는 순서를 말합니다. z-index값이 클수록 위에 있습니다. 즉 커야 가장 바깥 쪽에 위치한 다는 이야기죠. 아무 값도 설정하지 않았을 때는 가장 나중에 만들어진 요소가 가장 ...
web
·⏱ 2m
CSS - Pseudo Class
css에서 각 요소들의 property를 사용자의 동작에 따라 변하도록 할 수 있습니다. 가령 다음과 같이, 에 대해서 정의하면 요소에 마우스가 올라가면(hover), 빨간 색으로 바뀌도록 할 수 있죠. Test Example 간단하게 예제를 만...
web
·⏱ 3m
CSS - Text Alignment
CSS의 은 텍스트의 정렬 을 정의합니다. - : 왼쪽 정렬 - : 오른쪽 정렬 - : 가운데 정렬 - : 양쪽 정렬 Example - Text Alignment 예제로 만들어본 문서는 다음과 같습니다.
web
·⏱ 2m
CSS - Relative Unit
를 사용해서 요소를 해당 요소의 outer의 설정 값에 비례해서 선택하도록 할 수 있습니다. , 를 사용하면 현재 브라우저의 width, height에 따라서 해당 요소의 크기가 변하게 되죠. , 는 각각 "width, hegith 중에서 작은 ...
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을 허용합니다. - - - - -