CSS Selector 정리
- CSS Selector : CSS 스타일을 적용시킬 HTML 요소를 정의할 때 사용하는 문법
- 전체 셀렉터
- * : HTML 문서 내 작성된 모든 요소들에 정의된 스타일 적용
- 태그 셀렉터
- TagName : 지정된 태그가 설정된 모든 요소에 정의된 스타일 적용
- ID 셀렉터
- #id : 지정된 id 값을 가진 요소에 정의된 스타일 적용
- Class 셀렉터
- .class : 지정된 class 값을 가진 요소에 정의된 스타일 적용
- 복합 셀렉터
- Tag #id .class : 지정된 Tag 중에서 지정된 id 값과 class 값이 설정된 요소에 정의된 스타일 적용
- 어트리뷰트 셀렉터
- [Attribute=Value] : 작성된 어트리뷰트와 값이 동일한 요소에 정의된 스타일 적용
가상 클래스
- 요소에 특정 이벤트가 발생했을 때 선택되는 문법
- link : a 태그 사용 시 하이퍼링크에 한번도 접근하지 않았을 경우
- visited : 하이퍼링크에 한번이라도 접근했을 경우
- hover : 요소에 마우스를 올려뒀을 경우
- active : 링크 요소를 클릭하고 있는 상태
- focus : 특정 요소에 포커스가 있는 상태 : (input 태그에 포커스가 있어 커서가 깜빡이는 상태
요소 뒤에 콜론(:)을 사용한다. (ex. .className:hover {})
CSS 기초 레이아웃 이해하기
( Display, Position, Flex, Grid는 무엇인지 대략만 )
Display
- 각 요소를 어떻게 표시할 것인지 지정하는 속성
- block, inline, inline-block, none 등 다양한 속성이 존재함
- 주요 속성값 정리
- 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
- 화면 상에 어떠한 공간도 차지하지 않고, 삭제된 것처럼 아무것도 출력되지 않도록 하는 속성
- block
Position
- 요소들을 원하는 위치에 배치하기 위한 속성
- static(Default), relative, absolute, fixed, sticky 값을 사용할 수 있음
- 주요 속성값 정리
- static (Default)
- 위치를 지정할 수 없으며, 일반적인 흐름에 따라 요소를 배치하는 속성값
- 기본값이기 때문에 일반적으로 position 속성값을 지정하지 않을 경우 static 형태로 요소가 배치된다.
- relative
- 일반적인 흐름에 따라 요소를 배치하되 top, right, bottom, left 값을 지정하여 자기 자신을 기준으로 요소를 얼마나 띄운채 출력할지 지정할 수 있는 속성값
- absolute
- 일반적인 흐름에서 제거되고, 부모 태그를 기준으로 top, right, bottom, left 값을 지정하여 출력하는 속성값
- 부모 태그가 없을 경우 <body> 태그를 기준으로 요소를 출력
- fixed
- 일반적인 흐름에저 제거되고, 스크롤에 상관없이 지정된 위치(좌표)에 요소를 고정시켜 출력하는 속성값
- ex) 우측 하단 상담사 버튼 등
- sticky
- static + fixed 의 특징을 합친 속성값으로 정해진 위치(좌표)에 도착하기 전까진 static 형태로 요소를 출력하고, 정해진 위치에 요소가 도착했을 경우 fixed 의 특징과 같이 요소를 고정시켜 출력하는 속성값
- static (Default)
Flex
- 1차원적인 레이아웃을 지정하는 속성으로 inline-block 등의 속성을 사용해 요소를 배치할 수 있으나 최근 반응형 웹 디자인에 있어 좀 더 직관적이고 쉽게 레이아웃을 지정할 수 있도록 해주는 속성
- 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를 익혀보자
studiomeal.com
Grid
- flex의 경우 1차원적인 레이아웃을 지정할 수 있는 속성값인데 반해 grid의 경우 2차원적인 레이아웃을 지정할 수 있는 속성
Grid 속성값 참고
이번에야말로 CSS Grid를 익혀보자
studiomeal.com
CSS Selector 정리
- CSS Selector : CSS 스타일을 적용시킬 HTML 요소를 정의할 때 사용하는 문법
- 전체 셀렉터
- * : HTML 문서 내 작성된 모든 요소들에 정의된 스타일 적용
- 태그 셀렉터
- TagName : 지정된 태그가 설정된 모든 요소에 정의된 스타일 적용
- ID 셀렉터
- #id : 지정된 id 값을 가진 요소에 정의된 스타일 적용
- Class 셀렉터
- .class : 지정된 class 값을 가진 요소에 정의된 스타일 적용
- 복합 셀렉터
- Tag #id .class : 지정된 Tag 중에서 지정된 id 값과 class 값이 설정된 요소에 정의된 스타일 적용
- 어트리뷰트 셀렉터
- [Attribute=Value] : 작성된 어트리뷰트와 값이 동일한 요소에 정의된 스타일 적용
가상 클래스
- 요소에 특정 이벤트가 발생했을 때 선택되는 문법
- link : a 태그 사용 시 하이퍼링크에 한번도 접근하지 않았을 경우
- visited : 하이퍼링크에 한번이라도 접근했을 경우
- hover : 요소에 마우스를 올려뒀을 경우
- active : 링크 요소를 클릭하고 있는 상태
- focus : 특정 요소에 포커스가 있는 상태 : (input 태그에 포커스가 있어 커서가 깜빡이는 상태
요소 뒤에 콜론(:)을 사용한다. (ex. .className:hover {})
CSS 기초 레이아웃 이해하기
( Display, Position, Flex, Grid는 무엇인지 대략만 )
Display
- 각 요소를 어떻게 표시할 것인지 지정하는 속성
- block, inline, inline-block, none 등 다양한 속성이 존재함
- 주요 속성값 정리
- 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
- 화면 상에 어떠한 공간도 차지하지 않고, 삭제된 것처럼 아무것도 출력되지 않도록 하는 속성
- block
Position
- 요소들을 원하는 위치에 배치하기 위한 속성
- static(Default), relative, absolute, fixed, sticky 값을 사용할 수 있음
- 주요 속성값 정리
- static (Default)
- 위치를 지정할 수 없으며, 일반적인 흐름에 따라 요소를 배치하는 속성값
- 기본값이기 때문에 일반적으로 position 속성값을 지정하지 않을 경우 static 형태로 요소가 배치된다.
- relative
- 일반적인 흐름에 따라 요소를 배치하되 top, right, bottom, left 값을 지정하여 자기 자신을 기준으로 요소를 얼마나 띄운채 출력할지 지정할 수 있는 속성값
- absolute
- 일반적인 흐름에서 제거되고, 부모 태그를 기준으로 top, right, bottom, left 값을 지정하여 출력하는 속성값
- 부모 태그가 없을 경우 <body> 태그를 기준으로 요소를 출력
- fixed
- 일반적인 흐름에저 제거되고, 스크롤에 상관없이 지정된 위치(좌표)에 요소를 고정시켜 출력하는 속성값
- ex) 우측 하단 상담사 버튼 등
- sticky
- static + fixed 의 특징을 합친 속성값으로 정해진 위치(좌표)에 도착하기 전까진 static 형태로 요소를 출력하고, 정해진 위치에 요소가 도착했을 경우 fixed 의 특징과 같이 요소를 고정시켜 출력하는 속성값
- static (Default)
Flex
- 1차원적인 레이아웃을 지정하는 속성으로 inline-block 등의 속성을 사용해 요소를 배치할 수 있으나 최근 반응형 웹 디자인에 있어 좀 더 직관적이고 쉽게 레이아웃을 지정할 수 있도록 해주는 속성
- 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를 익혀보자
studiomeal.com
Grid
- flex의 경우 1차원적인 레이아웃을 지정할 수 있는 속성값인데 반해 grid의 경우 2차원적인 레이아웃을 지정할 수 있는 속성
Grid 속성값 참고
이번에야말로 CSS Grid를 익혀보자
studiomeal.com
