꾸준히.28 Introduction to JavaScript 1. JavaScript 소개 웹 페이지의 구조를 정의하는 것은 HTML이다. 그런데 HTML만 있다고 해서 웹페이지가 돌아가는 것은 아니다. 우리가 알고 있는 거의 모든 페이지에는 JavaScript 코드가 들어가 있다. JavaScript는 웹 페이지와 상호작용하도록 만들어진 언어이다. 프런트 앤드 개발자의 역할이 여러 가지 있겠지만, 가장 큰 역할은 JavaScript를 사용하여 웹페이지를 dynamic 하고 interactive 하게 만드는 일이다. JavaScript는 브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 역할을 한다. JavaScript를 실행시키려면 1. 브라우저가 존재해야 하고, 2.HTML 파일이 있어야 하고, 3. HTML 파일에서 .. 2020. 6. 16. CSS - 19. Media query 1. Media Query media query란 responsive Web을 구현하는 CSS technique이다. 특정 조건에서는 어떤 CSS를 적용하라는 규칙을 줄 수 있다. css에 @media라는 문법으로 작성하게 된다. @media only screen and (max-width: 480px) { body { font-size: 12px; } } 위 코드는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것이다. 위 코드를 해석해보자면, 1. @media - 이 키워드는 media 쿼리를 시작하겠다는 의미이다. 2. only screen - 어떤 디바이스에서 적용하는지 알려준다. 예를 들면 프린트를 하고 싶을 때 적용하려면 only print라고 작성하면.. 2020. 6. 15. CSS - 18-2. 레이아웃의 모든 것 1. position 속성 static 요소를 문서 흐름에 맞추어 배치한다. relative 이전 요소에 자연스럽게 연결하여 위치를 지정한다. absolute 원하는 위치를 지정해 배치한다. fixed 지정한 위치에 고정하여 배치한다. sticky 위치에 따라서 동작방식이 달라진다. 요소가 임계점 이전에는 relative와 같이 동작한다. 그 이후에는 fixed와 같이 동작한다. static을 제외한 나머지 속성 값들은 top, right, bottom, left와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있다. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인지를 나타낸다. (예. top: 10px 이면 기준 위치 위에서 10px 떨어져 위치시키라는 뜻이다.) static static은 p.. 2020. 6. 15. CSS - 18-1. float 기반 레이아웃 float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 된다. 1. float 사용 예제 float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다. 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다. 그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있다. 2. float 문제 해결 float을 해결하려면 clear라는 속성이 필요하다. float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티이다. 해결방법은 여러 가지가 있다. 해결방법 1. 바깥 div 마지막에 아무 태그나 넣고 clear 속성을 적용한다. 이 기법을 .. 2020. 6. 15. 이전 1 2 3 4 5 ··· 7 다음
