오늘은 웹 개발 종합반에 관련된 강의를 들어보았다 !
Visual Studio Code 라는 걸 이용한다 !
HTML, CSS, Javascript 에 관해서 배우는 거 같다.
HTML 은 뼈대, CSS는 꾸미기, Javascript 는 움직이기입니다 !
<HTML 의 기본>
html 은 헤드(head)와 바디(body)로 구성이 되어있다 !
헤드안에는 css, javascript 가 들어간다.
div 태그는 구역을 나누는 태그 ! > 박스가 나오면 무조건 div 태그 !
엄청 많이 사용한다고 한다 !!
h1 ~ h6 까지 글자 크기별로 나타내는 태그인데 h1은 기억해주는게 좋다 !
태그는 외우기보다는 그때그때 필요한 태그를 복사해서 사용하면 된다고 한다 !!
우리가 하는 일은 필요한게 있으면 복사해서 가져다 쓰고 내 입맛에 바꿔 사용하는 것 ! >> 코딩의 본질 !!
< 간단한 로그인 페이지 만들기 >
필요한 태그들을 복사해서 붙여넣기로 간단하게 로그인 페이지를 만들어보았다 !
신기하구만유 ~
<CSS 의 기초>
>> 먼저 명찰을 달아줘야한다!!
바디에 있는 h1 태그에 이름표를 달아준 후
헤드에서 이름표를 가르켜서 컬러를 레드로 변경해주니 색이 바뀜 !
글자 크기를 바꾸는 데 안바뀌어서 왜 내껀 안바뀌나 하고 있었는데,,
font-size 인데 ,, font size 라고 쳐서 안바뀌고 있던거였다 ,, 후 ,,
기본적으로 구역을 꾸밀때는 백그라운드 컬러를 변경해서 구역 확인을 먼저 해보는게 좋다 !
여백을 줄때 margin , padding 라는것을 쓴다.
margin 은 바깥쪽 여백 , padding 는 안쪽 여백 !
여백을 줄때는 위 오른 아래 왼쪽 순으로 주면 됨 !
백 그라운드 변경을 할때는 위에 3개가 같이 다닌다고 생각하면 됨
이미지, 포지션, 사이즈 !!
정렬 하고 싶을때는 Shift + Alt + F ! 꿀팁 !
auto 는 쭉 밀어라는 뜻이다 !!
< 폰트, 주석, 파일분리 >
코딩에서 * 은 모두 다 라는 뜻 !
폰트 바꾸는 방법 !
구글에 https://fonts.google.com/?subset=korean 검색 후 마음에 드는 폰트 클릭 !
클릭 후 import 클릭해서 <style>안에다가 복붙 !!
CSS rules to specify families 에 있는거 복붙해서 *{} 사이에 복붙 !
이런식으로 하면 됨 ! 복잡하면서도 아닌거같기도 하면서도 ~~ 흐음 ,,
주석이란 ?
개발자 눈에는 보이지만, 컴퓨터 눈에는 보이지 않는 것 !
보통 메모할때 많이 사용한다 !
Ctrl + / 를 이용하면 된다 !
주석이 필요한 부분을 드래그 한 후에 Ctrl + / 하면 됨 !
주석 모양이 때에 따라 다르기 때문에 Ctrl + / 를 외워두면 편하다 !
** css 예쁘게 꾸미기 위한 꿀팁 ! **
https://getbootstrap.com/docs/5.0/components/buttons/ 부트스트랩이라는 곳에서 가져다 쓰면 됨 ~~
** div 안에 있는 내용물을 정렬 시킬때 !! **
위에 4줄이 유용하게 쓰인다고 한다 !
세로로 정렬할땐 column, 가로로 정렬시킬땐 row 를 사용 !
어떠한 클래스 안에 태그를 스타일에 넣을땐 이렇게 언급해서 바꾸는것도 가능 !
Github 에 파일을 배포할때는 index.html 인 파일 하나를 해야한다 !
강의에서 선생님께서 이제는 청첩장 정도는 만들 수 있는 실력이 되었다고 하셨는데 ,, 흠 ,,,
아주 간단한 청첩장정도라면,, 가능할지도 ..?? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
진짜 아직 넘 갈 길이 멀고도 멀다 ,, 휴우 ,,
'사전 스터디 기간 개발일지' 카테고리의 다른 글
| 자바 스크립트 스터디 ( 1주차 뒷부분 !) (0) | 2023.05.23 |
|---|---|
| 자바 스크립트 스터디 !! (0) | 2023.05.22 |
| 개발자 공부 4일차 두둥!! (0) | 2023.05.13 |
| 개발자 스터디 3일차,, (0) | 2023.05.11 |
| 개발자가 되기로 한 후 첫 OT 진행한 날 (0) | 2023.05.04 |