Css가 생겨난 이유

웹이 처음 나왔을 당시만해도 언어는 html이란 언어 하나였다. html이란 언어를 이용하면 전자문서를 만들 수 있었고 그 당시에는 html이란 언어로 정보를 컴퓨터로 표현하고 인터넷을 통해 정보를 전세계 누구에게나 공유할 수 있다는 것만해도 엄청난 이슈였고 화제였다 하지만 시간이 지남에 따라 다른 기능들을 더 추가하길 원했다.
처음에는 html자체에 색이나 크기 글꼴등을 지정해주는 디자인 태그를 따로 만들었지만 그렇게 하니 코드에 정보가 없는 디자인만을 정해주는 태그가 늘어나 html의 본래 목적인 정보를 전달한다는 의미가 퇴색되고 디자인 태그를 넣은 만큼 코드가 길어져 수정하기 어려운 현상이 발생했다.
이에따라 w3c는 html에서 디자인적 요소를 분리하는 방안을 생각했고 그렇게 해서 나온 언어가 css이다.

Css를 배우는 이유

html은 웹페이지에 기본 구조가 되는 것을 작성하는 언어인데 만약 html로 디자인까지 하게 된다면 웹페이지가 구현은 되겠지만 반복되는 코드가 많아코드의 가독성이 떨어질 것이고 만약 바꿔야하는 코드가 많아진다면 그것을 일일히 다 수정하는 작업이 굉장히 번거로워 질것이다.
옛날처럼 단순히 정보의 전달만을 목적으로 한다면 굳이 디자인을 할 필요가 없겠지만 요즘세상에서 웹페이지의 디자인은 필수적인 요소이기 때문에 html과 더불어 css의 공부는 기본이라 생각한다.

Css의 기본 구조

선택자(selector)

선택자란 Html문서에서 css로 적용할 태그를 가르킨다. 선택자를 정하
여 어떤 부분에 디자인을 할지 정한다.

속성(property)

속성은 선택자가 지정한 태그에 무엇을 바꿀 것인지를 결정한다. 속성은 선택자 뒤에 적는 중가로({})안에 작성.

값(value)

값은 속성으로 지정한 효과를 얼마나 바뀌게 할지를 결정한다.
값은 지정한 속성에 따라 작성할 수 있는 내용이 다르므로 주의해야 한다. 값을 지정하고 마지막은 세미콜론(;)으로 끝맺는다.

예시

 h1{
  color: red;
 }

이 예시에서 H1이 선택자 Color가 속성 red가 값이 된다.

가상 클래스 선택자(Pseudo class selector)

선택자라는 건 태그나 id class처럼 html 문서에 존재하는 것들을 지정하는 것인데 가상 클래스 선택자는 어떠한 상태를 지정한다. 즉 html문서에는 없는 클래스 이기 때문에 가상 선택자라고 한다.

• :hover : 마우스 커서를 가져다 덴 상태
• :ink - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :active - 마우스를 클릭했을 때
• :first - 첫번째 요소
• :nth-child(n) - n번째 요소

예시

(1)  a:hover{          (2) li:nth-child(2){
       color: red;            color: blue;
       }                       }

(1)번 예시처럼 a태그에 hover가상 클래스 선택자를 쓰면 html은 모든 a태그에 대해 마우스 커서를 가져다 덴다 라는 상태를 뜻하고 밑에 color 속성과 red라는 값으로 인해 마우스를 가져다 데면 빨간색으로 보일것이다.
(2)번 예시는 li라는 태그에 nth-child(2)라는 가상 클래스 선택자를 주면 li태그가 가지고 있는 요소들중 괄호 안에 있는 숫자의 요소를 선택하는 기능을 한다. 그래서 안에 color속성과 blue라는 값으로 인해 li태그의 2번째 요소만 파란색으로 바뀔 것이다.
가상 클래스 선택자가 좋은 점은 특정 요소를 디자인하고 싶을 때 html에서 따로 수정하지 않고 css만으로 작성을 할 수 있도록 도와주고 html 문서에 불필요한 태그를 늘리지 않아 코드의 가독성이 좋아진다는 점이다.

Css를 배우면서 느낀점

코딩을 하면 html다음으로 무조건 배워야하는 언어가 css라 들었다 확실히 html로 디자인을 하려고 하면 코드가 길어지고 같은 태그여도 다 따로 속성을 줘야 원하는 디자인을 넣을 수 있어 코드가 길어지고 지저분해지는 느낌이었는데 css를 쓰고 나서는 같은 태그의 디자인을 넣기 편해지고 디자인 코드는 모두 css로 넘어가 전보다 코드가 간편해져 가독성이 좋아졌다.
css에는 다양한 속성들이 많이 쓰이는데 그중 가장 주의깊게 봤던 속성은 grid속성과 flex속성이다. 둘다 레이아웃을 나눈다는 공통된 특징이 있다. grid는 여러 컨텐츠들을 배열하는데 용이하고 flex속성은 컨텐츠를 한줄로 나열하는 게 용이하다고 배웠는데 아직까지 grid와 flex의 정확한 차이점이 불분명하다. 이 두가지는 많이 쓰이는 만큼 조금 더 세세한 공부가 필요할 거 같다.