웹 개발일지-1주차 총 정리(1-3~16)

10361 단어 개발일지웹종합개발프로그래밍spartacodingclubspartacodingclub

server, client, web 동작개념

ex) naver- 네이버뉴스의 속성

=> 웹개발로 변경

내가보는 웹페이지만 맘대로 변경가능, 새로고침하면 원상대로 복귀됨.
=>이걸 통해 웹페이지는 인터넷과 관련이 없다는 것을 알 수 있음.

brower에서 하는 일: 서버요청, 결과물 출력
brower가 서버로부터 html(뼈대), css(꾸미기), js(기능, 움직이는 것)을 받아옴.

HTML

html: 문서형태기반의 마크업 언어. 문서의 뼈대

  • 구조
<!DOCTYPE html>
<html>
<head>
 	타이틀,스타일,자바스크립트 등 웹의 정보(페이지의 속성)
    ex)meta, script, link, title 등
</head>
<body> 
	데이터, 화면에 출력되는 부분(페이지 내용)
</body>
</html>
  • tag

    -구역나누는 태그

    <div>:구역 나누기
<p>:문단 설정
<ul>,<li> :목록

    -구역내 콘텐츠 태그

    <h1>~<h6>: 제목(점점 크기가 작아짐)
<hr>: 경계선
span : 특정글자 꾸밀때 사용 
  <span style="color:red">글자</span>  
 a : 하이퍼링크
  <a href="http://naver.com/"> 하이퍼링크 </a> : 네이버로 이동
img: 이미지
  <img src="이미지 주소" />
input:한줄 텍스트 박스
  <input type="text" />
button: 버튼
  <button> 버튼입니다</button>
textarea: 여러줄 텍스트박스
  <textarea>웹개발 종합반 개발일지 쓰는중..</textarea>

CSS

css:head 안에 style태그 안에 작성. 문서꾸밈.

  • 종류
    -배경관련: baground-color, image,size..등
-사이즈: width, height
-폰트: font-size, weight,famliy/ color
-간격: margin(바깥여백), padding(안쪽여백)
    *css 파일분리: css가 길어지면 js파일 만들어서 따로 분리 할 수있음.

주석

  : 코드에 대한 섦명하기위할때 사용

bootstrap

  : 예쁜 css를 미리 만들어져 모아둔 사이트

Javascript

  Javascript:브라우저가 알아들을 수 있는 언어, 동적으로 실행되는 언어.

  • 기본예제

    		<script>
  function  hey(){
      alert('안녕.!'); //경고창

  }

</script>
.
.
.
<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

==> 포스팅박스를 클릭하면 경고창이 실행된다.
==> F12 키를 눌러 console창에서도 실행이 가능하다.

  • 변수

    변수 사용 주의점..?
    -let a = 5 : a라는 변수에 5를 저장한다.
    -let b = '가나가': ''은 문자열을 담는다.
    -변수이름은 쉽게 알아볼수 있게 정한다.

  • 자료형

    -list: 순서가 중요한 담기 

    let list = ['가', '나', '다'] :배열?
     list[0] : 가(배열은 index 0부터 시작)

    -dictionary: 키값에 대응하는 값을 할당함. 

    let dict = {'가', '나',다':53}
   dict[age] : 53

기본함수

  • +, -, *, %
  • ==, < , > , !=, >=, <=
  • .split(''): ''안에있는 문자를 기준으로 나눠짐
     let a= '가나다라마바사'
 a.split('라') = 가나다, 마바사

함수

  • function, 호출하면 정해진 동작을 하는것.
    function sum(a1, a2){
     return a1+12
   }
 .
 .
 .
 let result = sum(3 5) => 8
  => sum라는 함수에 a1,a2라는 변수를 받아서, 더한값을 반환해라
     result라는 변수에 반환한 값을 넣어라

조건문

  • if(조건식) {
    조건이 참일때 실행문
    } else{
    조건이 거짓일때 실행문
    }
    *조건이 모두 만족: AND(&&), 조건 하나라도 만족: OR(||)
    if(age > 20){
		console.log('성인이에요')
	} else {
		console.log('청소년이에요')
	}
}
 .    
 .
 .    
let age = 30 => 성인입니다.

반복문

  • for(시작조건; 반복조건; 더하기){
    조건이 부합하지 않을 때까지 반복실행
    }
let people = ['철수','영희','민수','형준','기남','동희']
 .
 .
 .
 for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}
simple_block
extJs ComboBox 캐스케이드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage