web study

조건문에는 대표적으로 if문과 switch문이 있다. 문이 아닌 식으로 분기를 처리할 수 있는 방법이 있는데 바로 조건부 (삼항) 연산자이다. 보통 if문의 단축 형태로 쓰인다. 조건부 연산자는 자바스크립트에서 유일하게 피연산자가 3개 필요한 연산자이다. 조건부 연산자의 형식은 아래와 같다. 목차 조건부 연산자 형식 if 조건문 대체 조건부 연산자의 중첩 조건부 연산자 형식 조건식 ? 참일 때 실행할 식 : 거짓일 때 실행할 식 1 < 3 ? '참' : '거짓'; // 참 if 조건문 대체 if 조건문을 조건부 연산자 형태로 변경할 수 있다. let bool = true; if (bool) { console.log('참입니다.'); } else { console.log('거짓입니다.'); } // 참입니..

switch문은 if문과 마찬가지로 조건에 따라 실행 여부가 정해진다. 이 두 가지 문은 무슨 차이점이 있는지 알아보자. 우선 switch문의 형식은 아래와 같다. switch (조건식) { case 비교 조건식: 실행문; } switch문은 조건식이 비교 조건식과 일치하면 실행된다. 조건식에 변수를 넣었다면, 비교 조건식에는 그 변수와 비교할 값을 넣는다. let color = 'red'; switch (color) { case 'red': console.log('참입니다.'); } // 참입니다. if문에서 else if를 사용하여 여러 조건식을 사용하는 것처럼 switch문에서도 비교 조건식을 여러 개를 사용할 수 있다. 비교 조건문이 여러 개일 경우 어떻게 결과가 출력될까? switch문에서는 조..

변수를 만드는 행위를 '선언'이라고 하며 let, const, var로 '선언문'을 만든다. 이번에 알아볼 또 다른 문으로 '조건문'이 있다. 조건문은 조건에 따라 코드를 실행하거나 실행하지 않는다. 조건문의 형식은 다음과 같다. // 기본형 if (조건식) 실행문; // 실행문이 2개 이상일 경우 if (조건식) { 실행문1; 실행문2; } 실행문이 여러 개라면 중괄호로 한 번 감싸주면 된다. 실행문이 하나일 때는 중괄호를 사용하지 않아도 되지만, 헷갈리는 걸 방지하기 위해 중괄호로 감싸주는 걸 추천한다. 조건식이 true 값을 가지면 내부에 있는 실행문이 실행된다. 반면 조건식이 false 값을 가지면 내부에 있는 실행문이 실행되지 않는다. if (ture) console.log('참입니다.'); /..

윈도우 사용자들이 맥을 사용할 때 당황할만한 일이 종종 생긴다. 그중 하나가 파일 이동, 복사 관련이다. 윈도우에서 사용하던 USB 메모리나 외장하드에 있는 파일을 맥에 옮겨야 하는 경우가 있을 것이다. 그런데 파일 복사가 안 되거나 읽기만 가능하고 쓰기가 불가능해 당황하는 경우가 발생하곤 한다. 맥에서 이러한 현상이 발생하는 이유와 해결 방법에 대해서 알아보자. 목차 맥에서 복사/읽기/쓰기 불가 현상 이유 NTFS란? 해결방법 맥에서 복사/읽기/쓰기 불가 현상 이유 이러한 현상이 발생하는 이유는 간단하다. USB 메모리나 외장하드가 NTFS 방식으로 포맷되어 있는 경우 맥에서 인식을 못하기 때문이다. 맥에서는 NTFS 방식을 지원하지 않는다. 이 경우 맥에서 '읽기'는 가능하지만 '쓰기'가 불가능해진다..

웹사이트나 블로그를 정성껏 만들었어도 마땅한 트래픽을 얻지 못한다면 의욕을 상실할 것이다. 사람들을 내 블로그로 이끈다는 것은 쉬운 게 아니다. 하지만 우리는 방법을 이미 알고 있다. 귀가 닳도록 들어왔던 'SEO'다. SEO가 도대체 왜 중요한지 이번 기회에 자세히 알아보자. 목차 SEO의 개념 SEO의 중요성 SEO 가이드 SEO 진단 마치며 SEO의 개념 SEO(Search Engine Optimization)란 약자에서 알 수 있듯이 말 그대로 '검색 엔진 최적화'를 의미한다. 웹사이트를 검색 결과 상위에 노출시키는 것이다. 웹 사용자의 의도를 이해하여 나의 웹 페이지의 콘텐츠를 그 의도에 맞게 작성하여 게시해야 한다. SEO를 통해 페이지가 검색 결과에 잘 노출되도록 하여 트래픽의 상승을 노린다..

