스파르타코딩 웹개발 1주차
스파르타 코딩 웹개발 1주차
html(뼈대) / css(꾸미기) / javascript(움직이기) 를 아주 짧막하게 배웠다.
이전에 들었던 강의해서는 외워야할것들이 굉장히 많고 다양하게 알려주셨는데,
스타르타코딩 웹개발 종합반에서는 조금 간단한게 알려주시기도하고,
어렵지 않다, 외우지 않아도 된다, 복사 붙여넣기 하면 된다라고 알려주셔서 힘빼고 할 수 있었다.
사실 1주차 부분은 나에게 수학의 정석 집합 같은 느낌 잘 알지는 못하지만 계속 마주치기는 했던.. 느낌이라 그래도 가볍게 넘어갈 수 있었다.
사실 자바스크립트 부분은 어렵게 느껴져서 2주차 분발해야할것같다.
복습하면서 확인할 것
- margin
- Ul/Ur 확인
HTML
head / body 구성 되어있음.
head - title
body
<div></div> 구역을 나눔
<p></p> 문단
<ul> * 이번강의에서 따로 배운적은 없으나, 패캠/생활코딩에서 배웠던 기억 있음 (찾아보기)
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul><h1>제목을 나타내는 태그</h1>
<h2>h2는 소제목</h2>
<h3>h3~h6도 각자의 역할이 있음</h3>
<hr></hr> 수평선 그릴때 사용
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때
a 태그: <a href="http://naver.com/"> 하이퍼링크 </a>
이미지태그: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
input 태그: <input type="text" />
button 태그: <button> 버튼입니다</button>
textarea 태그: <textarea>나는 무엇일까요?</textarea>CSS
<head> ~ </head> 안에 <style> ~ </style> 을 넣어서 사용
.divclass이름 넣고 {
이미지넣을때
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),URL("이미지URL넣어요")
background-position: center;
background-size: cover;
}
텍스트 정렬 관련
display: flex;
flex-direction: column; // row;
justify-content: center;
align-items: center;
margin: 20px(상) auto(우) 0px(하) auto(좌);
margin-top/bottom/right/left: 픽셀
구글폰트 관련
title 및에 세번째 URL 복사 붙여넣기
style .* {CSS rules to specify families} 부분 복사 붙여넣기
부트스트랩을 사용하는 방법을 가르쳐주셔서 더 쉽게 배움
https://getbootstrap.com/
javascript 맛보기
자바와의 관계는 바다와 바다코끼리 관계랑 동일.
크롬 console 창에서 직접 실습해보기.
변수(&기본연산)
리스트 & 딕셔너리
함수
조건문 if() else()
반복문 i++
오늘은 또 뭘 배울까?