Codesigner

이 글에서는 CSS 기본 문법 및 구조에 대해서 살펴보도록 하자. CSS Structure HTML 요소를 CSS로 스타일 하기 위해선, CSS Selector로 요소를 지정해야 한다고 이전 글에서 배웠다. h1 { color: blue; } 결과: 파란글씨 curly brace( { } )로 감싸진 부분을 Selector의 body라고 하자. 위의 코드는 태그의 body에 color 속성을 blue로 설정해 주었다. "color: blue" 라인을 CSS declation이라고 하는데, CSS declation은 하나의 property와 그에 해당하는 value를 가진다. Property - 선택한 요소에 대해 스타일링하고자 하는 속성(i.e., size, color, etc.) Value - 해당 속..

CSS를 작성할 때 동시에 여러 CSS Selector를 적용하는 것이 가능하다. 이는 단순히 여러 Selector를 연달아 쓰는 것인데, 예를 들어 special 이란 클래스를 가진 태그를 다음과 같이 선택할 수 있다. h1.special { } 위 코드는 태그들 중에서 special 이란 클래스를 가진 요소를 선택해낸다. 만약 special 클래스를 가진 태그가 존재한다 해도 영향을 받지 않는다. Nested Elements 여러 Selector를 chaining 하기 위해 CSS는 nested(중첩된) 요소를 선택하는 것을 도와준다. 예를들어, 다음과 같은 HTML이 있다고 하자. 먹고 자고 코딩하고 태그 안에 있는 태그들을 선택하기 위해서 다음과 같이 CSS를 작성할 수 있다. .main-list..

CSS는 HTML요소를 태그 이름으로 선택할 수 있다. parapraph 요소 태그를 선택하는 CSS 문법은 다음과 같다. p { } 위 코드는 모든 태그를 선택한다. 여기서 p는 CSS Selector가 된다. CSS Selector가 스타일을 적용할 HTML 태그의 이름과 매치된다. 선택된 요소를 스타일링하는 모든 코드들은 { }(curly brace) 사이에 들어간다. Class name CSS는 단지 태그 이름으로만 HTML 요소를 선택할 수 있는 건 아니다. HTML의 요소들은 여러 속성들을 가지는데, 가장 흔한 속성인 class도 selector가 될 수 있다. 다음 예시를 보자. North face 이 paragraph는 "brand"라는 클래스를 가진다. 이 클래스를 선택하는 selecto..

Cascading Style Sheets의 약자인 CSS는 HTML을 스타일링하기 위한 language이다. 만약 이 글을 보는 당신이 색칠놀이와 폰트, 글자 크기, 그림자, 그림, 레이아웃 등 시각적인 부분을 작업하는 걸 좋아한다면, CSS를 배우면서 재미있을 것이다. 이 글에서는 HTML에서 원하는 요소를 선택하여 스타일링하는 방법과 CSS 파일 구조를 셋업 하는 방법을 간략히 소개하도록 하겠다. Inline Styles CSS는 HTML 코드 상에서 직접 쓰일 수 있다. 이를 inline style 이라고 한다. HTML을 스타일링하기 위해서, style 속성을 특정 요소의 opening tag에 추가해 줘야 한다. 그런 다음 그 요소에 원하는 CSS 스타일링을 시도해 볼 수 있다. 이 글자는 빨간..