코딩 이야기

CSS 문법 정리 2일차 본문

CSS

CSS 문법 정리 2일차

별메아리 2023. 1. 2. 10:49
728x90

css 삽입 방법

외부 스타일 시트와 내부 스타일 시트

외부 스타일 시트는 말그대로 스타일시트를 외부에서 갖고온다.예) <link type="text/css" rel="stylesheet" href="mystyle.css">     태그       css시트의미   외부파일과의 관계       외부파일위치 url 형식

 

내부 스타일 시트는HTMl안에 CSS 정의 <style> 태그를 이용하여 <head>태그 안에 삽입<style>예)h1{  color:red;  }p { color:#0026ff; }</style>

 

각 요소에 스타일을 직접 적용하는 인라인 방식도 있는데 하나의 요소에만 적용되고 스타일시트의 장점을 읽기 때문에필요한 경우에만 사용하도록 하자.예)<body>

h1{  color:red;  }

p { color:#0026ff; }

</body>

 

하나의 요소에 대하여 외부,내부,인라인 스타일을 서로 다르게 지정할 경우 일반적으로 모든 스타일 시트는 다음과 같은

규칙에 의하여 하나의 가상적인 스타일로 통합된다.

우선순위는 인라인 스타일 시트가 가장높다 즉 인라인 스타일은 헤드섹션에 지정된 스타일과 외부 스타일 보다 우선적으로 적용된다.

 

CSS에서 가장 많이 사용되는 속성들

<color> 텍스트색상

<font-weight> 볼드체 설정

<padding> 요소의 가장자리와 내용 간의 간격

<font-size> 폰트의 크기

<background-color> 배경색

<border> 요소를 감싸는 경계선 

<font-style> 이탤릭체 설정

<background-image> 배경 이미지

<text-align> 텍스트 정렬

<list-style> 리스트스타일

 

색상

이름"red"

16진수#FF0000

10진수rgb(255,0,0)

퍼센트 rgb(100%,0%,0%)

폰트

font 한 줄에서 모든 폰트 속성을 설정할 때 사용

font-family 폰트 패밀리 설정

font-size 폰트의 크기 설정

font-style 폰트 스타일 설정

font-weight 폰트의 볼드체 여부 설정

font-variant 소문자를 대문자로 만드는 속성

텍스트의 폰트는 font-family 속성을 이용해서 설정,여러개의 폰트를 지정하는 것이 좋다 (예비용)

body {

              font-family:"Times BEw Roman", Times, serif;

            /*폰트 종류    가장선호하는폰트               마지막에는 꼭 기본적인 폰트 지정*/

}

*한글폰트의 경우 영문이름과 같이 적을 것.

폰트의 여러 가지 속성은 한 줄에서 모두 설정 가능 이것이 축약기법이다.

폰트의 순서는 font-style, font-variant ,font-weight,font-family순서이다.

여기서 폰트스타일과 폰트 패밀리는 필수 나머지는 선택사항

 웹 폰트

웹 폰트는 폰트를 웹 서버에 저장해 두었다가 필요할 때, 사용자의 웹 브라우저로 직접 전송하는 기법이다.

웹 폰트는 사용하기 위하여 @font-face 규칙을 사용한다. 

1.웹 폰트 구하기

2.폰트 형식 체크

3.폰트 파일 웹 서버 저장 url 기억하기

예)

<style>

    @font-family: "Vera Serif Bold";

        src:url("http://developer.moailla.org?@api/deki/files/2934/=veraSeBd.ttf");

}

body { font-family: "Vera Serif Bold" , serif }

</style>

텍스트 스타일 설정

텍스트 속성

<color> 텍스트 색상 지정

<direction> 텍스트 작성 방향 지정(가로,세로)

<letter-spacing>글자 간 간격

<line-height>텍스트 줄의 높이

<text-ailgn>텍스트의 수평 정렬

<text-decoration>텍스트의 장식 지정

<text-indent>텍스트의 들여쓰기 지정

<text-shadow>그림자 효과 지정

<text-transform>대소문자 변환 지정

<word wrapping> 영역안의 긴 단어 다음줄로 넘기기

다중 컬럼 (신문 처럼 텍스트를 배치 하는 것)

다중 컬럼 속성

column-count: 컬럼의 갯수

column-gap: 컬럼과 컬럼사이의 간격

column-rule: 컬럼과 컬럼 사이의 선 스타일

css 삽입 방법
외부 스타일 시트와 내부 스타일 시트
외부 스타일 시트는 말그대로 스타일시트를 외부에서 갖고온다.

