[CSS] 08_레이아웃을 구성하는 CSS 박스 모델
·
Frontend/Study
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 CSS와 박스 모델 1. 블록 레벨 요소와 인라인 레벨 요소 1) 블록 레벨 요소 : 태그를 이용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 - 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈됨 ex) , , , , , ... 2) 인라인 레벨 요소 : 한 줄 차지하지 않음 - 너비(width), 높이(height)를 조절할 수 없고, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄..
[CSS] 07_텍스트를 표현하는 다양한 스타일(텍스트 속성)
·
Frontend/Study
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 글꼴 관련 스타일 종류 속성 사용 방법 font-family 글꼴 지정 font-family: , , ... ex) font-family : "맑은 고딕", 돋움, 굴림, ... font-size 글자 크기 font-size: | | | ex) font-size : 10px font-style 이탤릭체 font-style: normal / italic / oblique(이탤릭체) font-weight 글자 굵기 font-weight : normal / bold / bolder(더 굵게) / lighter / 100~900 * 글꼴 이름이 두단어 이상일 땐 "맑은 고딕" 처럼 큰 따옴표로 묶어준다. * 글자..
[CSS] 06_CSS의 기본
·
Frontend/Study
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 스타일과 스타일시트 1) 스타일 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2 } - 선택자 : 스타일을 어느 태그에 적용할 것인지 알려줌 - 중괄호 사이에 스타일 정보를 넣음 ex) 태그에 스타일 적용하기 p { text-align: center; color: blue; } * 한 줄로 작성해도 되고, 여러 줄로 작성해도된다. (세미콜론만 붙이면!) - 스타일 주석 : /* 주석 할 내용 */ * ctrl+ ? : 주석처리 2) 스타일 시트 - 스타일 규칙을 한눈에 확인하기 위해 한 군데 묶어놓은 것 - 브라우저 기본 스타일과 사용자 스타일로 나뉠 수 있다. - 사용자 스타일은 인라인, 내부, 외..
Web과 HTML
·
Frontend/Study
1. Web(www=world wide web) - 웹이란 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태 - 인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태 1) 용어 ⓐ 프로토콜 : 네트워크상에서 약속한 통신규약(html, ftp, smtp, pop, dhcp) ⓑ IP : 네트워크 상에서 컴퓨터를 식별할 수 있는 주소(192.168.**) ⓒ DNS : IP주소를 인간이 쉽게 외울 수 있도록 맵핑한 문자열(naver.com) ⓓ Port : 해당 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호(기본 포트 : 80) 2. HTML(hyper text markup language) - 웹문서를 기술하기 위한 언어 3. CSS(Cascading style sheets) - h..
자바스크립트 프로그래밍 입문 4장
·
Frontend/Study
Part 1 1. 배열 //선언 let 이름 = {자료, 자료, 자료, 자료, 자료}; - 배열 안에 들어있는 각 자료들을 요소라고 한다. 2. while 반복문 while (true) { console.log("무한 반복"); } 3. for 반복문 for(초기식 ; 조건식 ; 증감식) { } 4. for in 반복문과 for of 반복문 1) for in for (let 인덱스 in 배열) { } 2) for of for (let 요소 of 배열) { } 5. var 키워드 let과 다르게 var을 사용하면 스코프 외부에서도 사용할 수 있따. # 사용하지 않는 것이 좋음 4장 연습문제 1. let i = 0; while (i
자바스크립트 프로그래밍 입문 3장
·
Frontend/Study
요약 1. if 조건문 기본 형태 if (a>3) { }; 2. if else 조건문 기본 형태 if(a>3) { }else { } 3. if else if 조건문 기본 형태 if (a>3) { } else if (k>2) { } 4. switch 조건문 기본형태 switch (a) { case 0 : break; case 1 : break; default : break; } 5. 삼항 연산자의 기본 형태 ? : // 표현식이 참이면 을 출력, 거짓이면 을 출력한다. 6. 짧은 초기화 조건문의 기본형태 = || let a; test = a || k(초기화값) console.log(a) > k 3장 연습문제 1. ④ 2. 1) 2) 3) 3. if (x>10 && x
자바스크립트 프로그래밍 입문 2장
·
Frontend/Study
# 책을 기반으로 공부한 내용을 바탕으로 작성한 글입니다. Part 0 1. 자바스크립트란? 웹 브라우저에서 사용할 목적으로 만든 프로그래밍 언어 2. Node.js 란? 자바스크립트로 클라이언트 애플리케이션이 아닌 서버 애플리케이션으로 개발 한 것 * 특징 : 다른 스크립트 언어와 프레임워크보다 빠르다. 3. 자바스크립트로 무엇을 개발할 수 있는가? 1) 웹 클라이언트 애플리케이션 개발 2) 웹 서버 개발 3) 모바일 애플리케이션 개발 4) 데스크톱 애플리케이션 개발 5) 게임 개발 6) 데이터베이스 관리 Part 1 1. 기본용어 1) 표현식 : 아래와 같이 값을 만들어 내는 간단한 코드 273 10 + 20 + 30 "javascript" 2) 문장 : 표현식이 하나 이상 모이면 문장이 된다. 3)..
HTML&CSS) 폼 관련 태그들
·
Frontend/Study
태그 - 폼만들기 1) 기본형 : 여러 폼 요소 2) 속성 종류(사용자가 입력한 자료들을 서버로 어떤 방식으로 넘기고 처리할 것인지 지정) ⓐ method : get(주소표시줄에 입력한 내용이 그대로 드러남), post(입력한 내용이 드러나지 않음) ⓑ name : 폼의 이름을 지정함 ⓒ action : 태그 안의 내용을 처리 할 서버프로그램을 지정함 ⓓ target : 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 ⓔ autocomplete : 내용을 입력할 때 이전에 입력했던 내용을 힌트로 보여줌(자동완성기능) 태그 - 폼 요소에 레이블 붙이기 1) 기본형 ① 레이블이름 : 태그 안에 폼 요소를 넣는 것 ② 레이블이름 : id 속성 값을 태그의 for 속성에게 알려주는 방식..
HTML&CSS (1) - 기본 태그2
·
Frontend/Study
# Do It! html5+css5 웹 표준의 정석으로 공부한 내용을 바탕으로 기술하였습니다. 1. 목록을 만드는 태그 1) , 태그 : 순서없는 목록 만들기 ⓐ 형식 : 내용 ⓑ 출력 : 순서없는 목록의 경우, 각 항목 앞에 작은 원이나 사격형 같은 불릿이 붙는다. 2) , 태그 : 순서있는 목록 만들기 ⓐ 형식: 내용 ⓑ 출력 : 목록의 숫자표기 방법이나 시작하는 숫자등을 바꿀 수 있다. - type 속성 : 1(숫자(기본값)), a(영문 소문자), A(영문 대문자), i(로마숫자 소문자), I(로마숫자 대문자) - start 속성 : 순서목록은 기본적으로 1부터 시작하는데, 이 속성을 이용하면 중간번호부터 시작 가능 - reversed 속성 : 항목을 역순으로 표시 * 태그 생략과 목록 중첩 : -..