CSS

웹 페이지의 레이아웃을 지정하는데 사용하는 언어HTML에서 작성한 문서 페이지에 디자인을 입혀줄 때 사용합니다.구체적으로 문자 색상 변경, 링크를 버튼으로 보이게 하는 디자인 구성등 다양한 기능 보유HTML 만으로 웹 페이지를 제작할 경우 HTML의 요소를 하나하나 정

선택자 { 속성 : 속성 값 }CSS의 문법은 선택자와 선언부로 구성 된다.　선택자는 CSS를 적용하고자 하는 HTML의 요소를 가리킨다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, {} 중괄호를 이용해서 선언부 전체를 둘러쌉니다.

CSS를 HTML문서에 적용할 때 사용하는 3가지 방법이 있습니다.인라인 스타일이란, HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을적용시키는 방법, 태그 안에 사용하는 방법HTML 문서 내부에서 적용하는 스타일 시트HEAD 태그 안에서 사용되며, 이러

1. CSS 색 표현 방식 > * CSS에서 색상을 표현할 때 총 3가지의 방식을 사용 합니다 색상 이름으로 표현 RGB 색상 값으로 표현 16진수 색상 값으로 표현 1.1 색상 이름으로 표현 하는 방식 > * W3C에서 정의한 HTML4의 표준 색상 이름은 16가

웹 페이지의 배경부분에 효과를 줄 수 있는 background 속성에 대해서 알아보겠습니다. HTML 요소에 배경 색상을 지정해줄 때 사용 합니다. background-color: 색상값;HTML요소에 배경 이미지를 지정해줄 때 사용 합니다. background-img

텍스트를 정렬할 수 있는 태그텍스트의 굵기를 조정하는 태그모든 폰트의 크기를 조정 가능한 것은 아닙니다.폰트가 지원하지 않는 굵기 요소를 사용한다면, 최대한 비슷한 굵기를 대신 표신합니다.텍스트에 줄을 생성하는 태그색상을 넣을 수 있고, 줄의 모양도 변경할 수 있습니다

선택자 뒤에 가상으로 이벤트를 설정하면, 이벤트마다 고유의 스타일을 설정할 수 있다.이를 가상(추상)클래스라고 합니다.특정 위치에 있는 컨텐츠를 선택해서 사용할 수 있어 코드를 간소화 시킬 수 있습니다.동적 가상(의사) 클래스상태 가상 클래스구조 가상 클래스기타 가상

특정 위치에 있는 요소를 선택할 수 있는 가상 클래스부모 요소가 있어야 정상적으로 작동 합니다. first-child모든 자식 요소 중에서 맨 앞에 위치하는 요소들을 모두 선택합니다.last-child모든 자식 요소 중에서 맨 뒤에 위치하는 요소들 모두 선택nth-c

가상 요소는 선택자에 추가하는 가상 요소로, 선택한 요소의 일부분에만 CSS를 적용할 수 있습니다.🔔 두 개의 세미콜론 :: 가상 클래스와는 다르게 가상 요소는 세미콜론을 2개 사용해야 적용 됩니다.(일부 브라우저는 제외, 크롬에선 1개를 사용해도 동작함)요소 중에서

동일한 요소에 여러 개의 css를 적용한 경우, 계단식으로 스타일이 정의됩니다.예컨대 h1 요소를 빨강색으로 css를 적용하고 그 하단에 h1 요소를 노란색으로정의한 경우, 노란색으로 덮어 씌워지게 됩니다.또한, 여러 개의 스타일 시트에 h1 요소의 색상을 정의한 경우

스타일 시트나 head 태그가 아닌, 요소 내부에서 css를 정의하는 방법을 말합니다.어떤 식별자 보다 명시적이므로 우선순위가 가장 높지만 함부로 사용하면 혼란을 발생할 수있으므로, 지양하는게 좋습니다.대부분 css는 외부 스타일 시트에서 작성하므로, html 문서 내

부모 요소로부터 값을 상속받아오는 것을 의미 합니다.기본적으로 상속받을 수 있는 요소와 그렇지 않은 요소도 존재 합니다.본문에 CSS 코드를 코드펜에 붙여넣어서 상속 변화를 확인 해보세요.!codepenstudydong/embed/RwYbgmv?default-tab=h

