천천히 느리게 천천히 느리게

1. 반복문이란? ◎ 특정 작업을 반복적으로 할 때 사용할 수 있는 구문이다. 2. for 문 ◎ for문은 가장 기본적인 반복문이다. 정한 조건이 만족되면 계속 반복된다. 2-1. 문법 for (초기 구문; 조건 구문; 변화 구문;) { 코드 } ◎ 구문 뒤에는 항상 ;(세미콜론)을 써줘야 한다. 위치에 어떤 구문이 들어가야 하는지 알아야 한다.(많이 사용해서 익숙해지는 게 베스트) 문법을 활용하여 0부터 9까지 나타내는 for문을 작성해보자. 코드를 살펴보겠다. let i = 0; 은 초기 i 값을 0으로 설정한다는 구문이다. i

1. let(block scope) ◎ es6 이후로 변수를 선언할 때는 let 키워드를 사용한다. 변수는 바뀔 수 있는 값을 의미한다. 1-1. let의 특징 변수에 재할당이 가능하다. 처음에 value를 1로 선언하였고 콘솔로 value를 확인해 보면 선언한 value 값이 잘 나오는 걸 확인할 수 있다. 재할당이 가능한 특징을 이용하여 value 값을 다른 값으로 바꾸고 싶을 때는 value 값을 원하고 싶은 값으로 할당해 준다. 그리고 콘솔을 확인해 보면 처음에 설정한 value 값은 1이 나오고 두 번째로 재할당한 value 값은 2로 잘 찍혀 나온다. 변수의 재선언은 불가하다. let은 재할당은 가능하지만 재선언은 불가능하다. 다음 코드를 보고 확인해보자. let value = 1; 을 선언하..

▶ 실수를 줄이자. 실수는 다 할 수 있다. 하지만 실수의 횟수가 많아지면 그만큼 시간 투자를 해야 한다. 1. 시작 ◎ 자기소개 페이지가 끝나고 우리 일레븐은 html&css의 실력을 높이기 위해 인스타그램 클론 코딩을 시작하기로 했다. 발표는 내일이다.. 오늘 급하게 했다ㅠㅠ.. 주말 쉬고 오랜만에 코딩을 했다. 보기에는 단순한 디자인이었는데 생각보다 어려웠다.. 아이콘 활용도가 많고 나중에 스크립트를 생각하면 어려운 과제라고 생각했다 2. 레이아웃 ◎ 예전에 코딩했을 때, 나는 html 구조를 조금 짜고, 바로 css를 입혀보고 다시 구조 짜고 css 입혀보고.. 이런 식으로 반복 작업을 하였다. 하지만 이 방법은 옳지 않았다. 시간을 너무 많이 잡아먹는다. 그래서 나는 우선적으로 Html로 레이아..

※ Javascript 를 배우기에 앞서 javascript는 어떤 역할을 하며 특징이 무엇인지 알고 싶어 졌다. 처음부터 문법, 반복문 등 배우면 좋을 수 도있으나, 그 언어의 본질을 파악하는 게 먼저라고 생각하기 때문이다. 1. Javascript 란. ◎ 웹 브라우저에서 유저 인터페이스를 동적으로 사용하기 위해 만들어진 언어. 2. 특징 객체 기반의 언어 인터프리터 언어로써 코드를 한 줄씩 읽으면서 웹 브라우저에 의해 해석되고 실행이 된다. 스크립트 언어로써 애플리케이션에서 코드를 해석하는 엔진이 존재하여 그 스크립트로 해당 애플리케이션을 제어하기 위해 만들어진 언어이다. 진입장벽이 낮다?(개인마다 차이가 있지만 깊게 들어갈수록 어려운 언어라고 생각한다.) 3. 역할 웹 페이지에 기능을 더해 동적으..

시점은 3.25(수요일) 일에 진행했던 이야기이다. ▶Code convention. 코드는 전체적으로 통일성을 지켜야 하며, 다른 사람이 보기 쉬운 코드가 좋은 코드다. 1. 시작 ◎ 자 이제 시작이야~ 전체 수정~ 화요일에 했던 코드를 전체 수정할 계획이었다. 막막했다.. 내일이 발표인데.. 아침 스탠드업을 끝나고 다시 템플릿을 찾기 시작했다. 템플릿을 하기 전 고려해야 할 점을 정리하였다. 자기소개 페이지는 보기 쉽게 구현해야 한다..(다른 사람들이 보기에 편해야 하며, 지나치게 화려하거나 많은 기능들이 있으면 오히려 독이 될 수 있다. 물론 내 생각이다.) 레이아웃 구성과 알맞은 css 사용 전체적인 통일감.(색, 폰트 등 통일성 있게 구현하기.) 카테고리를 어떻게 나눌지에 대한 고민 웹 접근성과 ..

화요일(3.24)에 시작했던 자기소개 페이지를 하면서 느낀 점을 좀 뒤늦게 작성한다. (친구들과 약속도 있었고.. 나름 바빠서..? 물론 핑계다.) ▶ 기획의 중요성! 기획을 제대로 안 하면 결국 제 자리 걸음. 더 악화될 경우 작업 전체 수정 1. 시작 ◎ 자기소개 페이지를 어떤 식으로 구현할지 고민을 많이 했다. 스터디를 시작하고 처음으로 발표를 해야 하는 과제이기 때문에 완성도 높은 페이지를 구현하고 싶었다. 노트에다 어떤 식으로 디자인을 하고, 어떠한 기능들이 있으며, 구조를 어떤 식으로 해야 할지 직접 그려보았다. 하지만.. 역시 디자인과 그림은 부족하다.. 너무 엉망이었다. 그래서 스케치 앱을 찾아봤는데 유료 스케치 앱과 무료로 며칠 쓰는 거밖에 없었기 때문에 방법을 바꿨다. 자기소개 페이지 ..

1. Flex 란. ◎ 레이아웃을 수평구조로 쌓이게 할 때 사용한다. ※등장하기 전 에는 인라인 속성을 이용해 수직, 수평 정렬에 대체 방법을 사용하였는데 이는 차선책일 뿐 flex가 나온 후로부터 레이아웃을 더 쉽게 구성할 수 있다. 2. 변화. 과거에는 float 속성을 이용하여 수평화 하는 작업을 진행하였다. 하지만 현재에는 flex를 사용하여 더 간단하게 수평의 레이아웃을 구현할 수 있다. 3. flex와 inline-flex의 차이점 3-1. display:flex -> container가 수직으로 쌓임(block 요소와 같음.) 3-2. display:inline-flex -> container가 수평으로 쌓임(inline 요소와 같음) 4. container와 items ◎ container..

1. CSS 선택자 ◎ 속성과 값을 지정할 대상을 검색하여 html에서 원하는 태그를 찾아주는 역할. ※선택자를 잘 못 다루면 css 적용하기가 힘들다. 2. 선택자의 종류 기본 선택자(Basic Selectors) 복합 선택자(Combinators Selectors) 가상 클래스 선택자(Pseudo-Classes Selectors) 가상 요소 선택자(Pseudo-Elements Selectors) 3. 기본 선택자(Basic Selectors) 전체 선택자(Universal Selector) 태그 선택자(Type Selector) 클래스 선택자(Class Selector) 아이디 선택자(Id Selector) 3-1. 전체 선택자(Universal Selector) 모든 요소를 선택 * 기호를 사용 전..