[CSS] #1-1 CSS 이해하기 그리고 Inline CSS

1. CSS가 뭐야?

 

 HTML은 웹페이지의 구조를 짠다.

 그리고 CSS는 웹페이지를 이쁘게! 보기 좋게! 만드는 역할을 한다.

 

 페이지가 보기 좋다는 것은 단순히 만들고 난 후 보이는 모습을 더 이쁘게 만들려고 한다는 뜻은 아니다.

 페이지가 보기 좋다는 것은 페이지의 일관성을 부여한다는 의미이다.

 버튼도 자기 멋대로, 이곳 저곳에 있다면 사용자가 페이지를 보고 사용할 때 개발자의 의도와는 다른 방향으로 페이지를 사용하거나, 아예 사용하지 못하는 경우가 생길 수 있기 때문이다.

 

 CSS를 왜 사용해야하는지 이해가 되었을 것 같다.

 

 

 * UI 구현 표준(WEB)의 구성 요소

 HTML과 CSS로 만들어내는 WEB에 대한 이해를 조금 더 넓혀보자!

 

 웹의 구성 요소로는 웹 표준, 웹 접근성, 웹 호환성이 있다.

 웹 표준 :  웹에서 사용되는 기술이나 규칙을 잘 지켜서 제작해야한다는 뜻이다.

 웹 접근성 : 어떤 사용자나 어떤 기술 환경에서도 사용자가 웹사이트에서 제공하는 정보에 접근할 수 있도록 고려해야한다는 뜻이다.

 웹 호환성 : 이용자의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공할 수 있어야 한다는 뜻이다.

 

 이런 웹(web)의 3요소는 구조, 표현, 동작이 있다.

 1) 구조 : HTML

 2) 표현 : CSS

 3) 동작 : JavaScript, 웹프로그래밍언어(JSP, ASP, PHP, Python ~~)

 

 

2. CSS 기본 문법 부수기

 

 이제 본격적으로 CSS에 대해 배워보자!

 참조할 만한 정보들이 담긴 사이트는 참 많지만 HTML과 같이 W3Schools 사이트를 참조하려 한다.

 https://www.w3schools.com/css/css_intro.asp

CSS Introduction

 

 1) CSS

 우선 CSS는 Cascading Style Sheets의 줄임말이다.

 CSS에 대해 기본적으로 기억해야 할 특징은 아래와 같다.

 

 - CSS는 웹문서(HTML문서)의 서식을 바꾸거나 다양한 표현을 할 때 사용한다.

 - 페이지의 일관성을 유지하는 것이 목적이다.

 - 명령어는 대소문자를 반드시 구분한다.

 - 종결문자로는 ' ; ' 를 사용한다.

 - 여러줄 주석은 ' /* */ ' 을 사용한다.

 - 속성 1개에 대한 주석은 ' -- '을 사용한다.

 

 2) CSS 용어 정리

 - 요소 element : HTML에서 작업했었던 것들을 요소라고 부르며 CSS는 이 요소들에 여러 효과들을 입힌다.

 - 속성 property, attribute : 요소들에 어떤 효과들을 입힐 것인지에 대한 것을 나타내는 말이다.

 - 선택자 selector : 말 그대로 선택을 해주는 요소로 HTML문서에 스타일을 입힐 요소를 선택하는 문자이며 일정한 구조를 갖고 있다. HTML 요소에 스타일을 입히는 대부분의 CSS 코드는 같은 구조로 이루어져 있다( 문서 내 2-3번 항목 참고). 선택자를 잘 관리하는 것이 중요하다.

 - key, value, name : 각 요소에 정해진 식별자와 값을 나타내는 용어이다.

 

 3) CSS Selector를 표기하는 방법

 - 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~~ }

 

 4) CSS를 적용하는 방식

 - Inline CSS : style="" 속성

 - Internal CSS : <style></style> 태그

 - External CSS : .css 스타일파일

 

 

3-1. Inline CSS

 

 인라인 CSS는 style 뒤에 속성과 값을 직접 입력하는 방식이다.

 아래의 코드를 봐보자.

<div style="width: 200px; height: 150px; background-color: red;"></div>

 이렇게 가로, 세로, 배경색까지 하나씩 지정해주는 방식을 인라인 CSS라고 부른다.

 그러나 어느 항목은 스타일을 적용해야하는 것들이 너무 많은 것들이 많아질 때가 있고 그럴 때 이런 인라인 방식을 사용하면 너무 코드가 무거워지고 가독성도 떨어질 수 있다.

 위에서 보았던 주석에 대한 내용을 코드에 추가해서 확인해보자.

