css

mvc

 

model -> (data관리 /비즈니스 로직(값): html

왜 값일까? label이라는 의미를 부여하고 text로 문자열 값을 주기 때문이다.

 

view -> 출력 (pc(해상도), 모바일(해상도)): css

로직은 같지만 출력하는 방식이 바뀔수 있다

 

controller ->  model과 view를 제어 & 사용자 입력 : js

view에 붙으면 controller도 view갯수만 큼 존재가능

model에 붙으면 controller도 하나이다

 

model : view = 1:n

model : controller = 1:1

 

정적, 동적

정적  : 나주에 변경 불가능

동적  ; 외부에서 입력받아 사용해야한다 외부파일이있어야한다.

 

css 작성

선택자 key1:value1;

선택자 tag, #id, .class

 

text-align : center;

 

css 경량화 -> 보기는 불편하지만 성능은 향상됨

불필요한 부분을 줄여 빠르게 실행되게 한다

주석없애기 엔터 없애기 빈칸 없애기

 

외부파일로 빼는이유

다른 곳에서도 사용하기 위해서 여러개의 html파일에서 공통적으로 사용하기 위함

 

*: 전체 선택자에 대해서 스타일을 적용한다

 

태그, 요소

태그는 말그대로 태그자체

요소는 태그 안에 텍스트

 

타입선택자

태그 명을 통해서 css적용

 

클래스 선택자

.class{}

클래스 명을 통해서 css 적용

 

id 선택자

id는 오직하나만 존재한다

#id{}

id 명을 통해서 css적용

 

같은 규칙을 적용하고 싶은 태그는 ,로 묶어준다.

선택자,선택자{}

 

캐스케이딩

계단식으로 적용된다

우선순위

밑에 지정한 애가 무조건 적용된다

 

브라우저 제공 스타일 , 제작자 스타일 , 사용자가 정의한 스타일(외부파일, 내부파일)

 

우선순위

1. !important 가장 우선순위가 높음

2. 인라인 스타일 : 태그안에 쓰는거

3.id 스타일 : id태그를 통해서 css지정

4. class 스타일 : class태그를 통해서 css지정

5. 타입스타일 : 웹문서에 지정한 태그를 통해서 스타일을 지정한다.

 

 

 

font-family : 기본글꼴, 기본글꼴;

둘다 없으면 웹브라우저 제공 글꼴

 

|는 나열한 옵션중 하나가 값이 되어야한다는 의미

자바의 enum타입과 비슷하다 정의된 값만 사용할 수 있다는 점이

 

글자크기

1. 키워드를 사용하여

xx-small<x-small<small<medium<large<x-large<xx-large

2.단위를 사용하여

em-바로 위의 부모를 기준으로 크기를 지정한다. 대문자의 너비를 기준으로 비율값을 지정

,px-모니터의 글자 해상도를 기준으로 함,

pt- 일반문서에서 사용하는 포인트

rem - 최상위루트인 body를 기준을폰트의 크기를 지정함

ex - 해당글꼴의 소문자 높이를 기준으로 비율값을 지정한다.

3.백분유를 이용하여 부모요소 크기를 기준으로 지정한다.

부모요소의 글꼴크기가 px단위로 지정되어있어야 자식에 서 사용가능하다

 

웹폰트 사용

원래는 이런거 말고 포토샵으로 폰트를 이미지로 만들어서 출력햇엇다 -> 용량도 많이 들고 회선비용도 비싸진다

 

 

TTF폰트

@font-face{}

내 pc에 폰트가 없을 때 설치

d

 

웹페이지에 폰트 적용해서 사용하는 법

아래사이트에 들어가서 검색해서 다운 받아 사용한다

 

 

https://fonts.google.com/

Browse Fonts - Google Fonts

<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
</style>

 

linkㅂㅇ법

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href=" https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap " rel="stylesheet">

 

import 방법 많이 씀

 

블록레벨 요소

혼자 한줄을 차지함

 

인라인 레벨요소

한줄을 차지 하지 않음 , 한줄에서 왼쪽에서 오른쪽으로 채워나가기 가능

 

 

 

마진 중첩

내꺼랑 다음꺼의 마진이 겹친다 먹힌다!