728x90

기본적으로 font로 시작하는 속성은 글꼴과 관련 있다고 생각하면 편하다.

 

  • font-family : 글꼴 지정
    font-family 속성은 <body>태그 스타일에서 한번 정의하면 문서 전체에 적용된다.
    웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시되기 때문에 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각해야 한다.
    글꼴 이름을 2개 이상 지정할 때에는 쉼표( , )를 넣어 구분한다. 만약 글꼴을 지정할 때 두 단어 이상으로 된 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰따옴표로 표시한다.


    font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
    <style>
  body {
    font-family: "맑은 고딕", 돋움, 굴림
  }​
</style>



  • font-size : 글자 크기 지정
    글자 크기의 단위는 픽셀(px), 포인트(pt), 백분율(%) 등으로 지정할 수 있다.

    절대 크기 : 브라우저에서 지정한 글자 크기
    상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
    크기 : 브라우저와 상관없이 글자 크기를 직접 지정
    백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%) 표시

    font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
     
    <style>
  body { 
    font-size: 20px; 
  }
</style>


     
    • 키워드를 사용한 글자 크기 지정
      다음과 같은 순서대로 크기가 커진다.

      xx-small < x-small < small < medium < large < x-large < xx-large

    • 단위를 사용한 글자 크기 지정
      CSS에서는 키워드보다 단위를 주로 선호한다. 
      모바일 기기까지 고려해야 하기 때문에 상대 크기 단위인 em이나 rem을 주로 사용한다. 
      ※1em = 16px, 12pt

      em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
      rem : 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
      ex : 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
      px : 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
      pt : 포인트라고 하며, 일반 문서에서 가장 많이 사용

    • 백분율을 사용하여 글자 크기 지정
      부모 요소의 글자 크기를 기준으로 계산하여 지정
      부모 요소의 글꼴 크기가 단위로 표현되어 있어야 사용 가능하다.


  • font-style : 이텔릭체로 글자 표시
    이텔릭체로 바꾸는 속성값은 italic과 oblique가 있다.
    italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면, oblique는 원래 글꼴을 단지 기울어지게만 표시한다.
    대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 웹에서는 주로 italic을 사용한다.

    normal : 기본값으로 일반적인 형태 표시
    italic : 이텔릭체로 표시
    oblique : 이텔릭체로 표시

    font-style: normal | italic | oblique
     
    <style>
  .italic {
    font-style: italic;
  }
</style>



  • font-weight : 글자 굵기 지정
    웹 문서를 작성할 때 자주 사용된다.
    미리 만들어진 예약어나 숫잣값을 사용해 굵기를 지정할 수 있다.

    normal : 기본값, 보통 굵기
    bold : 굵게
    bolder : 원래보다 더 굵게
    lighter : 원래보다 더 가늘게
    100 ~ 900 : 굵기를 숫자로 표현. 100은 가장 가늘게, 900은 가장 굵게
    400은 normal, 700은 bold에 해당한다.

    font-weight : normal | bold | bolder | lighter | 100 ~ 900 |
     
    <style>
  .accent {
    font-weight: 800;
  }
</style>

저작자표시

'웹 개발' 카테고리의 다른 글

[CSS] 텍스트 관련 스타일  (0) 2022.01.20
[CSS] 웹 폰트  (0) 2022.01.20
Web Developer 확장기능  (0) 2022.01.18
[CSS] 기본 선택자  (0) 2022.01.18
[CSS] 스타일과 스타일 시트  (0) 2022.01.11
728x90

웹 부라우저의 Web Developer 라는 확장 기능을 사용하면 스타일 개념을 쉽게 익힐 수 있다.
현재 크롬 브라우저와 파이어폭스 브라우저에서만 사용할 수 있다.

 

설치 방법

https://chrome.google.com/webstore/category/extensions

 

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com

크롬 웹 스토어 접속

 

 

왼쪽 검색 창에 'web developer' 검색하면 나오는 확장 프로그램 클릭

 

 

'Chrome에 추가' 클릭

 

 

'확장 프로그램 추가' 클릭

 

 

 

사용 예시

주소 표시줄 오른쪽 끝에 새로 만들어진 톱니모양 아이콘을 클릭하여 Web Developer 실행
(톱니모양 아이콘이 없다면 그 옆의 퍼즐모양 아이콘을 클릭한 후 보이는 Web Developer 를 고정)

 

 

CSS 탭에 있는 Disable All Styles 선택

 

 

사이트에 적용한 스타일이 모두 비활성화된 상태 즉, HTML 태그만 사용한 상태

 

 

반대로 해당 사이트에 적용한 스타일 소스를 보고싶다면 CSS 탭에 있는 View CSS 를 선택하면 된다.

 

 

저작자표시

'웹 개발' 카테고리의 다른 글

[CSS] 웹 폰트  (0) 2022.01.20
[CSS] 글꼴 관련 스타일  (0) 2022.01.18
[CSS] 기본 선택자  (0) 2022.01.18
[CSS] 스타일과 스타일 시트  (0) 2022.01.11
[CSS] CSS 소스 경량화  (0) 2022.01.11
728x90
선택자 (selector) :  웹 문서에서 어느 부분에 스타일을 적용할지 알려 주는 것이며, 선택자를 사용하는 방법은 미리 약속되어 있다

 

  • 전체 선택자 (universal selector) : 문서의 전체 요소에 스타일을 적용
    주로 모든 하위 요소에 스타일을 한꺼번에 적용하거나, 웹 브라우저의 기본 스타일을 초기화할 때 사용한다.

    * { 속성 : 값; ....}
     
    <style>
  * {
    margin: 0;
  }
