코딩 공부/HTML + CSS

[HTML+CSS] 07_CSS시작하기

chocbi 2020. 5. 9. 18:08

CSS 시작하기

#01. CSS 소개

1) CSS =Cascading Style Sheets

HTML 태그에 디자인을 입혀주는 기법
문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다.
- 모양 - HTML 문서 내의 글자의 종류, 크기, 색, 여백 등을 지정한다.
- 효과 - 글자의 정렬 방식을 결정하거나 박스의 테두리를 지정하는 등 다양한 효과를 줄 수 있다.
- 웹표준 - 사용자의 WebBrowser환경에 상관없이 일정한 화면을 보여줄 수 있다.

#02. HTML 태그의 분류

1) Block Level 요소 (문단)

한 개의 독립된 덩어리 = 하나의 큰 그룹
블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다.

블록라인요소

noframes ul/ ol/ li pre table / tbody thead tr / th / td

address blockquote center dir div dl

fieldset form h1~h6 hr menu p

블록라인요소
noframes	`ul/ ol/ li`	pre	table / tbody	thead	tr / th / td
address	`blockquote`	center	dir	`div`	dl
`fieldset`	`form`	`h1~h6`	hr	menu	`p`

2) Inline Level 요소(문장)

“”텍스트와 동경의 요소“”이기 때문에 “텍스트 레벨 요소”라 부르기도 한다.
블록 레벨 요소는 포함할 수 없으며, 인라인 레벨 요소는 반드시 블록 레벨 요소 안에 포함되어 있어야 한다.

인라인요소
`a`	abbr	`br`	botton	font	`i`
iframe	`img`	`input`	`label`	q	`select`
`span`	strike	`strong`	sub	`textarea`	`u`

3) 치환 요소

브라우저 화면상에 표시 될때 요소가 치환될 수 있는 종류의 요소.
치환 요소는 모두 인라인 레벨 요소이다.
- img | input | object | select | textarea

#03. HTML 문서에 CSS를 적용하는 방법

1) `<style>`태그를 사용하기

<head>
    <!-- 스타일 시트-->
    <style type="text/css">
        ... CSS 코드 작성 ...
    </style>
</head>

CSS는 일반적으로 태그 안에 위치한다.
<style>태그에는 태그 사이에 명시할 내용이 “text 기반의 css”라는 의미로 type=“text/css”속성을 명시한다.

2) 외부 파일 참조 방법

<head>
    <link rel="stylesheet" type="text/css" href="외부CSS파일의 경로" />
</head>

CSS 코드를 별도의 외부 소스파일에 작성해 두고 참조하는 방법
여러 페이지에서 재사용 할 수 있다는 장점이 있지만, 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 있다.

3) HTML 태그의 style 속성을 사용하는 방법

<div style="... CSS코드 내용...">
     ... 내용 ///
</div>

장점: 이 방법은 세밀한 조정이 가능하다.
단점: 전체적으로 소스코드의 양이 지나치게 많아지고 유지보수가 쉽지않다.(실무에서 거의사용 X)

#04. CSS의 기본 형식

1) CSS코드를 작성하는 기본 형식

selector {
속성1: 값; 속성2: 값; ... 속성n: 값;
}

selector는 {...}범위 안에 기술된 CSS구문이 적용될 대상을 의미한다.
속성이름은 실제 처리할 그래픽적인 속성으로 폰트,문단,크기,위치,색상 등을 지정하며, 값은 해당 속성에 적용할 내용이다.
이러한 구조로 HTML페이지의 특정 부분이나 여러 개의 요소를 selector로 지정하고 모양을 기술하는 것이 CSS의 표현 방식 이다.
사용 예 -
태그의 글자 색상을 빨간색,배경색상을 초록색으로 지정

h1 {
    color: #ff0000; 
    background: #00ff00;
}

#05. 기본 셀렉터

1) 기본 셀렉터의 종류

CSS에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그 이름,클래스 속성,id속성 에 대한 명시가 있다.

종류	표현방법	의미
태그 이름	selector{...CSS본문 ...}	특정 태그를 가리킨다.HTML내에 동일 태그가 존재할 경우 모든 태그 요소를 일괄 처리한다.
클래스	.selector{...CSS본문 ...}	셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTML 태그의 class속성에 점을 제외한 이름을 명시하 여 지정한다.태그의 종류를 가리지 않고 여러 요 소에 복수 지정이 가능하다. (재사용 목적) 이 경우 selector의 이름은 자유롭게 지정한다.
id	#selector{...CSS본문 ...}	셀렉터 이름 앞에 (#)을 붙여 표시하고 HTML태 그의 id속성에 샵(#)을 제외한 이름을 명시하여 지정한다.Id속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.(고유특성 명시) 이 경우 selector의 이름은 자유롭게 지정한다.

2) 조합형 셀렉터

tag.class {속성1:값; 속성2:값; ... 속성n: 값;}

tag#id {속성1:값; 속성2:값; ... 속성n: 값;}

id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태.
셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우선적으로 적용된다.

