📔
web_study
  • JavaScript
  • 엘리_자바스크립트
    • 자바스크립트 기본
      • 클래스 예제와 콜백함수
      • 연산자 boolean
      • 함수 정의, 호출 그리고 콜백
      • 변수타입과 object 차이점
    • JavaScript async 와 await
    • JavaScript Promise
    • 자바스크립트 callback
    • 자바스크립트 json
    • 유용한 10가지 배열 함수들
    • 자바스크립트 배열(array)
    • 자바스크립트 object
    • 자바스크립트 (class vs object) 객체지향 언어
    • 자바스크립트 함수
    • 자바스크립트 연산.반복문
    • 데이터타입, data types, let vs var, hoisting
    • script async 와 defer의 차이점 콘솔 출력
    • 자바스크립트역사
  • 생활코딩
    • 재귀함수
    • 정규 표현식
    • 객체지향
      • 객체지향 프로그래밍
      • 생성자와 new
      • 전역객체
      • this
      • 상속
      • prototype
      • 표준 내장 객체의 확장
      • object
      • 데이터 타입
      • 참조
    • 함수지향
      • 유효범위
      • 값으로서의 함수와 콜백
      • 클로저
      • arguments
      • 함수의 호출
    • UI API, 문서
    • 모듈
    • 객체
    • 배열
    • 함수
    • 반복문
    • 조건문
    • 숫자와문자
    • 변수
    • 비교
  • 노마드 코더
    • Getting the Weather part One Geolocation
    • Image Background
    • TO DO List
    • Saving the User Name
    • Clock part One
    • 조건문 ( if , else, and, or)
    • evnet handlers
    • Function
    • Objects
    • Arrays
    • Variable(변수!)
    • Javascript
  • javascript30
    • Dram Kit
    • clock
    • Css Javascript
    • Array Cardio
    • flex panels
    • type ahead
    • Canvas Draw
    • Speech Synthesis
    • Whack A Mole
  • web standard
    • script 부분
    • form부분
    • 웹접근성
    • <meta>
  • 자바스크립트_이론
    • 기본지식(JAVASCRIPT)
    • 기본지식(CSS)
    • 기본지식(HTML)
    • 기본지식(HTTP)
    • Dom
    • 라이브러리, 프레임워크, 플로그인
Powered by GitBook
On this page
  • CSS 전처리기란?
  • sass, scss 차이점
  • CSS 적용 우선순위
  • Button
  • button type
  • input type="button"
  • rem 과 em 차이점
  • em
  • rem
  • 가상클래스(Pseudo Class)
  • 가상요소(Pseudo Element)
  • 싱글클론:과 더블클론::의 차이점
  • CSS 삼각형 만들기
  • flex 와 grid의 차이점

Was this helpful?

  1. 자바스크립트_이론

기본지식(CSS)

CSS 전처리기란?

css 전처리기는 태생적으로 기존 css가 가질 수 있는 불리한 점을 해결하기 위해 탄생하였다.

ex) sass, scss, less , stylus

sass, scss 차이점

Sass는 코드를 작성할 때 중괄호({})를 사용하는 대신 파이썬과 같이 들여쓰기로 구문을 감지하며, 세미콜론(;)을 사용하지 않습니다. 이는 css 를 작성하는 것과 다소 차이가 있는 부분입니다. 이후, Sass를 개발하는 사람들은 Sassy Css 를 의미하는 SCSS를 제공하게 됩니다. 즉 css 와 거의 비슷한 문법으로 Sass를 지원하자는 것입니다. SCSS 는 코드 작성 시 css와 동일하게 중괄호나 세미콜론 등을 사용합니다.

CSS 적용 우선순위

  1. 속성 값 뒤에 !important를 붙인 속성

  2. HTML 에서 style을 직접 지정한 속성

  3. #id로 지정한 속성

  4. .클래스 :추상클래스로 지정한 속성

  5. 태그이름으로 지정한 속성

  6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용된다.

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)

가상 요소는 특정한 부분에 스타일을 입히고 싶을 때 사용한다. 가상 클래스는 특정 상태에 대한 스타일이라면, 가상 요소는 특정 콘텐츠에 대한 스타일을 적용 시키기 위해 사용한다.

자주 쓰는 가상 요소

  • :last-child: 부모 요소 안에 있는 마지막 자식만 선택하는 선택자

  • :first-child: 부모 요소 안에 있는 첫번째 자식만 선택하는 선택자

  • :first-of-type: 같은 태그의 첫번째 요소만 선택

  • :last-of-type: 같은 태그의 마지막 요소만 선택

  • :not(:last-child): 마지막 요소를 제외한 것들 선

싱글클론:과 더블클론::의 차이점

싱글 콜론은 css2.1 규격 : before : after

더블 콜론은 css3 규격 ::before ::after

ie8에도 적용하려면 싱글콜론으로, css3 지원브라우저만 적용하려면 더블콘론으로 사용하면 된다.

CSS 삼각형 만들기

<div class="tri"></div>
.tri{
  width: 0px;height: 0px;
  border-top:50px solid none;
  border-bottom:50px solid red;
  border-right: 50px solid transparent;
  border-left: 50px solid  transparent;
}

flex 와 grid의 차이점

Previous기본지식(JAVASCRIPT)Next기본지식(HTML)

Last updated 3 years ago

Was this helpful?

em은 스타일을 지정한 요소의 폰트 크기를 곱한 값을 나타낸다.

rem 단위는 변환된 픽셀 크기는 최상위(rem에서 r은 root를 뜻함) 요소의 폰트 크기가 기준이 된다. (최상위 요소의 폰트 크기에 rem 단위로 지정한 숫자를 곱한 값이 변환된다.)

: 콘텐츠 뒤에 위치하는 공간 선택

: 콘텐츠의 앞에 위치하는 공간을 선택

: 드래그한 콘텐츠를 선택 지원하지 않는 브라우저가 있어 체크해야한다. 그리고 :: 콜론은 두 개만 지원 한다고한다.

Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.

그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다.

👉
👉
👉
👉
::after
::before
::selection