기본지식(CSS)
CSS 전처리기란?
css 전처리기는 태생적으로 기존 css가 가질 수 있는 불리한 점을 해결하기 위해 탄생하였다.
ex) sass, scss, less , stylus
sass, scss 차이점
Sass는 코드를 작성할 때 중괄호({})를 사용하는 대신 파이썬과 같이 들여쓰기로 구문을 감지하며, 세미콜론(;)을 사용하지 않습니다. 이는 css 를 작성하는 것과 다소 차이가 있는 부분입니다. 이후, Sass를 개발하는 사람들은 Sassy Css 를 의미하는 SCSS를 제공하게 됩니다. 즉 css 와 거의 비슷한 문법으로 Sass를 지원하자는 것입니다. SCSS 는 코드 작성 시 css와 동일하게 중괄호나 세미콜론 등을 사용합니다.
CSS 적용 우선순위
속성 값 뒤에 !important를 붙인 속성
HTML 에서 style을 직접 지정한 속성
#id로 지정한 속성
.클래스 :추상클래스로 지정한 속성
태그이름으로 지정한 속성
상위 객체에 의해 상속된 속성
같은 우선 순위에 있는경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용된다.
Button
button type
button type은 submit, reset, button이 있다.
button의 기본 타입은 submit 이다.
input type="button"
<input>은 열린 태그여서 자식요소를 가질 수 없다는 단점이 있다. 하지만< button>은 자식 태그를 가질 수 있기 때문에 이미지/텍스트/가상요소 등의 다양한 활용이 가능하다.
<button>은 <input> 의 역할을 잇기 위해 나중에 추가된 태그이다.
rem 과 em 차이점
em
rem
가상클래스(Pseudo Class)
가상 클래스는 선택이 될 요소에 대해 특별한 상태 에 대한 스타일을 입혀줍니다. 흔히 사용하는 :active, :hover 와 같이 특정 상태에 대한 :가상 클래스명 을 적어주고 그 아래에 '그 상태' 에 대한 스타일을 기술해줍니다.
가상요소(Pseudo Element)
가상 요소는 특정한 부분에 스타일을 입히고 싶을 때 사용한다. 가상 클래스는 특정 상태에 대한 스타일이라면, 가상 요소는 특정 콘텐츠에 대한 스타일을 적용 시키기 위해 사용한다.
자주 쓰는 가상 요소
::after: 콘텐츠 뒤에 위치하는 공간 선택::before: 콘텐츠의 앞에 위치하는 공간을 선택::selection: 드래그한 콘텐츠를 선택 지원하지 않는 브라우저가 있어 체크해야한다. 그리고::콜론은 두 개만 지원 한다고한다.:last-child: 부모 요소 안에 있는 마지막 자식만 선택하는 선택자:first-child: 부모 요소 안에 있는 첫번째 자식만 선택하는 선택자:first-of-type: 같은 태그의 첫번째 요소만 선택:last-of-type: 같은 태그의 마지막 요소만 선택:not(:last-child): 마지막 요소를 제외한 것들 선
싱글클론:과 더블클론::의 차이점
싱글 콜론은 css2.1 규격 : before : after
더블 콜론은 css3 규격 ::before ::after
ie8에도 적용하려면 싱글콜론으로, css3 지원브라우저만 적용하려면 더블콘론으로 사용하면 된다.
CSS 삼각형 만들기
flex 와 grid의 차이점
Last updated
Was this helpful?
