CSS

학생때 css는 적용만 되면 "됐다!" 했기 때문에 제대로 된 사용법도 모르고 취업을 하면서 이미 퍼블팀이 있었기 때문에 css를 건들지 않아도 됐기 때문에 조금이라도 알던 css에 대한 지식이 이미 날라가버린 상황... 쓸데없는 소리 그만하고 그래서 css가 무엇인

CSS적용에는 다양한 방식이 있다.태그명으로 스타일class명으로 스타일 입히기태그명으로 스타일 입히기그런데 과연 위에 3가지 방법 중 2가지 이상을 적용했을 때, 어떠한 현상이 일어날까?첫번째 p태그는 태그, 클래스로 스타일을 입혔을 때,두번째 p태그는 태그, 클래스

CSS는 선택자(selector)와 선언부(declaratives)로 구성이 된다.CSS 기본적인 문법 구조는 다음와 같습니다.여기서 선택자 종류는 여러가지가 있는데 그동안 사용했었던 종류와 수강을 들으며 배우게 된 종류를 정리하고자 한다.태그 선택자(Type Sele

CSS에서 선택자는 HTML태그나 Class, ID 등으로 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며주는데, 가상선택자는 다르다.가상 선택자(클래스)는 별도의 class를 지정하지 않아도 요소의 상태에 따라 선택하여 꾸며준다. 쉽게 이해하면, 미리

css 코드가 한 파일로 제작이 된다면 가독성 저하, 어디서부터 어디까지가 어떤 스타일을 담당하고 있는지 파악하기 어렵고 단순 수정에도 전체 코드를 일일히 확인해야 한다. 프로젝트를 진행하면 css를 다루게 되는 경험을 하게 될 것이다. 프로젝트가 커지면 커질수록 C

글자의 크기를 지정한다.글자의 기울임을 지정한다.font-style 경우 기본값이 normal이다.font-style은 부모의 값을 상속을 받는다. 만약에 부모에 상속받은 것을 사용하지 않을 경우에는 font-style : normal 로 적용하면 된다. 글자 굵기를

length : 숫자percentage : 백분율단위에서 length 자료형에는 단위가 2가지 카테고리로 나뉜다.1) 상대길이단위 : 기준점보다 n이나 n배 만큼 2) 절대길이단위 : 기준점이 없고 모니터에 보여지는 자체로 계산이 된다.많은 사용자가 사용자 에이전트의

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(Box Model)이라고 부른다.content : 콘텐츠가 표시되는 영역padding : 콘텐츠롸 테두리 (border) 사이의 여백border : padding과 margin 사이의 테두리mar

display 속성으로 요소를 inline 또는 block 으로 변경할 수 있다. 또한 flex, grid로 자식 요소를 배치할 때 사용할 레이아웃을 설정할 수 있다.!codepenchoseongju/embed/rNrXajr?default-tab=html%2Cresul

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.main axis주축. 즉, x축을 뜻한다.cross axis교차측. 즉, y축을 뜻한다.만약 flex-d

웹페이지를 위한 이차원 레이아웃 시스템이다. 컨테이너를 가지고 행과 열을만든 다음 내부에 아이템을 차례대로 하나씩 그리드 틀에 맞춰 넣는 개념이다. 틀을 만든다. 행과 열을 만들고 하나에 아이템을 차례대로 자리를 잡는 형태이다.이 기능을 통해 콘텐츠를 행과 열에 배치할

css로 요소의 내용의 색상과 배경을 변경할 수 있다.1) 16진수(HEX) : 16진수로 색상을 표현한다.00은 채도가 제일 어두운FF는 채도가 제일 밝은2) rgbrgb범위 : rgb(0, 0, 0) ~ rgb(255, 255, 255)3) rgbargb와 사용법은

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.transform은 css 시각적 서식 모델의 좌표 공간을 변경한다.크기조절은 실제로 크기가 작아지는 것은 아니다.요소의 화면에 보여지는 크기 조절을 한다.소수점도 사용이 가능하다.scale은 0 ~ 1

반대되는 개념으로 적응형 디자인을 많이 사용하는데 다양한 화면 크기가 등장함에 따라 responsive web design(반응형 웹 디자인) 개념이 등장했다.디바이스에 따라 보여주는 화면이 다르다.반응형 디자인을 하기 위해서는 html문서에 viewport를 꼭 넣어