Tech
Python, Java, AI/ML, Vim, Web, CS 이론 등 소프트웨어 개발 및 엔지니어링 기록
Javascript - setTimeout
javascript에서 일정 시간이 지연된 다음 동작이 수행되게 하려면 를 사용하면 됩니다. 즉 milli-second가 경과된 다음 가 args를 넘겨 받아서 실행됩니다. 혹은 다음처럼 function을 미리 정의한 다음 사용할 수도 있습니다....
Javascript - DOM methods - querySelector, getElementById
javascript에서 문서 내에 존재하는 element들을 selector, id를 통해 탐색하고 해당 요소의 성질을 변경하는 코드를 작성하였습니다. Example 간단하게 다음과 같은 코드를 작성하였습니다.
Javascript - addEventListener method
html의 특정 요소에 특정한 event(ex: 마우스 클릭)가 발생했을 때 특정한 동작이 수행되도록 하는 방법을 정리합니다. 다음은 에 마우스 클릭이 발생하면 를 해주는 코드입니다. DOM Events 다음과 같은 Event들이 있습니다. 자세...
CSS - linear gradient
css를 사용해서 html 요소의 background를 linear gradient로 설정합니다. 으로 정의해줍니다. - : gradient를 그려주는 방향을 결정해줍니다. 일 경우에는 위쪽으로, 일 경우에는 오른쪽으로 그려주죠. - : 는 어떤...
CSS - position property
문서 내 작성된 순서에 따라 배치되는 경우 position property의 다음 세 값은 문서 내에서 작성된 순서에 따라서 배치됩니다. 이미 현재의 요소 위에 다른 요소가 있다면, 그 요소의 아래에 그려지게 된다는 이야기죠. - : defaul...
CSS - background properties
css의 background의 다양한 설정값을 변경합니다. - : 요소의 background를 image로 설정합니다. - 값을 으로 설정하면 gradient로 예쁘게 설정됩니다. 호호. - : background의 크기를 설정합니다. - : b...
CSS - Box Shadow
요소의 글 상자 만큼의 를 만드는 방법을 정리합니다. 는 로 정의됩니다. - : boxshadow의 위치 양수(오른쪽), 음수(왼쪽) - : boxshadow의 위치 양수(아래쪽), 음수(위쪽) - : 그림자를 얼마나 뿌옇게 뿌려질지 정합니다. ...
CSS - List Style
html 요소인 들에 대해서 스타일을 적용하는 방법을 정리하였습니다. 한 줄로 표현하려면 다음과 같이 정의하면 됩니다. 저는 각 스타일별로 하나씩 적용해주는 것을 더 좋아하는 편이라서, 다음처럼 처리합니다.
CSS - margin, padding, border
html의 각 요소는 모두 content, padding, border, margin이라는 값을 가집니다. - : 일반적으로 각 요소에 정의하는 , 는 content의 너비, 높이를 의미합니다. 이 값은 padding, border, margin...
CSS - z index
z-index는 html 내에서 요소들이 서로 겹쳐졌을 때 머넞 보이는 순서를 말합니다. z-index값이 클수록 위에 있습니다. 즉 커야 가장 바깥 쪽에 위치한 다는 이야기죠. 아무 값도 설정하지 않았을 때는 가장 나중에 만들어진 요소가 가장 ...
CSS - Pseudo Class
css에서 각 요소들의 property를 사용자의 동작에 따라 변하도록 할 수 있습니다. 가령 다음과 같이, 에 대해서 정의하면 요소에 마우스가 올라가면(hover), 빨간 색으로 바뀌도록 할 수 있죠. Test Example 간단하게 예제를 만...
CSS - Text Alignment
CSS의 은 텍스트의 정렬 을 정의합니다. - : 왼쪽 정렬 - : 오른쪽 정렬 - : 가운데 정렬 - : 양쪽 정렬 Example - Text Alignment 예제로 만들어본 문서는 다음과 같습니다.
CSS - Relative Unit
를 사용해서 요소를 해당 요소의 outer의 설정 값에 비례해서 선택하도록 할 수 있습니다. , 를 사용하면 현재 브라우저의 width, height에 따라서 해당 요소의 크기가 변하게 되죠. , 는 각각 "width, hegith 중에서 작은 ...