코딩 성장기

[CSS]CSS기초 및 개념 본문

웹퍼블리싱(HTML&CSS)

[CSS]CSS기초 및 개념

김소우 2022. 1. 23. 19:16

CSS란?

CSS = Cascading Style Sheets 의 줄임말로써, 웹 페이지의 디자인을 담당한다.

크게 2가지 역할을 한다고 볼 수 있다.

  • 콘텐츠의 배치(위치 설정, 레이아웃 디자인)
  • 타이포그래피

CSS의 사용목적

CSS를 이용한 디자인을 통해 UI/UX를 만족시킨다.

- UI : User Iterface의 약자. 사용자가 마주하게 되는 면(디자인)을 지칭하며, (폰트, 레이아웃, 컬러 등)

사람과 프로그램이 소통할 수 있는 요소를 제공한다.(클릭시 프로그램이 작동하는 버튼 등)

-UX : User Experiennce의 약자. 사용자 입장에서 편리한 사용 및 만족도를 충족시킬 수 있는

디자인을 지칭한다.(검색버튼은 최상단에 위치시키고, 프로필은 왼쪽 상단부에 위치시키기)

사람의 만족시킬 수 있는 UI를 디자인 하는것.

 

CSS에 관한 고찰

 

CSS 기본 문법(사용법)

/*셀렉터*/
body { /*선언블럭*/
	color:red;/*선언*/
        font-size : 30px;
      /* 속성명, 속성값, 선언구분자*/
      }

-셀렉터(selector) : 위의 코드에서 'body' 부분을 지칭한다.

디자인을 적용시키고 싶은 html 문서 내의 태그이름 혹은 id/class 이름을 쓴다.

  • id를 쓸 경우 : #기호를 id 이름 앞에 쓴다. 
  • class를 쓸 경우 : . 을 class 이름 앞에 쓴다.

-선언블럭 : { } 내부를 통틀어서 지칭한다. 디자인 요소들을 말함.

-속성명 : 어떤 부분에 디자인을 적용할 것인지 정한다.

-속성값 : 디자인 내용.

-선언구분자 ';' : 속성끼리 구분지음.

 

<id 와 class의 차이>

id는 한 문서내에서 한 요소에만 적용할 수 있다. 같은 이름의 id를 여러 태그에 적용하여 사용 할 수 없음.

class 는 id와 다르게 동일 이름의 class를 여러 태그에 적용하여 사용할 수 있음.

👉 여러 요소들에 같은 디자인요소를 적용해야 할 경우, 태그에 class 로 이름을 붙혀준다!

CSS를 HTML에 적용하기

html 파일의 상단쪽에 <link>태그를 이용하여 CSS파일을 연결해준다

<link rel="stylesheet" href="index.css" />
/*    파일의 역할       파일의 위치 */

HTML 안에 CSS를 사용하지 않고, 다른 파일로 나눠놓는 이유

관심사 분리 측면에 따라 다른 역할을 하는 코드들은 서로 구별해 놓는다.

but, 아주 간단한 디자인이 필요할 때에는 HTML 코드와 함께 작성하기도 한다.

CSS 적용시키는 방법

1. 인라인 스타일

HTML 태그의 속성값으로 style을 주고 필요한 CSS 코드를 작성하는 방법

<p style="background: #eee; color: blue">...</p>

2. 내부 스타일 시트

HTML 파일에 <style> 태그를 이용하여 공간을 만들어, 공간에 CSS 코드를 작성한다.

주로 <head>태그 내에 작성한다.

<!DOCTYPE html>
<html>
	...
    <head>
    	...
        <style>
        p {color:yellow; font-size:15px;}
        </style>
        ...
      </head>
      ...
</html>

3. 외부 스타일 시트

HTML과 다른 파일에 CSS 코드를 작성하여 링크 태그를 이용해 연결해 디자인을 적용하는 방법

'웹퍼블리싱(HTML&CSS)' 카테고리의 다른 글

[HTML/CSS]박스모델_컨텐츠영역 꾸미기  (0) 2022.01.25
[CSS]텍스트 스타일링  (0) 2022.01.23
[HTML]HTML 기초 및 개념  (0) 2022.01.22
'웹퍼블리싱(HTML&CSS)' Related Articles more