[HTML5 & CSS3] CSS 기초

▶ CSS

css를 이용하면 html로 작성된 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있다. (태블릿, 휴대폰 등)

모든 스타일 정보는 <head>~</head> 사이에 정의 할 것.

* 내부 스타일 시트

<style>
       section {
              width:500px;  /* 너비 */
              padding:15px;  /* 테두리와 내용 사이의 여백 */
              border:5px solid gray;  /* 테두리 스타일 */
       }
</style>

<적용 전▼>

<적용 후▼>

* 외부 스타일 시트

<link rel="stylesheet" href="외부 스타일 파일 경로">

* 인라인 스타일

스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것.

* 전체 선택자 - 모든 요소에 스타일 적용하기

전체 선택자는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다.

주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다.

전체 선택자로는 *를 사용한다.

또한 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다.

* {
     margin: 0;
     padding: 0;
}

* 태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

p {
     font-size: 12px;
     font-family: 돋움;
}   /* 모든 p 요소, 즉 모든 문단에 스타일이 적용 */

* 클래스 선택자 - 특정 부분에 스타일 적용하기

클래스 선택자는 태그 대신 클래스 이름을 사용하는데 클래스 이름은 나중에 기억하기 쉬운 이름을 임의로 지정하면 된다.

태그 이름 겹치면 안됨.

클래스 이름 앞에는 반드시 마침표(.)를 붙여야 함.

<style>
        .bluetext {  /* 클래스 이름 지정 */
                 color:blue;
        }
</style>

<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책<br>
....
<p class="bluetext">정보의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와 주는 책. 손에 잡히는 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.

<적용 후▼>

* id 선택자 - 특정 부분에 스타일 적용하기

클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용한다.

마침표(.) 대신 # 기호를 사용한다.

클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서 안에서 여러 번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있다는 것이다.

* 그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기

선택지를 이용해 스타일을 정의하다보면 여러 선택자에 같은 스타일이 사용되는 경우가 있다. 이럴 때는 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한 번만 정의하면 소스가 간단해진다.

h1, h2 {
      text-align:center;
}

▶ 캐스케이딩 스타일 시트(CSS)

* 캐스케이딩의 의미

CSS에서 'C'는 캐스케이딩의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다.

스타일 간의 충돌을 막기 위한 방법.

① 스타일 우선순위

어떤 스타일을 먼저 적용할 것인지 결정하는 규칙

-얼마나 중요한가 ?

-적용 범위가 어디까지인가 ?

-소스에서의 순서

② 스타일 상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데, 이것을 '스타일 상속'이라고 한다.

▶ CSS3와 CSS 모듈

* CSS3와 브라우저 접두사

아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사를 붙여 브라우저별로 구분 해야 한다.

-주로 사용하는 접두사

-webkit-

-moz-

-o-

-ms-

▶ 글꼴 관련 스타일

* font-family 속성 - 글꼴 지정하기

font-family 속성은 상속되기 때문에 <body> 태그 스타일에서 일단 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용된다.

p { font-family:굴림; }

body { font-family:"맑은 고딕", 돋움, 굴림 }  /* 지정된 글꼴이 없을 경우에 대비해 2, 3번째 글꼴도 지정 */

* @font-face 속성 - 웹 폰트 사용하기

웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식.

* font-size 속성 - 글자 크기 조절하기

단위 : px, em

* font-weight 속성 - 글자 굵기 지정하기

font-weight: normal | bold, lighter, bolder | 100~900

* font-variant 속성 - 작은 대문자로 표시하기

font-variant: normal | small-caps

* font-style 속성 - 글자 스타일 지정하기

font-style: normal | italic | oblique

* font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기

<p style="font:caption">~</p>  /*캡션에 어울리는 글꼴 스타일 */
<p style="font:icon">~</p>  /*아이콘에 어울리는 글꼴 스타일 */
<p style="font:menu">~</p>  /*드롭다운 메뉴에 어울리는 글꼴 스타일 */
<p style="font:message-box">~</p>  /*대화 상자에 어울리는 글꼴 스타일 */
<p style="font:small-caption">~</p>  /*작은 캡션에 어울리는 글꼴 스타일 */
<p style="font:status-bar">~</p>  /*상태표시줄에 어울리는 글꼴 스타일 */

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[HTML5 & CSS3] 문단 스타일 (0)	2021.02.03
[HTML5 & CSS3] CSS 기초 - 텍스트 스타일 (0)	2021.02.03
[HTML5 & CSS3] 숙제 (페스티벌 페이지 만들기) (0)	2021.02.03
[HTML5 & CSS3] 폼 관련 태그들 - 여러 데이터 나열해 보여주기 (0)	2021.02.02
[HTML5 & CSS3] 상품 주문서 작성하기 (0)	2021.01.30

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] CSS 기초

▶ CSS

* 내부 스타일 시트

* 외부 스타일 시트

* 인라인 스타일

* 전체 선택자 - 모든 요소에 스타일 적용하기

* 태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기

* 클래스 선택자 - 특정 부분에 스타일 적용하기

* id 선택자 - 특정 부분에 스타일 적용하기

* 그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기

▶ 캐스케이딩 스타일 시트(CSS)

* 캐스케이딩의 의미

▶ CSS3와 CSS 모듈

* CSS3와 브라우저 접두사

▶ 글꼴 관련 스타일

* font-family 속성 - 글꼴 지정하기

* @font-face 속성 - 웹 폰트 사용하기

* font-size 속성 - 글자 크기 조절하기

* font-weight 속성 - 글자 굵기 지정하기

* font-variant 속성 - 작은 대문자로 표시하기

* font-style 속성 - 글자 스타일 지정하기

* font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] CSS 기초

▶ CSS

* 내부 스타일 시트

* 외부 스타일 시트

* 인라인 스타일

* 전체 선택자 - 모든 요소에 스타일 적용하기

* 태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기

* 클래스 선택자 - 특정 부분에 스타일 적용하기

* id 선택자 - 특정 부분에 스타일 적용하기

* 그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기

▶ 캐스케이딩 스타일 시트(CSS)

* 캐스케이딩의 의미

▶ CSS3와 CSS 모듈

* CSS3와 브라우저 접두사

▶ 글꼴 관련 스타일

* font-family 속성 - 글꼴 지정하기

* @font-face 속성 - 웹 폰트 사용하기

* font-size 속성 - 글자 크기 조절하기

* font-weight 속성 - 글자 굵기 지정하기

* font-variant 속성 - 작은 대문자로 표시하기

* font-style 속성 - 글자 스타일 지정하기

* font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바