05 혁명적 변화 ~ 06 CSS 속성을 스스로 알아내기

04장에서, 웹 페이지에 CSS를 삽입하는 방법을 알아봤다.

 

1.

[ CSS 문법 ]

 

 

와 같이 있다면,

 

a는 선택자를 의미 한다.

(Selector)

>> 이 웹 페이지의 모든 a태그를 선택한다는 의미로 선택자라고 한다.

 

color : blue; 는 선언 했다. 라고 말할 수 있다. 또는 효과라고도 한다.

(번역의 차이.. 표현법의 차이. 중요하지 않음)

(Declaration)

>> 선택자가 지정한 태그에 대해 어떤 효과를 줄 것인가를 보여주는 부분을 선언 했다 라고 한다.

 

color는 속성이다.

(Property)

>> color 속성을 의미한다. 속성은 굉장히 다양 하게 존재 한다.

 

red는 값이다. 속성값이라고 할 수 있다. 

(Value)

>> 속성에 대한 값을 속성값 이라고 한다. == 프로퍼티의 값

 

2.

앞으로 웹 페이지를 디자인 하기 위해

어떠한 프로퍼티 == 속성

이 존재하는지를 확인 하자.

 

또한,

효과를 어떻게 더 정확하게 선택해서 지정하기 위해서

선택자를 어떻게 사용할것인지를 확인 하자.

 

다양한 선택자가 존재한다.

 

3.

 

 

이미지와 같은 상황일 때,

 

WEB을 가운데로 옮기고 싶다면 어떻게 해야 할까.. == 가운데 정렬

 

그러면 WEB이라는 텍스트가 이 웹 페이지에서 어떤 태그인지를 알아야 한다.

 

 

아하, h1 태그 내부에 있구나 를 알 수 있다.

 

그러면 <style> 태그 내부에서, h1 선택자를 통해서 꾸미면 되는 것을 생각할 수 있다.

 

근데, 여기서 가운데 정렬을 어떻게 해야하는지를 생각해 봐야 하는데,

 

앞에서 개념에 대해서 공부를 했기 때문에, 검색을 할 수 있게 되었다.

 

검색을 해보니, 정렬은 align 이였다.

 

text-align : center; 을 적으면 가운데 정렬을 할 수 있게 된다.

 

 

 

그러면 위의 이미지 처럼 WEB 이라는 텍스트를 가운데로 정렬할 수 있게 된다.

 

 

4.

검색을 잘 활용 하도록 하자.

원하는 속성이 있다 == 내가 어떤 속성을 사용할지 알기 때문에,

구글에 검색을 통해서 속성을 스스로 알아내면 된다.

 

검색어 예시)

 

css text size property

 

css text center property

 

..