웹 개발 공부 컨텐츠134 CSS 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. ▶ 스타일 시트 종류 설명 형태 내부 스타일시트 CSS를 HTML 문서 안에 외부 스타일시트 스타일 속정을 외부 HTML에 따로 저장하는 형태입니다. 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용되며 *.css의 확장자를 가집니다. @import CSS 안으로 다른 CSS 파일을 불러올 때 사용하며 CSS의 맨 윗줄에 기술합니다. @import url("style.css"); 인라인 스타일 태그에 직접 CSS를 정의해주는 형태로, 해당 요소에 syle="" 형태로 기술합니다. 우선순위가 제일 높지만 공통으로 css를 수정할 수 없어 자주 사용하지는 않습니다. 2022. 8. 15. 구조관련요소 구조 관련 요소 HTML의 구조를 나타내는 요소입니다. Semantic Web 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 방식입니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 네비게이션, 검색 등의 내용들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션주제에 대한 제목 요소(~)를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 .. 2022. 8. 15. 내장 함수 내장 함수 자바스크립트에 기본적으로 내장되어 있는 함수입니다. 1. 인코딩, 디코딩 함수 URL쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우, 인코딩 함수를 이용하여 문자를 부호화 시키고 디코딩 함수를 이용하여 되돌릴 수 있습니다. 함수명 설명 encodeURIComponet( ) 영문, 숫자와 ( ) - _ . ~ * ! '을 제외한 문자를 인코딩합니다. decodeURIComponet( ) encodeURIComponet( )의 디코딩 함수 2. 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN( ) 숫자인지 아닌지를 판별하는 함수입니다. 숫자이면 false를 반환해주고 숫자가 아니면 true를 반환해줍니다. N.. 2022. 8. 15. join()/push()/pop() 배열 메서드 - join( )/push( )/pop( ) 배열을 결합, 추가, 제거하는 메서드입니다. 매서드 설명 join( ) 배열의 요소를 연결하여 하나의 값으로 만듭니다. push( ) 배열의 마지막에 하나 이상의 요소를 추가합니다. pop( ) 배열의 마지막 요소를 제거하고 그 요소를 반환합니다. 1. 배열 메서드 : join( ) join( ) 메서드는 배열의 요소를 연결해 하나의 값으로 만들어줍니다. 출력시 배열에 있는 요소들을 하나의 값으로 만들며, 각 요소의 구분은 콤마(,)로 합니다. 요소들의 구분을 다른 문자로 하려면 ( ) 안에 원하는 문자를 넣습니다. //변수 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join('.. 2022. 8. 11. 카드 유형 03 사이트 만들기 이번 사이트는 박스 안에 카드를 만드는 유형입니다. 이번에 만들 사이트 역시 카드 유형 01의 심화 버전입니다. 카드 유형 사이트 만들기 03 이번 카드 유형은 파란색 배경 안, 칸막이가 있는 박스에 카드 플롯이 3개 들어간 유형입니다. 1. 컨테이너 만들기 컨텐츠를 넣기 전 레이아웃을 만들기 위한 컨테이너를 만듭니다. wrap을 파란색으로 칠해 배경을 만든 후 wrap 안에 컨테이너를 만듭니다. 컨테이너를 중앙에 위치시키기 위해선 wrap에 'display: flex'와 'align-items: center'를 주어야 합니다. 'align-items'은 flex에서 수직 방향의 위치를 지정해 줍니다. 2. 카드 만들기 컨텐츠를 넣기 전 컨텐츠가 들어갈 카드와 카드 사이의 칸막이를 만듭니다.. 2022. 8. 11. 비트맵/벡터 방식 벡터와 비트맵 방식 차이 이미지를 표현하는 방식으로 비트맵과 벡터 방식이 있습니다. 비트맵을 설명하기 전에 우선 픽셀의 개념부터 알아야 합니다. 1. 픽셀(pixel) 픽셀이란? Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위. 픽셀은 그림을 나타내는 최소한의 점이며, 이 점 하나에 해당 색의 정보가 담겨져 있습니다. 픽셀 하나하나가 모이면 그림이 되며 이렇게 이미지를 나타내는 방식이 바로 비트맵 방식이 됩니다. 2. 비트맵(Bitmap) 방식 비트맵 방식이란? '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다.. 2022. 8. 10. 웹 표준 편 웹 표준(Web Standards) 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있습니다. 1. 웹 표준에 대해서 여러 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미하며, 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것입니다. 1-1. 웹 표준을 준수하는 이유 국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과.. 2022. 8. 9. 카드 유형 02 사이트 만들기 이번 사이트는 8개의 카드 유형 사이트 입니다. 이번에 만들 사이트는 카드 유형 01의 심화 버전입니다. 카드 유형 사이트 만들기 02 이번 카드 유형은 8개의 카드가 4개씩 2층으로 이루어진 구조입니다. ▶ HTML 파트 저번 유형보다 카드가 8개로 늘어났지만 크게 달라진 점은 없습니다. 네모네모 재밌는 LEGO! 남녀노소 누구나 좋아하는 레고입니다. 가지각색의 모양으로 아주 다양하고 창의적인 모형을 만들어 보세요! 기본적인 레고 블럭 가장 기본적이고 심플한 레고 블럭 모양입니다. 아래 쪽 흠에 위쪽 부분을 끼워서 연결할 수 있습니다. 다양한 레고 블럭 또한 레고는 기본 블럭뿐만 아니라 직사각형, 원통형 등등 여러가지 모양의 블럭이 있습니다. 더 많은 레고 블럭 사람 모양이나 동물, 도구.. 2022. 8. 9. 퀴즈 이펙트 만들기 04 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 04 이번 퀴즈는 객관식 유형으로 사용자가 선택한 답안을 정답과 비교하여 출력해주는 방식입니다. 이번 퀴즈는 객관식이기 때문에 사용자가 선택하기 위한 보기 문항과 체크 방식을 만들고 보기 문항에 선택자를 지정해야합니다. 요소 매서드와 이벤트 매서드 역시 사용자가 선택한 문항을 매치하여 결과를 출력하는 방식으로 만들어야 합니다. ○ 보기 문항 만들기 //CSS .quiz__selects { margin: 5px 0; } .quiz__selects label { display: flex; } .quiz__selects label input { position: absolute; left: -9999px; } .quiz__selects .. 2022. 8. 9. 카드 유형 01 사이트 형태 많은 사이트가 다양한 형태로 디자인되어 있으며 사이트는 크게 3가지로 분류됩니다. 1. 웹표준 사이트 2. 페럴렉스 사이트 3. 포폴형 사이트 또한 사이트는 큰 영역으로 구분해서 레이아웃을 형성합니다. 메뉴 영역 배너 영역 컨텐츠 영역 푸터 영역 각 영역에는 여러가지 유형의 컨텐츠가 들어가게 되며 복합적인 유형으로 구성될 수 도 있습니다. 메뉴 유형 배너 유형 이미지 유형 슬라이드 유형 동영상 유형 카드 유형 게시판 유형 푸터유형 이미지/텍스트(탭/슬라이드 등등) 유형 텍스트 유형 따라서 코딩을 시작하기 전에 전반적인 틀을 만들어 놓은 후 시작하는게 좋습니다. 카드 유형 사이트 만들기 01 이번에 만들 간단한 카드 유형의 사이트 형태입니다. 우선 헤더 부분을 만들기 위해 전반적인 리셋을 해준.. 2022. 8. 8. 요소 선택 요소 선택 자바스크립트에서 HTML 요소를 다루기 위해서는 해당 요소를 선택해야만 합니다. 매서드 설명 getElementByld() document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementByClassName() document.getElementByClassName('menu')일 경우 HTML 요소 중 Class명이 'menu'인 요소를 선택합니다. getElementByTagName() document.getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소를 선택합니다. getElementByName() document.getElementByName('tx.. 2022. 8. 7. 퀴즈 이펙트 만들기 03 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 이번 퀴즈 만들기는 퀴즈 만들기02의 심화 학습니다. 퀴즈 만들기 03 이번 퀴즈는 여러개의 주관식 문제를 만드는 유형입니다. 여러개의 문제를 만들기 위해선 객체를 활용하여 각각의 블록에 맞는 실행값을 넣어야 합니다. ○ 선택자 //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 //문제가 여러개라 "All"을 넣음 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__question .a.. 2022. 8. 6. 이전 1 ··· 7 8 9 10 11 12 다음
