동뀨의 story
1주차개발일지 본문
1)HTML과 CSS의 개념
HTML == 뼈대
구역과 텍스트를 나타내는 코드
html안에서도 style속성으로 꾸미기가능 but CSS파일이 탄생하여 99.99% CSS파일을 불러와서 사용한다.
CSS == 꾸미기
CSS를 잘 사용하는 것과 예쁘게 만드는 것은 별개이다.
(도구가 많다는것)과 (그림을 잘 그리는것)의 차이다.
웹디자이너나 퍼블리셔에 의존한다.
HTML은 크게
head ,body로 구성
head: 페이지속성을 구성 (대표요소: meta,script,title)
body: 페이지의 내용을 구성
코드정렬 단축어: ctrl + alt + l(윈도우) , 맥 cmd + alt + l
html 태그는 '누가 누구 안에 있는지를 이해하는 것'이 가장 중요하다.
CSS사용법: <head> </head> 사이에 <style> </style>공간을 만들어 꾸민다.
클래스를 가르킬 때 .classname{ statement종료후 ;표시 잊지 말기!!! }
자주쓰이는 CSS태그들
h1 , h5: 제목(숫자가 크면 크기작아짐)
background-image : 배경이미지 url과 같이 사용됨
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))배경화면 어둡게
background-position : 길이(px)사용가능하고 여러개 속성 있음
color: 글자색
width:가로폭(px)
height:세로폭(px)
margin: 중심점으로 부터 떨어진 거리 ex) margin: px px px px; (위 부터 시작하여 시계방향 px or auto)
padding: 안쪽 띄우기(px)
화면 가운데로 가져오기width를 주고 ,margin: auto 그래도 안되면 display:block을 추가!
그림자효과:
ex)
box-shadow:0px 0px 3px 0px gray;
버튼 팁:
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;(4줄!)
약간의 모바일 처리를 해두기(모바일에서는 width가 좁기 때문에)
가로사이즈가 가장문제!!!
어디서나 500px로 맞춰라
대신화면폭 500px로 맞추다가, 넘으면 500px으로 보여줘
width: 95%;
max-width: 500px;폰트 넣는법
@import url('<https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap>');
* {
font-family: 'Hahmlet', serif;
}
*{}:전체 적용한다는 의미이다.
<style> </style>안에다가 넣는다.
Javascript
브라우저가 알아듣는 언어
client ~> (sever,(요청))
sever ~> (client,(html+CSS+Javascript)
javascript말고 파이썬 java같은 언어를 써서 줘도 됨 but
"역사적인 이유" &"이미 만들어진 표준" 규칙 준수해야 된다.
기본 문법
변수선언: let a = 20 or num = 'bob'
사칙연산 문자열 더하기 기본적으로 가능
문자+숫자를 하면, 순자를 문자로 바꾼뒤 수행
리스트: 인덱스안에 변수달라도 가능 (c의array와 큰 차이점)
딕셔너리: key와 value값의 묶음(파이썬과 동일)
리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
why? 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .
push 함수를 이용해 간단하게 대응할 수 있습니다.
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들);
함수사용 함수이름(필요한 변수들);
ex) 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
for문은 c언어와 같다.
