[IT 이야기] CSS 어떻게 사용하는 지 궁금하다면?

안녕하세요! NPC 라미입니다.

앞서 HTML과 CSS가 어떤 역할을 하는지에 대해서 알아봤는데요.

그렇다면 이 CSS를 실제로 어떻게 사용하는지 궁금하지 않으세요?

CSS는 HTML과 함께 웹 페이지를 구성하는 필수 요소 중 하나로 웹 페이지의 기본으로 알고 계시는 게 좋습니다

 

일단 CSS는 웹페이지의 인테리어를 담당한다고 이야기드렸는데요.

그렇다면 이 HTML과 CSS는 서로 어떻게 연결을 하는 걸까요?

replit 홈페이지를 통해서 알아보도록 하겠습니다.

로그인을 하시고 create 버튼을 누르면 아래와 같은 화면이 생성됩니다. 

 여기에서 우리가 사용할 언어는 HTML, CSS, JS(자바 스크립트)이기 때문에 해당 템플릿을 선택해주고 Create Repl 버튼을 눌러주시면 됩니다. 만약 다른 언어로 개발을 진행하고 계신다면 다양한 언어를 지원하기 때문에 원하는 언어를 선택해서 사용하면 됩니다. 

HTML과 CSS를 선택해서 만들면 위와 같은 화면이 만들어집니다.

여기에서 html의 head부분을 보면  <link href="style.css" rel="stylesheet" type="text/css" />와 같은 코드가 보일 텐데요. 이 부분은 바꾸지 않는 게 좋습니다. 바로 이 링크를 통해서 html과 css가 연결이 되는데, 하이퍼링크 이름을 바꾸면 서로 연결이 되지 않으니 각별히 주의해주세요. 

 

그러면 이렇게 두 문서가 서로 연결은 됐는데, 도대체 이 CSS를 HTML에 어떻게 적용할지 아직은 모르시겠죠!

CSS 선택자는 총 3개로 이 선택자를 이용해서 HTML과 CSS를 연결할 수 있습니다.

첫 번째 방법은 태그에 직접 적용하는 방법입니다. 이 방법은 광범위한 부분에 변화를 줄 때 주로 사용합니다. 통일감을 위해서 사용하는 경우가 많습니다. 그리고 이 방법은 태그에 직접 스타일을 주는 방법이기 때문에 html 상에 별도로 입력해야 하는 것이 없어 이 방법을 사용하면 확실히 HTML 태그가 깔끔해집니다. 

이 예시로 설명을 하자면 css창에 위 사진과 같이 입력을 하면 html에 있는 a태그에 있는 글자들은 모두 하얀색으로 표시가 됩니다. 그래서 웹페이지에 전체적인 통일감을 위해 메뉴 등은 같은 색깔을 사용하는 경우가 많으니까 태그에 직접적으로 주는 것도 하나의 방법이겠죠?

두 번째 방법으로는 id를 이용하는 방법입니다. 이 방법은 자주 이용되는 방법은 아니라서 간단하게만 설명하겠습니다. id를 이용하면 css창에 #을 이용해서 id를 생성합니다. 이 방법이 자주 사용되지 않는 이유는 id를 이용하는 태그는 html내에서 1개만 유효하기 때문입니다. 

마지막 방법으로는 class를 이용하는 방법입니다. 이 방법이 가장 보편적으로 쓰이는 방법입니다. class 선택자는 아래의 그림과 같은 형태를 가지게 됩니다.

위에 태그에 직접 사용하는 방법과 별 차이가 없어 보이기도 할 텐데요. 자세히 보시면 main 앞에. 을 주는 것이 이 class 선택자의 특징입니다. 이 클래스가 적용되는 태그에 있는 사항들이 하얀색으로 표현되게 됩니다. 그리고 이건 태그에 직접 스타일을 주는 것이 아니라서 html에서도 별도로 지정을 해줘야 합니다. 

html에서는 이와 같은 방식으로 지정하게 됩니다. 이러면 이 태그에는 main이라는 클래스가 적용되고 main이라는 css가 가지고 있는 하얀색이라는 특징이 적용되겠죠? 그러면 여기까지 하시다 보면 또 하나의 의문이 들게 되는데요. 하나의 태그에 여러 개의 클래스를 적용할 수도 있는지 궁금하실 텐데요. 정답은 가능합니다. 

이렇게 적용을 해주면 div라는 태그에는 main, main-container, main-style이라는 class가 적용이 됩니다. 물론 하나의 class에 여러 사항들이 적용되기 때문에 엄청나게 많은 클래스를 사용하는 경우는 이제 막 배우는 단계라면 많지 않습니다. 

 

선택자 설명은 여기서 끝이지만 여기서 또 하나 궁금증이 있는 분들이 있을 수 있습니다. 아까 태그에 직접적으로 스타일을 적용할 수 있다고 했는데 태그 아래 특정 클래스에만 스타일을 주고 싶은 경우가 있습니다. 그 경우에는 어떻게 사용해야 할까요? 

바로 이렇게 표시를 해줍니다. 이 표시를 하면 p태그 아래 있는 style에 경계선을 주라는 의미가 됩니다. 여기서 주의하셔야 할 부분은 만약 p. style로 입력을 하시면 p태그 아래 있는 모든 자손 태그들 중 style이라는 클래스를 가진 것에 적용이 되기 때문에 띄어쓰기가 정말 중요합니다. 그리고 p> .style로 입력하시면 p의 직접적인 자식에게만 적용됩니다. 비슷하게 생긴 것 같아도 역할들이 조금씩 다르죠? 

 

오늘은 정말 기본적인 html과 css를 어떻게 연결하고, 어떻게 적용하는지에 대해서 알아봤습니다. 이제 웹 페이지 만드는 거에 한 발짝 더 다가선 기분이 들 텐데요! 앞으로도 힘내서 예쁜 나만의 웹페이지를 만들어봐요! 

오늘도 감사합니다:)