-display:flex-

플레스 박스 레이아웃은 그리드 레이아웃을 기본으로 해서 새로 등장한 개념이다.

 

  • justify-content : 주측 방향의 정렬
  • align-items : 교차측 방향의 정렬

-justify-content-

  • center : 중앙에 맞춰준다.
  • flex-start : 주축의 시작점에 맞줘 배치
  • flex-end : 주축의 끝점에 맞춰 배치
  • space-between : 첫 번째 항목과 끝 항목을 기준으로 사이에 같은 간격으로 배치
  • space-around : 모든항목을 같은 간격으로 배치

 

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

 

-align-items-

  • flex-start : 교차축의 시작점에 맞춰 배치
  • flex-end :교가축의 끝점에 맞춰 배치
  • center : 중앙에 맞줘춘다

 

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] animation  (0) 2023.11.08
[CSS] transform  (0) 2023.11.08
[CSS] position  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08

-animation-

CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할  수 있다.

 

기본형 {@keyframes <이름>{<선택자> <스타일>}}

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] display:flex  (0) 2023.11.08
[CSS] transform  (0) 2023.11.08
[CSS] position  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08

-transform-

CSS에서 변형을 적용할려면 transform속성과 함수 이름을 함께 작성해야 한다.

  • translate : 지정한 만큼 이동시킨다
  • scale : 지정한 만큼 확대 축소시킨다
  • rotate : 지정한 만큼 회원시킨다.

-transition-

스타일이 바뀌는 시간을 조절하여 자바스크립트를 사용하지 않고도 애니메이션 효과를 낼 수 있다.

 

트랜지션의 속도 곡선을 지정하는속성

  • ease : 처음에는 천천히 시작하고 빨라지다가 마지막엔 천천히 끝낸다
  • linear : 일정한 속도
  • ease-in-out : 느리게 시작하고 느리게 끝난다.

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] display:flex  (0) 2023.11.08
[CSS] animation  (0) 2023.11.08
[CSS] position  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08

-position-

먼저 알아 두어야 할 속성이 있다. 원하는 곳에 갖다 놓으려면  위치를 지정할 수 있어야 하는데

이때 사용하는 속성이 left, right, top, bottom이다.

 

position의 배치 방법을 지정하는 속성 4가지

  • static : 기본값.
  • relative : 현재위치를 기반으로 위치를 조정할 수 있다.
  • absolute : 부모의 position을 기준으로 위치 시킨다.
  • fixed : 브라우저 창을 기준으로 위치를 지정한다.

 

-relative-

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

-absolute-

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

 

-fixed-

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] animation  (0) 2023.11.08
[CSS] transform  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08
[CSS] text-align, text-decoration, text-shadow  (0) 2023.11.08

 

-margin-

마진은 요소 주변의 여백을 의미한다.

따라서 마진을 이용하면 요소와 요소 사이의 간격을 조절 할 수 있다.

 

-padding-

패딩은 콘텐츠 영역과 테두리 사이의 여백을 말한다.

 

 

 

 

 

margin/padding 기본형 {상 | 우 | 하 | 좌}

 

 

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] transform  (0) 2023.11.08
[CSS] position  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08
[CSS] text-align, text-decoration, text-shadow  (0) 2023.11.08
[CSS] font-family, font-size, font-weight  (0) 2023.11.08

 

-블록요소-

태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것

차지하는 것은 해당 요소의 너비가 100%라는 뜻이다.

대표적으로 div,h 태그들이 있다

 

-인라인요소-

콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.

대표적으로 span 태그가 있다

 

 

 

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] position  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] text-align, text-decoration, text-shadow  (0) 2023.11.08
[CSS] font-family, font-size, font-weight  (0) 2023.11.08
[CSS] CSS의 기본  (0) 2023.11.08

-text-align-

문단의 텍스트 정렬 방법을 지정한다.

한글 문서에서 흔히 사용하는 왼쪽, 오른쪽, 양쪽, 가운데 정렬을 사용한다

기본형 {start | end | left | right | center}

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

 

-text-decoration-

텍스트에 밑줄을 긋거나 취소선을 표시한다

  • none : 아무 표시를 주지않는다
  • underline : 밑줄 표시
  • overline : 윗줄 표시

 

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

 

-text-shadow -

CSS를 사용하여 텍스트에 그림자 효과를 줄 수 있다.

기본형 {가로거리 | 세로거리 | 번짐정도 | 색상}

 

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] position  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08
[CSS] font-family, font-size, font-weight  (0) 2023.11.08
[CSS] CSS의 기본  (0) 2023.11.08

-font-family- 

웹 문서에서 사용할 글꼴은 이 속성으로 지정한다.

<body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다.

보통 구글 폰트에서 가져와서 사용한다.

 

기본형 {글꼴이름 | 글꼴이름, 글꼴이름}

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

 

-font-size-

글자 크기는 이 속성을 사용하여 조절할 수 있다.

글자 크기의 단위는 px이나 pt등으로 지정할 수 있고 백분율을 사용할 수도 있다.

 

기본형 {절대크기 | 상대 크기 | 크기 | 백분율}

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

 

 

-font-weight-

글자 굵기를 지정하는 것은 이 속성을 사용하여 할 수 있다.

미리 만들어진 예약어나 숫자값을 통해 지정한다

 

 

기본형 {normal | bold | bolder | lighter | 100 | 200}

 

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

'WEB > CSS' 카테고리의 다른 글

[CSS] position  (0) 2023.11.08
[CSS] margin/padding  (0) 2023.11.08
[CSS] block, inline  (0) 2023.11.08
[CSS] text-align, text-decoration, text-shadow  (0) 2023.11.08
[CSS] CSS의 기본  (0) 2023.11.08

+ Recent posts

티스토리툴바