web 69

[javascript] 배열

1. 배열 - 배열을 이용하여 데이터를 한번에 담을 수 있다. - 빈 배열, 숫자 배열, 문자열 배열 등 가능하다. 인덱스 0부터 시작한다. 길이 1부터 시작한다. - undefined는 할당되지 않은 경우에 등장한다. 예를 들면 변수를 선언만 한 경우에 나온다. 2. 배열 기본 기능 .length 배열의 길이를 알려준다. [인덱스] 인덱스를 이용하여 배열의 값을 가져온다. .push() 배열의 맨 뒤에 값을 추가한다. 추가되는 인덱스를 반환한다. .pop() 배열 맨 마지막 값을 제거한다. 제거되는 값을 반환한다. .sort() 배열을 정렬한다. .includes() 배열 안에 해당 값이 있는지 확인한다. 있는 경우에는 true를 반환하고, 없는 경우에는 false를 반환한다. 뒤에 괄호가 있는 경우에..

[javascript] 변수와 상수

1. html, css, javascript의 역할 html 웹 페이지 구조화하기. css 동적 디자인 넣어주기. javascript 브라우저의 모든 기능을 의미한다. 이벤트가 발생하는 경우 조건을 체크하고, 조건이 성립하면 약속된 명령어를 실행한다. 명령문 작성하는 것을 계속 공부할 것이다. 2. 변수와 상수 - 변수와 상수는 값의 변화 유무에 따라서 결정된다. - 변수와 상수 모두 데이터를 담는 공간 (상자)이다. 변수 여러가지로 변할 수 있는 값을 의미한다. 상수 변수와 반대이다. 변할 수 없는 값을 의미한다. - 선언 : 변수의 이름은 소문자로 시작하기. - 할당 : 변수에 데이터를 넣어주기. - 선언과 할당 : 동시에 진행 가능하다. = 은 변수에 데이터를 대입하는 것이다. 가독성을 확보하기 위..

[html css] 싸이월드 만들기 (2)

html, css를 이용하여 싸이월드 양식 만들기 1. 싸이월드 만들기 (1)에서 진행했던 것처럼 똑같이 오른쪽도 진행하면 된다. 2. 주의할 점은 부모 박스 만든 곳에 또 다른 내용이 들어가는 경우에 다시 한번 부모 박스로 감싸준다. 그렇게 만들어주는 것이 나중에 태그를 다루기가 쉬워진다. 3. 같은 형식을 보이는 경우에는 class를 지정하여 재활용하기. 오른쪽 박스를 보면 같은 형식을 보이는 것이 있다. (Updated news와 My Video 그리고 TODAT|Y STORY와 INTRODUCE MYSELF는 같은 형식을 보인다. 그러므로 각각 같은 class를 지정하여 css를 적용시켜준다.) 4. iframe을 이용하여 home.html을 넣어준다. iframe은 inline frame을 지정..

web/html css 2023.03.02

[html css] 싸이월드 만들기 (1)

html, css를 이용하여 싸이월드 양식 만들기 1. html 작성하기 전에 어떻게 구조화 되어 있는지 파악하기. 하이픈을 이용하여 부모 박스와 연관되어 있는 경우를 표기하기. 2. 바깥에서 안으로, 위에서 아래로 천천히 css 적용하기. padding 먼저 적용해보고, 잘 안되는 경우에 margin 이용해보기. padding을 이용하는 경우에는 부모 박스를 이용하자. 3. html 위치 조정할 때 시각적으로 잘 보이지 않기 때문에 background-color를 설정하여 css 적용이 잘 보이도록 만든다. 4. 절대적인 길이와 상대적인 길이가 있는데 상대적인 길이는 부모 박스에서 영향을 받는다. (예시 : % 기호는 상대적인 길이이다. 부모 박스의 길이에 따라 자식 박스의 길이가 달라진다.) 완성된 ..

web/html css 2023.02.24

[css] css란 무엇일까?

