웹 사이트를 꾸며주는 CSS에 대해 알아보자
2025. 1. 14. 13:00ㆍHTML_CSS
728x90
반응형
안녕하세요. 진득 코딩입니다.
지난 시간까지는 웹 사이트의 뼈대를 담당하는 HTML에 대해 알아보았습니다.
하지만 HTML로만 이루어진 웹 사이트는 UI/UX면에서 떨어지는 웹 사이트입니다.
이번 시간에는 밋밋한 웹 사이트를 꾸며주는 CSS에 대해 살펴보도록 하겠습니다.
스타일을 사용하는 이유
- 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킵니다.
- 이러한 작업을 HTML로 하지 않고 따로 스타일을 사용하는 이유는 두 가지 정도 있습니다.
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다.
- HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 웹 표준의 시작입니다.
- 이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리합니다.
- 또한 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나는 문서로 만들 수도 있습니다. - 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다.
- CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꿔 주면 같은 내용을 여러 기기에서 볼 수 있습니다.
- 반응형 웹 디장인이란 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말합니다.
- 하나의 웹 문서에서 작동하도록 만드는 것이 바로 스타일의 역할입니다.
스타일 형식
선택자 { 속성: 속성값1; 속성2: 속성값2; }
- 선택자는 스타일을 어느 태그에 적용할 것인지 알려주는 것이고, 중괄호{} 사이에는 스타일 정보를 넣습니다.
- 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 합니다.
- 또한 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있습니다.
- 주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데, 이때 한 줄 또는 여러 줄이 들어갈 수도 있습니다.
** CSS 소스 경량화
- CSS 소스에 주석을넣거나 줄 바꿈 하는 것은 웹 사이트 작성자가 알아보기 쉽도록 하는 것일 뿐 웹 브라우저에는 아무 의미가 없습니다.
- 그래서 CSS 소스가 길면 빌드할 때 주석이나 줄 바꿈, 공백 등을 제거하고 꼭 필요한 정보만 남겨서 파일을 작게 만들어 사용하는데, 이것을 CSS 소스 경량화(minify)라고 합니다.
- 'css minify' 또는 'css compress'를 검색하면 CSS 소스 파일의 크기를 줄여 주는 다양한 툴을 찾을 수 있습니다.
스타일 시트
스타일 시트란 스타일 슈칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 의미합니다.
- 브라우저 기본 스타일
- 브라우저 기본 스타일은 CSS를 사용하지 않은 웹 문서라도 웹 브라우저에 표시할 때 사용하는 기본 스타일입니다. - 인라인 스타일
- 인라인 스타일은 간단한 스타일 정보를 스타일을 적용할 대상에게 직접 표시하는 스타일입니다.
- 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해 style="속성: 속성값;" 형태로 스타일을 바꿀 수 있습니다. - 내부 스타일 시트
- 내부 스타일 시트는 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 스타일입니다.
- 스타일을 여러 곳에 저용할 때 사용합니다.
- 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 </style> 태그 사이에 작성합니다. - 외부 스타일 시트
- 사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 것이 일반적입니다.
- 외부 스타일 시트는 이렇게 따로 저장해 놓은 스타일 정보를 의미하고 *.css라는 파일 확장자를 사용합니다.
- 외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않습니다.
- 또한 이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용됩니다.
- 외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그입니다.
CSS 기본 선택자 살펴보기
- 스타일 규칙은 태그뿐만 아니라 어떤 요소에도 적용할 수 있습니다.
- 선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것입니다.
전체 선택자
- 전체 선택자(universal selector)는 스파일을 문서의 모든 요소에 적용할 때 사용합니다.
- 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용하고, *(별표)를 사용합니다.
- 전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다.
* { 속성: 값; ..... }
타입 선택자
- 타입 선택자(type selector)는 특정 태그를 사용한 모든 요소에 스타일을 적용합니다.
- 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용됩니다.
태그명 { 스타일 규칙 }
클래스 선택자
- 클래스 선택자(class selector)는 특정 부분만 선택해서 스타일을 적용할 때 사용합니다.
- 클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 합니다.
- 클래스 이름은 나중에 기억하기 쉽게 임의로 지정하면 됩니다.
.클래스명 { 스타일 규칙 }
- 클래스 스타일은 클래스 선택자를 사용해 만든 스타일을 의미합니다.
- 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스 명"처럼 class 속성을 사용해서 지정합니다.
- 클래스 스타일은 여러 곳에 적용할 수 있습니다.
- 또한 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있습니다.
- 클래스 스타일을 2개 이상 적용할 때는 공백으로 구분해서 스타일 이름을 적으면 됩니다.
id 선택자
- id 선택자(id selector)는 # 기호를 사용하여 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용합니다.
- id 스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용합니다.
#아이디명 { 스타일 규칙}
- 클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것입니다.
- 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용합니다.
그룹 선택자
- 그룹 선택자는 같은 스타일 규칙을 사용하는 요소들을 묶어주는 선택자입니다.
- 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 됩니다.
선택자1, 선택자2 { 스타일 규칙 }
캐스케이딩
- CSS에서 'C'는 캐스케이딩(cascading)의 줄임말로 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용합니다.
- 다시 말해 CSS는 우선순위가 있는 스타일시트라고 할 수 있습니다.
- 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정합니다.
- 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념입니다.
- 스타일 시트에서 캐스케이딩은 가장 기본적인 개념이므로 일반적으로 스타일 시트는 캐스케이딩 스타일 시트(CSS)와 같은 의미로 사용합니다.
** 스타일이 충돌하지 않게 하는 방법
- 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용합니다.
- 스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.
스타일 우선순위
- 스타일 우선순위는 캐스케이딩에서 가장 중요합니다.
- 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 의미합니다.
1. 얼마나 중요한가?
- 웹 브라우저에 내용을 표시할 때에는 컴퓨터 사용자(user)가 지정한 스타일과 웹 문서를 제작한 제작자(author)의 스타일, 그리고 웹 브라우저(browser)가 기본으로 정해 놓은 스타일 이렇게 3가지 스타일을 함께 사용합니다.
- 사용자 스타일이 가장 중요하고, 이어서 제작자 스타일, 브라우저 기본 스타일 순으로 중요합니다.
2. 적용 범위는 어디까지인가?
- 스타일 적용 범위에 따라 우선순위를 정할 수 있습니다.
- 스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아집니다.
- 단, 스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아집니다.
1. !important: 어떤 스타일보다 우선 적용하는 스타일입니다.
2. 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용합니다.
3. id 스타일: 지정된 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용할 수 있습니다(선택자 이름 앞에 # 기호를 사용합니다).
4. 클래스 스타일: 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있습니다(선택자 이름 앞에 마침표(.) 기호를 사용합니다).
5. 타입 스타일: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용합니다.
3. 소스 코드의 작성 순서는 어떠한가?
- 스타일을 정의한 소스 순서로 우선순위가 정해집니다.
- 소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓰게 됩니다.
스타일 상속
- 웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있습니다.
- 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식요소라고 합니다.
- 스타일 상속은 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는 것을 의미합니다.
- 배경색과 배경 이미지는 스타일 상속이 되지 않습니다.
- 또한 스타일 상속만으로 모든 스타일의 충돌을 해결할 수 있는 것은 아닙니다.
이번 시간에는 스타일의 필요성과 어떻게 사용해야 하는지에 대해 살펴보았습니다.
다음 시간에는 본격적으로 여러 스타일들을 적용해 보도록 하겠습니다.
이번 포스팅은 여기까지입니다.
궁금하신 사항이나 문의하실 사항이 있다면 댓글에 남겨주시면 열심히 답글 달아드리도록 하겠습니다.
끝까지 봐주셔서 감사합니다.😊
728x90
반응형
LIST
'HTML_CSS' 카테고리의 다른 글
| HTML/CSS로 그룹 프로젝트 시작해보자 (0) | 2025.01.16 |
|---|---|
| CSS 스타일을 사용하여 텍스트, 목록 그리고 표를 다양하게 표현해보자 (4) | 2025.01.15 |
| HTML에서 입력 양식을 작성해보자 (0) | 2025.01.13 |
| HTML에서 미디어와 하이퍼링크를 삽입해보자 (0) | 2025.01.10 |
| HTML로 여러 가지 요소들을 입력해보자 (0) | 2025.01.09 |