[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 속성 : 항목을 역순으로 표시 * 태그 생략과 목록 중첩 : -..
HTML&CSS (1) - 기본 태그
·
Frontend/Study
# 'Do it html5+css3 웹표준의 정석' 책을 바탕으로한 내용을 정리하였습니다. 1. 텍스트 관련 태그 1) : 제목 테스트, h1이 가장 크게 표시되며 h6이 가장 작게 표시된다. 2) : 텍스트 단락 만들기( 태그를 만날 때까지 한 줄로 표시, 창보다 길어지면 줄이 자동으로 바뀐다.) 3) 태그 : 줄 바꾸기 4) 태그 : 수평 줄 넣기 5) 태그 : 인용문 넣기 6) 태그 : 입력하는 그대로 화면에 표시하기 7) , 태그 : 강조/굵게 표시하기 8) , 태그 : 중요한 내용을 담은 이탤릭체/ 단순한 이탤릭체 9) 태그 : 인용 내용 표시하기(따옴표가 자동으로 붙여진다 10) 태그 : 형광펜 효과 내기(배경색이 노란색이됨) 11) 태그 : 줄바꿈 없이 영역 묶기(줄바꿈 없이 일부 텍스트만 ..
HTML&CSS (1) - 기본 구조
·
Frontend/Study
# 'Do it html5+css3 웹표준의 정석' 이라는 책으로 공부한 내용을 정리하였습니다. 1. 기본 구조 1) 태그는 를 이용해 구분 2) 태그는 소문자! 3) 태그는 속성과 함께 쓰일 수 있고, 태그를 포함하는 것도 가능 4) ⓐ : 문서 유형을 지정하는 선언문 ⓑ : 웹 문서 시작을 알리는 태그 * : lang이라는 속성을 사용해 사용할 언어 지정(ko = korea) ⓒ : 브라우저에게 정보를 주는 태그 - 태그 : 문서제목 (제목표시줄에 나타남) ⓓ : 문자 인코딩 및 문서 키워드, 요약정보 * utf-8 : 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 방식 ⓔ : 실제 브라우저에 표시될 내용 - 특수기호 입력 & & 공백 > " " | | ( ( ) ) , , - - ' ´