ohjungho 님의 블로그

flex box의 등장플렉스는 '유연한' 이란 뜻을 가지고 있다. 화면 레이아웃을 유연하게, 자유자재로 배치할 수 있게 해준다. 기존에 사용했던 블록 레벨 요소, 인라인 레벨 요소 방식보다 훨씬 강력하고 편리한 기능이 많다. 즉, 다양한 레이아웃을 만들고자 고안된 기법이 플렉스 박스(flex box) 이다.  flex가 필요한 순간??flex는 언제 필요로 할까??? 아래와 같이 body안에 div로 사각형 세 개를 만드는 코드가 있다. div { width: 200px; height: 200px; background-color: tomato; }#second { background-color: seagreen; } HTML 코드에서 1 body를 부모로,..

CSS 배치 속성과, 반응형 디자인에 대해 알아보자. 우선 h1태그와 span태그로 텍스트를 작성한 코드는 아래와 같다. Emotion SAD HAPPY LOVE  Live Server를 통해 확인하면 아래 사진과 같은 결과물이 나온다. Live Server는 확장 프로그램으로, 웹 개발자들이 HTML, CSS, JavaScript 등의 파일을 브라우저에서 실시간으로 미리 보기 할 수 있게 해주는 도구이다.h1 태그로 제목을 Emotion으로 지정했고, SAD, HAPPY, LOVE는 span 태그로 줄 바꿈을 하지 않고 구문 요소를 의미한다. 코드에서는 Emotion, SAD, HAPPY, LOVE 모두 Enter키를 이용해서 각자 다른 줄에 있는데 왜 사진에서 Emoti..

CSS는 Cascading Style Sheets의 약자이다. HTML이 정보를 표현한다면 CSS는 HTML 문서를 시각적으로 꾸미는 역할을 한다. HTML 문서를 시각적을 꾸미는 언어, 왜 HTML에 꾸미기 기능을 넣지 않고 CSS를 별도로 만들었을까? HTML 코드와 꾸미기 코드를 분리하면 가독성과 효율성 모두 높아지기 때문이다. 예를 들어 HTML 페이지에 구조 코드와 꾸미기 코드를 모두 작성하면 둘이 뒤섞이게 된다. 꾸미기 효과를 변경하려면 HTML 이곳 저것을 뒤져 일일이 수정해야 한다. 하지만 꾸미기 코드를 분리하면 꾸미기 코드 관리가 쉬워지고 HTML은 구조 자체에 집중할 수 있다.그래서 꾸미기 코드인 CSS를 만든다. 결과적으로 CSS는 꾸미기를 담당한다. 읽기 종혹 사후관리가 편한 코드를..

회고를 위한 질문 가이드라인현재 리액트 학습하는 나의 학습 방법 및 전략에 대한 만족도를 5점 만점으로 했을 때 몇 점인가??5점 : 매우 만족스럽고, 학습 전략이 효과적이라고 생각한다.4점 : 대부분 만족스럽지만, 약간의 개선이 필요하다.3점 : 보통이다. 효과가 있지만 큰 개선이 필요하다고 생각한다.2점 : 효과가 부족하고, 많은 개선이 부족하다.1점 : 현재 나의 학습 전략 및 방법이 전혀 효과적이지 않다고 느낀다.점수에 대한 이유와 1점을 더 올리기 위해 어떤 전략을 시도해 볼 수 있을까요?이때 중요한 것은 '의지'나 '시간'을 많이 투자하는 것이 아닌, 의지를 덜 소모하고도 효과를 낼 수 있는 방법을 찾는 것이다. 습관 설계, 학습 전략의 변화, 주변의 도움 요청 등 다양한 방안을 고민해 보자2..

HTML 태그태그를 표시하는 방법은 총 두 가지이다.첫 번째는 시작 태그와 종료 태그가 모두 있는 형태이다. 태그와 태그 사이에 요소가 놓이게 된다. 요소  두 번째는 닫는 태그가 없는 형태이다. 이를 자체 닫기 태그(self closing tag)라고 부른다. img, input, link 등이 있다.  대표적인 태그h : 제목 태그br , p , div, span : 순서대로 줄 바꿈(br), 문단 지정(p), 영역 지정(div), 범위 지정(span)link : 현재 문서와 외부 소스를 연결해 주는 태그img : 이미지를 나타내는 태그form : 폼(입력 양식)을 만드는 태그button : 버튼을 만드는 태그ol, ul, li : 리스트를 만드는 태그 h 태그h 태그는 heading의 첫 자를 따서..