</style>


  • 타입 선택자 (type selector) : 특정 태그를 사용한 모든 요소에 스타일을 적용
    '태그 선택자' 혹은 '요소 선택자' 라고도 한다.

    태그명 { 스타일 규칙 }
     
    <style>
  p {
    font-style: italic;
  }
</style>


  • 클래스 선택자 (class selector) : 특정 부분에만 스타일을 적용
    같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때 사용한다.

    클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 한다.
    이미 만들어둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명" 의 형식으로 사용하며,
    공백으로 구분해서 스타일 이름을 적는 것으로 하나의 요소에 클래스 스타일을 2개 이상 적용할 수 있다.

    .클래스명 { 스타일 규칙 }
      <style>
    .accent {
      border:1px solid #000;  
      padding:5px;  
    }
    .bg {
      background-color:#ddd;  
    }
  </style>
  ...
  <div>
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
  </div>​


  • id 선택자 (id selector) : 특정 부분에 스타일을 한 번만 적용
    클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다.
    주로 문서의 레이아웃과 관련된 스타일을 지정하거나, 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용한다.

    #아이디명 { 스타일 규칙 }
      <style>
    #container {
      width:500px;
      margin:10px auto;  
      padding:10px; 
      border:1px solid #000; 
    }    
  </style>
  ... 
  <body>
  <div id="container">
  ...
  </body>


  • 그룹 선택자 (group selector) : 같은 규칙을 사용하는 요소 묶기
    여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표( , )로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 된다.

    선택자1, 선택자2 { 스타일 규칙 }
       <style>
    h1, p {
      text-align: center;
    }
  </style>
저작자표시

'웹 개발' 카테고리의 다른 글

[CSS] 글꼴 관련 스타일  (0) 2022.01.18
Web Developer 확장기능  (0) 2022.01.18
[CSS] 스타일과 스타일 시트  (0) 2022.01.11
[CSS] CSS 소스 경량화  (0) 2022.01.11
CSS (Cascading style sheets)  (0) 2022.01.05
728x90

스타일 형식

선택자 { 속성1: 속성값1; 속성2: 속성값2; }

선택자 { 속성1: 속성값1;
            속성2: 속성값2;
}

선택자 : 스타일을 어느 태그에 적용할 것인지 알려주는 것
중괄호 { } : 스타일 정보
속성과 속성값 : 스타일 규칙 (세미콜론 ; 을 이용해서 다수의 스타일 규칙을 지정할 수 있다.)

 

 

스타일의 주석 표기

스타일의 주석을 표시할 때는 /* 와 */ 사이에 내용을 입력한다.

/* 여러 줄짜리
주석 */

/* 한 줄짜리 주석 */

 

 

 

스타일 시트

다수의 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어 놓은 것

 

스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과, 사이트 제작자가 만드는 사용자 스타일로 나뉜다. 그리고 다시 사용자 스타일은 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉜다.

 

 

브라우저 기본 스타일

CSS를 사용하지 않아도 웹 브라우저에서 미리 정해놓은 기본 스타일

 

예를들어 <h1> 태그를 사용한 텍스트는 글자가 크게 표시되고 텍스트 위쪽과 아래쪽에 약간의 여백이 생기는 등을 말한다.

 

 

 

인라인 스타일

간단한 스타일 정보를 적용하는 스타일

 

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

스타일을 적용하고 싶은 태그에 style 속성을 이용해 style="속성: 속성값;" 형태로 사용한다.

  <h1>레드향</h1>
  <p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>

 

 

내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 스타일

 

스타일을 여러 곳에 적용할 때 사용한다.

모든 스타일 정보는 <head> 태그 안에서 정의하고 <style> 과 </style> 태그 사이에 작성한다.

 

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    h1 {      
      padding:10px;
      background-color:#222;
      color:#fff;
    }
  </style>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>

 

 

외부 스타일 시트

별도 파일로 저장해 놓은 스타일

 

웹 사이트를 만들 때 웹 문서마다 똑같은 내부 스타일 시트로 만든다면 서버 공간과 시간이 낭비되기 때문에 일반적으로는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 두고 필요할 때 마다 가져와서 사용하며, '.css' 라는 파일 확장자를 사용한다.

 

<style> 태그를 사용하지 않고 <link> 태그를 통해 웹 문서와 외부 스타일 시트를 연결해서 사용한다.

 

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

 

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>

 

style.css

h1 {      
  padding:10px;
  background-color:#222;
  color:#fff;
}

 

저작자표시

'웹 개발' 카테고리의 다른 글

Web Developer 확장기능  (0) 2022.01.18
[CSS] 기본 선택자  (0) 2022.01.18
[CSS] CSS 소스 경량화  (0) 2022.01.11
CSS (Cascading style sheets)  (0) 2022.01.05
[HTML] 폼에서 사용하는 태그의 종류  (0) 2022.01.03

+ Recent posts

티스토리툴바