우선 HTML과 CSS, Javascript를 공부하는데 도움이 되는 사이트를 소개하고자 합니다.
HTML,CSS,Javascript 기초 내용('HEROPY님 블로그')
처음 배우면 하나하나 궁금할텐데 그런 부분까지도 잘 잡아주는 블로그 같습니다^^
HTML에 관한 기초적인 내용
HTML은 웹브라우저가 인식할 수 있는 언어를 말하는데 역할은 주로 페이지의 뼈대를 잡아주는 것입니다.
HTML은 크게 head태그와 body태그로 이루어져 있습니다.
-
head 태그:
1.head 안에는 주로 페이지의 속성 정보를 넣는다
2.head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 -
body 태그:
1.body안에는 페이지의 내용을 담는다
2.주로 페이지에 띄워지는 정보를 다루는 곳
코드로 바로 보면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>위와 같이 head태그에 meta태그로 정보를 넣어 줬는데 "utf-8"속성값은 인코딩에서 굉장히 중요한 역할을 하는 값이며, 이 것을 통해 한글로 읽고 쓰고가 문제 없어이 잘 된다고 할 수 있습니다.
포인트는 head태그에는 이러한 문서의 정보와 속성을 주로 넣어준다는 것!
body태그에 넣은 p, input, button태그로 뼈대를 잡아주었고, 눈에 보이는 내용들을 표현했습니다.
👀👀
✔ h태그는 h1~h6까지 있는데 h뒤 숫자가 커질수록 크기는 작아집니다.
✔ h태그는 제목, p태그는 본문내용으로서 웹브라우저가 검색엔진에서 정보를 수집하는 대표적인 태그입니다.
이런 부분들을 생각하며 HTML을 사용하는 것이 중요해보입니다!
위 코드에 대한 결과물은 아래와 같습니다.
그런데 딱봐도 안 이쁘죠? 저 뼈대를 잡아 놓은 것을 이쁘게 해주는 것이 CSS입니다.
CSS에 관한 기초적인 내용
CSS는 계속 얘기했듯이 페이지의 스타일을 책임지는 역할입니다.
사용방법
- head태그 부분에 style태그를 사용하여 그 안에 css작성
- css파일을 따로 만들어서 link태그로 연결하여 사용
- body태그의 속성으로 style태그를 주고 따옴표 안에 간단한 css작성
이러한 CSS를 잘 사용해서 '이쁘게' 꾸미려면 코딩 뿐만 아니라 미적인 감각도 필요한데,, 그렇지 못한 자들을 위해 간단하고도 이쁘게 나온 것이 '부트스트랩' 입니다.
여기서 스타터 템플릿을 복사 붙여넣기 하고 여러가지 Forms이나 Components를 활용해 빠르고 쉽게 사이트를 꾸밀 수 있다.
부트스트랩은 이미 정형화된 틀을 갖다 사용하는 것이기에 설명할 것이 없고, 대신 많이 사용되는 css속성에 대하여 정리해보겠습니다.
우선 부트스트랩을 활용하여 프론트적인 요소만 구현한 예제사이트를 소개해보겠습니다.
부트스트랩을 활용한 예제 사이트
👆'내 생애 최고의 영화들' 코드 보기
👀👀
많이 사용되는 css속성들
✔배경관련
background-color : 색상;
background-image : url('url~');
background-position : center; (기본값은 0% 0%로 좌측 상단을 의미)
background-size : cover;
->위와 같은 과정을 통해 이미지 중앙을 원하는 만큼 꽉 채워 사용 가능합니다~
※background-size 속성 상세 설명👇
✔사이즈
width : 00px;(%단위도 가능)
height : 00px;
✔폰트
font-size : 00px;
font-weight (light, bold 등이 있음, 100단위 숫자로도 굵기 표현 가능)
font-family (구글 폰트로 활용가능)
color : 색상;
※구글폰트 둘러보기👇
구글폰트
✔간격
margin : 00px;(content의 border 바깥쪽 공간)
padding : 00px; (content의 border 안쪽 공간)
Javascript에 관한 기초적인 내용
Javascript는 웹에서 동적인 부분에서 매우 강점을 갖는 언어이며 웹표준언어로서 굉장한 활동 범위를 가집니다.
✨👀👀✨
이것만 알고가자!
✔변수
let first = 'Seungho'
let last = 'Baek'
first+last // 'SeunghoBaek'
first+' '+last // 'Seungho Baek'위와 같이 'fisrt', 'last'가 변수에 해당하며 값으로 숫자를 받을 경우 사칙연산이 가능합니다. 즉 정보를 담고 있는 공간으로 생각하면 됩니다!
✔자료형
- 리스트(정보의 묶음)
let b_list = [1.3,2,'hello',3]
// 리스트 선언 방법
// 중괄호안에 기입되며 쉼표로 구분
b_list[0] // 1.3 을 출력(맨 처음이 0번째라는 것을 인지)
b_list[2] // 'hello'를 출력
// 리스트에 요소 넣기
b_list.push('안녕')
b_list // [1.3,2,'hello',3,'안녕'] 를 출력- 딕셔너리(키 : 밸류 형식의 정보묶음)
let a_dict = {} // 딕셔너리 선언
let b_dict = {'name':'Seungho','age':28} // 로도 선언 가능
//이때 콜론(:) 기준 앞에 있는 것이 key값이고, 뒤에 있는 것이 value값입니다.
//정보 출력 방법은? -> key를 입력해 value를 출력
b_dict['name'] // 'Seungho'을 출력
b_dict['age'] // 28을 출력
//정보 추가
b_dict['height'] = 170 // 딕셔너리에 키:밸류 추가
b_dict // {name: "Seungho", age: 28, height: 170}을 출력✔함수 ✔조건문 ✔반복문
함수, 조건문, 반복문을 한번에 정리해보겠습니다.
let a_list=['승호','동찬','병준','한별']
//리스트로 변수 생성
//함수, 반복문, 조건문 적용
function name(){
for(let i=0; i<a_list.length; i++){
if(a_list[i]=='승호'){
console.log(a_list[i]+'는 천재');
}else{
console.log(a_list[i]+'는 바보');
}
}
}
name() //함수 호출
//console에 찍힌 결과값
/*승호는 천재
동찬는 바보
병준는 바보
한별는 바보 */
코드에서 벗어나서 내용을 정리해보면 함수 같은 경우는 코드 뭉텅이!라고 생각하면 편합니다. 복잡한 기능을 함수명 호출 한 번으로 사용가능하여 재사용성, 간결성에 도움을 줍니다.
함수 사용방법
-함수 작성
function 함수명(인자(필요시)){
실행부분 코드;
}
-함수사용
함수명(인자(작성시))
반복문 사용방법
for(시작조건, 반복조건, 증감조건){
실행부분 코드;
}
'시작조건->반복조건검사->통과시 실행부분->증감조건
->반복조건검사->통과시 실행부분->증감조건'
이 과정을 반복조건에서 통과 못할 때까지 반복실행합니다!
참고
.jpg)