3/28(화) IT 국비교육(19일차) / 1.CSS의개요~3.CSS텍스트

0. CSS에 들어가기 전

1. CSS의 개요

1-1. CSS 정의

1-2. CSS 문법

1-2-1. 선택자

1-2-2. 주석문

1-3. CSS 적용법

1-3-1. 인라인 스타일

1-3-2. 내부 스타일

1-3-3. 외부 스타일

2. 선택자

2-1. 전체 선택자

2-2. 요소 선택자

2-3. ID 선택자

2-4. class 선택자
2-5. 그룹 선택자

2-6. 자식 선택자

2-7. 자손 선택자

2-8. 인접 형제 선택자

2-9. 일반 형제 선택자

2-10. 속성 선택자

2-11. 가상 선택자

2-12. 스타일링 링크

3. CSS 텍스트

3-1. CSS의 컬러

3-2. CSS의 텍스트

TIP

과제

0. CSS에 들어가기 전

* HTML/CSS 교육 간 사용할 에디터 :

교육에 사용할 폴더를 드래그해서 바탕화면 아이콘에 드롭하여 실행.

* VS Code Extension ' Indent rainbow ' 설치를 추천.

들여쓰기, 내어쓰기에 색상을 입혀 코드의 구분을 용이하게 해주는 확장프로그램.

* MDN 홈페이지에 대해 숙지.

MDN :

웹개발을 위한 문서저장소. 많은 프론트엔드 개발자들이 방문함.
웹 개발을 한다면 거의 반드시 한번쯤은 보게 되는 사실상 표준 문서.
기본적으로 HTML, CSS, JavaScript 기초 지식이나 상세 필드부터 WebAPI까지 폭넓게 다루고 있음.

특히나 HTML5이후 급격하게 변하는 웹 표준을 가장 잘 반영하면서 동시에 유저 친화적이라는 장점이 있음.
https://developer.mozilla.org/ko/

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

1. CSS의 개요

1-1. CSS 정의

Cascading Style Sheets.

HTML로 작성된 웹페이지의 디자인과 레이아웃을 설정하는 언어.

CSS를 사용하면 텍스트, 이미지, 배경, 레이아웃, 색상 등 웹페이지의 모든 요소를 꾸밀 수 있음.

1-2. CSS 문법

HTML 문서 <head> 요소 안의 <style> 요소에서 CSS 문법을 적용.

1-2-1. 선택자

HTML의 <style></style>에서 특정 태그를 선택할 수 있게 해주는 글자. 사용법이 매우 방대하다.

아래의 'A태그'가 선택자이다.

A태그 {속성명1: 속성값 ; 속성명2: 속성값 ; ... }

예)

<p>태그의 내용에 '가운데정렬+진한하늘색' 조건을 적용하고 싶은 경우.

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

1-2-2. 주석문

/* ~ */ 사이에 내용을 입력. (단축키: Ctrl + / )

1-3. CSS 적용법

1-3-1. 인라인 스타일

HTML 요소 내부에 style 속성을 사용하여 적용하는 방법.
많이 불편하여 실무에서 사용하지 않는 방법.
예)

<p style="text-align: center; color: deepskyblue;"> 안녕하세요 </p>

1-3-2. 내부 스타일

HTML 문서의 <head></head> 사이에 <style></style> 요소를 사용하여 적용하는 방법.
인라인 스타일보다는 많이 사용하나 여전히 실무에서는 자주 사용하지 않는 방법.
외부 스타일이 파일 2개를 만들어 번거롭기 때문에,

현재 교육 간에는 내부 스타일을 사용할 예정.

예)

<head>
<style>

h2 {text-align: center; font-size: 50px; color: deepskyblue;}
p {text-align: center; font-size: 20px; }

</style>
</head>

1-3-3. 외부 스타일

웹사이트 전체의 스타일을 .css파일에서 작성 후 html에 링크를 걸어서 적용.
실무에서 가장 많이 사용되는 방법.
.css 확장자의 파일 내부에는 style의 코드만 작성.