웹을 알려면 먼저 네트워크와 인터넷을 알아야 한다. 네트워크는 컴퓨터와 컴퓨터를 연결해 주는 망이다.이런 망들이 모여서 더 큰 네트워크인 인터넷이 되는 것이다!! 인터넷 >> 네트워크 >> 컴퓨터 그렇다면 웹은 뭘까? World Wide Web의 줄임말로, 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 서비스이다. WWW 혹은 W3 이라 부르는데, 보통은 '웹'이라고 부른다. 여기서 말하는 서비스는 텍스트, 그림, 소리, 영상 등의 정보를 제공해 주는 것을 말한다. 웹 페이지란웹 페이지는 정보를 하이퍼텍스트라는 특별한 양식으로 제공하는 웹 문서이다. 브라우저에서 www.naver.com 에 접속하면 네이버에서 제공하는 기본 화면을 가져온다. 이때 보여준 기본 화면이 네이버 기본 웹 페이지이다. ..

Vanilla Project와 그 의의5회 차 스프린트를 시작하기 전, Vanilla Project를 마무리하고 발표까지 완료했다.Vanilla Project는 멋쟁이사저처럼 교육 과정 중 배운 내용을 바탕으로 동작 가능한 웹 애플리케이션을 제작하는 프로젝트이다.시중에 알려진 서비스(넷플릭스, 마켓컬리 등)의 디자인 시안이나 자유 주제를 바탕으로 프로젝트를 진행디자인은 피그마를 사용해 제시되었으며 다양한 제약사항 속에서 팀원들과 협업해 실제로 작동하는 웹 애플리케이션을 제작.강사님의 스프린트 회고 메시지"기본 개념 학습을 넘어 실제로 동작하는 애플리케이션을 만들며 협업한 경험은 쉽지 않았을 것이다. 이를 통해 자신의 역량을 관찰하고, 다음 프로젝트에서 반드시 반영할 중요한 포인트를 발견해 보자." 회고를..

이번 스프린트 회고에서는 자바스크립트 개념의 어려움이 점점 커지고, 학습 난이도가 높아지는 상황에 대해 다루었다. 특히 앞으로 예정된 Vanilla Project를 준비하면서 느껴지는 부담감과 학습량 증가에 대한 고충을 공유하고, 효과적인 학습 전략과 문제 해결 방안을 모색하는 시간을 가졌다. 이에 따라, 스프린트 회고 조원들과 함께 아래 질문을 중심으로 아이스 브레이킹을 진행했다.회고를 위한 질문 가이드라인현재 나의 학습 동기, 상태 수준을 1-10 사이의 숫자로 표현한다면 몇 점인가? 그 이유는 무엇인가?현재 점수 : 수준 5점이유 : 자신감 부족과, 학습 계획에 비해 실천 의지가 부족함어떻게 해야 1번에서 부여한 점수에서 1점이라도 높아질까?현실적인 계획을 점검하고, 실천 가능한 계획을 수립점수 상..

어느덧 3회 차 스프린트 회고의 시간이 다가왔다. 이번 회고는 JavaScript 학습의 어려움과 극복 방법에 대해 회고조원분들과 함께 깊이 있게 이야기 나누는 시간이었다. 질문 가이드라인을 중심으로 회고를 진행하였다.질문 가이드라인JavaScript 학습에서 가장 어려웠던 부분은 무엇인가요?어려움을 극복하기 위해 어떤 노력을 했나요?내가 극복한 어려움을 통해 배운 점은 무엇인가요?우리 회고조에서 어려움을 함께 극복해 나가려면 어떤 노력이 필요할까요?이 질문들에 대한 회고조의 공감점은 아래와 같다. 회고조의 공감점JavaScript 개념 및 문법 이해의 어려움시간 관리 및 학습 효율성 저하스터디의 필요성1. 효율적인 학습 방법을 위한 제안우리 회고조는 다양한 배경을 가진 사람들이 모여 있다. 전공자와 비..

이번 2회 차 스프린트 회고는 1회 차와 마찬가지로 우아한 형제들 우아한 테크코스 프론트엔드 교육 담당 임동준 강사님께서 진행하셨다. 앞으로 남은 스프린트 회고도 동일한 방식으로 이어질 것 같다. 2회 차 스프린트의 핵심 주제는효과적인 학습 방법 돌아보기와 학습 전략 만들기수업을 통해 내가 현재 어떤 상태인지, 나만의 효과적인 학습 방법은 무엇인지에 대해 피드백을 하며 학습 전략을 세우는 시간이다. 회고조에서는 10분 동안 각자의 의견을 자유롭게 나누는 시간을 가졌고, 여러 공감을 얻은 고민점들은 아래와 같다. 회고조에서 공감한 고민수업 후 복습이 필수인데, 게을러져서 실행하지 못한다.하루에 공부하는 양이 많아서 체력적으로 힘들다.학습 계획은 세웠지만, 의지가 부족해 실천하지 못한다.컴퓨터 앞에서 오전 ..