FE4
-
[JS] JQuery의 초간단 사용법
JQuery는 JavaScript에서 쉽게 사용할 수 있도록 만든 라이브러리입니다. JQuery를 사용하면 HTML의 컴포넌트들에 대해 쉽게 접근하여 사용할 수 있습니다. 사용 방법은 아주 간단합니다. JQuery 를 사용할 수 있도록 CDN을 선언하여주고, class, id에 따라 접근하여주면 됩니다. 예시 코드는 아래에 있습니다. 아래의 코드는 checkResult라는 버튼을 누르면 "q1", "q2"라는 id 값을 가지는 태그들이 업데이트 되는 코드입니다. 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 리스트 테스트 3. 딕셔너리 테스트 4. 리스트 딕셔너리
2024.01.29 -
[CSS] margin과 padding
css에서 간격을 조절하는 것 중에 "margin"인자와 "padding"인자가 있습니다. "padding"은 태그 안의 요소의 간격을 지정하는 것이라면, "margin"은 태그들 끼리의 간격을 지정하는 것입니다.
2024.01.27 -
[CSS] css의 flex 정렬
html의 태그를 이용하여 정렬을 할 때, 기본적인 방향은 가로 방향입니다. 하지만, css의 옵션으로 "flex"를 주게되면, 정렬 방향이 세로 방향으로 바뀌게 됩니다. "flex-direction" 인자를 통해서 원래 방향인 세로 방향으로 정렬되도록 변경할 수도 있습니다. 한편, css에서 "justify-content"라는 인자와 "align-items"인자가 있는데, "justify-content"라는 인자는 주축flex에 대해 어떻게 정렬할 지 선택하는 인자이고, "align-items"는 주축이 아닌 축에 대해 어떻게 정렬할 지 선택하는 인자입니다. 위의 글을 정리한 그림과 코드는 아래와 같습니다. 1 2 3 text text text
2024.01.27 -
[CSS] css의 선택자
html에서 tag를 사용할 때, css의 선택자로 id, class를 사용할 수 있습니다. id 선택자를 사용하는 경우, css에서 "#"으로 접근할 수 있고, class 선택자를 사용하는 경우, css에서 "."으로 접근할 수 있습니다. class, id 선택자를 이용하는 예시 코드는 아래와 같습니다. 로그인 페이지 ID: PW: 로그인 하기
2024.01.27