브라우져로 볼 때 html 저장할 때)
저장할 때는 조금이라도(space라도) 수정하고 저장
여기서도 단축키 그대로 쓰고 싶다면,
extension > keymap > jetbrain
파일 >preference >setting > format on >
tag 만의 고유 특징
이게 뭔 말인교-v
px : 픽셀 점을 말함.
ex) 5px : 5개의 점을 찍겠다.
-점이 작을 수록 해상도 좋고 즉, 화질이 좋다.
-점의 크기는 동적이다.
그렇다면 픽셀이 같으면 해상도가 같을까?
=> No
모니터의 크기에 따라, 해상도에 따라 즉, 픽셀 점의 두께가 다를 수 있다.
ex) 작은 모니터 1920x1080 큰 모니터 1920,1080이라면
큰 모니터의 픽셀 1개의 크기가 작은 모니터 1개의 픽셀크기보다 크다.
-> 작은 모니터가 더 촘촘히 박혀있다.-> 해상도가 더 좋다.
+) 해상도가 1920x1080이면 컴터 학원 반 크기 모니터에 적당한 거.
ex) 해상도가 저렇다. → 픽셀 수 : 2560x1080개
브라우져 입장에서는 block 편함
실선 : 나 자신
패딩 : 나 안에
마진 : 나 밖에
block : width, height, margin, padding 속성이 반영. 블락으로 쌓는 느낌. 하나가 전체 끝까지 감.
inline : width, height, margin, padding 속성 x
inline-block : 내 영역만큼 차지 & width, height, margin, padding 속성 반영 ok
- 고유의 패딩, 마진 값이 있는지 보면서 공부
디자인할 때는) 고유의 속성을 무효화시켜버리고 하면 편함?!
so. 모든 태그의 속성을 무력화시키고 들어갈거야
2. inline block: 크기 맞추고 지정 할 때
block : 영역 끝까지 차지하고 싶어
inline은 쓸 일 없음
HTML
문서를 구조화
CSS : Cascading Style sheets
문서를 디자인할 때 씀
-(위치)배치, 색상, 디자인 등
저장 (확장자) : .css
css 1:1로 매칭되게→?? 수업시작하자마자
문법 검사해줘
extesion >
—
크롬 확장자
색상 선택기
클릭 > CTRL V
16진수
: BYTE 8BIT 그래서 계산 편해서 16진수 LIKE
123456789A~F :15까지 표현
F 15
10A
버튼 만들 때는 input 말고 button으로 만들어라-v
코드 컨벤션
약속을 이런 식으로 했군 ex> btn-search
회사마다 다름,
그림 > 이모지면 끝
이모지가 없다면 > 이미지를 이모지로 change
구글 아이콘 svg
글자로 뭐 만든다고?
아이콘 넣을 때 : svg(어쩔 수 없을 때) 혹은 이모지(1순위)
svg는 글자에요?
add new kit
cdn : content delivery network
css 파일(디자인)을 안해도 됨?
- 다운로드-v
고객이 ex01.html요청하면 server는 ex01.html , a.css 같이 다운이 됨
cdn을 쓰면
a.css를 내 경로에 났두는 것이 아니라 다른 곳에 구글 서버가 있는데 그 구글 서버가 a.css를 들고 있음.다운을 2군데에서 받음. 1. ex01html다운 2. 받고 3.구글서버에서 a.css 다운 받음-v
그래서 용량 줄임
넷플릭스
가까울 수록 빠르다
전세계에 cdn을 구축함. 내 서버를 한 군데 두는 것이 아니라 전세계에 두는 것.
가장 가까운 그것을 찾고
내 서버에 정적 안 담아도 됨.
cdn에 넣어두면 가깝게 쓰고 편하게 씀 ~ cloudfare
CDN~중요x
정적 파일을 전 세계적으로 만들어 setting 해두는 것
내 서버에 정적 파일 안 둬도 됨.
그리고 나의 것에서 가장 근처 cdn 것을 찾아 처리
그림그릴 때
어떻게 디자인 될 지 flow?
물처럼 흐른다. 꽉차면 밑으로 내려감.
static flow
인라인이어야 옆에 나올 수 있음.
static 외워라
- 동서남북 flor결정-자바에서
relative
상대적 위치를 정할 수 있음
⇒ 앞에 있는 아이로 기준을 결정. 혹은 옆에 있는 아이로 기준을 결정. ex) 노란색 기준으로 왼쪽 30px-v
위에다 덧대야 한다고?-v
relative
상대적 위치를 알 수 잇따.
relative는 중간 왼쪽 가운데 가능
static은 왼쪽 끝으로 정렬됨
앱솔 : 도화지가 1장 더 생김
-옆에 아무것도 없으면 바디로부터 비교함.
기존 도화지에서 없는 애로 취급.
바디로부터 왼쪽에 30 바디로부터 위로~이런 식
제트인덱스
-
그림 그리는 도구는 자식을 먼저하고 부모를 그림
자식이 그려져야 부모를 그릴 수 잇음.
relatie : 상대적 위치
박스 : absolute 바디라는 종이 하나 생김
바디의 상대적 위치
앞에 있으면 개와의 상대의 위치
박스를 2개
부모-rel
자식-absol
도화지가 네모박스에 페이지가 생겨 그 안에서만 논다.
박스의 left 20
4가지 포지션은 알고 잇어야 함.
그리드 레이아웃 5년정도 되서 어떤 데에서 안됨. 근데 포폴만 하면 됨.
static
왼→오
디자인 기본
부모가 결정
모든 배치는 부모가 결정
자식은 inline / inline-block이어야 함.
배치가 되려면 inline-block해야 함.
모든 태그에는 기본 속성, 마진,패딩, display 값도 가지고 있음
어떤 값을 줄 수 있다. 얼마든지?-v
모든 기본 flow static
위치 :relative / top / left같은 거
부모-rel 자식 -absol
이모지 있으면 이모지 쓰세요
svg
div-block?
열고 닫는 태그 없는거 ? -div .해서 relative?
디자인 기본
부모가 결정
모든 배치는 부모가 결정
자식은 inline / inline-block이어야 함.
Share article