애드센스 승인이 된 지 얼마 되지 않아 애드센스에 json 관련하여 알람이 떠서 당황했다. 내가 정책을 위반한 게 있는지 불안해하며 알아봤는데 생각보다 간단하게 해결할 수 있는 문제였다. 아래 순서 그대로 잘 따라 해서 해결하길 바란다. 우선 해당 알림창에 있는 '자세히 알아보기'를 클릭하여 구글 애드센스 도움말을 천천히 살펴보니 사실문제라기보다는 광고의 투명성을 위한 새로 추가된 정책이었다. json 세팅을 통해 광고를 게시하는 홈페이지의 호스트는 광고 업체의 정보를 공유할 수 있도록 하고, 광고주는 자신의 광고가 어떤 홈페이지에서 노출되고 있는지 게시자의 신원 관련 리스트를 받아볼 수 있다고 한다. 이를 통해 광고의 사기도 방지한다고 한다. 만약 이 세팅을 귀찮다고 하지 않으면 광고 수익에도 영향이 ..

png이미지를 갖다 쓰는 게 아닌 CSS로 직접 삼각형 그리는 법을 알아보려고 한다. 이 방법을 사용하면 삼각형 영역에만 링크를 걸 수도 있고 작은 이미지에서 화질이 깨져보이는 현상도 없앨 수 있다. 그리고 퍼블리싱 기술 면접에도 종종 나오는 질문이기도 하니 이번 기회에 제대로 알아두는 게 좋겠다. 기본 원리 너비 100px, 높이 100px의 사각형이 있다고 생각해보자. 그 사각형에 테두리 10px을 준다. 테두리는 top, bottom, left, right로 나뉘어져 있는 건 누구나 아는 사실일 것이다. 저 상태에서 사각형의 너비와 높이를 0으로 바꾸면, 테두리만 남는데 이 모양이 삼각형이다. 1번 삼각형을 원한다면 border-top을 제외한 나머지 테두리 색을 투명으로 바꾸면 된다. 이 과정이 ..

HTML을 구성하는 모든 요소들은 사각형의 형태로 되어있다. 마치 박스 모양같은 형태인데, 때문에 '박스 모델' 또는 '상자 모델'이라고 불린다. 웹 디자인에서도 박스 모델은 정말 중요하고도 기본적인 개념인데 이 박스 모델은 어떤 구조로 이루어져 있는지 알아보려고 한다. 목차 Box Model box-sizing Box Model 우리가 개발자 모드에서 자주 보는 이 이미지가 바로 박스 모델의 전부다. 박스 모델은 실제 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 이루어져 있다. 브라우저에서 렌더링을 할 때, 이 박스 모델의 크기, 위치, 속성을 인지하고 반영한다. 요소 설명 콘텐트(Content Area) 이미지, 글, 영상 등의 실질적 요소들이 나타나..

맥에 오류가 있거나 중고로 판매해야 할 경우 맥 OS를 다시 설치해서 초기화하는데 이를 클린 설치라고 부른다. 필자의 경우 잠자기 이후 화면 잠금 설정이 도저히 되지 않는 오류가 있었다. 그런데 맥을 싹 밀고, mac 복구로 시동하여 OS를 설치하는 과정에 문제가 있었다. 연식 있는 모델의 경우 잘 설치하다가 인터넷 오류창이 뜨면서 OS 설치가 중단되는 현상이 있단다. (2013년식이다.) 때문에 인터넷 연결로 OS 설치가 아닌 부팅 USB를 사용하기로 했는데, 여기서 또 난관에 부딪혔다. 다른 컴퓨터는 윈도우를 사용하는 데스크톱이었던 것이다. dmg 파일은 윈도우에서 실행이 되지 않기 때문에 따로 프로그램을 설치하여 도움을 받아야 한다. 목차 맥 OS 부팅 USB 만들기 요약 맥 OS 부팅 USB 만드..

우리 퍼블리싱을 배울 때 캐스케이딩에 대해 직접적으로 알려주는 사람은 잘 없다. 때문에 간과하기 쉽지만 CSS에도 작성 규칙이 존재한다는 사실을 꼭 알고 있어야 한다. 하나의 프로젝트에 여러 작업자가 협업하는 경우가 많기 때문에 이러한 기본적인 규칙을 지키면서 작업해야 효율적인 작업이 가능하다. 잘 알고 있겠지만 큰 프로젝트일수록 더 많은 퍼블리셔와 디자이너, 개발자와의 협업으로 진행된다. 작업의 결과만 중요한 게 아니라 과정도 중요하다는 사실을 염두에 두자. 목차 CSS 구체성 CSS 상속 캐스케이딩 CSS 구체성 요소를 선택할 때 더 구체적으로 선언된 선택자가 우선적으로 적용된다. 이 규칙을 CSS 구체성(Specificity Calculator)이라고 하며, 이는 수치화되어 값이 클수록 구체성이 높..