HTML, CSS, Javascript, Web build study
- 정적 사이트 : 취업을 위한 포트폴리오나, 기업 홍보 사이트는 정보를 보여주기만 하는 웹사이트
- 동적 사이트 : 정보뿐만 아니라 사용자에게 기능과 서비스를 제공하는 웹사이트
- 서버는 사용자에게 정보를 제공하기 위한 웹사이트가 저장된 컴퓨터입니다.
- 클라이언트는 사용자가 웹 사이트에 접근하기 위해 사용하는 PC, 태블릿, 스마트폰을 의미합니다.
- 프런트엔드는 사용자에게 보이는 영역을 의미하며 디자인하거나, 동작에 반응하는 기능을 만드는 역할을 합니다.
- 백엔드는 보이지 않는 영역을 의미하며 회원정보, 게시판 등 데이터를 처리하는 역할을 합니다.
- HTML : 웹 문서의 뼈대를 만드는 마크업 언어
- CSS : 웹 문서를 꾸미는 스타일 언어
- Javascript : 사용자 동작에 반응하는 스크립트 프로그래밍 언어
- Hyper Text Markup Language의 줄임말로, 웹 문서를 만드는 기본언어
- <>를 태그라고 하며, 웹브라우저의 속성을 구분하는 꼬리표
- 시맨틱 태그란, 의미가 통하는 태그라는 뜻으로 웹 브라우저의 영역을 구분
- header : 헤더 영역, 검색창이나 사이트 메뉴를 삽입하는 영역
- nav : 내비게이션 영역, 다른 웹 문서로 연결하는 링크를 다루는 영역
- main : 핵심 콘텐츠를 담는 영역, 웹 문서의 핵심이 되는 내용을 넣는 영역
- footer : 웹 문서 아래를 나타내는 영역
- article : 독립적인 콘텐츠를 담는 영역, 신문이나 블로그 포스트 등을 담는 영역
- section : 다수의 콘텐츠를 담는 영역, 몇 개의 콘텐츠를 묶은 영역
- aside : 사이드바 영역
- div : 웹 문서의 영역을 구분하는 태그
- 그 외 p, br, blockquote, strong, b, em, i, u
- 사용자가 정보를 입력하면 해당 정보는 웹 서버로 전송됩니다.
- 그럼 서버는 자신이 가진 데이터베이스에서 정보를 확인하고 결과를 웹 브라우저로 보냅니다.
- 정보를 넘겨주는 방식은 [get, post] 2가지가 있는데 get은 데이터 제한이 있고 정보가 그대로 드러나는 단점이 있습니다.
- 양식은 HTML로 만들 수 있지만, 폼에 입력한 사용자 정보는 ASP, PHP, JSP 같은 서버 프로그래밍을 이용합니다.
- 웹 문서에 디자인을 담당하는 스타일 언어입니다.
- 스타일 형식 | 선택자 { 속성1: 속성값1; 속성2: 속성값; }
- 특정 요소(태그)에 적용하는 타입 선택자
- 특정 부분에 적용하는 class, id 선택자
- 같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
- CSS 소스 경량화 | CSS파일은 네트워크를 이용해 내려받기 때문에 파일크기가 작을수록 좋습니다.
- css minity 또는 css compress 등 크기를 줄여주는 툴도 있습니다.
- 웹 폰트도 *.ttf 파일은 크기가 크므로, 주로 EOT, WOFF, WOFF2 파일을 사용합니다.
- css 적용 형식은 인라인 스타일, 내부 스타일, 외부 스타일 3가지가 있습니다.
- 케스케이딩이란, 우선순위가 위에서 아래 즉 계산식으로 적용된다는 의미 입니다.
- 스타일의 중요도에 따라 우선순위를 정하고, 태그의 부모 자식 관계로 스타일을 상속합니다.
- 스타일 규칙에 !important를 붙이면 다른 스타일보다 우선순위가 높아집니다.
- 스타일의 우선순위 | !important > 인라인 스타일 > id 스타일 > class 스타일 > 타입 스타일
- css에서 글자색을 지정하는 속성은 color 입니다.
- hsl, hsla와 같이 (0, 100%, 50%)와 같이 색상을 표현할 수도 있고
- rgb와 rgba로 rgb(0, 0, 255)와 같이 색상을 표현할 수 있습니다.
- 박스 모델의 구조는 콘텐츠 영역, padding, border, margin으로 이루어져 있습니다.
- width, height로 사용하거나 box-sizing의 border-box, content-box를 통해 크기를 적용할 영역을 지정합니다.
- 박스 모델의 방향은 top, right, bottom, left 순서로 적용됩니다.
- 박스 테두리(border) 스타일을 지정할 때는 border-style, border-width, border-color를 사용합니다.
- 둥근 테두리를 만드려면 border-radius 속성을 사용합니다.
- 여백을 조절하는 속성은 margin(요소 사이), padding(콘텐츠와 테두기 사이)입니다.
- 이미지 배치에 사용되는 속성에 float{left | right}이 있으며, clear{left | right}로 해제할 수 있습니다.
- 배치 방법을 결정하는 diplay 속성을 통해 인라인과 블록 레벨 요소 변환이 가능합니다.
- float 속성은 웹 요소를 문서 위에 떠 있게 만들 수 있습니다.
- background 속성은 박스의 배경을 지정합니다.
- 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 합니다.
- 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택할 수 있습니다.
- section p {color: blue;}라면 section 요소의 모든 하위 p요소를 파란색 글자로 적용됩니다.
- 자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 입니다.
- section > p {color: blue;}라면 section 바로 하위에 있는 자식 p들만 적용됩니다.
- 인접 형제 선택자는 가장 인접한 요소를 선택합니다.
- section + p {color: blue;}라면 section와 가장 인접한 하위 p 1개만 적용됩니다.
- 형제 선택자는 인접 형제와 달리 모든 형제 요소에 적용됩니다.
- section ~ p {color: blue;}라면 section과 형제인 p요소 모두 적용됩니다.
- [속성] 선택자는 대괄호[]사이에 원하는 속성을 입력하면 됩니다.
- a[href]라면 a요소에서 href 속성이 있는 요소를 찾아 스타일을 적용합니다.
- [속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾습니다.
- a[target = _blank]라면 target 속성값이 _blank인 요소에 스타일을 적용합니다.
- [속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택합니다.
- [class ~= button]라면 class값 중에 button이 있는 요소에 스타일을 적용합니다.
- [속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용합니다.
- ~=과 다르게 (-)하이픈으로 연결되어 있는 단어도 스타일이 적용됩니다.
- [속성 ^= 값] 선택자는 특정 속성에서 값으로 시작하는 요소를 찾습니다.
- [속성 $= 값] 선택자는 특정 속성에서 값으로 끝나는 요소를 찾습니다.
- [속성 *= 값] 선택자는 특정 속성에서 값의 위치와 상관없이 일부 포함되어 있는 요소를 찾습니다.
- a[title ^= jap]라면 title 속성에서 jap로 시작하는 요소에 스타일을 적용합니다.
- 사용자가 웹 요소에 대해 특정 동작을 할 때 스타일을 변경하고 싶다면 가상클래스 선택자를 사용합니다.
- ':link' 방문하지 않은 링크에 스타일을 적용하는 선택자
- ':visited' 방문한 링크에 스타일을 적용하는 선택자
- ':hover' 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 선택자
- ':active' 웹 요소를 활성화했을 때 스타일을 적용하는 선택자
- ':focus' 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 선택자
- ':target' 앵커 대상에 스타일을 적용하는 선택자
- ':checked' 선택한 항목의 스타일을 적용하는 선택자
- ':not([])' 특정 요소를 제외하고 스타일을 적용하는 선택자
- ':nth-child' 부모 안에 있는 요소 중 n번째 자식 요소에 대한 선택자
- 가상클래스가 웹문서의 원하는 요소를 선택한다면 가상요소는 특정 부분에 스타일을 지정합니다.
- '::first-line', '::first-letter'를 사용하면 첫 글자 혹은 줄에 스타일을 지정합니다.
- '::before', '::after' 지정한 요소의 내용 앞뒤에 대한 스타일을 적용하는 선택자
- 자바스크립트는 HTML, CSS와 함께 사용해서 웹의 요소를 움직이거나, 제어합니다.
- alert(메세지) 알림 창 출력하기
- confirm(메세지) 확인 & 취소 버튼이 있는 확인 창 출력하기
- prompt(메세지, 기본값) 기본값이 입력된 프롬프트 창 출력하기
- 자바스크립트의 자료형은 숫자형, 문자열, 논리형, 배열, 객체 등이 있습니다.
- 변수나 자료형을 활용하는 방식은 언어가 다를뿐 파이썬이나 자바와 유사합니다.
- 산술연산자 ++은 피연산자를 1 증가시킵니다.
- 산술연산자 --는 피연산자를 1 감소시킵니다.
- ++와 --는 피연산자 앞뒤 어디에 붙이느냐에 따라 큰 차이가 있습니다.
- 할당 연산자는 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당합니다.
- 할당 연산자에는 +=, -=, *=, /=, %= 가 있습니다.
- 논리 연산자에는 ||(OR), &&(AND), !(NOT)가 있습니다.
- if(조건) {조건 결과값이 true일 때 실행}
- else {조건 결과값이 False일 때 실행}
- 조건 연산자는 ?(true), :(false)가 있습니다.
- switch문은 처리할 명령이 많을 때 사용하면 편리합니다.
- switch(조건) {case 값1 : 명령1 break case2 값2 : 명령2 break}
- prompt()문으로 입력받은 값은 기본적으로 문자열로 저장됩니다.
- 그래서 데이터를 불러올 때 parseInt() 정수형으로 변환시키는 것이 안전합니다.
- for(초깃값; 조건; 증가식) {실행할 명령}
- for(i = 1; i < 6; i++) {sum += i} | for문을 사용해 1부터 5까지 더하기
- while(조건) {실행할 명령} | while문은 조건이 true인 동안 명령을 반복합니다.
- do {실행할 명령} while(조건) | do문은 명령을 실행한 후 while문 조건을 체크합니다.
- break문은 반복문에서 조건이 종료되기 전에 반복문을 빠져나올 때 사용합니다.
- continue문은 반복문에서 주어진 조건을 만나면 해당 반복문을 건너뜁니다.
- 여러 동작을 묶은 명령을 함수(function)라고 합니다.
- 함수가 어떤 명령을 처리할지 미리 알려 주는 것을 함수를 선언한다고 합니다.
- function 함수명(a, b) {명령} | function 함수명(a=10, b=20) {return a * b;}
- 변수를 선언하고 사용할 때, 변수가 적용되는 범위를 스코프(scope)라고 합니다.
- 지역변수(local) : 한 함수안에서만 사용할 수 있는 변수
- 전역변수(global) : 스크립트 전체에서 사용할 수 있는 변수
- 즉시 실행 함수 (fuction(매개변수) {명령}(인수));
- 매개변수가 없을 경우 const hi = () => "안녕하세요?"; 로 정의 가능합니다.
- 매개변수가 2개이면 let sum = (a, b) => a + b; 로 정의 가능합니다.
- var는 함수 영역의 스코프를 가지고, let과 const는 블록 영역의 스코프를 가집니다.
- let 예약어로 선언한 변수는 블록 {}에서만 유효하고 블록을 벗어나면 사용할 수 없습니다.
- const 예약어로 선언한 변수는 재선언, 재할당을 할 수 없습니다.
- 변수 때문에 생기는 오류를 최소화하기 위해 let과 const를 사용합니다.
- 전역 변수는 최소한으로 사용하고, var 변수는 시작 부분에서 선언합니다.
- for문에서 카운터 변수를 사용할 때는 var 대신 let 예약어를 사용하는 것이 좋습니다.
- 객체(object)는 프로그램에서 인식할 수 있는 모든 대상을 의미합니다.
- 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위이기도 합니다.
- 내장객체 | 자바스크립트 안에 미리 객체로 정의되어 있는 객체
- 문서 객체 모델(DOM) | 웹 문서에 삽입되어 있는 요소 document, image, link 등
- 브라우저 관련 객체 | 웹 브라우저 정보를 담고 있는 객체 history, location, screen 등
- 자바스크립트에서 객체는 참조 형태로 사용해야 합니다.
- 객체의 인스턴스를 만들 때, new 예약어를 사용합니다.
- 객체에는 프로퍼티와 메서드가 있는데, 프로퍼티는 객체의 특징이나 속성을 나타냅니다.
- 프로퍼티가 자동차의 모델명, 색상이라면 메서드는 시동, 주차와 같은 명령이 됩니다.
- 웹 브라우저가 다양해지면서 브라우저가 가진 렌더링 엔진도 생각해봐야 합니다.
- 렌더링 엔진은 HTML, CSS 언어를 해석하는 시스템인데, 브라우저마다 차이가 있습니다.
- navigator 객체 중, userAgent는 사용자 에이전트 문자열을 의미합니다.
- userAgent는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용합니다.
- 각 브라우저 사용자 에이전트 문자열을 보면 Mozilla라는 예약어로 시작합니다.
- Mozilla는 인터넷 초창기 넷스케이프 내비게이터 웹 브라우저로 많이 사용했기 때문입니다.
- history 객체에는 브라우저 히스토리 URL 정보가 저장됩니다.
- location 객체는 브라우저의 주소 표시줄과 관련됩니다.
- 문서 객체 모델이란, 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 입니다.
- HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 합니다.
- HTML의 각 요소를 나무 형태의 구조로 표시하는 것을 DOM Tree라고 합니다.
- DOM을 구성하는 기본 원칙
- 모든 HTML 태그는 요소(element) 노드입니다.
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.
- HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다.
- 주석은 주석 노드입니다.
- getElementById() | id가 포함된 DOM 요소에 접근할 수 있습니다.
- getElementByClassName() | class 선택자 이름이 들어 있는 DOM 요소에 접근할 수 있습니다.
- getElementByTagName() | class나 id를 지정하지 않은 DOM 요소에 접근할 수 있습니다.
- querySelector(선택자) | DOM Tree의 텍스트, 속성 노드까지 제어할 때 사용합니다.
- querySelectorAll(선택자 또는 태그) | DOM Tree의 여러 텍스트, 속성 노드까지 제어할 때 사용합니다.
- innerText, innerHTML 프로퍼티는 웹 요소의 내용을 수정할 수 있습니다.
- getAttribute("속성명") | 웹 요소의 속성값에 접근할 때, 사용합니다.
- setAttribute("속성명", "값") | 원하는 속성값으로 지정할 수 있습니다.
- addEventListener("이벤트", 함수, 캡처여부) | 이벤트와 함수를 같이 처리할 수 있습니다.
- document.createElement(노드명) | 새로운 요소 노드를 생성
- document.createTextNode(텍스트) | 새로운 텍스트 노드를 생성
- document.createAttribute(속성명) | 새로운 속성 노드를 생성
- 부모노드.appendChild(자식노드) | 자식노드 생성