console.log("CAPABLE");

Persudo Elements(가상 요소) Pseudo element는 본질적으로 html에 존재하지 않는 요소이다. 그러나 CSS에서 여전히 선택하고 스타일을 지정할 수 있다. 의사 요소는 두 개의 콜론(::)을 사용하여 작성하면 된다. ➡️ 가상 요소도 모디파이어나 선택자처럼 덧붙일 수 있는 요소 그러나 선택된 요소의 특정 부분만 선택한다. (어떤 요소의 첫 줄의 첫 글자에만 스타일을 넣을 수 있다. = 모든 단락이나 모든 스팬의 첫 글자에 선택할 수 있다.) 모디파이어? fist line 이나 first letter을 쓸때는 세미콜론 두개를 붙여야 하는가? ::first-letter? 페이지 내에 있는 모든의 첫 글자 h2::first-letter { font-size: 50px; } ::first..

Pseudo Classes (가상 클래스) ➡️ 선택자 끝에 붙여 상태를 특정하는 키워드 이것을 통해 체크된 체크박스나 커서를 올려둔 요소 등을 선택한다. 모디파이어 혹은 키워드는 :로 시작한다. 가상 클래스를 사용한다는 걸 알려면 :를 입력해야한다. 하이퍼링크 스타일링 /* Styling links */ a { color: #3a86ff; } 단순히 앵커 태그를 지정해서 하면 안된다. 대신에 앵커의 가상 클래스를 지정해서 하면 된다. 그래야 다른 상태를 타겟팅할 수 있기 때문이다. 스타일을 지정하려면 3가지 방법 link pseudo class (링크 가상 클래스) a:link { color: #3a86ff; } 기본적으로 모든 앵커 요소를 대상으로 한다. href 속성을 가지고 있다. 실제로 앵커를 ..

CSS의 기본 규칙 selector { property: value; } ➡️선택자 뒤에 중괄호({})가 오고 설정하려는 특성이 나온다. 선택자의 종류는 많다. Universal Selector (전체 선택자) * { color: black; } ➡️페이지에 있는 선택 가능한 모든 요소들을 선택 가능하다. 스타일을 적용할 텍스타가 없는 요소들도 선택한다. Element Selector (요소 선택자) ➡️지정된 타입의 모든 항목을 선택한다. button { font-size: 40px; } Selector List ➡️쉼표를 사용해 목록에 있는 선택자 여러 개를 합치는 방법이다. h1, h2 { color: magenta; } id와 class를 사용하기 전, footer p { font-size: 16..

일반 텍스트 속성 text-align (텍스트 정렬) 가로 정렬을 설정하려면 text-align을 사용해야 한다. ➡️요소가 표시되는 위치를 정렬하는 게 아니라 요소 내적인 정렬을 의미한다. left(좌측 정렬) , center(가운데 정렬), right(우측 정렬) h1 { text-align: center; } font-weight (폰트 굵기) ➡️선택한 텍스트에서 주어진 부분의 굵기를 조정하는 것 font-weight: normal; font-weight: bold; font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 900; 일반적으로 가장 흔한 굵기는 400;이다. text-decoration (텍스트 데코레이션)..

CSS 특성 h1 { color: purple; } 모든 을 선택하여 색상을 보라색으로 설정할 수 있다. color 속성은 배경색이 아니라 텍스트 색상을 바꿀 수 있다. background-color ➡선택한 요소들의 배경 색을 바꿔준다. CSS에서 ;(세미콜론)이 중요한 이유 CSS에서 명령을 내리거나 브라우저가 인식을 하기 위해서 ;(세미콜론)이 중요하다. ➡ ;(세미콜론)은 특성 선언을 마치고 다음 특성으로 넘어간다는 뜻이다.

CSS란? CSS(Cascading Style Sheets)는 스타일을 정하고 시각적으로 보이는 형태를 만든다. 프로그램 언어는 아니지만 문서를 시각적으로 표현하고 나태나기 위한 언어 즉 페이지에 입력된 HTML 콘텐츠를 시각적으로 표현한 것 CSS는 규칙이 중요하다. selector { property: value; } (특성, 콜론, 값, 세미콜론 순서이다.) 선택자가 있고 선택자 옆에는 중괄호가 있다. ➡ 선택자를 입력하고 특성을 설정한다. ➡ 특성을 선택하면 스타일이 정해진다. CSS를 올바르게 작성하는 방법 1. Inline styles | HTML 요소에 직접 스타일을 작성하는 것 ➡ 좋은 방법 X Hello World