ohjungho 님의 블로그

자바스크립트를 처음 접하는 사람들을 위해, 또는 "문법부터 차근차근 배워야 하나?"라고 고민하는 사람들을위해 이렇게 말하고 싶다. "김치볶음밥을 잘 만들고 싶다고 해서 쌀의 품종부터 공부할 필요는 없다"쌀은 밥 짓다 보면 자연스럽게 배우는 거고, 진짜 중요한 건 "맛있게 먹히는 요리"를 만드는 것이다. 웹 개발도 마찬가지이다. 변수, 자료형, 연산자 같은 기본기야 당연히 중요하지만, 처음부터 문법만 주구장창 학습하면 재미가 없다. 그래서 나는 최소한의 문법을 학습하고, 직접 웹이 '움직이는 걸 먼저 경험하고' 그 원리를 하나씩 짚어나가는 방식(조금씩 구현해 나가면서)을 추천한다. JavaScript(자바스크립트)는 웹 페이지를 동적이고 상호작용할 수 있게 만들어주는 프로그래밍 언어이다. HTML이 웹 페..

웹 컴포넌트(Web Components)는 웹 사이트, 웹 내에서 사용할 새로운 사용자 정의요소(custom element)를 생성하는웹 플랫폼 API 세트이다. 사용자가 정의한 HTML 구조, CSS 스타일, JavaScript로직 등을 설계하고 등록하면 웹 애플리케이션에서 커스텀 요소를 사용할 수 있다. 멋쟁이사자처럼 JS 수업에서 학습한 내용을 바탕으로 내가 쉽게 이야기를 풀어가자면, 도시락 반찬으로 비유도시락 가게에서 매일 점심 도시락을 만든다고 가정하자. 도시락에는 주로 밥, 계란말이, 김치, 고기 등 같은 반찬이 들어간다.그런데 매번 도시락을 만들 때마다 재료를 하나하나 썰고, 볶고, 간 맞추고... 똑같은 반찬을 매번 처음부터 만든다고 극단적으로 생각하면 엄청 비효율적이고 실수도 생긴다.그래..

구조적 가상 클래스구조적 가상 클래스(structural pseudo classes)는 CSS에서 id, class 등의 선택자를 사용하지 않고 요소를 선택할 수 있다. 이렇게 하는 이유는 코드를 효율적으로 작성하기 위함이다. 학교에서 수학 문제를 앞에 나와서 풀 사람을 구할 때 선생님께서 이름을 부를 수도 있지만 번호로 부를 때도 있는 것처럼 태그도 id나 class 같은 이름이 아니라 가상 클래스로 불리는 것이다. 대표적인 구조적 가상 클래스는 first-child, lats-child, nth-of-type, only-of-type이다.  first-child를 학습할 때 개념에서 혼란이 왔다. 개념 자체는 어렵지 않지만 나는 학습을 할 때 원리와 이해를 바탕으로 하기 때문에 문장을 이해하고 코드를..

자식이 부모가 될 수 있다자식이 자라서 부모가 되는 것처럼 CSS에서도 자식이 부모가 될 수 있다. 예를 들어 div 태그에 텍스트를 넣으면 div 태그가 부모가 된다. "자식이 부모가 될 수 있다" 개념은 HTML 구조와 CSS 스타일링이 결합될 때 발생하는 컨테이너와 자식 요소의 관계를 설명할 때 자주 사용된다. 부모와 자식의 기본 관계HTML 구조에서는 기본적으로 부모-자식 관계가 태그를 중첩하여 생성된다. Hellodiv : 부모 요소span : 자식 요소부모는 자식의 배치와 스타일링에 영향을 줄 수 있고, 반대로 자식도 부모의 레이아웃 계산에 기여할 수 있다. flexbox가 부모-자식 관계를 변화시키는 이유CSS에서 display: flex;는 부모 요소가 플렉스 컨테이너가 되도록 만든다. ..

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

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

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 에 접속하면 네이버에서 제공하는 기본 화면을 가져온다. 이때 보여준 기본 화면이 네이버 기본 웹 페이지이다. ..