Youna

Grid layout grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조 관점에서 html 기본 요소로 작성된 요소 입니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 그리고 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 쉽게 말해 저번 시간에 정리했던 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로,세로)레이이아웃 시스템입니다. 01. grid를 활용한 레이아웃 grid 레이아웃 만드는 방법 flex와 비슷한 형태로 시멘틱 태그를 만들어 줍니다. 시멘틱 태그로 만들어진 태그에 배경색과 grid area에 각 시멘틱 태그 이름을 붙혀줍니다. 태그들을 총 감싸고 있는 wrap태그 안에 wi..

레이아웃 Flex 요소들이 포함된 크느 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 박스 안에 구문은 해당 요소에 flex로 레이아웃을 계한다고 선언하는 뜻입니다. 01. flex layout flex를 이용해 레이아웃을 만든다 이렇게 코드진행을 할 수 있습니다. 가운데 부분은 class container를 이용해서 만들어 줍니다. 박스가 3개 나열 된다고 생각하고 처음에는 큰 메인 박스를 만들어 준 후 그 아래로 차례로 section1,2,3에 가로와 세로 값 배경색을 부여한 후 display: flex를 main부터 sectio..

문제 01. 숫자를 함수로 넘겨주고, 숫자에서 양수,음수,0 판단하기 사용자가 프롬포트 창에 숫자를 입렸했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지,음수인지, 또는 0인지 판단해서 알림창에 보여주는 프로그램을 작성하는 문제입니다. 숫자를 받아서 양수,음수,0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parselnt()함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬포트 창에 입력한 내용이 숫자가 아니면 parselnt() 함수는 NaN로 변환합니다. 반환 값이 숫자일 경우에만 함수를 실행 합니다. function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); //매개 변수 함수를 이용해서 if문을 실행함 } el..

