Border

보더는 마진과 패딩 사이에 있는 테두리다.

예를 들어 표를 만들 때 각 칸을 나누는 선이라던가..

보더를 만들때는 border-style 속성을 써주면 된다.

들어갈 수 있는 값으로는

solid : 일반 선

dotted : .... 같은 점선

dashed : ---- 같은 점선

groove : 입체적인 테두리를 만들어 버튼처럼 만들어준다

ridge : 입체적인 테두리를 만들어 액자처럼 만들어준다

등이 있다.

border-width 를 사용해서 테두리의 두께를 지정해 줄 수 있고, 

패딩과 마진과 비슷하게 상하좌우 두께를 따로 지정해줄 수 있다.

border-left-width : 보더 좌측 테두리

border-right-width : 보더 우측 테두리

border-top-width : 보더 위쪽 테두리

border-bottom-width : 보더 아래 테두리

border-color 는 당연하게도 테두리의 색깔을 지정해주는 속성이다

예시를 보자

CSS 예시

HTML 예시

출력 예시.

Margin 과 Padding

Margin 마진은 어떤것의 외부를 감싸고있는 영역이다.

Padding 패딩은 어떤것의 내부에 있는 영역이다.

그림으로 표현하자면 이렇게 된다.

위와 같은 코드를 작성한다면 아래와 같이 출력이 된다.

패딩과 마진은 기본적으로 상하좌우를 모두 같은 크기로 지정해주지만 각각 조절하는 방법도 있다.

margin-top : 마진 상단

margin-right : 마진 우측

margin-bottom : 마진 하단

margin-left : 마진 좌측

padding-top : 패딩 상단

padding-right : 패딩 우측

padding-bottom : 패딩 하단

padding-left : 패딩 좌측

font-family

css의 속성 중 하나

글꼴을 결정한다.

아무리 화려한 글꼴을 쓰더라도 웹사이트 제작자에게만 글꼴 파일이 있고

읽는 사람의 컴퓨터에는 없다면 글이 깨져서 보이게 된다.

그렇기 때문에 보통 웹사이트를 만들 때 비교적 '안전한' 글꼴 사용을 추천한다.

안전한 글꼴은 기본적으로 컴퓨터에 깔려서 오는 폰트 등을 포함한다.

안전한 글꼴(영어) 예시

Arial

Helvetica

Times New Roman

Times

Courier New

Courier

Verdana

Georgia

Palatino

Garamond

한글 예시:

굴림

굴림체

궁서

궁서체

돋움

돋움체

바탕

바탕체

휴면엽서체

이러한 폰트를 적용하는 방법은 다른 속성과 동일하다

font-family: Times;

만약 이름이 여러개의 단어라면 ""안에 묶어준다.

font-family: "Times New Roman";

여러개의 글꼴을 적어준다면, 첫번째 글꼴이 읽는사람의 컴퓨터에 없을 경우 다음 폰트를 자동으로 찾게 된다.

굳이 화려한 글꼴을 써야겠다면 이 방법으로 비상용 글꼴을 만들어주면 된다.

font-family: arial, helvetica, sans-serif;

font-size

글꼴의 크기를 정하는 속성

이 속성을 이용해서 문단이나 바디의 글씨 크기를 <h1> 이나 <h2> 보다 크게 만드는게 가능하다..

하지만 제목을 쓰는거라면 굳이 그러지 말고 그냥 <h1> <h2> 쓰자

font-weight

글씨의 굵기를 정하는 속성

색깔과 비슷하게 단어로 굵기를 지정할 수 있고(bold, normal, bolder, lighter)

숫자로도 지정할 수 있다.

100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900

font-weight: bold;

font-weight: 700;

위 두줄은 똑같은 내용이다

font-style

글씨체의 모양(글꼴 아님!!) 을 정하는 속성

normal 기본값

italic 아이탈릭 글꼴에 옆으로 기운 글씨

oblique 옆으로 기운 글씨

font-style: italic;

text-decoration

글 위, 아래, 또는 가운데에 줄을 그어준다.

