01. HTML 소개_HTML 텍스트 기초01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 제목 및 단락 대부분의 구조화된 텍스트는 이야기, 신문, 대학 교과서, 잡지 등을 읽고 있든 간에 제목과 단락으로 구성됩니다. 제목: ~ 6개의 표제 요소가 있습니다. , , , , , 각 요소는 문서에서 다른 수준의 콘텐츠를 나타냅니다. 은 주제목을 은 부제목을 은 그 다음 부제목을 나타내는 식입니다. 단락: HTML에서 각 단락은 요소로 래핑되어야 합니다. 예시 단락 코드 01. HTML 소개_HTML 텍스트 기초01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 제목 및 단락 대부분의 구조화된 텍스트는 이야기..
01. HTML 소개_HEAD에 뭐가 들었어?02 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 사이트에 사용자 정의 아이콘 추가 사이트 디자인을 더욱 풍부하게 하기 위해 메타데이터의 사용자 정의 아이콘에 대한 참조를 추가할 수 있습니다. 이는 특정 컨텍스트에서 표시됩니다. 이들 중 가장 일반적으로 사용되는 것은 favicon(파비콘)입니다. 예시 CSS와 JavaScript를 HTML에 적용하기 거의 모든 웹 사이트는 CSS 를 사용하여 멋지게 보이게 하고 JavaScript 를 사용하여 비디오 플레이어, 지도, 게임 등과 같은 대화형 기능을 강화할 것입니다. 예시 문서의 기본 언어 설정 페이지의 언어를 설정할 수 있고 실제로 설정해야 한다는 점을 언급..
01. HTML 소개_HEAD에 뭐가 들었어?01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 01. HTML 소개_HEAD에 뭐가 들었어?01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML 헤드는 요소의 내용입니다. 요소의 내용은 와 달리 페이지에 표시되지 않습니다. 대신 헤드의 작업은 문서에 대한 메타데이터 를 포함 합니다. 문서에 제목을 추가하는 데 사용할 수 있습니다. 예시 title: 페이지 제목 메타데이터는 데이터를 설명하는 데이터이며 HTML에는 문서에 메타데이터를 추가하는 "공식적인" 방법인 <..
01. HTML 소개_HTML 시작하기02 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML 문서의 구조 개별 HTML 요소는 그 자체로는 그다지 유용하지 않습니다. 다음으로 개별 요소가 결합하여 전체 HTML 페이지를 형성하는 방법을 살펴보겠습니다. : 요소는 유효한 문서 유형으로 간주되는 가장 짧은 문자열입니다. : 요소는 페이지의 모든 콘텐츠를 래핑합니다. 루트 요소라고도 합니다. 엔티티 참조: HTML에 특수 문자 포함 HTML에서 , ", ', &문자는 특수 문자입니다. 그것들은 HTML 구문 자체의 일부입니다. HTML 주석 HTML에는 코드에 주석을 작성하는 메커니즘이 있습니다. 브라우저는 주석을 무시하여 사용자가 주석을 효과적으로 볼 ..
01. HTML 소개_HTML 시작하기01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML이란 무엇입니까? 먼저 HTML(Hypertext Markup Language)은 프로그래밍 언어가 아니고 방문하는 웹 페이지를 구성하는 방법을 웹 브라우저에 알려주는 마크업 언어 입니다. HTML은 웹 개발자가 원하는 만큼 복잡하거나 간단해질 수 있습니다. HTML은 콘텐츠의 다른 부분을 열거나 닫거나 마크업하여 특정 방식으로 나타나거나 작동하도록 하는 데 사용 하는 일련의 요소로 구성됩니다. 예를들어 콘텐츠를 하이퍼링크로 만들어 다른 페이지에 연결하고 단어를 기울임꼴로 표시하는 등의 작업을 수행할 수 있습니다. HTML 요소의 구조 요소는 여는 태그, 내용..
01. HTML 소개 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML 소개 HTML 시작하기 HEAD에 뭐가 들었어? HTML 텍스트 기초 하이퍼링크 만들기 문서 및 웹사이트 구조 HTML 디버깅 문자 표시 콘텐츠 페이지 구성 코드 01. HTML 소개 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML 소개 HTML 시작하기 머리에 뭐가 들었어? HTML의 메타데이터 HTML 텍스트 기초 하이퍼링크 만들기 문서 및 웹사이트 구조 HTML 디버깅 문자 표시 콘텐츠 페이지 구성
데이터 저장하기 데이터를 저장은 키워드, 변수명, 자료형으로 구성되어있습니다. 기본적인 형태로는 "키워드 변수명 = 자료형"으로 구성됩니다. 키워드에 대하여 배워봅시다. 데이터 저장하는 방법 데이터 저장하는 방법으로는 var, let, const가 있다. var, let, const을 비교해보자! var 데이터 저장 가능 중복선언 가능 재활당(변경) 가능 중복선언 가능 코드 { var a = "var 1"; var a = "var 2"; document.write(a); } 결과 재활당(변경) 가능 코드 { for(var b=1; b
layout 연습01 연습해볼 사이트를 찾는다. 사이트를 분해하여 보자. 레이아웃을 잡아보자 header, nav, main으로 나누어 보자 main을 section, aside으로 나누어 보자 section을 article1, article2, article3으로 나누어 보자 aside을 article4, article5으로 나누어 보자 레이아웃을 표시해 보자 HTML 검색공간 메뉴 광고 뉴스 광고 로그인 광고 CSS * { margin: 0; padding: 0; font-size: 50px; } body { background-color: #F1F8E9; } #all { width: 1190px; height: 1080px; margin: 0 350px 0 380px; } #header { widt..
프로토타입 (Prototype) 프로토타입은 상품/서비스가 출시되기 전 만들어진 원형(archetype)을 의미한다. 프로토타이핑(prototyping)은 사용자의 요구사항, 사용자리서치를 통해서 도출된 니즈, 아이디어 등의 개념(Concept)을 담은 모형을 만들어 이후 사용자와 상품/서비스가 제공하는 기능의 추가, 변경 및 삭제 등을 요구사항에 대해 소통하는 도구, 개발이 진행되는 동안 개발 참여자간에 개념을 공유하는 도구를 만드는 설계과정이다.요구사항 등을 반영한 개념 모델로 프로토타입을 1회 제작한 후 검증이 끝나면 이후 개발 업무를 진행하는 경우도 있으나 일반적으로 프로토타입을 활용하는 경우 지속적으로 프로토타입을 재구축하며 개선시켜 나가는 반복적인 접근법-지속적 프로토타이핑을 적용한다. 프로토..
for문 for문은 반복문의 일종으로 특정한 부분의 코드가 반복적으로 수행될 수 있도록 한다. for문는 while문과는 달리 일반적으로 해당 루프에 연계된 루프 변수가 존재하며, 그 변수의 비교 및 증감을 위해서 별도의 문법을 할애한 점이 구분된다. 문법 기본적인 형태는 for( ){ }이다. ( )안에는 초기값, 조건식, 증감식이 들어간다. 초기값에서는 for문에서 사용할 변수를 정의한다. 조건식에서는 반복을 얼마나 수행해야 하는지의 조건을 정의한다. 증감식에서는 초기값에서 정의한 변수의 변화를 정의한다. { }안에는 자바스크립트 코드를 작성한다. 기본형 for( 초기값; 조건식; 증감식 ){ 자바스크립트 코드; } 0~9까지 작성해보자 { for( let i=0; i
UI/UX 콘셉트 아이디어 도출하기 요구사항분석(requirement analysis) 요구사항 분석은 제품 또는 서비스의 사용자를 포함한 이해관계자들의 요구사항을 파악하고 이를 고려하여 제품 또는 서비스가 이와 부합하도록 하기 위한 조건을 결정하는 과정이 주가 되는 업무로 이후 개발 생명주기(SDLC, Software Development Life-Cycle)의 시발점이 된다. 시스템이나 소프트웨어 요구사항을 정의하기 위해 사용자의 요구 사항을 조사하고 확인하는 과정. 시스템이나 소프트웨어 요구사항의 검증. 요구사항의 도출 : 요구사항이 무엇인지를 파악하기 위해 고객 및 사용자 등 이해관계자와 인터뷰 등을 수행하는 작업 요구사항의 분석 : 도출된 요구사항이 명확한지를 판단하고 이를 요구사항의 성격에 따..