CSS

Cascading Style Sheets의 준말, font, table, animation 등 다양한 스타일이 존재함이 역시 HTML처럼 버전이 다름, 그러기에 어떤 웹 브라우저인지 속성이 지원이 가능한지 확인을 잘해야함Cascading의 의미는 여러 개의 스타일이 하

Type Selector는 하나의 HTML에 있는 모든 태그들을 고르기 때문에 특정 요소를 선택할 때 사용하면 안됨하나의 전체 웹 페이지에서 일관성 있게, 일관적으로 적용해야할 스타일링이 있을 때 Type Selector를 쓰고 css 파일에 상단부에 주로 많이 씀특정

폰트 색깔의 경우 별도의 font-color가 아닌 그냥 color를 사용해서 씀font-size는 글자의 크기를 바꿀 떄 씀, 기본적으로 px단위를 많이 씀(브라우저는 16px을 기본값으로 씀)이 때 font-size의 경우 키워드를 써서 바꿀 수도 있고 % 단위도

css 속성을 확인해서 실제로 해당하는 숫자나 길이, 백분율 등 값들을 쓸 수 있는 속성인지 확인해야함기준점이 없고 고정값이며 모니터에 보이는 값 자체를 바탕으로 처리하는 것px을 대부분 사용하고 다른 단위는 잘 안 씀, 왜냐하면 현실 세계에서의 값을 쓰는건 웹은 얼마

실제로 CSS 계산 및 처리는 박스모델로 이해해서 처리할 수 있음 즉, 일종의 박스로 되어 있다고 볼 수 있음, 그래서 이를 토대로 콘텐츠를 담고 배치하고 처리한다고 봄박스 모델은 content로 콘텐츠가 표시되는 영역과 padding 콘텐츠와 테두리(border)사이

display라는 속성을 통해서 처음부터 정해진 태그의 요소 속성을 변경할 수 있음inline 요소의 대표적인 예는 span 태그, 영역의 크기는 내부 콘텐츠 값에 따라서 정해짐, width, height로 크기를 지정 및 처리할 수 없음그리고 margin, paddi

앞서 색상을 줄 때는, 지정한 키워드에 맞게 CSS가 색상값을 넣어주는 것임하지만 매번 이 키워드에 맞게 할 수가 없는데, 그럴 때 HEX, rgb, rgba등의 값으로 지정하는 것임투명하게 하는 것은 transparent로 함16진수 표기법, HEX라고도 하는데 이를

원래 형태의 요소를 transform을 활용해서 작게 만들거나 크게 만드는 등 변화를 줄 수 있음(그 자리는 그대로 유지하되, 회전, 기울이기, 크기 변화 등의 효과를 주는 것)transform으로 움직이게 된다면 레이아웃과 다르게 작동함(실제로 요소가 변하거나 바뀌는

transition은 A라는 상태가 B라는 상태로 변할 때 시간차를 갖고 변환하는데 이 변환되는 모습을 보여주는게 transition임버튼의 색깔이 Fade In과 같이 요소가 위에서 아래로 열리는 등 이러한 효과들을 transition을 만듬이를 통해서 별도의 js

애니메이션은 유저의 특정 액션이 없어도 자동으로 스타일이 바뀌게 할 수 있음애니메이션은 단순하게 A에서 B로 가는 등의 transition과 같은 전환이 아닌 다수의 스타일과 액션을 줄 수 있음animation도 단축 속성으로 쓸 수 있음animation의 경우, 다수

만약 블럭요소에 대해서 가로 정렬을 하고 싶다면 display 요소를 쓰는데 그렇게 하면 inline-block으로 해야하는데 빈공간이 생김그래서 이에 대해서 가로 정렬이 inline-block도 애매함, float에서 left를 쓰게 되면 붙긴 하지만 containe

FlexBox의 경우 교차축이 존재하지만 주축에서만 여러개의 item이 있음, 속성을 변경해야지만 줄바꿈으로 여러개의 아이템이 생김Grid의 경우 본격적으로 주축과 교차축 전부의 Item들이 있음Container가 있지만, 먼저 행과 열을 만들고 그에 맞게 배치를 하고

다양한 화면 크기는 뷰포트를 이야기함, 이는 모바일 화면과 PC화면이 다르기에 적용되는 이야기임모바일 기기와 웹 사이트로 보는 이미지와 크기가 다 다름작은 기기를 위해서 디자인을 수정해야 하는데 그에 맞게 반응형 디자인을 써야함적응형 디자인은 반응형 디자인과 어느정도