이진욱의코딩

이번 시간에는 css의 여러 가지 속성에 대해 알아보도록 하겠습니다. 목차 1. 단위크기 2. 단위 색상 3. 단위 url 4. 박스 5. margin, padding 1. 단위 크기 일반적으로 css로 스타일을 줬을 때 기본적으로 설정된 h1태그의 폰트 사이즈는 32px이고, p태그의 폰트사이즈는 16px입니다. h1{font-size: 32px;} p{font-size: 16px;} style태그에서 변화를 줬을 때 css는 부모 폰트의 크기를 기준으로 설정합니다. Lorem, ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem..

이번 시간부터는 node.js를 설치해서 사용하는 방법에 대해 포스팅하겠습니다. 우선 node.js를 설치부터 합니다. 제가 지금 컴퓨터가 window10이기 때문에 window10을 기준으로 설명드리겠습니다. 설치방법은 간단합니다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이사이트에 접속을 해서 다운로드하시면 됩니다. 사이트에 접속하시면 첫화면이 이렇게 되어있을 거예요. 좌측은 최신 버전이지만 개발 공부를 목적으로는 굳이 최신 버전을 설치할 필요가 없습니다. 안정성면에서 아직 다듬어지지 않았기 때문이죠. 따라서 예제를 위해서는 좌측에 있는 ..

저번 시간까지 우리의 ajax를 이용해서 리로드 없이 정보를 부분적으로 변경할 수 있게 되었습니다만, 사용자가 자신이 보고 있는 정보를 다른 사람에게 공유할 수는 없게 되었습니다. 이런 문제를 개선하는 방법을 알아보겠습니다. 우리는 fragment identifier를 이용해서 초기페이지 구현과 적용방법에 대해 알아볼 예정입니다. 사용자가 들어와서 하나하나 내비게이션을 해서 정보를 보는 것뿐만 아니라 주소가 페이지별로 달라지는 것을 통해서 주소를 공유할 수 있는 측면이 있지만 여러 가지 한계가 있습니다. 이 부분에 대해 원시적인 접근방법과 근본적인 해결방법을 살펴보겠습니다. 우선 원시적 방법부터 살펴보도록 하죠 만약 3 문단의 장문의 글이 존재할 때 사용자가 마지막 3번째 문단에 접근하고 싶을 때 url..

저번 ajax에 이어서 계속 포스팅하겠습니다. 이제 서버로 데이터를 주고받는 기본을 했으니 이번에는 응용을 해보도록 하겠습니다. 우선 저번 코드부터 살펴보겠습니다. WEB HTML CSS JavaScript 이 코드를 잘 보시면 중복되는 부분이 있습니다. 바로 이부분이죠.

이번 시간에는 css에서 쓰이는 여러 가지 선택자에 대해서 알아봅시다. ※목차 1. 전체선택자 2. 태그 선택자 3. 그룹 선택자 4. 후손 선택자 5. 자식 선택자 6. 동위 선택자 7. 형제 선택자 8. 기본 속성 선택자 1. 전체 선택자 말 그대로 전체를 선택해서 css를 입히는 것입니다. 타이틀 태그 바로 밑에 style태그로 전체를 선택하는 것입니다. 2. 태그 선택자 body태그 안에 각자의 태그(h1, p, 등등)를 선택해서 그 부분에 style태그로 감싸는 것입니다. 3. 그룹 선택자 한꺼번에 여러 선택자에 대해 스타일을 적용할 때에 사용합니다. 각각의 선택자를 콤마(,)로 구분해서 나열합니다. 4. 후손 선택자 후손 선택자는 특정 태그의 후손을 선택할 때 사용되는 선택자입니다. 예를 들어..

저번 시간까지 html파트를 끝내고 이번 시간부터는 css에 대해 알아봅시다. css는 html문서에 디자인을 입힌 언어입니다. 예시를 먼저 보도록하죠. 놀랍게도 위의 두 사진은 똑같은 페이지의 똑같은 내용입니다. 같은 글에서 css를 첨가해서 저렇게 만든 거지요. 이게 바로 css입니다. 스타일시트 적용방법에 대해 알아보겠습니다. 스타일시트 적용방법은 총 3가지가 있으며, 각각의 장단점에 대해 알아보도록 하겠습니다. 1. 인라인 방식 -> 태그에 직접 적용하는 방법으로, style속성을 적용할 수 있습니다. 인라인 방식 태그에 직접 적용하는 방법으로, style속성을 적용한다. 2. 임베디드 방식 -> head태그 내에 style태그를 적용하는 방법입니다. 3. 외부 파일로 저장하는 방식 -> 웹 제작..

이번 시간에는 웹문서의 본문을 구성하는 요소들 중에 section울 구성하는 요소에 대하여 알아봅시다. 1. body요소 body요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body요소는 브라우저가 렌더링해야 할 범위를 알려준다. 2. header요소 html5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. 동아스포츠신문 국내에서 제일 많이 보는 스포츠신문 문서나 각 section, article의 헤더부분에 사용 가능하며, 그것들의 제목이나 간단한 ..