728x90 > 프로그래밍 언어104 [생활코딩] JavaScript 입문 (1) # 오리엔테이션 자바스크립트 : 웹브라우저를 제어하기 위한 용도로만 사용될 뿐만 아니라 자바스크립트 언어와 자바스크립트가 동작하는 환경 (웹브라우저) 을 분리해서 생각해야한다 자바스크립트의 용도 : 웹서버를 동작하기 위한 도구로서 사용이 됨 = 서버사이드스크립트 브라우저에서 동작하는 자바스크립트 = 클라이언트 사이드 스크립트 자바스크립트를 웹서버에서도 사용할 수 있도록 하는 기술들 : JAVA , PHP, Python 웹브라우저에 주소를 입력하면 주소에 해당되는 컴퓨터를 찾아가게 됨 (요청) 그 컴퓨터에게 웹브라우저가 요청을 하게 되면 사용자가 입력한 주소에 해당되는 웹서버라는 소프트웨어가 사용자가 요청한 정보를 찾아서 그 정보를 웹브라우저에게 응답하게 된다. 서버 쪽에 존재하면서 사용자(웹 브라우저)에.. 2023. 8. 1. [생활코딩] CSS 수업 정리 (17) 미니파이의 목표 : css 코드를 작게 압축해서 서버와 클라이언트 사이에 주고받는 데이터의 크기를 줄이는 것 코드 경량화(minify) - CSS (opentutorials.org) 코드 경량화(minify) - CSS CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify opentutorials.org 왼쪽에 있는 코드를 clean-css라고 하는 도구를 이용해서 minify 한 것 원래 original 소스는 1186 문자가 있었는데 minify 된 후에 793 문자로 축소 프로퍼티가 없기 때문에 있으나 마나한 코드가 돼서 무.. 2023. 7. 24. [생활코딩] CSS 수업 정리 (16) 웹페이지 만들다 보면 여러 개의 웹페이지가 생기는데 여러 개의 웹페이지가 공통적으로 동일한 css를 갖게 되는 경우가 있는데 그걸 해결하기위한 방법 2개의 페이지와 (2개의 html) 1개의 동일 css 설정 page1 page2 h1 { color: red; } 링크의 중복 해결방법 link 사용 외의 다른 사용 방법 @import 2023. 7. 24. [생활코딩] CSS 수업 정리 (15) 전환 속성들의 값이 변경됐을 때 그 전환을 부드럽게 하는 기능 Click a { font-size: 3rem; } 사용자가 마우스를 클릭했을 때, 효과적용 하는 방법 = active 사용 display:inline-block 을 사용해야 transform transition이 적용된다 transform 이라고 하는 속성은 a 엘리먼트가 block level 엘리먼트 이거나, inline-block 인 경우에만 동작. inline 엘리먼트에서는 동작 X 부자연스러운 움직임 동작을 자연스럽게 하려면 = 전환 사용 a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다 라는 의미 transition-duration:1s; 0.1s al.. 2023. 7. 24. [생활코딩] CSS 수업 정리 (14) 변형 엘리먼트의 크기(조절), 엘리먼트의 회전 또는 비틀기 h1이 화면 전체를 쓸 경우, 트랜스 폼 효과의 결과를 보기 어렵다. display:inline-block; 사용 transform 효과들 1 -> 2 transform:scaleX(2) 두 배 했다는 뜻 Hello Transform! h1 { background-color: aqua; /* 텍스트 사이즈 */ color: white; display: inline-block; padding: 5px; /* 폰트사이즈 3배 */ font-size: 3rem; margin: 100px; transform: scaleX(2); } 0.5 1/2 즉, 반으로 크기를 줄인 것 X 의미 : X축으로 변형 일어난 것 y 축 또한 .. 2023. 7. 23. [생활코딩] CSS 수업 정리 (13) blend 클래스 태그 생성 style 효과 background-image, background-color 생성 img 는 표시되는데 background color 가 표시 안되는 이유 : img가 위에 있는 것 같은 상태이기 때문 blend : 혼합하려는 대상 있어야 함 background img 하고 background color 를 혼합 혼합할 때 사용하는 것 : background-blend-mode background-size:cover; css 효과 적용 rgb의 젤 끝에는 투명도 지정 가능 r: red g: green b: blue 빨간색(255)는 빨간색인데 투명도 0.5 라는 의미 blend-hover 사용 transition.. 2023. 7. 23. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음 728x90
