4주차 - CSS의 기본

CSS의 기본

HTML: 텍스트나 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할 CSS: 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당

06-1 웹 문서에 디자인 입히기 06-2 스타일과 스타일 시트 06-3 CSS 기본 선택자 알아보기 06-4 캐스케이딩 스타일 시트 알아보기

06-1 웹 문서에 디자인 입히기

웹 문서에 스타일이 필요한 이유와 사용법에 대해 알아보자.

스타일을 사용하는 이유

웹 문서에서의 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다.

ex) 텍스트 단락에서 줄 간격을 조절, 표의 테두리를 점선으로 변경 등등

웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다.

HTML의 경우 웹 사이트의 내용만 나열할 수 있기에 CSS를 통해 웹 문서의 디자인을 구성한다는 것이 웹 표준의 시작입니다.

이렇게 내용과 디자인을 구분시킴으로써 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리하며 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나는 문서로 만들 수도 있습니다.

다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다.

기존 HTML문서의 경우 PC 웹 브라우저 화면에 맞춰저 있기 때문에 기기에 따라 다양하게 적용되어야 하는데 이때 CSS를 활용하여 여러 기기에 적용 시킬 수 있습니다.

앞으로 배우게 될 반응형 웹 디자인이라는 방식의 경우 유저가 PC든 모바일이든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법이 존재합니다.

- 관리성 : HTML에서 스타일 부분만 CSS로 따로 관리할 수 있음 - 재사용성 : 스타일 서식을 공유해서 여러 웹페이지 디자인을 재사용하고, 통일할 수 있음

Do it! 실습 Web Developer 확장 기능

CSS 스타일이 켜진 사이트와 꺼진 사이트를 비교해보자

06-2 스타일과 스타일 시트

스타일과 스타일 시트에 관해 공부해 보자

스타일 형식 알아보기

기본형 선택자 { 속성1: 속성값1; 속성2: 속성값2; }

선택자 : 스타일을 어느 태그에 적용할 것인지 명시
중괄호({}) : 스타일 정보를 명시

속성과 값이 하나의 쌍으로 이루어진 것을 **스타일 규칙**이라고 하며, 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있다.

텟스트 단락의 글자를 가운데 정렬하고 글자색을 파랑으로 만들어보자

p {
  text-align: center;
  color: blue;
}

스타일 규칙을 작성하는 방법

스타일의 주석을 표기하는 방법

사용한 스타일 속성이 여러 개일 경우 이를 관리하기 위해 주석을 붙여준다

/* CSS에서 주석을 사용하면
소스를 이해하기 쉽고
나중에 수정할 때에ㅅ도 편리합니다. */
p {
  text-align: center; /* 텍스트 정렬 - 중앙 */
  color: blue;        /* 글자색 - 파랑 */
}

CSS 소스 경량화

CSS 소스에 주석을 넣거나 줄 바꿈을 하는 경우는 웹 사이트의 작성자가 알아보기 쉽도록 하는 것일 뿐 웹 브라우저에는 아무 의미가 없으며 오히려 파일의 크기를 키우기도 한다. 그렇기 때문에 파일의 크기를 줄여주기 위해 CSS 소스를 경량화 하는 작업을 진행할 수 있다.

스타일 시트 알아보기

웹 문서 안에서는 스타일 규칙을 여러 개 사용하기도 합니다. 이처럼 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 합니다.

브라우저 기본 스타일

CSS를 사용하지 않은 웹 문서, 기본 스타일을 사용

간단한 스타일 정보를 적용하는 인라인 스타일

간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다. 이러한 방법을 인라인 스타일이라고 합니다.

스타일을 적용하고 싶은 태그에 style 속성을 사용해 style="속성: 속성값;" 형태로 스타일을 바꿀 수 있습니다.

인라인 스타일 적용해보기

스타일을 여러 곳에 적용할 때 쓰는 내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다. 스타일 정보는 웹 문서를 브라우저 화면에 표기하기 전에 결정해야 하므로 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 <style> 태그 사이에 작성합니다.