<div style="width: 100px; /* 가로 크기 */
            height: 100px; /* 세로 크기 */
            --background-color: blue;"></div>

 여기서 /* */ 안에 들어있는 내용들은 출력되지 않는다.

 또한 배경색을 지정했지만 -- 로 한 줄의 속성은 주석으로 처리했기 때문에 색깔도 출력되지 않는다.

 

 사이즈는 아래의 코드와 같이 당연하지만 %로도 출력이 가능하다.

 단위를 꼭 써야한다는 것을 잊지 말자.

<div style="width: 100%; height: 100px; background-color: green;"></div>
<hr>
<div style="width: 50%; height: 100px; background-color: blueviolet;"></div>
<hr>

 

위의 모든 코드를 출력한 결과물! 두번째 네모는 색을 부여한 속성이 주석처리가 되어서 빈 칸처럼 보인다

 

 

3-2. Inline CSS 실습해보기 1

 

 CSS에서는 다양한 인라인 CSS를 적용할 수 있다.

 그 중에서 백그라운드와 관련된 다양한 속성을 적용해서 써보자.

 

 1) 배경을 이미지로 채우기 : background-image

 배경을 이미지로 채우고 싶을 땐 background-image 를 사용한다.

 이 때 이미지는 url()을 사용하여 불러온다.

 

 2) 이미지 배치 조절하기 : background-repeat

 이미지가 배경에 맞지 않으면 자동으로 CSS가 이미지를 바둑판식 배열로 배치하는데 이것을 하고 싶지 않다면 background-repeat 속성의 no-repeat 값을 입력하여 조절할 수 있다.

 

 3) 이미지의 위치 조절하기 : background-position

 background-position은 이미지가 배경 안에 위치할 장소를 배정해준다.

 

 4) 이미지의 크기 조절하기 : backgound-size

backgound-size는 이미지의 크기를 조절하는 것이며 뒤에 가로와 세로값을 따로 지정해주어야 한다.

 

 

3-3. Inline CSS 실습해보기 2

 

 텍스트 스타일도 한번 여러가지 형태로 바꿔보자.

 우선 텍스트를 뉴스 기사에서 따와서 입력한 뒤 여러가지 텍스트 스타일을 적용해보았다.

<div style="width: 300px;
            height: 300px;
            background-color: yellow;	/*여기까지는 글이 들어가는 공간에 대한 스타일*/
            color: blue;                /*글자색*/
            text-decoration:underline;    /*밑줄*/
            text-indent: 50px;            /*들여쓰기*/
            --text-shadow: 3px 2px black; /*그림자 수평(3) 수직(2) 파랑*/
            letter-spacing: -3px;			/*글자간격*/
            line-height: 20px;				/*줄간격*/
            word-spacing: 10px;				/*단어간격*/">
    정재훈 가천대 의대 예방의학과 교수는 전날 질병관리청이 주최한
    코로나19 전문가 초청 설명회에서 "전문가들이 2,3주 전에 예측했던 것은 최악의
    시나리오에 가까웠는데, 지금은 정보의 확실성이 생기고 있기 때문에 유행 규모가
    예측보다 조금 감소할 수 있다고 생각한다"고 말했다.
</div>

 

 1) 색깔 바꾸기 - color: 값;

 텍스트의 색깔을 바꿔준다.

 

 2) 밑줄 긋기 - text-decoration: underline

 텍스트 아래에 밑줄을 그어준다.

 값에 따라 다른 효과들도 줄 수 있다.

 

 3) 들여쓰기 - text-indent: 값;

 얼마나 들여쓰기를 할 것인지 정한다.

 

 4) 그림자 넣기 - text-shadow: 수평값 수직값 그림자색깔;

 

 5) 글자 간격 - letter-spacing: 값;

 

 6) 줄 간격 - line-height: 값;

 

 7) 단어 간격 - word-spacing: 값;

 

 

 보다시피 인라인 CSS는 내용이 길어질수록 코드가 무거워지고 가독성이 떨어지기에 사용에 유의하여야 한다.

 텍스트와 관련된 스타일들은 아래의 사이트를 참조해서 필요할 때 사용하자.

 https://www.w3schools.com/css/css_text.asp

CSS Text