Soony's House

정적 웹 페이지 (Static Web Page)웹 서버에 이미 저장된 파일 (HTML, 이미지, Javascript 파일 등 )을 클라이언트에게 전송하는 웹 페이지.사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 계속 보게 된다.다른 처리 없이 요청에 대한 파일만 전송함으로 빠르다.단순한 문서로 웹 서버를 구축하기 때문에 '호스팅 서버'에 연결하는 비용이 적다. 저장된 정보만 보여주기 때문에 서비스가 한정적이다.추가, 삭제, 수정 등의 작업이 모두 코드를 직접 건드려야 하기 때문에 관리가 힘들다. 동적 웹 페이지 (Dynamic Web Page)서버에 저장된 HTML 파일이 그대로 브라우저에 나오는 것이 아닌, 동적으로 만들어지는 웹 페이지요청에 관하여 사용자는 조건에 따라 다..

자바스크립트 연산자- 연산자란 값에 대해 어떠한 작업을 컴퓨터에게 지시하기 위한 기호이다.  - '연산자'는 하나 이상의 표현식을 대상, '산술, 논리, 비교, 할당, 타입 연산' 등을 수행하도록 하여 하나의 값으로 만든다.   앞서 게시물에서 산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 타입 연산자 등에 대해 알아보았는데, 이러한 종류에 따른 연산자 상에서도 우선적으로 처리되는 우선순위가 정해져있다.  순위기능연산자1괄호()2증감/ 논리 연산자 not++  --   ! 3산술 연산자 곱셈*    /    %4산술 연산자 덧셈+   - 5비교 연산자 대소6비교 연산자 같음 ==  ===   !=7논리 연산자 and  && 8논리 연산자 or || 9대입 연산자 =    +=   -=

연산자- 연산자란 값에 대해 어떠한 작업을 컴퓨터에게 지시하기 위한 기호이다.- '연산자'는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다.    이때 연산의 대상을 '피연산자' 라고 한다.: 피연산자가 '값'이라는 명사의 역할을 하면, 연산자는 '값을 만든다'는 동사의 역할을 하는 셈이다.- 연산자는 어떠한 식을 연산하게 되느냐에 따라서 다양한 연산자로 구별하여 기억하면 된다.   산술 연산자 (Arithmetic Operator)- 수학 연산을 수행함.- 이항 산술 연산자 / 단항 산술 연산자 / 단항 부정 연산자  1.1 이항 산술 연산자 : 피연산자가 2개 필요함.  1.2 단항 산술 연산자 ++ 연산자 : 값을 1 증가시킴 --연산자: 값을..

