미션: prompt로 받은 문자열을 alert 함수로 출력. 변수선언 let :블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수 있다. prompt: 선택적 메세지를 갖고 있는 대화 상자를 띄움. 형식은 다음과 같다. result = window.prompt(message, default); 매게변수 message (생략가능): 사용자에게 보여줄 문자열. default(생략가능):입력 필드에 기본으로 채워 넣을 문자열. let name = prompt('이름을 입력해주세요'); 만약 이름이 입력이 안되면 다시 프롬포트 띄우기를 해준다. if(name ==='' ){ name =prompt('입력해주세욥!!!!'); } 웹페이지 alert기능을 통해 출력한다. -..

HTML은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어로, 어디가 문단이고 헤딩이고, 데이터 형태, 구성을 정의해준다. 웹페이지 만드는데 사용하는 가장 기본적인 언어다. 자바스크립트 사용하기 앞서 DOM 개념을 잠깐 훑고 가보겠다. DOM을 이해하면 웹개발을 하는데 좀더 큰 그림을 볼 수 있기 때문이다. DOM 은 Document Object Model의 약자로, 한글로는 문서 객체 모델이다. W3C의 표준이기 때문에 의 표준화한 API들의 기반이 된다. (W3C: 웹 표준과 가이드라인 개발 수행 조직) DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 “노드 트리”로 표현된다. HTML과 DOM은 서로 비슷하지만, 가장 큰 차이는 단순 텍스트로 구성된 HTML 문서의..

오늘은 다음과 같은 화면을 구성해보려한다. 들어가는 태그 : div, li, a 그리고 실시간 시간 카운트를 위해서 clock.js를 통해 별도로 클라스 형성을 할 것이다. 1. [HTML] 상단 태그 만들기 Home News Contact About 2. [HTML] 중앙 채우기 00:00:00 안녕하세요, 제이름은 딩기스칸입니다. 저는 프론트엔드 개발자일까요? View my work 3. [CSS] 목차 스타일 지정하기 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: right; } li a { display: block; color: white; tex..

div는 문서의 레이아웃을 구성하는 태그며, 그렇기 때문에 table보다는 CSS를 활용한 div 태그를 많이 쓰는 추세라고 한다. 웹표준이기도 하고 속도면에서도 div를 활용하는 것이 더 유용하기 때문이다 . 오늘은 이전 시간 table을 통해 만든 HTML을 활용하여 table과 똑같은 결과물을 div를 통해서도 구현해보겠다. 4 1 2 3 이런식으로 table을 구성하면 이런 느낌의 테이블을 만들 수 있다. 이런 테이블느낌의 출력물을 div layout을 통해서 다시 구현해보자. 이렇게 style을 잡아주고 body에는 다음과 같이 출력해준다. 1 2 3 4 D.O.N.E!!!!

목차 display property 종류와 활용 예시 border 종류와 활용 예시 display property 종류와 활용 예시 display Property 4가지 1. display: none; 보이지 않게 해준다. 2. display: inline; 컨텐츠를 작성하는 공간의 크기만 갖는다. 컨텐츠 감싼 크기만 갖고 별도의 크기 변화가 안된다. 3. display: block: 따로 설정하지 않아도 div가 갖게되는 기본값으로 기본적으로 div는 한 줄을 다 차지 한다. 4. display: inline-block: 박스형태의 컨텐츠를 작성하는 공간으로 inline과 block의 특성을 합쳐 놓았다고 생각할 수 있음. 크기를 바꿀 수 있다. 활용 예시를 보면 쉽게 이해갈 것이다. ☞여기서 빨리 작..

목차 용어정리 p태그, div태그, span태그 미디어태그 CSS와 클래스 애플 홈페이지 상단만 어렴풋하게 닮아보기 용어정리 CSS(Cascading Style Sheet) HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어. 좀더 디자인에 최적화된 웹페이지 마크업 언어라고 볼 수 있다. HTML4부터 따로 분리하는 것이 가능해졌고 오늘날 대부분의 웹브라우저들은 CSS를 지원하고 있다. CSS와 클래스 좀더 살펴보기 엘리먼트(Element) 웹디자인의 최소 단위. 쉽게 말해 html의 구성요소고 html은 이 엘리먼트들의 집합이다. 엘리먼트는 5가지의 집합으로 이뤄져 있다. => ①시작태그(속성 이름과 속성 값 포함) ②내용 ③종료태그 ex) div태그 시작태그 컨..