위에 줄: text-decoration: overline;

아래 줄: text-decoration: underlineline;

CSS의 명령어는 html과 비슷한 명령어를 가지고 있다.

태그(Tag) 는 선택자(Selector) , 속성(Attribute) 은 속성(Property)으로 바뀐다

선택자는 CSS 속성을 부여할 수 있는 거의 모든 HTML 태그와 동일하다.

속성은 글꼴이나 글 색깔 등이 있다

font-size 폰트 크기

color 색깔

backgound-color 배경 색깔

값은 다양한 단위를 사용할 수 있다.

px (예: font-size: 20px;) 픽셀의 개수. 글씨는 20픽셀 크기가 된다.

em (예: font-size: 3em;) 미리 지정해둔 크기의 3배 크기의 글씨가 된다. Emphasis의 약자다

pt (예: font-size: 15pt;) 글씨 크기가 15포인트이다. 물리적으로 출력할 때 주로 쓰인다

% (예: height: 70%;) 원본 높이의 70퍼센트 높이로 출력된다

단, 값이 0일 때는 단위를 적지 않아도 된다.

글씨의 색깔 속성 값 또한 다양한 방법으로 표현할 수 있다.

첫번 째 방법으로는 색의 이름(red, blue 등) 을 적는 것이다.

하지만 이런 것으로는 모든 색깔을 표현할 수 없다.

이름으로 표현 가능한 색깔은 140개가 있고 밑의 링크에 목록이 있다.

https://www.w3schools.com/colors/colors_names.asp

두번째 방법으로는 rgb 값을 적는것이다.

color: rgb(숫자,숫자,숫자)

숫자에는 255 이하의 값이 들어간다

다른 방법으로는 퍼센트도 가능하다

마지막으로는 Hex 값을 입력하기다.

color: #000000

0은 16진수로 0-f 사이의 값으로 바꿔준다

예시: 

웹페이지 소스코드

css 코드

출력 예시

backgound-color 속성은 형광펜처럼 텍스트의 배경 색을 바꿔준다.

예시

Cascading Style Sheets

CSS는 html을 꾸밀 때 사용된다.

이렇게 기본적인 html 파일이 있다. 

바디 안에 문단과 링크가 있다.

이를 출력하면 이렇게 된다

바디 안에 style="color: pink" 를 넣어준다.

html 파일 안에 바로 꾸미는 내용을 넣어줄 때는 style 속성을 부여한다.

그 다음에 쌍따음표 안에 color: 색깔 을 넣어주면 되는데,

색깔을 단어로 표현할 수도 있고 hex나 rgb로도표현이 가능하다.

속성을 부여한대로 출력이 되었다.

핑크색이 아니라 연어색같다.

똑같이 문단과 링크에도 각각 다른색으로 색깔 속성을 부여해보자

문단 하나에만 색깔을 주었더니 하나만 색깔이 바뀐다.

속성이 없는 문단은 바디 속성을 받는다.

색깔 속성을 부여한 링크는 클릭해도 색깔이 변하지 않는다!

일일이 문단 하나하나에 속성을 부여하기는 귀찮다.

이럴 때는 헤드 태그 안에 <style> 태그를 넣어서 html 광역 속성을 만들어준다.

p{color: red;}

를 사용하면 html 전체 파일의 문단이 붉은색으로 바뀐다.

두줄 다 문단이라는 사실을 까먹었다.

문단 속성이 바디 속성을 씹어먹어서 body{color:pink;}가 생략되버렸다.

이렇게 html 안에 바로 css를 작성하는 방법도 있지만,

편의상 html파일과 css파일을 따로 만드는것이 나중에 수정하기 편하다.

위와같이 간단한 속성을 넣고 style.css로 저장해준다.

이름은 굳이 style이 아니어도 괜찮다

그리고 html의 헤드 태그 안에 링크를 걸어준다.

rel="stylesheet" 는 css임을 알려주는 속성이다

저장하고 다시 웹페이지를 불러주면 이렇게 css가 적용이 된것을 볼 수 있다