목록전체 글 (281)
연습장
https://poiemaweb.com/js-introduction Introduction | PoiemaWeb자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소중 하나로 웹브라우저에서 동작하는 유일한 언어로 1995년 Brendan Eich(Nescape)가 Navigator 2를 위하여 개발한 웹페이지에 포함되는 스크립트 언어poiemaweb.com 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어“Mocha”로 명명되었다. 그해 9월 “LiveScript”로 이름이 변경되었고, 12월 “JavaScript”로 최종 명명 크로스 브라우징 이슈 : 브라우저에 따라 웹 페이지가 정상 동작하지 않음 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트에 대한 필요성이 제기..
https://poiemaweb.com/coding Progmamming | PoiemaWeb프로그래밍은 수행되어져야 하는 명령을 컴퓨터에 전달하는 일종의 커뮤니케이션이다. 이때poiemaweb.com 1. 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이때 요구되는 것이 문제 해결 능력이다. 문제(요구사항)을 명확히 이해하는것 - 복잡함을 단순하게 분해 - 자료를 정리하고 구분 - 순서에 맞게 행위를 배열 2. 프로그래밍 언어 인간이 이해할 수 있는 구문으로 구성된 프로그래밍 언어를 사용하여 프로그램을 작성한 후번역기를 사용하여 (컴파일러, 인터프리터)컴퓨터가 이해할 수 있는 기계어로 변환 컴파일러(compiler)전체 파일을 스캔하여 한꺼번에 번역한다.초..
https://poiemaweb.com/bootstrap-basics Bootstrap Basics | PoiemaWebBootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미poiemaweb.com Bootstrap은 빠르고 간편한 반응형 웹 디자인을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, ..
https://poiemaweb.com/css3-removing-white-space-image-element Typography | PoiemaWeb컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.poiemaweb.com 컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다. 문제 원인 : image 요소는 inline 요소로 텍스트 취급되어서 위와 같은 문제가 발생한다. 해결법 1. 해당 요소를 block 요소로 변환 해결법 2.vertical-align 프로퍼티의 기본값은 baseline인데 이를 변경하여 이미지 표시 위치를 조정하는 것이다. 해결법 3?img 의 상위 요소에 display : flex
https://poiemaweb.com/css3-centering CSS3 Horizontal & Vertical Centering | PoiemaWebCSS를 사용한 HTML 요소의 수평/수직 중앙 정렬 (Horizontal & Vertical Centering)poiemaweb.com 1. 수평 정렬(Horizontal Align) 1.1 inline/inline-block 요소 정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다. 1.2 block 요소 정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다. 정렬 대..
https://poiemaweb.com/css3-flexbox CSS3 Flexbox Layout | PoiemaWeb poiemaweb.com float 가 말그대로 둥둥 떠다니기 때문에 flex 를 배우고 나서는 거의 쓰지않았던거같다. 1. Introduction CSS3의 새로운 layout 방식이다.요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. Flexbox의 장점1줄의 코드 추가로 수평 정렬이 가능하다.요소의 상하좌우 정렬, 순서 변경이 간단하다.요소가 간격 조절이 간단하다.서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.비교적 최신 브라우저가 아니..
https://poiemaweb.com/css3-responsive-web-design CSS3 Responsive Web Design | PoiemaWebCSS3 'Responsive Web Design' '반응형 웹디자인' viewport @mediapoiemaweb.com 모바일과 같이 작은 해상도의 디바이스에서 접근했을 때 화면이 너무 작아져 가시성에 문제가 발생한다. 1. Responsive Web Design 개요 layout은 방문자의 화면 해상도를 고려하여야 한다.또한 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이..
https://poiemaweb.com/css3-layout CSS3 Layout | PoiemaWeb poiemaweb.com layout : 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.반응형 웹 디자인(Responsive Web Design) : 화면의 크기에 따라 적절히 화면 구성을 변화 CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다.공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다. 개인적으론 flex 가 편하지만 모든 브라우저에서 통용될 수 있도록 웹 페이지를 제작하는 크로스 브라우징 측면에서 float 가 더 유리하다고 한다. 아래서는 float 를 주로 다룰 예정 1. Header & Navigation B..
https://poiemaweb.com/css3-webfont CSS3 Web Font | PoiemaWeb웹디자인 관점에서 폰트의 선택은 중요한 의미를 갖는다. 대부분의 정보는 텍스트와 이미지로 전달되고 아직은 텍스트가 주를 이루기 때문에 더욱 그러하다. 이전에는 웹에서 사용할 수 있는poiemaweb.com 많은 정보가 텍스트와 이미지로 전달되고 있으며 웹 디자인 관점에서 폰트의 선택은 중요하다.웹페이지는 불특정 사용자를 위해 제작되기 때문에 어떤 사용자가 웹페이지에 접근할 지 알 수 없으며웹 브라우저는 로컬 소프트웨어이므로 로컬 환경에 있지 않은 폰트는 사용할 수 없다. 이러한 문제를 HTML, CSS , JS 처럼 폰트 또한 서버에서 클라이언트로 다운로드하여 해결할 수 있다. 1. CDN(Con..
https://poiemaweb.com/css3-transform CSS3 Transform | PoiemaWeb트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바poiemaweb.com 트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확..