Doit! 내부 스타일 시트 사용하기

스타일 정보를 따로 저장해 놓은 외부 스타일 시트

내부 스타일 시트의 경우 html 파일 내무에 style 태그를 통해 설정을 하게되는데 이와 달리 외부 스타일 시트의 경우 외부에 css 파일을 만들어서 이를 가져온다.

기본형 <link rel="stylesheet" href="외부 스타일 시트 파일 경로">

06-3 CSS 기본 선택자 알아보기

CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용합니다.

전체 요소에 스타일을 적용하는 전체 선택자

전체 선택자(universal selector)는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용 전체 선택자로는 다음과 같이 *(별표)를 사용합니다.

기본형 * { 속성: 값; ..... }

태그와 요소는 어떻게 다른가요?

태그의 경우 태그 자체를 말하는 것이고 요소의 경우 태그 안에 내부 요소를 의미한다. 그렇기에 p 태그를 적용한 스타일이라는 표현은 태그 자체를 적용하는 스타일이 아니고 p 요소에 적용하는 스타일이 맞는 표현이다.

특정 요소에 스타일을 적용하는 타입 선택자

타입 선택자(type selector)는 CSS에서 가장 쉽게 볼 수 있는 기본 선택자로 태그 이름을 그대로 사용한다. 타입 선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있다.

타입 선택자와 태그 선택자의 차이점은 무엇인가요?

타입 선택자는 태그 이름을 선택자로 사용하므로 태그 선택자라고도 하고, 스타일을 적용하는 대상이 요소(element)이므로 요소 선택자라고도 합니다.

특정 부분에 스타일 적용하는 클래스 선택자

타입 선택자와 더불어 가장 많이 사용되는 CSS 서택자는 클래스 선택자(Class selector)입니다. . 기호에 클래스 이름을 붙여서 사용하며 클래스 선택자로 특정 class 속성값을 사용하는 모든 요소를 선택할 수 있습니다.

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

아이디 선택자(ID selector)는 # 기호에 아이디 이름을 붙여서 사용하는 또 다른 CSS 기본 선택자입니다. 클래스 선택자 만큼 많이 쓰이지는 않지만 웹페이지 상에서 유일한 요소를 대상으로 도드라진 스타일을 적용할 때 유용하게 쓸 수 있습니다.

ID가 유일한 요소라고 설명상 소개하지만 실제로 id가 중복되어도 에러처리 같은건 없기에 개발자에게 사용시 책임을 요하는 것 같습니다.

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표(,)를 통해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하여 적용

h1{
  text-align: center;
}
p{
  text-align: center;
}

h1, p {
  text-align: center;
}

이외에도 속성 선택자(Arrtibute Selector)를 사용할 수 있다. [] 기호를 사용

06-4 캐스케이딩 스타일 시트 알아보기

Cascading Style Sheet에서 cascading의 의미와 역할에 대해 알아보자.

캐스케이딩의 의미

CSS에서 'C'는 캐스케이딩의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용됩니다. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석됩니다. CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정합니다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아주는 중요한 개념

스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용
스타일 상속: 태그의 포함 관계에 따라

스타일 우선순위

우선 순위는 다음 3가지 개념에 따라 지정됩니다.

1. 얼마나 중요한가?

2. 적용 범위는 어디까지인가?

중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있습니다. 스타일 적용 범위가 좁을수록 우선순위가 높아집니다. 단, `!important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아집니다.

3. 소스 코드의 작성 순서는 어떠한가?

소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓰게 된다.

스타일 상속

웹 문서의 경우 사용하는 여러 태그는 서로 포함 관계가 있는데, 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 부른다. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이것을 스타일 상속이라고 합니다. <body> 태그는 웹 문서에 사용한 모든 태그의 부모요소이기 때문에 <body> 태그 스타일을 웹 문서 전체에 적용할 수 있다.

배경색과 배경 이미지는 스타일 상속이 되지 않는 점을 기억해두자!

Previous3주차 - HTML form 태그 Next4주차 - 텍스트를 표현하는 다양한 스타일

Last updated 2 years ago