예)

2. 선택자

2-1. 전체 선택자

스타일을 모든 요소에 적용.
별표(*) 기호를 사용하여 표현함.
너무 많은 요소가 있는 HTML 문서에 사용할 경우, 클라이언트에 부하를 줄 수 있음.

* {속성명1: 속성값 ; 속성명2: 속성값; ... }

개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선한다.

예)

h2 {
color: deepskyblue;
font-size: 50px;
}

* {
color: gray;
}

위의 예시에서, ' h2 '의 스타일이 ' * '의 스타일보다 우선한다.

2-2. 요소 선택자

특정 요소(태그)가 쓰인 모든 요소에 스타일을 적용. '태그 선택자'라고도 불림.
부모 요소의 속성값이 자식 요소에게 전달되는 '상속'의 개념이 적용됨.

예)

...

<style>

p {
color: deepskyblue ;
}

</style>

...

<p>
<span> span 요소 </span>
</p>

...

위의 예시에서, <span> 태그 내부 'span 요소'까지 <p>에 지정한 'color' style이 적용.

'상속'이 가능한 style의 요소가 있고, 불가능한 요소가 있기 때문에 항상 '상속'을 적용할 수는 없음.
https://www.w3.org/TR/CSS22/propidx.html

Full property table

www.w3.org

위의 웹사이트에서 요소의 상속 가능,불가능 여부를 검색해볼 수 있으므로 참고하는 것을 추천.

불가능 예)

...

<style>

div {
border: 3px dotted gold ;
padding: 30px ;
}

</style>

...

<div>
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에 전달되는 속성</p>
</div>

...

위에서 <div> 내부의 <h3>, <p>에는 'border'와 'padding'의 요소의 상속이 불가능.

→ div 영역 자체에만 상속이 적용됨.

2-3. ID 선택자

웹 문서 안의 특정 부분 스타일을 적용하기 위해 사용됨.
샵표 ('#') 기호를 사용해서 id속성을 가진 요소에 스타일을 적용할 수 있음.

CSS

'안녕하세요?', '반갑습니다' 적용.
h2 { font-size: 30px;}

'안녕하세요?' 적용.(덮어쓰기가 적용.)
h2 # hello {font-size: 20px;}

'안녕하세요?' 적용.
# hello {color: pink;}

HTML

<h2 id='hello'>안녕하세요?</h2>
<h2 반갑습니다.>

예) # container, # header라는 ID 선택자를 이용해 style을 사용하고 싶은 경우.

...

<style>

#container {
background-color: gold ;
padding: 20px ;
width: 600px ;
height: 300px ;
text-align: center ;
margin: 100px auto ; # auto : margin에서 위 아래의 가운데 정렬을 의미.
}

#header {
background-color: deepskyblue;
width: 200px;
height: 200px;
text-align: center;
margin: 100px auto;
line-height: 200px;
}

</style>

...

<body>
    <h2>id 선택자</h2>
    <div id="container">div 첫번째 영역</div>
    <div id="header">div 두번째 영역</div>
</body>

...

2-4. class 선택자

특정 집단의 요소를 한번에 스타일을 적용.
마침표(.) 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용.
style을 2개 이상 적용하고 싶은 경우, class=' '의 안에 띄어쓰기로 함께 적용.

CSS

'안녕하세요', '반갑습니다' 적용.
h2 {font-size: 20px;}

'안녕하세요' 적용.
h2.hello {color: deeppink;}

'안녕하세요', '하이' 적용.
.hello {color:deepskyblue;}

'하이', '또 만났군요' 적용.
p {font-weight: bold;}

HTML
<h2 class="hello"> 안녕하세요 </h2>
<h2> 반갑습니다 </h2>
<p class="hello"> 하이 </p>
<p> 또 만났군요 </p>

예) .redStyle, .blueStyle, .boldStyle 선택자를 이용해 style을 사용하고 싶은 경우.

...

