CSS

css는 룰 기반의 언어이다.하나의 주석을 여러줄로도 구성이 가능하다.인라인 스타일은 되도록 지양하는게 좋음.

보통 class, id, p를 만들어 적용가능함.→ class로 만들기 : .이름{style:~;}→ id로 만들기 : → 바로 태그에 적용하기 : 태그{style:~;} 굳이 html가서 넣지 않아도 된다.

CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 여러 개의 서버입니다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높입니다. 전 세계 데이터센터는 파일 복사본을 임시로 저장하는 프로세스인 캐싱을 사용합니다. 따라서 사용자는 가까운 서버를 통해 웹 활

ex) .nav-item{text-decoration:none;} \*hover : mouse over 마우스가 태그 위로 올라왔을 때 발생하는 이벤트 ex) .nav-item:hover{text-decoration:underline;} \*active- 마우스로

색깔 코드 가져오기 링크: https://flatuicolors.com/palette/defo​뒷배경 꾸미기 링크 : http://projects.verou.me/css3patterns/​아이콘 이미지 링크 : https://fontaweso

해당 태그 모두 적용되므로 보기 쉽게 상단에 정리하는게 편하다.id는 중복이 안되며 유일해야한다.여러개의, 원하는 곳마다 적용하고 싶을 때 사용캐스캐이팅 원칙에 의해 여러개의 셀렉터를 쓰면 마지막에 쓴 코드를 따라간다.

그 요소 형제 중 첫번 째만 적용이 됨고른 것들 중 첫번째가 아닌, 셀렉터에 의해 선택된 것의 첫번째 자식이다.따라서, 예제의 Toy story에 movie라는 class가 없다면, 폰트 사이즈가 커지는 건 없을 것이다. <ul>의 첫번 째 자식만 바뀌는 것이다.

ul태그 중 li태그를 선택하고 싶을 때id로 할경우\>를 사용.자식 선택자를 사용 안하면 ol안에 있는 리스트2까지 css가 적용 된다.리스트4만 적용하고 싶다면 자식 선택자인 >를 사용하면 된다

\* 을 사용전체 다 사용 되기 때문에 제일 상단에 쓰는 것이 좋다.\*는 보통 생략해서 사용을 하고 있다.ex) .red{color:red;}는\*.red{color:red;}에서 \*을 생략해서 쓰는 것이다.인접 형제 선택자와 함께 사용이처럼 다른 선택자와 함께 사

head 태그 안에 style 태그를 먼저 읽고, 다음에 link 태그를 읽음으로써blue가 적용된 걸 볼 수 있다.인라인 요소로 스타일을 넣으면 인라인 요소로 적용이 된다.인라인 스타일링은 권유되는 방법은 아니다.적용범위가 적을수록 명시도가 높다.

font-size 기본 값 : 16pxfont-style 기본 값 : normalfont-weight 기본 값 : normal(400)font-style은 보통 italic(기울임)을 사용하기 위해 쓴다.font-weight 값bold굵은 폰트 가중치. 700 과 같음

1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.브라우저에서 창 크기를 조절해도 절대크기기 때문에 글꼴 사이즈가 변하지 않는다.\-> 글Tl 크기를 늘려

상속 x기본값 : autoinline 요소는 width와 height요소를 지정할 수 없다.지정된 크기가 고정되어있다가 계속 늘리면 늘어남기본 값 0상속 x/ 네 면 모두 적용 /margin: 1em;margin: -3px;/ 세로방향(위아래) | 가로방향(좌우) /m

inline 요소 ex) span..영역의 크기가 내부 콘텐츠 크기로 정해진다margin, padding의 top/bottom은 추가할 수 없다여러 요소가 가로 배치가 된다 block 요소 ex) div..영역의 크기를 width, height로 지정할 수 있다.wid

키워드 사용 (blue, transparent 등)RGB 3차원 좌표계 사용 (- HSL 실린더형 좌표계 사용 (hsl(), hsla()의 함수형 표기법)R : redG : greenB : bluergb(0, 0, 0); // blacka : 알파 (몇 퍼센트 표현할건

회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.기본값transform: none;값요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요

시간의 흐름을 가지고 A CSS에서 B CSS로 변환되는 것전환 효과를 주는 속성변환하는데 갖는 시간0.5S = 500ms만약, color만 2s에 걸쳐 전환하고 싶다면 transition-property에 all대신 color 값을 넣어주면 된다.transition

trasition은 유저의 action이 있어야 작동하는 것이고,애니메이션은 유저의 action이 없어도 자동으로 작동하도록 설정하는 것이다.다수의 스타일을 세트로 전환시킬 수 있다.keyframes를 미리 작성해놓고 사용하는 방식이다.keyframes

컨테이너와 아이템들이 함께 있어야한다.main axis : 주축(가로), cross axis : 교차축(수직)플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

flex box가 1차원이라면, 그리드는 2차원이라고 보면 된다.display : grid; 설정해야 함하나의 그리드은 대게 columns, rows로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 gutters라고 부른다.fr은 비율.2fr 1fr

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.media-type : all or screen최소 300px 최대 500px가로모드일때 적용orientat

box-sizing을 먼저 설정하는 것이 좋다.이유는 내가 설정한 가로세로 길이 값이 패딩 보더 마진 등을 수정함으로써 달라지게 되는데, box-sizing를 먼저 설정하게 된다면 이 길이 내에서 조절되기때문에 수정하더라도 내가 정한 크기에 벗어나지 않기때문이다.ex)

많은 걸 일일히 바꾸지 않고 변수를 만들어서 변경가능자주쓰는 코드 집합.위 예제는 300px 넘어갈경우 말줄임표로 표현되게 짜놓은 것을 mixin에 저장해 놓은 후,p 태그에 저장한 mixin을 불러왔다.코드를 일일히 복사하지 않고 사용할 수 있다.