'Front-End/CSS'에 해당되는 글 2건

  1. 2019.08.26 HTML 문서에 CSS를 사용하는 방법들
  2. 2019.06.05 CSS 기초 문법

HTML 문서에 CSS를 사용하는 방법들

Front-End/CSS 2019. 8. 26. 14:08

 

 

 

 

 



  HTML문서에 CSS를 적용하는 3가지 방법


  1. 외부 스타일 시트 


  2. 내부 스타일 시트


  3. HTML 태그내에 스타일 지정

 

 

 

-외부 스타일 시트-

 

css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.

 



  <head>


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

  </head>

 

장점 : 홈페이지 전체의 스타일을 일관성있게 유지할 수 있고, 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.

 

단점 : 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다.

그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.

 

 

 

-내부 스타일 시트-

 

HTML 문서내에서 <head> 와 </head> 사이에 스타일을 정의하는 방법입니다.

 



  <head>


  <style type="text/css">

  <!--
  body {font-size:9pt;}
  //-->

  </style>

  </head>

 

HTML문서마다 스타일을 매번 지정해주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.

 

 

 

-HTML태그내에 스타일 지정-

 

위의 방법들에 비해서 적용범위가 더욱 좁하진 형태입니다.

 

스타일을 적용하고 싶은 HTML 태그안에서 정의하는 방법입니다.

 



  <p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

 

직관적으로 사용이 가능하다는 장점이 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

http://www.homejjang.com/07/how_to.php

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > CSS' 카테고리의 다른 글

CSS 기초 문법  (0) 2019.06.05
:

CSS 기초 문법

Front-End/CSS 2019. 6. 5. 12:20

CSS 사용이유 : HTML만 사용하면 문서의 디자인이 한정적이기 때문에 CSS를 사용한다.

 

-CSS 구문 구성-

 

CSS의 규칙은 선택자(Selector)과 선언 블록(declaration block)으로 구성된다.

(어떤거? (Selector) 를 어떻게? (Declaration) 꾸며줄 것인가?? 라는 의미)

 

 Selector       Declaration     Declaration

 h1  { color : red;   font-size : 10; }

 

위의 예제에서는 <h1> 태그 요소의 글자 색상은 빨간색으로 하고 글자 크기는 10으로 표시하라는 뜻이된다.

 

  
  color <- Property
  red <- Value


  font-size <- Property
  10 <- Value

 

 

첫번째 선택자(Selector) 은 HTML의 <DIV>나 <P> 태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다.

(쉽게 말해서 html의 어떤 요소를 꾸며줄건지 선택하는 부분)

 

두번째 선언블록은 하나 이상의 선언의 모음을 말하는데, 블록 안에 각 선언들은 세미콜론 ( ; ) 으로 끝마치거나

구분되고 시작과 끝은 중괄호 ({ })로 둘러싸여진다.

(자세한 속성에 대한 값들.. 예를 들면 색깔이나 높이 등등등... 그리고 선언들이 합쳐진것을 선언블록이라고 한다.)

 

블록안을 살펴보면 개별적인 선언 (declaration)은 속성(Property)과 (Value)으로 구성된다.

속성이란건 어떤 요소에 대한 속성을 말한다.

 

 

-em 단위-

 

em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 

 

간단한 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    
<style>
html { font-size: 16px; } //html요소의 크기를 16픽셀로 한다
   body { font-size: 1.5em; } //body 요소의 크기를 상위요소 크기의 1.5배인 24픽셀로 한다.
   .a { font-size: 2.0em; } //문단 요소의 크기를 상위요소(body) 크기의 2배인 48픽셀로 한다.
   </style>
 
      
  </head>
  <body>
    <p class="a">Lorem Ipsum Dolor</p>
  </body>
</html>
 cs

 

 

 

-rem 단위-

 

rem  단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정합니다. 위 예제에서

 

1
.a { font-size: 2.0em; }
 cs

 

에서 단위를 rem으로 바꾸면

 

1
.a { font-size: 2.0rem; }
 cs

 

글자 크기는 32픽셀이 됩니다.

(html 요소의 크기가 16픽셀이고 2.0 배를 해주었기 때문에 32픽셀이 된다.)

 

참고로 html 요소와 문단 요소 사이에 있는 body 요소의 크기는 영향을 미치지 않습니다.

 

 

 



  
 -정리-


  CSS는 선택자와 선언모음으로 구성이 되고 각 선언들은 속성과 값으로 구성된다.
 

 

 

 

출처

https://www.youtube.com/watch?v=ujzr0nxWb2E

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > CSS' 카테고리의 다른 글

HTML 문서에 CSS를 사용하는 방법들  (0) 2019.08.26
:
◀ PREV : [1] : NEXT ▶

티스토리툴바