<style>

    .redStyle {color: red;}
    .blueStyle {color: blue;}
    #bigText {font-size: 40px;}
    .boldStyle {font-weight: bold;}

</style>

...

<body>

    <h2 id="bigText">class 선택자</h2>
    <p><span class='redStyle boldStyle'>class 선택자</span>는 특정 집단의 요소에 한번에 스타일을 적용합니다.
<span class='redStyle'>마침표(.)기호</span>를 사용해서
<span class='blueStyle'>같은 class 이름</span>
        을 가진 요소에 스타일을 적용합니다.</p>
</body>
...

2-5. 그룹 선택자

여러 개의 요소를 나열.

콤마(,) 기호로 구분하여 스타일을 적용.

'h2 태그와 p 태그를 가운데정렬' 하고 싶은 경우

h2, p
{text-align: center ;
}

예) h2, p, h3, ul요소를 나열하여 style을 사용하고 싶은 경우.

2-6. 자식 선택자

자식요소의 스타일을 부모요소에게 적용.

<html>

    <head>
        <title>테스트</title>
    </head>

    <body>
        <h2>HTML의 구조</h2>
        <p>HTML의 <b>구조</b>입니다</p>
    </body>

</html>

위에서 <html>이 부모요소, <head>, <body>가 자식요소.

부호(>) 기호 사용.

예) <ul>의 자식요소인 <a>를 참고하여 자식 선택자를 이용해 style을 사용하고 싶은 경우.

2-7. 자손 선택자

조상요소 하위의 모든 요소의 스타일을 적용.

<html>

    <head>

        <title>테스트</title>

    </head>

    <body>

        <h2> HTML의 구조</h2>
        <p> HTML의 <b>구조</b>입니다</p>

    </body>

</html>

위에서 <html>과 <title>,<h2>, <p>의 관계.
자손은 자식을 포함.

2-8. 인접 형제 선택자

동일한 부모의 요소를 갖는 자식 요소들의 관계.

<html>

    <head>

        <title>테스트</title>

    </head>

    <body>

        <h2>HTML의 구조</h2>
        <p>HTML의 <b>구조</b>입니다</p>

    </body>

</html>

위에서 <h2>와 <p>는 인접형제요소.

더하기(+) 기호 사용.

예) 형제요소인 인접 형제 선택자를 이용해 style을 사용하고 싶은 경우.

2-9. 일반 형제 선택자

형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용.

(순서가 중요)

물결(~) 기호 사용.

아래 사진에서, 둘째줄의 B태그와 넷째줄의 B태그에 모두 style이 적용됨.

예) 형제요소인 일반 형제 선택자를 이용해 style을 사용하고 싶은 경우.

2-10. 속성 선택자

HTML 요소에서 src, href, style, type, id, class ... 등의 속성을 선택자로 지정하여

스타일을 적용하는 것.
대괄호( [ ] )를 사용.

사용법이 매우 방대하기 때문에 MDN을 참고하는 것을 추천.

src의 속성을 선택자로 지정해서 style을 적용하는 방법이 자주 사용됨.

CSS

[src] {border: 3px solid red;}
[src='apple.png'] {width: 200px; height: 200px;}

HTML

<img src='apple.png' alt='사과이미지'>
<img src='banana.png' alt='바나나이미지'>

예) src의 속성을 선택자로 지정해서 style을 적용하고 싶은 경우.

2-11. 가상 선택자

class를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 요소를 선택하는 방법.

예) .deepsky 가상선택자를 이용하여 '김사과', '오렌지'의 글꼴을 진하늘색으로 변경.

CSS

.deepsky {color: deepskyblue;} deepsky

HTML

<ul>
    <li class="deepsky">김사과</li>
    <li>반하나</li>
    <li class="deepsky">오렌지</li>
    <li>이메론</li>
</ul>

li:first-child
li 요소 중에서 첫번째에 해당하는 요소의 스타일을 적용.
예) ul > li:first_child {color: deeppink;}

li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용.

