[내배캠 클라우드]웹 프로그래밍 A-Z 기초_W1
스파르타 코딩 클럽-내일 배움 캠프 클라우드
1일차
웹 프로그래밍 A-Z 기초
-
웹 동작 개념
웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" "그려주는" 것이다.
즉, 브라우저가 하는 일은 요청을 보내고,받은 HTML 파일을 그려주는 일을 한다.
-
html, css, javascript
1) html : 뼈대
a. 태그들
<div></div>: 구역 나눔
<p></p> : 문단 나눔
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
: 리스트
<h1></h1>: 제목 태그
<h2></h2>: 소제목
<hr>: 선
<span style="color:red"></span>: 특정 글자를 꾸밈
<a href="http://naver.com/"></a>: 하이퍼링크
<img src="이미지 링크" />: 이미지 태그
<input type="text" />: input box 태그
<button></button>
<textarea></textarea>: 큰 input box 태그
2) css: 이쁘게 꾸미기
a. 사용
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야함
style 태그를 개별 파일로 분리가능
3) javascript : 브라우저가 알아들을 수 있는 언어, 웹 페이지를 동적으로 만듦
a. 문법
//선언
let customer = [ {'name': '홍길동' 'phone': 010-1234-1234},
{'name': '손오공' 'phone': 010-1111-2222} ]
//함수
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
함수이름(필요한 변수들);
//조건
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
//반복
let people = ['철수','영희','민수','형준','기남','동희']
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
//+특정 문자로 나누기
let email = '[email protected]'
myemail.split('@')[1].split('.')[0] //gmail
Author And Source
이 문제에 관하여([내배캠 클라우드]웹 프로그래밍 A-Z 기초_W1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hongseoda/내배캠-클라우드웹-프로그래밍-A-Z-기초W1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
웹 동작 개념
웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" "그려주는" 것이다.
즉, 브라우저가 하는 일은 요청을 보내고,받은 HTML 파일을 그려주는 일을 한다.
html, css, javascript
1) html : 뼈대
a. 태그들
<div></div>: 구역 나눔
<p></p> : 문단 나눔
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
: 리스트
<h1></h1>: 제목 태그
<h2></h2>: 소제목
<hr>: 선
<span style="color:red"></span>: 특정 글자를 꾸밈
<a href="http://naver.com/"></a>: 하이퍼링크
<img src="이미지 링크" />: 이미지 태그
<input type="text" />: input box 태그
<button></button>
<textarea></textarea>: 큰 input box 태그2) css: 이쁘게 꾸미기
a. 사용
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야함
style 태그를 개별 파일로 분리가능3) javascript : 브라우저가 알아들을 수 있는 언어, 웹 페이지를 동적으로 만듦
a. 문법
//선언
let customer = [ {'name': '홍길동' 'phone': 010-1234-1234},
{'name': '손오공' 'phone': 010-1111-2222} ]
//함수
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
함수이름(필요한 변수들);
//조건
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
//반복
let people = ['철수','영희','민수','형준','기남','동희']
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
//+특정 문자로 나누기
let email = '[email protected]'
myemail.split('@')[1].split('.')[0] //gmail
Author And Source
이 문제에 관하여([내배캠 클라우드]웹 프로그래밍 A-Z 기초_W1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongseoda/내배캠-클라우드웹-프로그래밍-A-Z-기초W1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
