- html은 기본적으로 head와 body로 이루어진다.
body는 url창 아래 공간의 내용들 head는 그 안에 들어가지 않는 애들
- html 태그들이 있다.
div : 구역, 박스 만들기
p : 패러그랩 문단
ul, li : bullet point
h1 문서의 제목 : 페이지들마나 하나씩 넣어줄 필요가 있다
h2-h6 : 글씨가 작아진다.
span 태그 : 특정글자만 꾸미고 싶을때 특정 글자만 묶어준다
특정 글자
( span ) style ="color:red"> 특정 글자 ( /span )
하이퍼링크 태그 : 하이퍼 링크
( a href=" 주소url " ) 하이퍼 링크 ( /a )
이미지 태그 :
이미지 태그 입니당
( img src = " 이미지 주소 ") 이미지 태그 입니당 ( /img )
인풋 태그 :
( input type="text" )
버튼 태그 : 버튼입니당~
( button ) 버튼입니당~ ( /button )
texterea 태그 :
( textarea ) 나는 무엇일까요? ( /textarea )
-
html : 뼈대 , css : 꾸미기
-
무언가를 꾸민다는 것은 가리킬 것이 있어야 꾸밀 수 있다.
이름표를 붙이는 개념
- Css 적용
1. class = "mytitle"
2. head 안에 style 태그 형성, .mytitle { }
3. .mytitle > button { }
4. .mytitle > button: hover { } 마우스를 버튼에 올렸을 때
- Css 문법
가로 : width(00 px, 00% px), 세로 : height,
글씨 가운데 정렬 : text-align: center ,
테두리 굴곡 설정 : border-radius: 00 px
투명색 : transparent
테두리 : border : 00px solid white - > 00px의 실선 흰색 테두리
박스 그림자 : box-shadow: 0px 0px 3px 0px gray
- 이미지 - > 배경 깔기 3줄이 항상 같이 쓰인다.
1) background-image: url("") - > 이미지 넣기
2) background-size: cover - > 이미지 사이즈 조정하기이미지 어둡게하기 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), url
3) background-position: center
- 내용물 가운데로 가져오기
display: flex
flex-direction: column (세로), row (가로)
justify-content: center
align-items: center
- 여백 - > 바깥여백, 안쪽 여백
margin: 상 우 하 좌 (px) - > 시계방향 , 바깥 여백
padding: (px) - > 안쪽 여백, padding-top
- 가운데로 가져오기
가운데로 온다는것 = 양쪽 여백이 같다
1. 가운데로 옮길 것들을 하나의 박스로 묶는다
2. 이름을 붙여주고 수식한다.
3. 꽉차있으면 여백을 줄 수 없으므로, 길이를 준다 - > width
4. margin: auto - > 상하좌우 다 최대한 밀어라
- ##모바일처리##
max-width: 00px
width: 95%
검사 누르고 모바일처리 확인해 볼 수 있다.
- 부트스트랩
붓을 쥘줄 아는 것과 이쁘게 그리는 것은 다른 문제이므로 남들이 만들어 놓은 이쁜 css꾸러미인 부트스트랩 같은 것을 활용한다.
내가 아는 css 지식으로 뭔가를 만들어두고 + 부트스트랩 활용
부트스트랩 시작 템플릿
*사용했던것 components/card , forms/floating labels, forms/input group / custom forms, card/quote
- font, 주석, 파일 분리
폰트
1. title 밑에다가 그냥 넣어준다 폰트 (link href =" 주소 " rel ="")
2. 스타일 태그 안에다가 * { 적용 } - > 모든 태그에 적용하겠다.
주석 처리
커맨드 + /
- css 파일 분리하기 style안에 있는 것들을 css 파일을 하나 만들어서 놓는다 link rel="stylesheet" type= "text/css" href = "(파일이름).css"
- 자바스크립트
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
자바스크립트 문법은 script안에 쭉쭉 쓰는 것이다~~!
script = > 브라우저에서 개발도구 console 이랑 똑같은 것
- 자바스크립트 문법
변수 / 자료형 / 함수 / 조건문 / 반복문
함수 : function 함수명( ) { } : 정해진 동작을 하는 것
리스트 : let 배열이름 = [], 배열이름 [index], 배열이름.push( ) : 추가
딕셔너리 : let 딕셔너리이름 = {"key": value, "key" : value }, 딕셔너리이름["key"] - > value , 딕셔너리이름["key"] = value - > 추가
alert() : 브라우저 화면에 띄움
console.log() : 콘솔창에 출력
split : 변수명(string).split('separator') - > 배열로 나온다 - > 인덱스를 통해 원하는 값 얻을 수 있음
- html event
button onclick = "함수()"
- 단축기
커맨드 + F : 키워드 검색 기능
몰입