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에서 애니메이션이란 움직이는(변화하는) 효과를 의미한다. 예를 들어 CSS 애니메이션으로 요소의 스타일(글자 색, 이미지 위치 등)에 변화를 줄 수 있다. CSS에서는 전환, 변형, 키프레임으로 애니메이션을 구현한다. 즉, 내가 만드는 웹, 앱 페이지에 움직임을 줄 수 있다. 전환전환(transition) 은 시간에 따른 상태를 지정하는 애니메이션이다. 대표적인 장점은 형태의 변형을 부드럽게 만들어준다는 점이다. 즉, 부드럽고 점진적인 애니메이션을 만들려면 움직임을 줄 때 전환을 사용해야 한다. 예를 들어서 hover 상태에서 배경색을 바꿀 때 아무 설정이 없다면 색이 갑자기 바뀐다. 하지만 전환을 사용하면 색이 서서히 바뀌면서 사용자에게 더 좋은 경험을 줄 수 있다. 전환에는 2가지의 필수 속성과..

자식이 부모가 될 수 있다자식이 자라서 부모가 되는 것처럼 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 배치 속성과, 반응형 디자인에 대해 알아보자. 우선 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는 꾸미기를 담당한다. 읽기 종혹 사후관리가 편한 코드를..

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