본문 바로가기

전체 글

 (19)
JavaScript <script>, 이벤트 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. JavaScript는 웹 페이지의 동적인 부분을 담당하는 스크립트 언어로, HTML 문서 내에서 사용된다. HTML에서 JavaScript를 사용하기 위해서는 JavaScript에서 이벤트(event)는 웹 페이지에서 발생하는 사용자의 행동이나 브라우저 자체의 상태 변화와 관련된 동작을 나타낸다. 주로 사용자와 상호작용하거나 웹 페이지의 상태 변화에 대응하는 데 사용된다. 2. 이벤트의 종류 마우스 이벤트 click : 요소를 클릭할 때 발생. mouseover : 요소 위로 마우스가 올라갈 때 발생. mouseout : 요소에서 마우스가 벗어날 때 발생. 키보드 이벤트 keydown : 키보드의 키..
Python 다중 반복문 예제 및 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 파이썬에서 다중 반복문은 하나 이상의 반복문이 중첩된 구조를 말한다. 이는 반복문 안에 또 다른 반복문이 있는 형태로, 여러 수준의 반복 작업을 수행할 때 유용하다. 주로 중첩 반복문은 중첩된 데이터 구조를 순회하거나 패턴을 조작할 때 사용된다. 예제1) 정수 n의 값을 입력받아 별표로 정사각형을 출력하는 프로그램을 작성하시오. n = int(input()) for i in range(n): for j in range(n): print('*', end='') print() 결과 >>> 3 *** *** *** 예제2) 직각삼각형 모양의 별표를 그리는 프로그램을 작성하시오. n = int(input()..
CSS 미리어 쿼리 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 미디어쿼리(Media Queries)는 CSS에서 사용되는 기술로, 미디어의 특성에 따라 스타일을 다르게 적용할 수 있게 해준다. 이를 통해 다양한 기기와 화면 크기에 대응하여 웹페이지의 디자인을 최적화할 수 있다. 미디어쿼리는 주로 반응형 웹 디자인을 구현하는 데 사용된다. ex) 화면을 작게 만들면 웹 요소들도 작아진다. 1. 미디어 쿼리의 구문 - 미디어쿼리는 @media 규칙을 사용하여 정의된다. @media media-type and (media-feature) { /* 스타일 규칙 */ } - media-type : 미디어 타입을 지정한다. 주로 screen, print, speech 등이..
CSS 그리드 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS에서 그리드(Grid)는 웹페이지의 레이아웃을 구성하는 데 사용되는 강력한 레이아웃 시스템이다. 그리드를 사용하면 웹페이지를 행과 열로 나누어 유연하고 일관된 레이아웃을 쉽게 설계할 수 있다. CSS 그리드는 CSS의 일부로서, 그리드 레이아웃을 정의하기 위한 다양한 속성들을 제공한다. 1. 컨테이너(Container) - 그리드를 정의하기 위한 부모 요소를 컨테이너라고 한다. - display: grid; 속성을 사용하여 해당 요소를 그리드 컨테이너로 지정한다. .container { display: grid; } 2. 행과 열 정의 - grid-template-rows 및 grid-templ..
CSS 박스 모델 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS의 박스 모델(Box Model)은 웹 페이지의 요소(element)들을 박스 형태로 구성하는 모델이다. 이 모델은 각 요소를 content, padding, border, margin으로 나누어 각각의 역할을 정의한다. 1. Content (콘텐츠 영역) - 요소의 실제 내용이 들어가는 부분이다. - 크기는 width와 height 속성을 통해 지정된다. 2. Padding (패딩) - 콘텐츠 영역과 테두리(border) 사이의 여백 영역을 말한다. - padding 속성을 사용하여 조절할 수 있다. -> 적용시 남았던 여백이 사라진다. 3. Border (테두리) - 패딩 영역 주위에 그려진..
CSS 타이포그래피(font-size, color, text-align, font) 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS에서 타이포그래피는 문서의 텍스트를 스타일링하는데 사용되는 속성들의 모음을 의미한다. 글꼴, 글자 크기, 줄 간격, 글자 간격 등과 같은 텍스트의 시각적인 특성을 다루는데 중점을 둔다. 다양한 CSS 속성을 사용하여 웹 페이지의 텍스트를 보다 독특하고 가독성이 좋은 스타일로 꾸밀 수 있다. 1. font-size 값의 종류 - px (절대 크기 단위) : 고정된 크기로, 화면 픽셀을 기준으로 한다. - em (상대 크기 단위) : 부모 요소의 크기에 상대적인 크기를 나타낸다. - rem : 루트 요소 (일반적으로 )의 크기에 상대적인 크기를 나타낸다. - % : 부모 요소의 크기에 상대적인 백분..
Python 단순 반복문 예제 및 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 대부분의 코드 예제는 코드트리의 문제를 응용하거나 가져온 것들입니다. 파이썬에서 반복문은 for를 사용하여 해결할 수 있다. for i in range(a, b): i값이 a부터 b-1까지 1씩 증가하며 들어온다 예제1) 3부터 10까지 출력하는 프로그램을 작성하시오. for i in range(3, 11): print(i, end=' ') 결과 3 4 5 6 7 8 9 10 예제2) 사용자로부터 숫자 n을 입력받아, 1부터 n까지의 숫자를 역순으로 출력하는 프로그램을 작성하시오. # 사용자로부터 숫자 n을 입력 받음 n = int(input("숫자를 입력하세요: ")) # 1부터 n까지의 숫자를 역..
CSS 기본 개념과 tag, id, class, 가상class 선택자 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS(Cascading Style Sheets)란? HTML이나 XML과 같은 마크업 언어로 작성된 문서의 표현을 디자인하는 스타일 언어이다. CSS는 웹 페이지의 레이아웃, 색상, 폰트 등을 지정하여 문서의 시각적인 표현을 담당한다. 여러 웹 페이지에서 일관된 디자인을 유지하고, 문서의 내용과 표현을 분리함으로써 유지보수를 용이하게 한다. ⦁ 글씨를 원하는 색으로 바꾸기 1. 안에다가 사용할 때 웰시코딩의 블로그의 오신 여러분 반갑습니다! 2. 3. 원하는 부분을 한꺼번에 바꾸기 HTML CSS JavaScript ⦁ 아이디선택자 (하나하나 관리를 하기 위함, ex) 학번, 주민등록번호) HTML..

티스토리툴바