1 . 웹 프로그래밍 기초 - #3. CSS

본 게시물의 내용은 edwith 부스트코스 - 웹 프로그래밍 강의를 수강한 내용을 바탕으로 한다. 들은 내용을 정리하고, 복습에 용이하도록 정리해놓은 게시물이다.

이번 차시의 강의는 다음과 같다.

1). CSS 선언 방법

2). 상속과 우선 순위 결정

3). CSS Selector

4). CSS 기본 Style 변경

5). Element가 배치되는 방법(CSS Layout)

6). float 기반 샘플 화면 레이아웃 구성

7). 디버깅 - HTML, CSS

1). CSS 선언 방법

CSS의 구성

CSS는 선택자(selector), 특성(property), 값(value) 이 3가지 요소로 구성된다. span이라는 요소에 대해서 css를 적용시키려면 다음과 같은 코드를 사용한다.

span {
  color : red;
  }

Style을 HTML페이지에 적용하는 3가지 방법

1. In-line

HTML 태그 안에다가 CSS를 적용한다. 다른 CSS파일에 적용한 것보다 가장 먼저 적용한다.

<p style="border:1px solid gray;color:red;font-size:2em;">

2. Internal

style태그로 지정한다. 이 경우, 구조(html)과 스타일(css)코드가 섞이게 되어, 유지보수가 힘들다. 그렇지만 별도의 css파일을 관리하지 않아도 되며, css파일을 부르기 위해 브라우저가 서버에게 별도의 요청을 보낼 필요가 없다.

<head>
<style>
p  {
  font-size : 2em;
  border:1px solid gray;
  color: red;
}
</style>
</head>

<body>
<div>...</div>
</body>

3. external

외부에 있는 css파일로 지정한다. css코드가 아주 짧지 않다면, 이 방법으로 구현하는 것이 가장 좋다. 현없에서는 여러 개의 css파일로 분리하고, 이를 합쳐서 서비스에 사용한다고 한다. internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만든 뒤, 아래처럼 link태그로 추가하면 된다.

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
			<p>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</p>
		</div>
	</body>
</html>

우선 순위

In-line 방식은 별도의 우선순위를 갖지만, internal과 external은 우선순위가 동등하다. 따라서, 겹치는 부분에 선언이 있을 경우 나중에 선언된 것이 적용된다.

2). 상속과 우선 순위 결정

CSS에서는, 상위에 속한 요소의 속성이 하위에 있는 요소의 속성에 상속된다. 즉, div태그에서 글자 색을 빨간색으로 설정했다면, 그 하위 태그가 가진 글자 색도 빨간색이 된다는 의미이다.

그러나, 이런 경우 문제가 생길 수 있다. 만약 너비를 나타내는 width 속성의 값 또한 상위에 있는 속성값을 상속받는다면, 상위 요소와 하위 요소 2가지가 같은 크기를 갖게 되어 문제가 생길 것이다. 이러한 경우를 막기 위해, 크기와 관련된 속성(width, height, margin, padding, boarder)은 하위 요소가 상위 요소의 값을 상속받지 않는다.

in-line으로 선언한 CSS코드가 가장 우선적으로 적용되고, Internal, external은 같은 우선순위를 갖는다.

또한, 어떤 CSS를 적용할 지에 대한 우선순위 결정에서는, ID, CLASS, ELEMENT 순으로 반영한다. 즉, 어떤 ID에 대해서 선언한 CSS가 가장 먼저 적용되고, Class에 대해서 선언한 CSS가 그 뒤이고, Element에 대해 선언한 CSS가 그 다음이다. 아래의 경우, ID에 접근하는 첫 번째 단락이 적용된다.

#a{
 color : red;
}

.b{
 color : blue;
}

div{
 color : green;
}

그리고, 더 구체적인 CSS 선언이 먼저 적용된다. div태그 하위에 span 태그가 있다고 할 때, div > span 에 대해서 선언한 CSS가 span에 대해 선언한 CSS코드보다 먼저 적용된다는 말이다. 아래의 경우, span의 색은 빨간색이 된다.

div > span {
	color: red;
}

span {
	color: blue;
}

3). CSS Selector

CSS Selector란, HTML의 요소인 tag, id 등을 쉽게 찾아주는 방법을 말한다.

element에 style을 지정하기 위한 3가지 기본 선택자

1. tag로 지정하기

<style>
     span {
       color : red;
     }
 </style>

2. id로 지정하기

<style>
     #spantag {
       color : red;
     }
</style>

<body>
     <span id="spantag"> HELLO World! </span>
</body>

3. class로 지정하기

<style>
     .spanClass {
     color : red
     }
</style>

<body>
     <span class="spanClass"> HELLO World! </span>
</body>

CSS Selector의 다양한 활용

