웹 디자인을 위한 CSS

표준 웹사이트 제작을 위한 스타일시트를 학습합니다. CSS는 HTML문서를 보기 좋게 꾸며주는 역할을 수행합니다. 따라서 요즘에는 HTML과 CSS를 한세트로 같이 학습을 해야 합니다.

01. 스타일시트 기초

스타일 시트는 html 요소의 style 속성값을 변경하여 요소를 디자인하는 기능입니다.

스타일시트를 잘 적용하기 위해서는 스타일의 종류와 그 사타일이 가리키는 정확한 의미를 파악하여 사용하는 것이 중요합니다.

  • 작성규칙 : CSS 코드를 작성하는 규칙에 대해서 알아 봅니다.
  • 스타일 삽입 : 작성한 스타일을 html에 삽입하는 방법에 대해서 알아 봅니다.
  • 스타일시트 우선순위

02. 선택자

CSS는 HTML의 요소를 꾸며주는 역할을 수행합니다. 요소를 꾸며주기 위해서는 먼저 요소를 선택해 주어야 합니다. CSS는 요소를 선택할 수 있는 다양한 방법들을 제공합니다.

CSS 선택자는 JQuery를 통하여 요소를 선택할때도 사용됩니다. https://www.w3.org/TR/CSS/

02-1.속성 선택자

특정 속성을 가진 HTML 태그를 선택할수 있습니다. 속성 선택자는 기본 속성 선택자와 문자열 속성 선택자로 구분됩니다.

기본 속성 선택지는 많이 시용하지만 문자열 속성 선택자는 특별한 경우에만 사용합니다.

02-2.가상 선택자

구조나 부정 선택자 처럼 :기호를 사용하는 선택자를 가상 클래스 선택자라도 합니다.

구조 선택자는 CSS3부터 지원하는 선택자입니다.

02-3.가상 요소 선택자

:: 기호를 사용하는 선택자를 가상 요소 선택자라고 합니다.

02-4.속성 및 값의 종류

CSS는 UI를 꾸미기 위하여 다양한 속성값들이 존재 합니다.

02-5.초기화

각각의 브라우저는 자체적으로 HTML 문서를 출력하기 위한 기본 CSS들이 존재합니다. 동일한 HTML을 여러 종류의 브라우저로 확인해 보면 서로 다른 결과물로 출력됩니다. 이러한 부분을 제거하고자 기본적인 브라우저의 CSS값을 초기화 하여 재설정 합니다.

02-6.브라우저 적용

CSS의 공급업체 접두사는 초기 사용 및 피드백을 허용하기 위해 실험적인 CSS 기능에 추가된 브라우저별 접두사입니다.

03. 텍스트 스타일

CSS로 텍스트를 장식하면 디자인 유연성, 가독성, 접근성 및 콘텐츠의 SEO 최적화가 향상됩니다.

04. 색상 및 배경 스타일

CSS를 통해 색상과 배경을 설정하면 디자인의 유연성, 일관성 및 접근성이 향상될 뿐만 아니라 로드 시간이 빨라지고 콘텐츠에서 프레젠테이션이 분리됩니다.

05. 목록 및 테이블

ul에서 데이터를 출력하는 것과 HTML에서 테이블을 출력하는 것의 차이점은 ul이 정렬되지 않은 가변 길이 목록에 더 적합한 반면 table은 여러 열과 행이 있는 정렬되고 구조화된 데이터에 더 적합하다는 것입니다.

06. 이미지 및 미디어

CSS를 이용하여 이미지 출력을 관리 하는 방법에 대해서 학습합니다.

07. 레이아웃 스타일

웹 사이트에서 CSS를 통해 레이아웃을 디자인한다는 것은 HTML 요소의 위치, 크기 및 간격을 정의하여 콘텐츠에 대해 체계적이고 시각적으로 매력적인 구조를 만드는 것을 의미합니다.
사이트 레이아웃을 구현할 수 있는 다양한 기술에 대해서 알아 보도록 합니다.

08. 플렉스와 그리드 레이아웃

CSS의 flex 및 grid와 같은 레이아웃은 추가 마크업이나 복잡한 계산 없이 더 나은 콘텐츠 배치와 반응형 디자인을 허용하기 때문에 기존 방법보다 더 효율적이고 유연합니다.

플랙스박스

Flexbox는 컨테이너의 요소 간에 공간을 정렬하고 분배하는 유연하고 효율적인 방법을 제공하는 CSS의 레이아웃 모듈입니다.

그리드

CSS 그리드 레이아웃은 flexbox보다 더 복잡한 레이아웃과 콘텐츠 배치를 허용하는 강력한 2차원 그리드 시스템으로, 웹 페이지에 고도로 사용자 정의 가능한 디자인을 제공합니다.

09. 변형 및 에니메이션 스타일

요소를 옮기거나 크기를 조절하고 회전시키는 등 변형 작업

  • 변형
    CSS에서 변환은 2D 또는 3D 공간에서 요소를 회전, 크기 조정, 기울이기 또는 변환할 수 있는 일련의 CSS 속성을 나타냅니다.

  • 트랜지션
    CSS에서 전환은 요소의 서로 다른 스타일 간에 부드럽고 점진적인 애니메이션을 만들 수 있게 해주는 속성입니다.

  • 에니메이션
    CSS에서 애니메이션은 애니메이션의 키프레임과 기간, 타이밍 및 반복을 정의하여 보다 복잡하고 동적인 애니메이션을 만들 수 있게 해주는 속성을 말합니다.

10. 반응형 웹

반응형 웹사이트는 레이아웃과 콘텐츠를 다양한 화면 크기와 장치에 맞게 조정하도록 설계된 웹사이트입니다.

11. CSS 라이브러리 및 프레임워크

CSS 프레임워크란 무엇인지에 대해서 간략히 알아 보도록 합니다. 부트스트랩과 같은 CSS 프레임워크는 반응형 웹 인터페이스 구축 프로세스를 단순화하는 미리 디자인된 CSS 및 JavaScript 구성 요소 모음입니다.

12.SASS/LESS

SASS 및 LESS는 변수, 믹스인, 함수 및 기타 기능을 제공하여 CSS의 기능을 확장하는 전처리기 스크립팅 언어입니다.

13. 부트스트랩

Bootstrap CSS는 반응형 웹 디자인을 위해 미리 디자인된 CSS 및 JavaScript 구성 요소를 제공하는 널리 사용되는 프런트 엔드 프레임워크입니다.

14. 테일윈드

Tailwind CSS는 사용자 지정 사용자 인터페이스를 신속하게 구축하기 위해 미리 정의된 클래스를 제공하는 유틸리티 우선 CSS 프레임워크입니다.