jh.nrtv

레이아웃 와이어프레임 : 레이아웃의 뼈대를 그리는 단계 목업( Mock-up) : 실물 크기의 모형 하드코딩 ;변수를 사용하지 않고 구구단처럼 보이기 위해서는, 각 숫자의 단을 소스 코드에 모두 출력하는 방법뿐입니다. Flexbox Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. 1. 부모요소 flexbox - 요소들의 정렬과 관련 1) display:flex; 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다. 2) flex-direction: row; - 정렬 축 정하기 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 설정 없을시 기본설정 'row' main { display: f..

CSS 기초 학습목표 CSS의 사용 목적을 이해한다. CSS의 기본 문법과 구조를 이해한다. CSS를 HTML에 적용하는 방법에 대해서 이해한다. HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다. CSS를 이용해 텍스트를 꾸밀 수 있다. CSS에서 쓰이는 단위의 두 가지 구분을 이해한다. 각 단위가 적합한 경우를 구분할 수 있다. MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다. - css는 좋은 사용자 경험을 제공하기 위한 도구 - 사용자 인터페이스(UI; user interface) ; 인터페이스는 컴퓨터와 교류하기 위한 연결고리. (원래는 불편한 CLI 사용) - 좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다. - 무료..

웹 개발 이해하기 HTML은 구조를 만드는 마크업 언어, CSS는 스타일을 담당하는 디자인 언어, JS는 상호작용 HTML 기본문법 학습목표 HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다. 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다. , 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다. , , 요소가 무엇이고, 언제 사용해야 하는지 알고 있다. 요소에 type 을 설정하여 다양한 종류의 요소를 활용할 수 있다. id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(sementic) HTML 문서를 작성할 수 있다. HTML5 시맨틱 요소를 적..

function mulTablePrinter() { for(let n = 2; n

조건문 학습목표 truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. 비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. if 와 else if , else를 이해하고 무리 없이 활용할 수 있다. 논리 연산자를 (&&, ||, ! ...) 통해 복잡한 조건을 간결하게 작성할 수 있다. 복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있다 논리연산자 조건문- boolean >> 위 6가지 제외하고 전부 truthy한 값이다. 예시 console.log(true && true) //true console.log(true && false) //false console.log(false && true) //false co..

학습목표 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다. 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다. 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다. 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다. 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다. 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다. 함수 라이브 변수 let variabl= 'variable'; - var, let, const 등의 '키워드'를 통해서 변수 선언 할 수 있다. -var이 제일 먼저 나왔고 let이 신문법으로 등장해서 대부분 대..

변수 1. 기초 let sum = 1; let sum -> 변수 선언 ( 보관함 확보 ) sum =1 -> 보관함에 데이터 저장 let sum = 1 -> 선언과 할당 동시에 2. 구구단출력 let num = 3; console.log(num * 1) // 2 console.log(num * 2) // 4 console.log(num * 3) // 6 console.log(num * 4) // 8 console.log(num * 5) // 10 console.log(num * 6) // 12 console.log(num * 7) // 14 console.log(num * 8) // 16 console.log(num * 9) // 18 타입 1. 타입의 종류 숫자 number 문자열 String 참/거짓 ..

생활코딩 WEB2 -css 공부 필기 a 항목 전체 색상 변경 a{color:red;} a {} = 선택자 selector color:red; = 선언 declaration html 의 속성으로 style태그는 css의 효과를 불러온다 style="color:red" 웹페이지에 css 삽입하는 방법 1. 스타일태그를 쓴다 2. 스타일 속성을 쓴다. Selector 선택자 a 에 어떤 효과를 줄 것인가 property 속성 :color value 값 : red 효과의 토대 a{color:black; text-decoration: none;} h1{font-size: 45px; text-align: center;} 선택자의 토대 더 가까운 선택자가 더 큰 영향력을 갖는다 HTML CSS class는 띄어쓰기..