li:nth-child(n)
li 요소 중에서 n번째에 해당하는 요소의 스타일을 적용.

li:nth-child(odd)
li 요소 중에서 홀수번째 요소의 스타일을 적용.

li:nth-child(even)
li 요소 중에서 짝수번째 요소의 스타일을 적용.

예) li 요소 중 가상 선택자를 지정해서 style을 적용하고 싶은 경우.

2-12. 스타일링 링크

a:link
하이퍼링크가 연결되었을 때 선택.

a:visited
특정 하이퍼링크를 방문한 적이 있을 때 선택.

a:hover
특정 요소에 마우스를 올렸을 때 선택.

a:active
특정 요소에 마우스 버튼을 누르고 있을 때 선택.

예)

3. CSS 텍스트

3-1. CSS의 컬러

색상 이름 표현

red, yellow, blue, salmon ...

RGB 색상값 표현

RGB(0~255, 0~255, 0~255) / Red, Green, Blue의 색을 각각 나타냄.
rgba(0~255, 0~255, 0~255, 0~1의소수값)

16진수 색상값 표현

예) #0000FF : 파랑색
00 00 FF → R G B → # 00F

3-2. CSS의 텍스트

color:
색상을 설정.
기본값: 검은색

letter-spacing:
글자 사이의 간격을 설정.

예)

word-spacing:

단어 사이의 간격을 설정.

예)

text-align:
수평 텍스트 정렬 설정. (left, right, center, justify)

예)

text-Indent:
단락 첫 줄 들여쓰기 설정.

예)

line-height:
줄의 높이 지정.
line-height: 1.5일 때 글자 크기가 40px인 경우, 줄의 높이는 40px의 1.5배인 60px.

( ( 60px-40px ) / 2 로 계산되어서 글자의 위와 아래에 각각 10px의 여백이 생성됨.)
만약 줄의 높이가 글자의 크기보다 작다면, 글자가 겹치게 됨.

예)

text-decoration
여러가지 효과 설정.

(none, underline, line-through, overline)

예)

text-transform

영문자의 대소문자를 설정. (lowercase, uppercase, capitalize)

예)

font-variant
소문자를 작은 대문자로 변경. (small-caps)

예)

text-shadow:
텍스트에 그림자 효과를 설정.

선택자 { text-shadow : [가로길이] [세로길이] [번짐정도] [색상] ; }

css text-shadow 속성1</h1 class="shadow1">

css text-shadow 속성2</h1 class="shadow2">

css text-shadow 속성3</h1 class="shadow3">

css text-shadow 속성4</h1 class="shadow4">

css text-shadow 속성5</h1 class="shadow5">

▼

h1 . shadow$ * 5 {css text-shadow 속성$ } 으로 간단히 작성 가능.
(만약 h1 id="shadow"인 경우, h1#shadow로 작성이 가능함.)

예)

white space
스페이스, 탭, 줄바꿈, 자동줄바꿈을 설정. (nowrap, pre, pre-wrap, pre-line)

text-overflow
텍스트를 줄바꿈하지 않았을 때, 초과되는 텍스트 처리. (clip, ellipsis)

overflow
요소 내의 컨텐츠가 커서 모두 보여주기 힘든 경우, 처리하는 속성.

(visible, hidden, scroll, auto)

예)

TIP

개발자는 꼼꼼해야 함. 대충대충 설렁설렁 마인드는 살아남기 힘듦.

과제

첫 페이지는 index.html로 하여서

이력서.HTML / 본인 이력서 만들기

뉴스기사.HTML / 관심있는 기사를 복사 (사진, 글)

즐겨찾기.HTML / 관심있는 사이트 4종 이상을 링크

총 3개의 웹페이지를 만들고,

첫 페이지에서 해당 페이지로 이동하는 하이퍼링크를 만들기.

저작자표시 비영리 변경금지

yj.cho

3/28(화) IT 국비교육(19일차) / 1.CSS의개요~3.CSS텍스트

0. CSS에 들어가기 전