2. CSS

2. CSS

2022. 10. 23. 16:01ㆍHTML과 CSS

1. CSS

2. CSS 사용방법

2.1. 인라인 스타일
2.2. 스타일 엘리먼트
2.3. 외부파일 가져오기
2.3.1. 외부파일 연결하기
2.3.2. 외부파일 연결확인 법
2.3.3. 외부파일 연결하여 css 적용하기
2.4. 기본적인 선택자(selector)

3. 마진(margin)과 패딩(padding)

3.1. 마진(margin)
3.2. 패딩(padding)
3.3. 마진(margin)과 패딩(padding)의 사용팁
3.4. 보더(border)

1. CSS

- Cascading Style Sheet의 약자

- HTML은 데이터를 구분해주는 역할. 즉, 기본 골격만 구성한다

- CSS를 사용함으로써 HTML을 꾸며줄 수 있다

- CSS는 HTML과 같이 사용해야한다, 단독으로 사용할 수 없다

2. CSS 표현방식

- CSS를 적용하는 방법은 인라인 스타일, 스타일 엘리먼트, 외부파일 가져오기가 있다

2.1 인라인 스타일

- 태그안에 style 속성을 부여하여 CSS를 적용한다

- 구분자는 콜론(:)과 세미콜론(;)을 사용하여 구분한다

- 세미콜론(;)으로 다음에 올 속성과 구분한다

ex) <div>에 인라인 스타일로 "배경: 은색; 넓이: 300px; 높이: 50px" 의 CSS 적용

<div style="background: silver; width: 300px; height: 50px;">인라인 스타일</div>

2.2 스타일 엘리먼트

- <head>부분에 <style>을 사용하여 css를 적용한다

- <body> 영역에 있는 태그를 지정하기 위해 선택자(selector)를 사용한다

- 선택자를 사용하여 원하는 태그에 css효과를 줄 수 있어 인라인 스타일보다 관리가 용이하다

- '선택자 { 속성: 속성값; }'의 형식을 갖는다

ex) 스타일 엘리먼트를 사용하여 A라는 아이디를 부여, 선택자로 A를 선택해 <div>에 "넒이 100px; 높이 50px; 배경색 빨강;"을 적용

<html>
	<head>
    	<style>
            #A {
                width: 100px;
                height: 50px;
                background: red;
            }
        </style>
    </head>
	<body>
    	<div id="A"> A </div>
    </body>
</html>

2.3 외부파일 가져오기

- css 확장자를 가진 파일을 사용한다

2.3.1 외부파일 연결하기

- <link/>를 사용해 css 파일과 연결한다

<link href="css파일경로" type="text/css" rel="stylesheet"/>

- 위와 같이 사용하며 href 속성에는 css파일의 절대경로 혹은 상대경로를 적어준다

- type속성과 rel속성은 각각 "text/css"와 "stylesheet"가 고정값으로 들어간다

2.3.2 외부파일 연결확인방법

- html에 css를 적용하여 확인한다

- 브라우저에 들어가 F12를 눌러 네트워크에 들어가 상태창의 숫자가 200 이거나 304이면 정상, 404이면 비정상이다

2.3.3 외부파일 연결하여 css 적용하기

- css 파일에 엘리먼트 스타일과 마찬가지로 '선택자 { 속성: 속성값; }' 형식을 갖는다

- 정해진 형식으로 css를 작성하고 저장을 누르면 선택된 태그에 css가 적용된다

ex) html파일과 css파일을 <link/>로 연결하여 "넓이 100px; 높이 50px; 배경색 파랑;"을 적용

-html파일-
<html>
	<head>
    	<link href="CCS파일경로" type="text/css" rel="stylesheet"/>
    </head>
	<body>
    	<div id="A">
        	A
        </div>
    </body>
</html>

--------------------------------------------------------------------------

-css파일-
#A {
    width: 100px;
    height: 50px;
    background: blue;
}

2.4 기본적인 선택자(selector)

선택자	설명
*	모든 태그 선택
tag(태그명)	해당 태그 선택
#id(아이디)	해당 아이디를 가진 태그 선택
.class(클래스)	해당 클래스를 가진 태그들 선택
A > B	A의 하위 태그 B 선택
A , B	A 및 B 선택

- 위의 선택자들을 서로 조합하여 원하는 태그를 선택할 수 있다

- 위에 나온 선택자들 말고도 다른 선택자들이 존재한다

3. 마진 (margin)과 패딩(padding)

- 요소 선택기를 사용하여 아무 영역이나 클릭하게되면 패딩(padding), 마진(margin)과 보더(border)로 구성되어 있는 것을 확인할 수 있다

- 보더영역은 컨텐츠의 경계에 위치하는 영역이다

- 보더영역을 기준으로 안쪽영역을 패딩, 바깥쪽 영역을 마진으로 구분한다

마진(margin)	보더(border)	패딩(padding)

<그림 5>

3.1 마진(margin)

- 컨텐츠 외부 영역에 위치하며, 박스와 박스의 간격을 띄우는데 사용된다

- 마진은 기본적으로 'margin: 위 오른쪽 아래 왼쪽' 시계방향 순으로 거리가 적용된다

- 큰 레이아웃을 나누기보다 작은 레이아웃을 구성하기에 적합하다

ex) 마진을 시계방향으로 10px 20px 30px 40px 준 경우

margin: 10px 20px 30px 40px;

3.2 패딩(padding)

- 컨텐츠 내부 영역에 위치하며, 컨텐츠 경계선에서부터 컨텐츠의 간격을 띄우는데 사용된다

- 패딩도 마진과 마찬가지로 'padding: 위 오른쪽 아래 왼쪽' 순으로 적용된다

- 큰 레이아웃을 구성하기에 적합하다

- 컨텐츠의 영역 시작지점을 옮기고 싶을때 사용하기 적합하다

- 패딩을 사용하게되면 구성된 크기를 늘려 컨텐츠를 안쪽으로 넣는 개념이므로 'box-sizing: border-box;'와 함께 사용한다

ex) 패딩을 시계방향으로 10px 20px 30px 40px 준 경우

padding: 10px 20px 30px 40px

ex) 패딩을 시계방향으로 10px 20px 30px 40px 준후 box-sizing을 적용한 경우

padding: 10px 20px 30px 40px;
box-sizing: border-box;

3.3 마진(margin)과 패딩(padding)의 사용팁

- 컨텐츠의 위치를 안쪽으로 옮기고 싶다고 가정했을때, 마진은 각각의 요소에 적용해야하지만, 패딩은 상위 요소에 패딩을 주어 하위 요소의 시작점을 한번의 사용으로 안쪽으로 옮길 수 있다. 따라서, 패딩으로 큰 레이아웃을 구성하고 마진으로 세세한 레이아웃을 구성하는 것이 효율적이다

3.4 보더(border)

- 컨텐츠의 경계선을 표현한다

- 사용방법은 'border: 크기 스타일 색상;' 순으로 사용한다

- 패딩(padding)과 마찬가지로 'box-siziing: border-box;'와 함께 써주면 좋다

border: 5px dashed red;

'HTML과 CSS' 카테고리의 다른 글

6. 여러가지 기능 구현하기 - 2 (0)	2022.10.31
5. 여러가지 기능 구현하기 - 1 (0)	2022.10.29
4. 홈페이지 메뉴 상자 만들어보기 (0)	2022.10.26
3. HTML과 CSS (0)	2022.10.25
1. HTML과 태그들 (0)	2022.10.20

memo