제어문 제어문이란 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 제어하거나 반복시키는 문장을 말합니다. 제어문은 크게 조건문,반복문,중지,건너뛰기의 분류로 나눌 수 있습니다. 저번에 살펴 보았던 제어문과 더불어 새롭게 추가된 제어문에 대해서 함께 알아보도록 해요! 분류 제어문 조건문 if, swich 반복문 while, do while, for 중지,건너뛰기 break,continue 01. 조건문 if문 가장 기본적인 사용하는 조건문으로 주어진 조건이 참일 경우에만 코드 블록이 실행할 수 있습니다. if(조건식){ document.write("실행되었습니다.(ture)"); //조건식을 쓴 후 실행문을 써줘야 합니다. } if문 생략 기본 if 문을 생략해서 쓸 수 있습니다. //기본 i..

함수란? 자바스크립트 프로그램은 단순히 하나의 동작이 아닌 여러가지 동작이 연결되어 실행을 합니다. 동작해야 할 목적대로 여러 개의 명령을 묶는 것을 '함수'라고 합니다. 소스를 함수로 분리해 놓으면 필요할 때마다 원하는 기능만 따로 실행 할 수 있고, 같은 기능이 필요한 다른곳에서 다시 사용 할 수 있습니다. 그러므로 복잡하게 처리할 기능이 많다면 기능별로 나누기 좋은 아주 효과적인 방법입니다. 처음에는 어색할 수 있는 단어겠지만 잘 외워 두신다면 자바스크립트를 할 때 유용하게 사용하실 수 있습니다! 그러면 함수의 종류를 살펴 보도록 하겠습니다. 01. 선언적 함수 function func (){ //function이라는 예약어를 사용하고 함수 이름을 적고 소괄호와 중괄호를 적습니다. document...

자바스크립트에 데이터 저장하는 법은 변수,상수,배열,객체를 이용해서 저장할 수 있는 저장할 수 있는 방법이 있습니다. 숫자로 기재할 때는 ; 로 표시해주고 문자열로 표시해 줄때는 ""로 표시해줍니다. 01.변수: 데이터 저장 변수는 데이터를 저장하는 저장소입니다. x= 100, y=200, z="javascript"로 데이터를 저장하게 됩니다. 02.변수: 데이터 저장 + 데이터 변경 변수는 데이터를 저장할 수도 있지만 변경도 가능합니다. x=100에서 300으로 변경, y=200에서 200 그대로 z="javascript"에서 "react"로 데이터가 변경 되었습니다. 03.변수: 데이터 저장 + 데이터 변경 +데이터 추가 변수는 데이터를 저장할 수도 있지만 변경도 추가도 가능합니다. :연산자를 이용하..

선택자(selector) 선택자란 말 그대로 선택을 해주는 요소이며 CSS로 UI의 어느 부분을 디자인할지, 즉 표현하고 규칙을 정할 대상을 선택자라고 부릅니다. See the Pen Untitled by younajeong (@younajeong) on CodePen. CSS로 속성을 하는 부여하는 방법입니다. 여기에서 h1은 선택자 { }는 선언부로 선언부 안에 color라는 속성 그리고 red라는 속성값을 표시하며 속성 설정간에는 ";"를 표시하여 구분해준 후 또 다른 속성과 속성값으로 선언을 할 수 있습니다. 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 01. 태그선택자(type Selector) 태그 선택자는 html문서의 태그 이름을 직접 지칭하는 가장 간단한 선택자입니다. Css에 대한..

보통 레이아웃을 만들게 되면 block요소기 때문에 세로로 나열이 됩니다. 하지만 오늘 이 방식을 사용한다면 우리 모두 세로로 손 쉽게 바꿀 수 있습니다. 바로 float입니다. 01. 레이아웃 - float float은 레이아웃을 쉽게 구성할 수 있도록 도와주는 css요소입니다. float은 요소를 좌측이나 우측으로 붙이고 아래 내용이 그 주변으로 흐르게 하는 속성인데, 세로로만 나열되던 블록들이 가로로 서로 어울리게 배치하려고 할 때 아주 유용한 방식입니다. float한 박스에는 가로 사이즈를 지정해 주여야 속성이 사용됩니다. 하지만 heading요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. 이렇게 사용 했을시에 첫 이미지에 html이미지에서 css로 변경..

연산자란? 연산자는 '3+5' , '3 a>b가 참이면 ture, 거짓이면 false가 됩니다. =b가 참이면 ture, 거짓이면 false가 됩니다. 10, 10이상을 의미 합니다. 이하 num = 20 && x

Id 와 Class 01.이름을 불러올 때 클래스를 불러올 때는 클래스명 앞에 마침표를 찍어준다. 아이디를 불러 올 떄는 아이디 값 앞에 샵(#)표시를 해줍니다. 또 여러개의 요소에 같은 class명을 부여해줄 수 있습니다. 또한 하나의 요소에 여러개의 class명을 부여할 수도 있습니다. 자료출처 이미지 처럼 id로 "attendance"를 불러왔고 값 앞에 #표시를 해둔 걸 볼 수 있습니다. 또 class="name"을 사용해서 김영희라는 이름을 사용했습니다. 02. 중복 사용 class는 중복 사용이 가능하지만 id는 중복사용이 불가능 합니다. class는 동일한 클래스명을 페이지 여러곳으로 사용해도 되지만 id는 한개의 id로 딱 한 페이지에서 사용이 가능합니다. 자료출처 사람으로 생각한다면 하나..

CSS CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. HTML 바탕으로 뼈대를 만들어 주고 CSS는 디자인적인 요소를 입혀주는 역할입니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 01. 내부 스타일시트 CSS를 HTML문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. HTML 문서 내의 태그에 태그를 사용하여 CSS 스타일을 적용합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다. 이미지출저 이처럼 내부에 필요한 스타일을 입력해 주는 방식으로 배경색상, 제목색상, 텍스트 꾸밈을 할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에..

텍스트 관련 요소 01. 제목 관련 태그 요소유형 태그명 태그의 의미 및 특징 블록 요소 ~ 제목 글자 태그 h1이 제일 높고 h6가 제일 낮음 02.글자 형태 태그 요소유형 태그명 태그의 의미 및 특징 인라인 요소 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시됩니다. 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시됩니다. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시됩니다. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시합니다. 주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은글씨로 표시됩니다. 아래첨자 텍스트를 정의하기 위한 태그입니다. 위첨자 텍스트를 정의하기 위한 태그입니다. 텍스트 요소 중에 태그와 태그는 의미가 비슷해 보일 수..

마크업이란? 마크업(Mark up)이란 마크(Mark)로 둘러 싸인 언어로 태그(Tag)로 둘러싸여있다고 표현하기도 합니다.HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용합니다. 시멘틱 마크업 (Semantic markup) 시멘틱(Semantic)사전적 뜻은 "의미론적인" 으로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻을 가지고 있습니다. 시멘틱한 마크업을 사용하는 이유는 HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수 있다는 점을 유의해야 합니다. 예를 들어 시각장애인의 경우 HTML 문서의 콘테츠 ..

이미지출처 블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스여서 한 줄을 모두 차지하는데 이 때 한 줄을 차지한다는 말은 너비가 100%라는 얘기입니다. 따라서 왼쪽과 오른쪽에 붙을 공간이 없어 자연스러운 줄넘김이 가능합니다. 블록 속성을 가진 요소들 중에는 , , 요소들과 , , 이 있습니다. 주로 화면구성과 레이아웃을 만들 때 사용 됩니다. 따라서 블록 레벨 요소는 한 묶음으로 이루어져 오롯이 하나의 존재로 이루어져 있는 요소로 그 안이 비어져 있습니다. 텍스트와 인라인 요소를 자식 요소로 포함 하여 집어 넣을 수 있습니다. 블록레벨 요소 중에는 블록레벨 요소를 자식으로 포함할 수 있는 요소와 없는..