- id, class, 요소 선택자와 함께 활용

#myid { color: red }
div.myclassname { color: red}

- 그룹 선택(여러 개의 selector에 같은 style을 적용해야 할 때)

h1, span, div { color: red}
h1, span, div#id { color: red}
h1.span, div.classname{ color: red }

- 요소 선택 (공백): 자손 요소, 아래 모든 span 태그에는 red 색상이 적용됨

<div id="ks">
	<div>
    	<span> span tag</span>
    </div>
    <span> span tag2</span>
</div>

#jisu span {color:red}

- 자식 선택 ( > ): 자식은 바로 하위 엘리먼트를 가리킨다. 아래는 span tag2만 빨간 색이 적용된다. (span tag는 직계가 아니기 때문에)

<div id = "ks">
	<div>
    	<span> span tag</span>
    <div>
    <span> span tag2</span>
<div>

#ks > span { color: red }

- n번째 자식 요소를 선택한다. 아래 경우에서, 첫 번째 단락에 빨간 색이 적용된다.

<div id = "ks">
	<h2>단락 선택</h2>
    <p>첫번째 단락입니다</p>
    <p>두번째 단락입니다</p>
    <p>세번째 단락입니다</p>
    <p>네번째 단락입니다</p>
</div>

#ks > p:nth-child(2) {color:red}

4). CSS 기본 Style 변경하기

font 색상 변경

color: red;
color: rgba(255, 0, 0, 0.5);
color: #ff0000;

font 사이즈 변경

font-size : 16px;
font-size: 1em; (em은 상속받아온 크기를 말함. 1em 이라는 것은 1 * (상속받아온 픽셀값) 이라는 것)

글씨체, 글꼴 변경

font-family: "Gulim";
font-family: monospace;

<html>
<head>
	<meta = charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
    body > div {
    	font-size:16px;
        background-color: #ff0;
        font-family:"Gulim";
	}
    
    .myspan {
    	color: #f00;
        font-size:2em;
    }
    </style>
</head>
<body>
	<div>
    	<span class="myspan"> my text is upper</span>
	</div>
</body>
</html>

길이가 너무 길어져서, 이만 마치겠다. 다음 게시글에서는 레이아웃에 대한 내용을 다룰 것이다.

'공부 > 웹 프로그래밍' 카테고리의 다른 글

1. 웹 프로그래밍 기초 - #5. Servlet - BE (6)	2020.01.10
1 . 웹 프로그래밍 기초 - #3. CSS - FE (2) (0)	2020.01.10
1 . 웹 프로그래밍 기초 - #2. HTML - FE (4)	2020.01.07
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (4) (0)	2020.01.03
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (3) (0)	2020.01.03

섹시한 개발자의 기록

1 . 웹 프로그래밍 기초 - #3. CSS - FE (1)

1). CSS 선언 방법

2). 상속과 우선 순위 결정

3). CSS Selector

4). CSS 기본 Style 변경

5). Element가 배치되는 방법(CSS Layout)

6). float 기반 샘플 화면 레이아웃 구성

7). 디버깅 - HTML, CSS

1). CSS 선언 방법

CSS의 구성

Style을 HTML페이지에 적용하는 3가지 방법

1. In-line

2. Internal

3. external

우선 순위

2). 상속과 우선 순위 결정

3). CSS Selector

element에 style을 지정하기 위한 3가지 기본 선택자

1. tag로 지정하기

2. id로 지정하기

3. class로 지정하기

CSS Selector의 다양한 활용

4). CSS 기본 Style 변경하기

font 색상 변경

font 사이즈 변경

글씨체, 글꼴 변경

'공부 > 웹 프로그래밍' 카테고리의 다른 글

티스토리툴바

1 . 웹 프로그래밍 기초 - #3. CSS - FE (1)

1). CSS 선언 방법

2). 상속과 우선 순위 결정

3). CSS Selector

4). CSS 기본 Style 변경

5). Element가 배치되는 방법(CSS Layout)

6). float 기반 샘플 화면 레이아웃 구성

7). 디버깅 - HTML, CSS

1). CSS 선언 방법

CSS의 구성

Style을 HTML페이지에 적용하는 3가지 방법

1. In-line

2. Internal

3. external

우선 순위

2). 상속과 우선 순위 결정

3). CSS Selector

element에 style을 지정하기 위한 3가지 기본 선택자

1. tag로 지정하기

2. id로 지정하기

3. class로 지정하기

CSS Selector의 다양한 활용

4). CSS 기본 Style 변경하기

font 색상 변경

font 사이즈 변경

글씨체, 글꼴 변경

'공부 > 웹 프로그래밍' 카테고리의 다른 글

'공부/웹 프로그래밍' Related Articles

티스토리툴바