모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스모델 이라고 부릅니다.박스 모델은 HTML 요소를 패딩 테두리 마진 그리고 내용(content)로 구분 합니다.HTML에서 요소들을 포함하는 공간, 텍스트나 이미지등 실질적인 내용이 들어 있습니다.콘텐츠와 테두리(

내용(content)와 테두리(border)사이의 간격, 공간의 크기를 말합니다.배경색의 영향을 받습니다.패딩은 축약해서 값을 정할 수 있습니다.

내용(content)와 패딩(padding)을 감싸는 영역선으로 표시하며 선에 여러 종류가 있습니다. border-style: 값;보더속성도 패딩속성과 동일하게 축약해서 태그를 사용할 수 있습니다.border: 3px solid red;보더의 전체 크기는 3px, 선타

내용(content), 패딩(padding), 보더(border)를 모두 감싸는 영역태두리간의 간격 또한 마진의 구역입니다.마진에 음수값을 정의하면, 요소들 끼리 겹치게 할 수도 있습니다.

HTML요소의 가장 바깥 부분을 둘러싸고 있는 영역.HTML의 요소의 크기는 아웃라인의 크기에 영향을 전혀 받지 않습니다. outline-style: 속성 값;요소를 조금 더 부각되어 보이게 설정할 때 사용 합니다. 주로 레이아웃을 완성한 이후에 문제점을 보기 위해서

웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성HTML에서 요소가 어떻게 보이는 지 나타낼 떄 사용 합니다.대부분의 HTML요소는 디스플레이 속성의 기본값으로 2가지를 사용 합니다.블록(Block)과 인라인(Inline)디스플레이 값이 block인 요소들은 항상

절대값과는 다르게 상대적인 단위로, 부모 요소의 크기에 비례해서 측정된다.50%로 설정한 경우, 부모 요소 크기의 50%로 적용 됨%는 부모 요소의 크기에 비례해서 설정되는 뿐만 아니라, 요소 자체의 크기에 따라 상대적으로변하기도 합니다. 200%가 정확한지 확인 해보

rgb 색상을 정하는 요소에 a 라는 알파 값을 적용하여 투명도를 조절할 수 있다.투명도 값은 0~255 사이가 아닌, 0~1 사이 입니다.rgba는 배경 요소에만 적용이 가능하고, 글꼴에는 적용할 수 없다.rgba와는 다르게 특정 요소에 지정해서, 해당 요소나 요소의

position 요소는 문서 내에 요소의 위치를 선택하는 요소입니다.

한 특성 값에서 다른 값으로 변화할 때 전환으로 에니메이션 효과를 주는요소입니다.현재 특성에서 다른 특성으로 전환될 때, Transition 요소가 적용되지 않았다면지체 없이 바로 전환이 되기에 부드럽지 못합니다.다른 특성으로 전환되면서 발생하는 효과나 지연시간등을 개

요소를 회전 시키고, 왜곡하고 확대 축소 늘리기 등 요소에 대한 여러가지 변형이가능한 태그 입니다.

요소에 그림자 효과를 줄 수 있는 태그입니다.요소에서의 그림자 위치, 선명도, 확산범위, 색상등을 정의할 수 있습니다.!codepenstudydong/embed/eYLmLaG?default-tab=html%2Cresult

!codepenstudydong/embed/yLxyRLX?default-tab=html%2Cresult

레이아웃 배치 전용 기능으로 만들어진 기능float나 Inline-box등을 이용한 기존 방식보다 강력하고 편리한 레이아웃 배치 기능FLEX를 지원하지 않는 인터넷 브라우저 환경도 있기 때문에, Can I Use 사이트를 통해서작업해야할 브라우저가 FLEX 기능을 지원

1. Flex 정렬 방법 >* flex는 정렬 방법 중에 2가지가 있습니다. 메인축을 방향으로 정렬하는 justify와 수직축을 방향으로 정렬하는 align 1.1 메인 축 방향 정렬 (justify-content) flex-start; 아이템들을 시작점으로 정렬

메인축이 수평인 경우, 새로운 행을 만들어서 요소를 정렬하고, 메인축이 수직인 경우에는새로운 열을 만들어서 요소를 정렬한다.아이템이 컨테이너 크기보다 큰 경우, 크기를 유지한 채 새로운 행이나 열을 만들어서정렬됩니다.

메인축이 아닌 교차축을 통해서 컨테이너안의 아이템을 배치합니다.

1. Flex(align-content) 행이나 열이 여러 개 이상일 때 교차축을 기준으로 아이템을 정렬한다.

아이템 요소가 컨테이너에 배치되기 전에, 최초 크기를 설정 합니다.메인축이 기준이 되기에 메인축 방향에 따라서 너비/높이로 결정 됩니다.단위는 %, px 등이 있고, 기본 값은 auto 입니다.공간이 있을 때, 아이템 요소가 해당 공간을 얼마나 차지할 지 결정하는 속성

기본적으로 html이 지원하는 글꼴 이외에도 사용자가 원하는 폰트를 웹사이트에서 다운받아서문서 파일에 적용해서 사용할 수 있습니다.유료로 구매해서 사용해야하는 폰트도 있지만, 무료 폰트중에 다양한 글꼴을 지원하는구글폰트사이트도 이용할 수 있습니다.구글 폰트 사이트에서

flex에서 아이템을 배치할 때 배치 순서를 정하는 속성

입력요소에서 주로 사용되는 가상 클래스checkedinput 요소 중에서 체크된 상태의 input 요소에 효과를 줍니다.enabledinput 요소 중에서 사용할 수 있는 input 요소에 효과를 줍니다.disabledinput 요소 중에서 사용할 수 없는 input

미디어쿼리를 이용해서 반응형 웹 사이트를 제작할 수 있습니다.웹 사이트의 크기마다 레이아웃 요소들의 배치를 다르게 한다거나, 사이트를 탐색하는기기마다 다른 크기의 웹 사이트를 보여주는 등, 사용자의 기기화면에 알맞은 레이아웃을보여줄 수 있습니다.

CSS 리셋 사이트