[2020-여름 WEB] 3주차

3주차_웹실습_21기_송희원.pdf

0.36MB

3주차_웹이론_21기_송희원.pdf

0.16MB

 

 

0. CSS의 등장 배경

기존 html은 웹페이지를 시각적으로 꾸밀 수 없었다. 이에 html에 웹페이지를 시각적으로 꾸밀 수 있게 도와주는 태그를 새로 추가했다. 하지만 이는 웹페이지를 시각적으로 아름답게 꾸미는데 한계가 있었다. html은 기본적으로 효율적인 정보 전달을 목적으로 하고 있기 때문에 content의 정보를 한눈에 알아볼 수 있도록 도와주는 태그만이 존재했다. 그러다가 웹페이지의 디자인을 도와주는 태그들이 생겨나고, 기존 태그들과 같이 사용하면서 웹페이지는 정보의 가독성을 잃게 되었다. 이 때문에 사람들은 효율적인 정보 전달과 디자인을 따로 분리하고자 하였고, html에서 디자인을 분리하여 CSS를 만들게 되었다. 따라서 CSS는 오직 웹페이지의 디자인을 위해 만들어진 언어라고 할 수 있다.

 

 

 

 

 

1. CSS의 기본 문법

1.1 선택자와 속성

 

a{
  color:red;
}

 

위에서 a는 selector(선택자), color:red;는 declaration(선언), color는 property(속성), red는 property value(속성값)라고 한다.

선택자는 html코드 중에서 해당 코드를 모두 선택한다는 의미를 담고 있으며, 선언은 해당 태그를 속성과 속성값에 맞게 디자인을 변경한다는 의미를 가지고 있다. 따라서 위 CSS문법에 따르면 html에 있는 모든 a태그에 감싸져 있는 content의 색상을 빨간색으로 바꾸겠다는 뜻이다.

위처럼 선택자와 속성은 html에서 head태그 안에 style태그와 함께 사용한다.

 

 

 

1.2 style속성의 기본

style태그를 사용하지 않고, CSS를 사용하는 방법이 있다. 바로 style속성을 사용하는 방법이다.

style속성은 어느 태그에서나 사용할 수 있다. style=”color:red;”와 같이 사용한다.

여기서 style=”color:red;”는 html문법에 해당하지만, style=”color:red;”는 CSS문법에 해당한다.

즉, style=”color:red;”는 html에게 “”안에 내용을 CSS문법으로 해석하라는 문장이다.

 

 

 

1.3 class

CSS로 효과를 줄 때 지정한 전체 태그말고, 하나의 그룹을 생성해서 그 그룹에만 효과를 주고 싶을 때 class를 사용한다.

그룹핑하고 싶은 태그에 class속성을 사용해서 원하는 그룹명을 지정하여 사용할 수 있다.    [class=”클래스명”]

예를 들어, music이라는 class를 만들고 class에만 효과를 주고 싶다면, 원하는 태그에 class=”music”이라는 속성을 추가하고, sytle태그에 이 class를 선택자로 하는 declaration을 추가하면 된다.

 

.music{
       color:gray;
}

 

 

 

1.4 id

CSS효과를 줄 때 전체 태그 말고, 원하는 한가지 부분에만 효과를 주고 싶을 때 id를 사용한다. id도 class처럼 속성으로 사용한다.

id=”원하는 아이디”처럼 효과를 주고 싶은 태그에 id속성으로 고유한id를 만들고 style태그에서 #id이름을 선택자로 사용해서 효과를 줄 수 있다.

이때 id는 중복될 수 없으며 오직 하나의 id만을 갖는다.

예를 들어, 노래 제목을 a태그가 감싸고 있는 부분에만 글씨 색상을 변경하려는 효과를 주고 싶다면 a태그에 id=”music”속성을 추가하고, style태그에 이 id를 선택자로 하는 declaration을 추가하면 된다.

 

#music{
        color:red;
}

 

* 선택자의 우선순위는 id > class > tag다.

 

 

 

 

 

2. CSS 문법을 스스로 알아내는 방법

2.1 속성을 스스로 알아내는 방법

 

아무 브라우저나 들어가서 검색창에 궁금한 속성을 검색할 땐 “css (궁금한 속성) property”라고 검색해서 제일 맨 위에 나오는 링크를 클릭해서 확인하면 된다.

예를 들어, 텍스트를 가운데 정렬하는 속성이 궁금하다면 검색창에 “css text center property”라고 검색할 수 있다.

또는 “css align center property”라고 검색해도 원하는 결과는 찾을 수 있을 것이다.

이처럼 궁금한 내용은 키워드만 넣어서 검색만 해줘도 바로바로 알아낼 수 있다.

 

 

 

2.2 선택자를 스스로 알아내는 방법

아무 브라우저나 들어가서 검색창에 css selector라고 검색하면 1.3이나 1.4에 나온 내용들을 찾아볼 수 있다.

 

 

 

 

 

3. 박스모델

CSS에는 박스모델을 구현할 수 있는 속성을 가지고 있다. 바로 border속성이다.

border속성을 사용하면 content에 맞는 상자모양의 테두리가 생성된다.

border-width는 이 테두리의 두께를 조절할 수 있는 속성이다.

border-color는 테두리의 색상을 변경할 수 있고, border-style은 테두리의 종류를 지정할 수 있다.

 

h1{
	border-width:5px
	border-color:red;
	border-style:solid;
}

a{
	border-width:5px
	border-color:red;
	border-style:solid;
}

 

위처럼 속성의 내용이 같고 선택자만 다른 경우, 다음처럼 둘을 합쳐서 더 간단하게 표현할 수 있다.

 

h1, a{
	border-width:5px
	border-color:red;
	border-style:solid;
}

 

또한, border라는 속성을 중복으로 사용할 경우, 다음과 같이 줄여서 간단하게 사용할 수 있다.

 

h1, a{
	border:5px red solid;
}

 

박스모델은 용도별로 그 구역을 다음 사진처럼 나눌 수 있다.

 

 

border속성으로 테두리를 만드는 영역은 border(테두리)이고, 테두리가 감싸는 content영역은 content(내용), 테두리와 내용 사이의 공백은 padding(패딩), 테두리 바깥의 남은 부분을 margin(여백)이라고 한다.

이처럼 박스모델의 영역을 CSS속성으로 조절해가면서 원하는 디자인으로 웹페이지를 꾸밀 수 있다.

마지막으로 이러한 박스모델을 더 효과적으로 사용하려면, 웹페이지에서 우클릭하면 나오는 ‘검사’ 기능을 이용해야 한다.

이 검사 기능을 클릭하면 html코드가 오른쪽에 작은 창으로 나오는데 이 위에 마우스 커서를 올리면 그 코드에 해당하는 부분의 박스모델을 영역별로 구분해서 웹페이지상에서 보여준다. 이 기능을 활용하면 박스모델을 좀 더 쉽고 효율적으로 사용할 수 있다.