✨1주차 강의는 전반적인 html과 css 부트스크랩 활용법을 익히고, 기초적인 javascript 문법을 익히는 수업으로 진행되었다.
<HTML & CSS>
1. Html은 구역과 텍스트를 나타내는 코드이며 크게 head(문서를 대표하거나,문서에 필요한 데이터를 넣음)와 body(페이지의 내용)로 구성된다.
1)head 대표 요소
meta,script,link,title,style 등..
meta : html 문서 전체를 대표하는 정보를 넣음
link : 외부 데이터를 가져오기 위해 사용
2)body 대표 태그
h1 ~ h6 : 제목태그이며, 폰트사이즈 차이 존재
a : 하이퍼링크 설정 태그 (속성: href(url), target(url이동방법))
hr
p : 문단 표시
div : 그룹지정
input : 사용자 입력
button : 버튼
form : input 태그와 사용되며 사용자에게 입력 받는 태그
img : 이미지 삽입 태그
ol, ul 태그 : ol은 순서가 있는 리스트, ul은 순서가 없는 리스트 둘다 li태그를 사용해 리스트 아이템 표시
2. CSS는 잡은 구역을 꾸며주는 코드이다.
1)자주 쓰이는 CSS
h1, h5, background-image, background-size, background- position
color, width, height, border-radius, margin, padding
2)배경 이미지 지정시 자주 사용되는 코드
background-image: url('이미지 경로');
background-position: center;
background-size: cover;
위 세개는 한세트로 인식
3)화면을 가운데로 가져오는 코드
.wrap {
margin: 10px auto;
width: 300px;
/* display:block; */
}
3.폰트 가져오기
-https://fonts.google.com/?subset=korean 에서 마음에 드는 폰트 골라, Embed 탭의 link태그 복사해 style 태그 사이에 붙여넣기
4.한줄 주석
해당 줄에서 ctrl + /
5.부트스트랩이란?
-예쁜 CSS를 모아둔 것으로, 미리 완성된 디자인을 활용하는 기능
-css 파일이 인터넷 어딘가이 위치함
<🙄회고>
전반적인 html,css를 다시 익히는 시간을 가졌다. html태그나 meta태그 등 주로 다른코드에서 복사해오던 코드를 하나하나 다시 보며 의미를 생각해볼 수 있어 좋았다.
그리고 bootstrap을 처음으로 활용해 작업했는데 이미 만들어진 디자인을 가져다쓰니 편리하였다. bootstrap의 디자인을 참고해 직접 css로 짜보았는데 생각보다 시간이 많이 걸렸다. 부트스트랩을 사용하지 않고도 원하는 디자인을 쉽게 만드는 실력이 되고 싶다. 그리고 class, id가 어떻게 활용되는지 확인해볼 수 있었다.
