👾

flexbox란? 기존의 display나 positon 등을 이용한 웹의 레이아웃 개발은 생각할 부분이 많고 어느 정도 한계가 존재해서 개발하기가 어려웠습니다. 이런 점을 극복하기 위해서 flexbox 개념이 도입되었습니다. flexbox를 이용하면 특별한 계산 없이 쉽게 정렬을 할 수 있고, 이를 통해 레이아웃을 편리하게 구성할 수 있습니다. flexbox 구성 flex box는 flex container(부모 요소)와 flex item(자식 요소)로 구성됩니다. flexbox를 사용하려면 부모 요소에 display: flex;를 추가하면됩니다. flex 속성을 추가한 요소가 flex container가 되고, 그 자식 요소들이 flex item이 됩니다. .flex_container { display..

멀티미디어와 관련된 태그 ✔ 이미지(image) 넣기 html 문서에 이미지를 넣으려면 태그를 사용하면 됩니다. 태그는 이미지를 정의할 때 사용하는 태그입니다. 이 태그를 사용해서 이미지를 넣으면, 이미지가 html 문서에 직접 삽입되는 것이 아니라 이미지 주소가 링크되는 형태입니다. 따라서 태그에는 src와 alt 속성을 반드시 명시해 주어야 합니다. src: source, 속성 값으로 이미지의 URL을 받습니다. alt: alternative text, 속성 값으로 사진 설명을 받고, 이 설명은 불러올 이미지가 없거나 이미지를 불러오는데 실패했을 경우 대신 나타납니다. ✔ 영상(video) 넣기 1. 태그 이용 영상은 태그를 이용하여 넣을 수 있습니다. 태그는 무비 클립(movie clip)이나 비디..

태그 ✔ a 태그 정의 contents 태그는 anchor(닻)의 약어로, 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 따라서 태그에는 링크(link)의 목적지를 가리키는 href 속성이 필요합니다. ✔ 속성(attributes) 정의 및 형식 속성(attributes)이란 태그에 대해 추가적인 정보를 제공할 때 사용하는 것입니다. 키(key) = "속성 값(value)" 형식으로 속성을 명시할 수 있습니다. 또한 하나의 태그에 속성이 여러 개일 경우, 각 속성은 공백 한 칸으로 구분합니다. 네이버 ✔ URL 정의와 종류 다시 href 속성으로 돌아와서, href의 속성 값으로는 URL이 들어갈 수 있습니다. URL에 대해 간단히 설명하자면,..

목차 제목 태그(h1~h6) 본문 태그(p, br, pre) 글자와 관련된 태그(strong, em, b, sub, sup, ins, del) 태그 사용 예시 제목 태그 제목 제목을 나타내는 태그 중요도에 따라 h1~h6으로 나눠서 사용 h1이 제일 중요한 제목, h6가 제일 덜 중요한 제목 본문 태그 본문 내용 본문과 관련된 태그 단락(paragraph)를 나누기 위한 태그 break, 줄바꿈을 할 때 사용하는 태그 컨텐츠가 없기 때문에 종료 태그가 없음 preformatted(형식화된), 태그 내에 작성한 내용을 그대로 브라우저가 인식하도록 하는 태그 의 경우 내용에 줄 바꿈을 여러 번해도 브라우저는 공백 한 칸으로 인식하지만 는 내용에 작성한 것을 그대로 인식함(글 아래에 예시에서 확인) 글자와 관..

시맨틱 태그(Semantic Tag) 의미를 가지고 있는 태그 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가됨 기본적인 시맨틱 태그 웹페이지나 섹션의 소개 또는 제목을 담는 태그 페이지 이동을 위한 메뉴를 담아서 네비게이션 역할을 하는 태그 웹페이지의 내용에 따라 기준에 맡게 구획을 나누는 태그 주내용(본문)을 담는 태그 사이드에 광고 또는 부내용을 담는 태그 웹페이지의 가장 아래 부분에 위치하고, 사이트 정보에 대한 추가 정보를 담는 태그

목차 HTML이란? HTML 요소 HTML 구조 HTML이란? HyperText Markup Language의 약자 HyperText - 하이퍼링크를 통해 사용자가 원하는 순서로 한 문서에서 다른 문서로 접근할 수 있는 텍스트 - 예시) 아래의 캡처에서 목차의 링크를 누르면 해당 내용으로 이동 Markup Language - 태그(마크, 표시)를 이용하여 문서나 데이터의 구조를 명시하는 언어 - 사용자가 보기 좋게 문서를 구조화 HyperText Markup Language - 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어 HTML 요소(element) 웹 프로그래밍 강좌 요소는 시작 태그(Start Tag), 내용(Contents), 종료 태그(End Tag)로 이루어짐 위의 예시에서 시작 태..

transform의 기준점 설정하기 transform의 다양한 속성 값들 translate, rotate, scale을 사용하다 보면 기준점을 정해야 할 때가 있습니다. 어디를 기준으로 이동, 회전등 요소를 변형할 것인지를 정할 수 있는 속성이 바로 transform-origin입니다. transform-origin transform의 기준점을 설정할 수 있는 속성으로, 속성값은 다음과 같습니다. // 2D transformation transform-origin: x-axis y-axis; // 3D transformation transform-origin: x-axis y-axis z-axis; cs 2D transformation을 사용할 경우, 기준점이 될 좌표의 x축과 y축 값을 속성 값으로 넣..

setInterval() setInterval()은 함수를 지정한 주기마다 반복 호출하는 메소드 입니다. 구문은 아래와 같습니다. setInterval(function, milliseconds) cs 반복 실행하고 싶은 함수를 function 부분에 작성하고 반복할 주기를 milliseconds 부분에 작성하면 됩니다. 이 메소드는 설정된 타이머의 ID값을 number로 반환합니다. 이를 이용해 clearInterval()로 특정 타이머를 취소할 수 있습니다. 사용 예시 - setInterval() 간단한 예시로 3초마다 alert 창을 띄우는 함수를 만들어보겠습니다. setInterval(function () { alert('hello'); }, 3000); cs 위 예시처럼 익명함수를 인자로 전달할 ..

시간을 나타내는 Date 객체 자바스크립트에서 현재 시간을 알고 싶다면 Date 객체를 사용하면 됩니다. Date 객체를 생성하는 방법은 아래와 같습니다. See the Pen JS Date Example1 by KimMiJin (@console_log) on CodePen. 위와 같이, Date 객체를 직접 호출하면 날짜를 나타낸 문자열을 반환합니다. Date 객체의 Methods(메소드) Date 객체는 날짜, 요일, 연도, 시간(시, 분, 초), 월 등의 정보를 얻을 수 있는 메소드들을 가지고 있습니다. getDate() // 날짜(date)를 반환 (1 ~ 31) getDay() // 요일(day)를 반환 (0 ~ 6) getFullYear() // 연도(year)를 반환 getHours() //..

setTimeout 사용방법 setTimeout()은 시간을 지연시켜주는 메소드다. setTimeout(function(){}, 1000); 위 코드를 실행시키면 1000ms(=1second) 뒤에 function()이 실행된다. setTimeout() 사용예시 3초 후에 "hello"라는 alert 창을 띄우는 자바스크립트 코드 예시 1 2 3 4 // 3초후에 "hello"라는 alert 창 띄우기 setTimeout(function () { alert("hello"); }, 3000); cs 소스파일 & 실행화면 위와 같이 index.html과 index.js 파일을 작성한 뒤 index.html 파일을 열면 다음과 같이 실행화면이 뜬다. hello라는 alert창은 실행 후 3초 뒤에 나타난다. ..