1. css 웹페이지에서 구조를 담당하고 있는 html의 색, 크기 등의 시각화를 담당한다. 주로 속성과 값으로 이루어져 있다. - 단일 속성 지정 : 1개의 속성과 값의 쌍을 의미한다. - 다중 속성 지정 : 2개 이상의 속성과 값의 쌍을 의미한다. 선택자{ 속성: 값; // 종료를 의미하기 때문에 반드시 적어주기 } css 지정 후 반드시 종료를 표기해야 한다. 아니면 문법적 오류가 뜬다. css 나타내는 방법 3가지 1. html 태그에 css 직접 입력하기 inline style 방식으로 style = "속성 : 값" 으로 표기하기. 유지 보수에 유리하지 않고, 관심사 분리가 안 된다. 즉 같은 언어끼리 묶이지 않고 있다는 의미이다. 2. head 태그 안에 style 태그 입력하기 style t..

web/html css 2023.02.23

[html css] 회원가입 양식 만들기

flex를 이용한 회원가입 양식 정렬하기 1. content-box에서 border-box로 넘어가는 것이 css의 기본 원칙이다. 내용 제외한 모든 것의 변화에서 기본 웹 페이지 제외한 모든 것의 변화로 양식 조정하기. 2. flex는 반드시 부모 태그가 필요하다. 또한 대각선으로 이동 불가하니, 가로 또는 세로로만 이동해야 한다. 3. 상위 태그부터 천천히 정렬시켜주기. 나는 가장 상위 태그인 body부터 정렬해주었다. 4. flex 사용 시에 자식 태그들의 정렬에 따라서 가로, 세로의 방향이 달라질 수 있음을 유의하자. 완성된 회원가입 양식 + 입력이 필요한 부분을 div 태그로 설정하면 입력이 되지 않는다. 입력에서 사용하는 태그를 이용하자. 경계를 없애고 싶은 경우에는 border에서 고쳐주면 ..

web/html css 2023.02.23

[html] 회원가입 양식 만들기

html로 회원가입 양식 만들기 1. input에는 여러 가지 속성과 값이 존재한다. 잘 조합하여 이용하면 원하는 모양을 만들 수 있다. 2. inline인 경우에는 을 이용하여 강제 줄바꿈을 실행한다. 나중에는 굳이 이렇게 하지 않아도 된다. css를 이용하여 원하는 모양으로 맞춰줄 수 있기 때문이다. 3. 종속 태그인 select와 option을 이용하고 속성과 값을 이용하여 원하는 모양을 만들 수 있다. 완성된 회원가입 양식 html로 웹사이트를 구조화하는 경우 태그의 고유한 역할에 잘 파악하여 이용해주자.

web/html css 2023.02.22

[html] html이란 무엇일까?

1. html 2. tag 3. block과 inline 4. 종속 태그 5. html 문서 구조 1. html - hyper text markup language - 웹페이지가 어떻게 구조화 되어 있는지 브라우저가 알 수 있도록하는 마크업 언어이다. - 공간을 만들고, 무엇으로 채울지 결정하는 언어이다. 2. tag - html은 수많은 tag들로 이루어져 있다. - 고유 기능에 맞게 브라우저에서 보여준다. - 시작 태그 + 내용 + 종료 태그 = 요소 (element) - 고유한 기능을 가지고 있고, 속성과 값을 이용하여 부가적인 기능을 추가할 수 있다. 예를 들면, input에 button, radio, checkbox 등 부가적인 기능들이 존재한다. - 또한 중첩이 가능하다. - 빈태그 : 내용과..

web/html css 2023.02.22

[web] 기본 지식

1. 웹서비스 2. 브라우저 3. 반응형웹 4. 확장자 5. 부모, 자식, 형제 관계 1. 웹서비스 브라우저에 주소창 입력하면 모든 페이지를 보여준다. - 브라우저 : 코드 실행기, 화면에 그려주는 역할, 브라우저에 어떤 코드를 불러왔는지 확인 가능하다. - 브라우저 예시 : 크롬, 사파리 등을 의미한다. 2. 반응형웹 화면 크기에 따라 디자인 등 실시간으로 변화한다. 앱서비스 ↔ 웹서비스 3. 확장자 컴퓨터가 파일을 어떻게 인식해야 하는지 알려주는 정보이다. (예를 들면 .jpg, .txt, .png 등) 4. 부모, 자식, 형제 관계 - 1개의 depth는 1번 들여쓰기를 의미한다. - 부모, 자식 관계 : 1개의 depth 차이를 가진다. 상위 폴더가 하위 폴더를 담는다. - 손자 관계 : 2개의 ..

web/html css 2023.02.22