예) <link type="text/css" rel="stylesheet" href="mystyle.css">

     태그       css시트의미   외부파일과의 관계       외부파일위치 url 형식



내부 스타일 시트는HTMl안에 CSS 정의 <style> 태그를 이용하여 <head>태그 안에 삽입

<style>

예)

h1{  color:red;  }

p { color:#0026ff; }

</style>



각 요소에 스타일을 직접 적용하는 인라인 방식도 있는데 하나의 요소에만 적용되고 스타일시트의 장점을 읽기 때문에

필요한 경우에만 사용하도록 하자.

예)

<body>

h1{  color:red;  }

p { color:#0026ff; }

</body>



하나의 요소에 대하여 외부,내부,인라인 스타일을 서로 다르게 지정할 경우 일반적으로 모든 스타일 시트는 다음과 같은

규칙에 의하여 하나의 가상적인 스타일로 통합된다.

우선순위는 인라인 스타일 시트가 가장높다 즉 인라인 스타일은 헤드섹션에 지정된 스타일과 외부 스타일 보다 우선적으로 적용된다.



CSS에서 가장 많이 사용되는 속성들
<color> 텍스트색상

<font-weight> 볼드체 설정

<padding> 요소의 가장자리와 내용 간의 간격

<font-size> 폰트의 크기

<background-color> 배경색

<border> 요소를 감싸는 경계선 

<font-style> 이탤릭체 설정

<background-image> 배경 이미지

<text-align> 텍스트 정렬

<list-style> 리스트스타일



색상
이름"red"

16진수#FF0000

10진수rgb(255,0,0)

퍼센트 rgb(100%,0%,0%)

폰트
font 한 줄에서 모든 폰트 속성을 설정할 때 사용

font-family 폰트 패밀리 설정

font-size 폰트의 크기 설정

font-style 폰트 스타일 설정

font-weight 폰트의 볼드체 여부 설정

font-variant 소문자를 대문자로 만드는 속성

텍스트의 폰트는 font-family 속성을 이용해서 설정,여러개의 폰트를 지정하는 것이 좋다 (예비용)

body {

              font-family:"Times BEw Roman", Times, serif;

            /*폰트 종류    가장선호하는폰트               마지막에는 꼭 기본적인 폰트 지정*/

}

*한글폰트의 경우 영문이름과 같이 적을 것.

폰트의 여러 가지 속성은 한 줄에서 모두 설정 가능 이것이 축약기법이다.

폰트의 순서는 font-style, font-variant ,font-weight,font-family순서이다.

여기서 폰트스타일과 폰트 패밀리는 필수 나머지는 선택사항

 웹 폰트
웹 폰트는 폰트를 웹 서버에 저장해 두었다가 필요할 때, 사용자의 웹 브라우저로 직접 전송하는 기법이다.

웹 폰트는 사용하기 위하여 @font-face 규칙을 사용한다. 

1.웹 폰트 구하기

2.폰트 형식 체크

3.폰트 파일 웹 서버 저장 url 기억하기

예)

<style>

    @font-family: "Vera Serif Bold";

        src:url("http://developer.moailla.org?@api/deki/files/2934/=veraSeBd.ttf");

}

body { font-family: "Vera Serif Bold" , serif }

</style>

텍스트 스타일 설정
텍스트 속성

<color> 텍스트 색상 지정

<direction> 텍스트 작성 방향 지정(가로,세로)

<letter-spacing>글자 간 간격

<line-height>텍스트 줄의 높이

<text-ailgn>텍스트의 수평 정렬

<text-decoration>텍스트의 장식 지정

<text-indent>텍스트의 들여쓰기 지정

<text-shadow>그림자 효과 지정

<text-transform>대소문자 변환 지정

<word wrapping> 영역안의 긴 단어 다음줄로 넘기기

다중 컬럼 (신문 처럼 텍스트를 배치 하는 것)

다중 컬럼 속성

column-count: 컬럼의 갯수

column-gap: 컬럼과 컬럼사이의 간격

column-rule: 컬럼과 컬럼 사이의 선 스타일
728x90
저작자표시 비영리 변경금지 (새창열림)

'CSS' 카테고리의 다른 글

레이아웃  (0) 2023.01.03
레이아웃  (0) 2023.01.03
CSS 마진,배경,링크,테이블  (0) 2023.01.03
CSS 박스 모델과 응용  (0) 2023.01.02
CSS문법 정리1일  (0) 2022.12.30
'CSS' Related Articles more
Comments