Study
5주차
스터디 범위 자바스크립트로 무엇을 할까? HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼처 놓은 것처럼 웹 사이트 UI부분에 많이 활용 과거 웹은 단순히 정보를 나열하고 검색했다면, 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작 웹 플랫폼을 중심으로 하는 서비스가 점점 늘어나면서 그만큼 웹 브라우저를 통한 상호 작용이 더욱 중요해짐 과거에는 서버에서 했던 일을 이제는 클라이언트에서도 할 수 있게 되었고, 클라이언트에서 처리해야 할 기능이 많아지면서 자바스크립트의 기능은 더욱 강력해짐 자바스크립트를 사용하는 방식 웹 브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기(JavaScript Interpreter)가 존재 웹 문서 안에 외부 스크립..
텍스트를 스타일하는 방법
Definition CSS를 이용하여 텍스트의 스타일을 변경하는 것이 가능합니다. 아래와 같은 항목을 설정할 수 있습니다. font-family: 글꼴 font-size: 크기 font-style: 이탤리체 font-weight: 굵기 글꼴 변경 웹 문서에서 글꼴을 지정할때에는 한가지 글꼴을 선택하기도 하지만, 글꼴이 없을때를 대비하여 두번째, 세번째 글꼴까지 명시하는 것이 좋습니다. font-family: | [ , ] test heading 1 단락 정보 1 단락 정보 2 단락 정보 3 크기 변경 font-size를 이용하여 글짜 크기를 변경할 수 있습니다. font-size: | | | test heading 1 단락 정보 1 단락 정보 2 단락 정보 3 이탤릭체 설정 font-style을 사용하면..
CSS 선택자(Selector)
Definition 스타일 규칙은 태그뿐만 아니라 웹 문서 어떤 요소에도 적용 가능합니다. 선택자는 웹 문서에서 어느 부분에 스타일을 적용할 것인지 알려주는 것입니다. 선택자를 사용하는 방법은 미리 약속되어 있습니다. 전체 선택자 문서의 모든 요소에 스타일을 적용할 때 사용하는 선택자입니다. * { 속성:값; } 타입(Type) 선택자 특정 tag를 사용한 모든 요소에 style을 적용하는 것이 가능합니다. tag명 { 속성:값; } Type 선택자 test heading 1 단락 정보 1 단락 정보 2 단락 정보 3 클래스(Class) 선택자 다른 tag값을 가질지라도 특정 부분을 선택해서 스타일을 적용하고 싶다면, Class 선택자를 사용하면 됩니다. .Class명 { 속성:값; } Class 선택자..
스타일 작성 규칙(Syntax)
Definition CSS rule은 선택자(selector)와 선언 블럭(declaration block)로 구성됩니다. 선택자(selector)는 style하길 원하는 HTML element를 의미합니다. 선언 블럭(declation block)은 하나 이상의 선언(declation)을 포함합니다. 각 선언(declation)은 semicolon(;)에 의해 분리됩니다. 각 선언(declation)은 한개의 CSS property name과 value를 가지며, name과 value는 colon(:)에 의해 분리됩니다. Reference https://www.w3schools.com/css/css_syntax.asp
Introduction to CSS
Definition W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!" 라는 목적으로 CSS를 발표했습니다. HTML은 웹페이지의 Content 만을 포함하고, CSS는 웹페이지의 디자인 요소(글꼴, 색상, 정렬 등 시각적인 내용)만을 포함합니다. CSS 사용의 장점 웹 문서의 내용과 상관없이 디자인을 바꿀 수 있습니다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다. (반응형 웹디자인) 개발 속도가 빨라지며, 유지보수에 용이합니다. (웹개발자와 웹디자이너가 병렬로 작업 가능) Reference https://namu.wiki/w/CSS