웹 공부일지

미디어쿼리 (media query) 미디어 쿼리란 반응형 웹 디자인의 핵심 부분입니다. 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 가장 간단한 미디어 쿼리 구문은 다음과 같습니다. @media media-type and (media-feature-rule) { /* CSS rules go here */ } @media 작성 방법과 속성들 미디어 타입에 대해서 알아보겠습니다. and 전 후에 띄워 씁니다. Media Type 설명 all 모든 미디어 장치에 ..

HTML 구조 관련 요소 구조 태그들은 다음과 같습니다. 코드로 설명드리겠습니다. 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요기사 광고 경기도 부천시 오정구 삼정동 032)674-5685 icoxpub@naver.com COPYRIGHT c right reserved. 결과 정리 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 형역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용 들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화 해주는 태그이며 섹션 주제에 대한 제목요소(..

CSS 기본 문법과 사용 방법 CSS(Cascading Style Sheet)는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌습니다. CSS를 정의하는 방법으로는 4가지가 있습니다. 4가지 방법을 같이 알아보죠~ 참고로 CSS에서 주석은 /* 내용 */로 표기합니다. CSS 레벨 CSS 명세는 World Wide Web Consortium에서 관리합니다. CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 버전이나 세대라고 볼 수 있고, 현재 CSS1, CSS2 및 CSS3가 정의되어 있습니다. 내부 스타일 시트 외부 스타일 시트 @import 인라인 스타일 1 정리 방법 적용 방식 설명 내부 스타일 시트 HTML문서 안에 styl..

벡터 방식과 비트맵 방식의 차이는 무엇일까요? 이미지를 표현하는 방식에 대표적으로 비트맵 방식과 벡터 방식이 있습니다. 그렇다면 두 표현방법의 차이는 무엇일까요? 비트맵 방식 비트맵 방식을 설명하기 전에 먼저 픽셀이라는 개념을 알아야 합니다. 픽셀이란 Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. 이 점 하나에 해당 색의 정보(빨간색, 녹색, 파란색, 투명도 등)가 담겨져 있으며, 이는 곧 그림의 용량과 직결됩니다. 그렇다면 비트맵 방식이라는 건 무엇일까요? 비트맵 방식 : 비트맵 방식은 '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가..

웹 표준, 웹 호환성, 웹 접근성에 대한 고찰 안녕하세요, 오늘은 웹 표준, 웹 접근성, 웹 호환성에 대한 이야기를 해보려 합니다. 모든 웹사이트는 정해진 웹 표준을 따라야 합니다. 그리고 웹 호환성을 준수한 사이트를 만드려면, 어떠한 브라우저에서도 웹사이트가 동일한 동작을 하도록 해야 합니다. 우리가 웹 표준과 웹 호환성을 준수하여 웹사이트를 제작한다면, 누구나 편하게 이용 가능한 웹 접근성이 높은 사이트를 만들 수 있습니다. 즉, 웹 호환성과 웹 접근성의 개념에는 웹 표준이 포함되어 있습니다. 웹 표준 웹 표준이란 img 태그의 적절한 alt속성을 추가, semantic태그를 이용할 때, 제목을 꼭 붙여준다, img태그를 사용할 때 figure 태그와 같이 사용한다, meta 태그를 적극 사용한다던가..

요소선택 자바 스크립트에서 html요소를 선택해서 제어할 수 있는데, 이러한 선택자들을 요소선택자라고 한다. 선택할 요소로는 태그, 클래스, 아이디 등을 선택할 수 있습니다. 이러한 선택자 API들을 이용해 DOM에서 Element 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다. ▶ 요소를 직접 선택하는 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우, HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. g..

변수 변수는 데이터를 저장하는 공간이고, 변수는 크게 전역변수와 지역변수로 나눌 수 있습니다. 전역변수 함수 블록{} 밖이나 안에서 자유롭게 사용할 수 있습니다. var 변수; function 함수() { 실행문 } 지역변수 함수 블록{} 내에서만 사용할 수 있습니다. function 함수() { var 변수; 실행문 } 예시 1 함수 내부에서 전역변수 kor의 값을 바꿉니다. var kor = 90; function getScore(){ kor = 100; // 전역변수의 값을 바꿈 console.log(kor); // 100 } getScore(); console.log(kor); // 100 결과 확인하기 100 100 예시 2 함수의 지역변수로 사용하려면 함수 내부에서 변수의 선언 키워드를 통해서..

자바스크립트 데이터 타입 데이터 타입은 변수에 저장되는 데이터의 유형으로 자바스크립트에서는 원시데이터 타입과 객체데이터 타입으로 나눌 수 있습니다. 원시 데이터 타입 (Primitive Data Type) 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 데이터 종류 설명 비고 Number 정수, 실수를 모두 포함한 자바스크립트의 숫자 형식이고, 64비트의 부동소수점 방식을 따른다. 0을 조건문에 넣으면 false로 인식된다. String 16비트 유니코드 문자의 집합(UTF-16)으로 전세계 대부분의 문자를 표현한다. 작은따옴표(''), 큰따옴표(""), 백틱(``) 으로 텍스트를 감싸서 표현한다. '' (빈문자열)을 조건문에 넣으면 false로 인..