반응형

CSS Selector 정리

  1. CSS Selector : CSS 스타일을 적용시킬 HTML 요소를 정의할 때 사용하는 문법
  2. 전체 셀렉터
    • * : HTML 문서 내 작성된 모든 요소들에 정의된 스타일 적용
  3. 태그 셀렉터
    • TagName : 지정된 태그가 설정된 모든 요소에 정의된 스타일 적용
  4. ID 셀렉터
    • #id : 지정된 id 값을 가진 요소에 정의된 스타일 적용
  5. Class 셀렉터
    • .class : 지정된 class 값을 가진 요소에 정의된 스타일 적용
  6. 복합 셀렉터
    • Tag #id .class : 지정된 Tag 중에서 지정된 id 값과 class 값이 설정된 요소에 정의된 스타일 적용
  7. 어트리뷰트 셀렉터
    • [Attribute=Value] : 작성된 어트리뷰트와 값이 동일한 요소에 정의된 스타일 적용

 

가상 클래스

  • 요소에 특정 이벤트가 발생했을 때 선택되는 문법
  1. link : a 태그 사용 시 하이퍼링크에 한번도 접근하지 않았을 경우
  2. visited : 하이퍼링크에 한번이라도 접근했을 경우
  3. hover : 요소에 마우스를 올려뒀을 경우
  4. active : 링크 요소를 클릭하고 있는 상태
  5. focus : 특정 요소에 포커스가 있는 상태 : (input 태그에 포커스가 있어 커서가 깜빡이는 상태

요소 뒤에 콜론(:)을 사용한다. (ex. .className:hover {})

 

CSS 기초 레이아웃 이해하기

( Display, Position, Flex, Grid는 무엇인지 대략만 )

Display

  1. 각 요소를 어떻게 표시할 것인지 지정하는 속성
  2. block, inline, inline-block, none 등 다양한 속성이 존재함
  3. 주요 속성값 정리
    • block
      • div, p 태그의 경우 가로 줄 전체를 공간으로 지정하여 사용할 때마다 줄바꿈이 되는 형태가 되는데 이를 block 속성 이라고 함
      • width, height 등 값을 지정하지 않을 경우 가로줄을 모두 차지하는 형태를 가진 표현 방식
      • 즉, 위/아래로 작성한 요소가 표시되는 형식
    • inline
      • pan, a, input, button 태그와 같이 작성한 컨텐츠 크기 만큼 공간을 차지하여 출력되는 속성
      • block 과 달리 위 아래로 컨텐츠가 출력되는 것이 아닌 작성한 컨텐츠 옆에 컨텐츠가 나란히 작성됨
      • block 형태의 요소와 다르게 크기 지정이 불가능함 (width, height 값 지정 불가)
    • inline-block
      • inline + block 형태의 속성
      • inline 속성과 동일하게 컨텐츠 작성 시 양옆에 나란히 컨텐츠가 작성되며, block 과 동일하게 width, height 값을 지정할 수 있는 속성
      • 크기값을 지정하지 않을 경우 inline 과 동일하게 작성한 컨텐츠 크기 만큼 공간을 차지한다.
    • none
      1. 화면 상에 어떠한 공간도 차지하지 않고, 삭제된 것처럼 아무것도 출력되지 않도록 하는 속성

 

Position

  1. 요소들을 원하는 위치에 배치하기 위한 속성
  2. static(Default), relative, absolute, fixed, sticky 값을 사용할 수 있음
  3. 주요 속성값 정리
    • static (Default)
      • 위치를 지정할 수 없으며, 일반적인 흐름에 따라 요소를 배치하는 속성값
      • 기본값이기 때문에 일반적으로 position 속성값을 지정하지 않을 경우 static 형태로 요소가 배치된다.
    • relative
      • 일반적인 흐름에 따라 요소를 배치하되 top, right, bottom, left 값을 지정하여 자기 자신을 기준으로 요소를 얼마나 띄운채 출력할지 지정할 수 있는 속성값
    • absolute
      • 일반적인 흐름에서 제거되고, 부모 태그를 기준으로 top, right, bottom, left 값을 지정하여 출력하는 속성값
      • 부모 태그가 없을 경우 <body> 태그를 기준으로 요소를 출력
    • fixed
      • 일반적인 흐름에저 제거되고, 스크롤에 상관없이 지정된 위치(좌표)에 요소를 고정시켜 출력하는 속성값
      • ex) 우측 하단 상담사 버튼 등
    • sticky
      • static + fixed 의 특징을 합친 속성값으로 정해진 위치(좌표)에 도착하기 전까진 static 형태로 요소를 출력하고, 정해진 위치에 요소가 도착했을 경우 fixed 의 특징과 같이 요소를 고정시켜 출력하는 속성값

 

Flex

출처 : https://studiomeal.com/archives/197

  1. 1차원적인 레이아웃을 지정하는 속성으로 inline-block 등의 속성을 사용해 요소를 배치할 수 있으나 최근 반응형 웹 디자인에 있어 좀 더 직관적이고 쉽게 레이아웃을 지정할 수 있도록 해주는 속성
  2. flex 레이아웃을 만들기 위한 기본적인 HTML 구조
<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
    <div class="item">helloflex</div>
</div>
  • 부모 요소인 .container : Flex Container
  • 자식 요소인 .item : Flex Item

Flex 속성값 참고

이번에야말로 CSS Flex를 익혀보자

 

이번에야말로 CSS Flex를 익혀보자

 

studiomeal.com

 

Grid

출처 : https://studiomeal.com/archives/533

  1. flex의 경우 1차원적인 레이아웃을 지정할 수 있는 속성값인데 반해 grid의 경우 2차원적인 레이아웃을 지정할 수 있는 속성

Grid 속성값 참고

이번에야말로 CSS Grid를 익혀보자

 

이번에야말로 CSS Grid를 익혀보자

 

studiomeal.com

 

 

저작자표시 비영리 동일조건 (새창열림)