메모

0401 월 uiux 2일차

rgb 빛에 대한 색. 혼합 시(rgb의 값이 높아질 시) 밝아짐.

cmyk 잉크에 대한 색. 혼합 시 어두워짐.

색상

채도:

명도

jpg, png 파일- 웹용으로 사용

비주얼 스튜디오 코드 cyrl+y 이후 돌리기(컨z 컨y)

태그 복붙: 알트 시프트 방향키위아래

선택자 {

      속성명: 속성값;

}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보

{}: 어떤 요소를 적용할지 정의하는 구간

속성명: 어떤 스타일을 정의하고 싶은지 정보

속성값: 어느 정도의 수치

:(콜론) 속성명과 속성값을 나눠

;(세미콜론) 구분자 속성을 구분

<link rel="stylesheet" href="style.css">

    폴더 안에 있는 style.css 파일이라면 "폴더명/style.css"이라고 작성해야 함

인라인 속성:태그에 직접 기술하는 방식

내부에 있는 부분만 넣는다

컨트롤 시프트 L(동시 다중선택)

태그명*숫자

숫자만큼 태그를 만들어준다

Tap이동하면서 내용작성

태그명*숫자{내용} 쓴 후 엔터

태그가 숫자가 나와서 내용까지 써줌

예) div*3{기본} 엔터 치면 세개가 쭉 작성됨

      <div>기본</div>

      <div>기본</div>

      <div>기본</div>

스타일 태그 만들기

ㄴ HTML에서 직접 넣어주는 기능

헤드에 태그 스타일 작성할 수 있음

문서 간의 연결

head 안에 style 태그 넣어주기

css 주석처리가 다름

선택자

어떤 요소에 스타일을 적용할지

종류: 기본, 그룹, 특성, 결합, 의사 클래스, 의사요소

전체 선택자: *

* {}

 문서 내의 모든 요소를 의미(페이지 전체)

 문서 내 글자체를 동일시할 때

 전반적인 색을 동일시할 때 사용.

태그 선택자: 주어진 이름을 가진 태그. 요소를 선택

p, div, span

클래스 선택자: 각 태그들을 동일한 명으로 묶은 것(먼저 태그 이름을 설정해야 함)

.클래스명 {}

div랑 span을 같은 클래스에 넣을 수 있음 <div class="a"> <span class="a">

id 선택자 #.id명

 고유한 식별자를 가진다. 이름은 다른 요소와 달라야 한다.

 동일한 명으로 했을 때 문제는 없어 보인다.

 웹 표준: 동일한 페이지가 다른 pc에서도 열려야 함

 크롬, 웨일, 엣지

 동일한 페이지

 규칙들

 id 다르게. javascript 문제 발생할 수 있다.

 주민번호라고 생각하기

그룹 선택자

 다양한 유형의 요소를 한번에 선택하고자 할 때 사용

 (,) 쉼표 구분 예) #a1, span {}

선택자에는 우선순위가 있다. 

1. 나중에 작성된 스타일을 우선 적용(밑이 우선)

2. 아이디 > 클래스 > 태그

홈페이지를 구성할 때부터

1. 레이아웃의 형태 

2. 스타일 

클래스로 묶을지 

아이디로 묶을지 

홈페이지 제작보다는 관리

class "a c" a도 되고 c도 됨. .a {} .c {} 순서로 적으면 .c에 있는(제일 밑에 적은) 게 적용됨

텍스트 꾸미기

font-family: 텍스트에 글꼴을 지정할 때 사용함.

사용자의 시스템에 해당 글꼴이 없을 수 있기 때문에 대비해서 여러 글꼴을 백업지정한다.

웹 폰트

 font-family: 글꼴명, 글꼴계열;

 글꼴명 공백이 있으면 " "(큰따옴표)로 묶어준다.

 글꼴계열

 사용을 하지 못할 때 계열만 선택해줌

 세리프(삐침있는 글자), 산세리프(돌출없는 글자), 모노스페이스(너비가 고정되어있음)

 cursive(필기형) fantasy(장식)

( https://webstoryboy.co.kr/ ) font-family 쪽 보면 됨!

font-size

px: 절대크기

em: 부모태그의 font-size와 상대크기 예) 3em하면 부모태그의 3배만큼의 크기

rem: html 기본글꼴의 배수, 상대크기