자료형이란? 자료형 (Data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.자바스크립트의 기본타입은 '원시타입'과 '객체타입'으로 구분할 수 있다.(각각 '기본자료형' 그리고 '참조자료형'으로도 불린다.)  원시타입(primitive type)1. 문자열(string)2. 숫자(number)3. 참/거짓 값 (boolean)4. undefined5. null6. 심볼(symbol) 참조 자료형(object type)1. 객체 (object)   각자의 자료형 (데이터 타입)을 하나씩 정리해보자.  1. 문자열 (string)- 큰따옴표("")나 작은따옴표('')로 둘러쌓인 문자의 집합.- 덧셈 기호로 연결 가능함.  이스케이프 문자- 역슬래시(＼)를 붙여 씀.- 사용자 의도와 다르게 문..

가장 기본이 되는 자바스크립트의 변수 별 특징과 식별자 명명 규칙에 대해 정리하자.​​암시적선언: 자바스크립트에서 제공하는 변수 선언 키워드인 var, let, const 키워드를 사용하지 않고 변수를 선언함.아래와 같이 그냥 변수와 할당값을 선언해버린다.(자바스크립트에서 권장하는 방식은 아님.) 명시적선언: const, let, var 키워드를 사용하여 변수를 선언함. ​ ​ 변수 :변하는 수 - 변수의 식별자를 지정하는 행위 = '변수를 선언한다.' 라고 한다.- = 우변에 있는 값을 변수 공간에 대입하는 것 = '값을 할당한다.' var num = 10 + 20 ; 키워드 식별자 연산자 표현식 예시​ ​ 변수선언키워드 자주 사용되는 키워드에는 let , const , var 가 있다.각각의 키..

1. 미디어 쿼리 - 접속하는 미디어의 타입/ 특징 / 해상도에 따라 다른 스타일 속성을 적용하는 기술 ​ · 기본 문법 @media and () (){ /*css 코드; */ } - not / only ㄴ not 뒤에 오는 모든 조건 부정. ㄴ only 미디어 쿼리를 지원하는 기기에서만 해석하라. ​ -mediatype ㄴ 생략 가능함. (생략시 all 로 인식함.) ㄴ 생략하지 않으면 반드시 다음에 and 연산자가 와야한다. all 모든 기기 print 인쇄 장치(ex. 프린터기) screen 컴퓨터 화면 or 스마트 기기 speech 웹페이지를 소리 내어 읽어주는 장치(ex. 스크린 리더기) -media feature ㄴ 적용될 미디어의 조건을 적음. min-width 미디어 쿼리가 적용될 최소 너..

-hover 속성도 주어서 마우스를 올리면 사진이 움직이도록 했다.

1) css grid ​ ​ ​ 2) emmet -emmet 을 처음 사용해봤다. 저렇게 입력해주면 다음과 같은 코드가 10개 생성된다! (item 2는 추가적으로 적은 것.) ​ ​ ​ 3) 클래스 분류에서 image 와 image1은 분리해서도 클래스로 사용 가능함 ​ ​ ​ 4) 외부 스타일 시트 사용에 익숙해지자! css 파일과 html 분리 ! ​ ​ 5) 그리드 생성과 column / row ​ ㄴ item2 의 크기를 특정해서 지정해보기. ㄴ column 과 row 의 start 값과 end 값을 한 번에도 표기 가능하다. ​ ​ ​ ​ 6) 오늘의 결과물 ! ​ ㄴhover 속성도 넣어봤다. ​ *hover 값도 넣고 text , a href 속성도 넣어서 하나 더 만들어봐야겠다. 🧐 ​ ​

1차원 레이아웃: flexible box layout 속성으로 설계함. 2차원 레이아웃: grid layout 속성으로 설계함. ​ ​ ​ ​ 1.1차원 레이아웃 설계 (flexible box layout) ​ 1.1. 플렉스 박스 레이아웃이란 -main axis : 수평한 축 -cross axis : 수직한 축 -flex container : display 속성값으로 flex or inline-flex 가 적용된 요소 -flex item: 플렉스 컨테이너와 자식관계를 이루는 태그 구성요소 ​ ​ ​ 1.2. 기본 속성 ​ ★display속성 ㄴdisplay: flex; /*inline-flex*/ flex 다음 요소가 줄 바꿈 됨 inline-flex 다음 요소가 주변에 배치 됨 -플렉스 아이쳄이 수직..

css 배우기 전에 html 만으로 만들었던 나무위키 목록표에 css를 적용시켜봤다. https://blog.naver.com/smoothbutterfresh/223134426826 #코딩기록4_[html] 나무위키st 목록표 만들어보기 나무위키에 들어가면 보기쉽게 작성된 목록표를 구현해보고자 도전 ..! (아직 HTML만 배운 상태로 하는... blog.naver.com 짠 ,, 나무위키st 목차에 css를 적용시켜봤다. ​ ​ ★ - a 태그에 기본으로 적용되어있던 (링크 사용 시) 밑줄을 제거함. ㄴtext-decoration-line: underline; ​ 링크가 연결된 파란글씨를 클릭하면 해당 본문의 부분으로 연결된다. ​ ​ 사용된 CSS 코드들 HTML 코드들 목차 개요 특징 및 인터페이스..