01-기본셀렉터.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <!--스타일시트-->
    <style type="text/css">
    /** 태그 셀렉터 */
    h2 {
        color: #0000FF;
    }

    /** 클래스 셀렉터 - HTML태그의 class 속성과 연결된다. */
    .myclass {
        color: #ff0000;
    }

    /** 아이디 셀렉터 - HTML 태그의 id속성과 연결된다. */
    #myid {
        color: #00FF00;
    }

    /** 조합형 - 두 조건이 충족하는 경우만 적용된다. */
    h2.myclass {
        color: #008000;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <div>
        <h1>CSS 셀렉터를 알아봅시다.</h1>
        <p>
            셀렉터란? - CSS가 적용될 대상을 지정하는 방법.
        </p>
        <h2>태그 셀렉터</h2>
        <h2 class="myclass">클래스 셀렉터</h2>
        <p class="myclass">서로 다른 여러 개의 요소에 적용할 수 있다.</p>
        <h2 id="myid">아이디 셀렉터</h2>
        <p class="myclass">태그+아이디, 태그+클래스 형식으로 조합이 가능.</p>
    </div>
</body>

</html>

출력결과

#06. 여러 개의 요소를 일괄 지정하기

1) AND의 의미를 갖는 콤마(,) 사용하기

여러 개의 요소에 동일한 CSS 내용을 적용하기 위해 셀렉터를 콤마(,)로 구분하여 일괄 처리 할 수 있다.
태그, class,id등 모든 형태의 CSS셀렉터가 가능하다.

02-복수지정셀렉터.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <!-- 스타일시트 -->
    <style type="text/css">
    h1,
    h2,
    .myclass,
    #myid {
        color: #ff6600;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <div>
        <h1>복수 지정 셀렉터</h1>
        <h2>여러개의 셀렉터를 콤마(,)로 연결한 형태</h2>
        <p>
            AND의 의미를 갖는다.
        </p>
        <hr />
        <div>
            <span calss="myclass">CSS</span>는
            <span class="myclass">HTML</span>에
            <strong id="myid">디자인</strong>을 입혀 줍니다.
        </div>
    </div>
</body>

</html>

출력결과

#07. 특정 상황에 따라 반응하는 가상클래스

1) 가상클래스

HTML태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS셀렉터
가상클래스는 CSS의 셀렉터 이름 뒤에 “:상황”의 형식으로 명시한다.

명시방법	의미
:link	링크의 기본 상태
:active	요소 위에서 마우스가 눌러져 있는 상태
:hover	요소에 마우스가 올라가 있는 상태
:visited	방문했던 경험이 있는 링크
:focus	요소에 포커스가 지정된 상태
:checked	체크박스나 라디오버튼등이 체크된 상태
:selected	드롭다운에서 선택된 요소

03-가상클래스(1).html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <!-- 스타일시트-->
    <style type="text/css">
    /**
        link: 링크의 기본 상태
        active: 어떤 요소에 대하여 마우스가 눌러진 상태
        visited: 방문한 경험이 있는 링크
        hover: 어떤 요소에 대하여 마우스가 올라간 상태
        */
    a:link,
    a:visited {
        color: black;
    }

    a:hover {
        color: blue;
    }

    a:active {
        color: green;
    }
    </style>
</head>

<body>
    <div>
        <h1>가상클래스</h1>
        <p>
            특정 요소가 어떤 상황에 직면했을 경우 동작하는 CSS
        </p>
        <p>
            <a href="http://itpaper.co.kr">웹 페이지 바로가기</a>
        </p>
    </div>
</body>

</html>

출력결과

04-가상클래스(2).html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <!-- 스타일시트 -->
    <style type="text/css">
    li {
        background: yellow;
    }

    li:hover {
        background: orange;
    }

    li:active {
        background: green;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <ul>
        <li><a href="http://www.naver.com">네이버</a></li>
        <li><a href="http://www.daum.net">다음</a></li>
        <li><a href="http://www.google.com">구글</a></li>
    </ul>
</body>

</html>

출력결과

주황색은 hover, 초록색은 click했을때

[HTML+CSS] 07_CSS시작하기

CSS 시작하기

#01. CSS 소개

1) CSS =Cascading Style Sheets

#02. HTML 태그의 분류

1) Block Level 요소 (문단)

2) Inline Level 요소(문장)

3) 치환 요소

#03. HTML 문서에 CSS를 적용하는 방법

1) <style>태그를 사용하기

2) 외부 파일 참조 방법

3) HTML 태그의 style 속성을 사용하는 방법

#04. CSS의 기본 형식

1) CSS코드를 작성하는 기본 형식

태그의 글자 색상을 빨간색,배경색상을 초록색으로 지정

#05. 기본 셀렉터

1) 기본 셀렉터의 종류

2) 조합형 셀렉터

01-기본셀렉터.html

출력결과

#06. 여러 개의 요소를 일괄 지정하기

1) AND의 의미를 갖는 콤마(,) 사용하기

02-복수지정셀렉터.html

출력결과

#07. 특정 상황에 따라 반응하는 가상클래스

1) 가상클래스

03-가상클래스(1).html

출력결과

04-가상클래스(2).html

출력결과

1) `<style>`태그를 사용하기