[CSS] html 상 STYLE로 CSS 적용하는 법에 대한 간단한 스터디

2020. 11. 3. 09:55·OLD/Front End
반응형

 

 


CSS 란?

종속형 시트 또는 캐스캐이딩 스타일 시트(Cascading Style Sheets )이라고 불리며 마크업 언어가 실제로 표시되는

방법을 기술하는 언어로 HTML, XHTML에 주로 쓰인다. 

HTML 로 만들어진 문서의 텍스트 색상이나 크기, 이미지 크기나 위치, 표의 색상, 배치 방법 등 웹 문서의

디자인 요소를 담당하고 있다. 즉, 문서의 디자인 및 배치의 역할을 한다고 생각하면 편하다.

W3C 의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높아지는 형태로 발전하고 있다.

 

CSS 기술방식

보통 CSS 적용법에는 두가지가 있는데 첫째로는 내부기술 방식, 두번째로는 외부 기술방식이 존재한다.

이번에 간단하게 스터디하고자 하는 것은 내부 적용방식의 CSS 이다

 

내부 적용방식

내부 적용 방식은 또 두가지로 나뉘는데 HTML 문서 내 태그에 STYLE 을 이용하여 나타내는

inline 방식 (인라인 방식)과 <style> 태그를 활용하여 기술하는 방식이 있다.

 

인라인 css 기술방식
<style>태그를 활용한 기술 방식

 

출처 : 생활코딩 웹사이트

먼저, 샐러터(요소) 가 있으며, 그 안에 부여하고자 하는 속성과 속성에 대한 들이 들어있고,

끝에 ' ; ' 를 사용하여 속성부여를 완료한다. 

위의 의미는 h1 태그의 폰트 색은 블루, 폰트 사이즈는 12px 로 지정하겠다는 의미이다.

h1 태그 말고도 ID 및 CLASS 를 비롯한 여러 태그에 적용할 수 있다.

<span class="select" style="width:100px;height:40px;float:right;">

위처럼 HTML 문서라면 어느 태그에든지 간에 적용할 수 있다.

 

 

 

참고 링크

1. CSS 의 의미

ko.wikipedia.org/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8

conol.tistory.com/25

 

[CSS] CSS란??!

[ CSS란 무엇인가? ] CSS??! CSS 란 ‘ Cascading Style Sheet ’ 로 HTML로 만들어진 문서의 텍스트 색상이나 크기, 이미지 크기나 위치, 표의 색상, 배치방법 등 웹 문서의 디자인 요소를 담당하는 언어입

conol.tistory.com

 

반응형
저작자표시 비영리 동일조건 (새창열림)

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

[Kendo] kendo grid 내의 데이터 클릭시 해당 링크로 이동 template 사용  (0) 2020.10.26
[Kendo UI] [Kendo UI] Kendo UI grid 의 selectedKeyNames( ) 파라미터 사용  (0) 2020.10.26
[Kendo UI] [Kendo UI] Kendo UI grid nested json 처리하는 쉬운 법  (0) 2020.10.23
[Kendo UI] Kendo UI grid json 포멧 처리하는 법  (0) 2020.10.23
[Kendo UI] Kendo UI grid data source 하는 법과 주의할 것  (1) 2020.10.22
'OLD/Front End' 카테고리의 다른 글
  • [Kendo] kendo grid 내의 데이터 클릭시 해당 링크로 이동 template 사용
  • [Kendo UI] [Kendo UI] Kendo UI grid 의 selectedKeyNames( ) 파라미터 사용
  • [Kendo UI] [Kendo UI] Kendo UI grid nested json 처리하는 쉬운 법
  • [Kendo UI] Kendo UI grid json 포멧 처리하는 법
쟈누
쟈누
Ad astra per aspera
    반응형
  • 쟈누
    쟈누의 기록공간
    쟈누
  • 전체
    오늘
    어제
    • 분류 전체보기 (444)
      • AWS (31)
        • Glue (4)
        • S3 (1)
      • 클라우드 (0)
      • Data Engineering (37)
        • GitHub (10)
        • NiFi (11)
        • Spark (10)
        • Snowflake (0)
        • 머신러닝, AI (6)
      • 언어 (118)
        • 데이터 베이스 (42)
        • JAVA (9)
        • Python (34)
        • Java Script (15)
        • Linux (18)
      • 프로젝트, 인강 그리고 책 (30)
        • Spotify Project (7)
        • RASA chatbot Project (9)
        • Naver shopping Project (6)
        • 빅데이터를 지탱하는 기술 (8)
      • OLD (56)
        • IT 용어 사전 (13)
        • Front End (12)
        • Back End (31)
      • Error code 모음 (165)
        • 1. SQL errors (17)
        • 2. Hadoop errors (20)
        • 3. Linux Errors (14)
        • 4. Python errors (33)
        • 5. JAVA, Spring errors (41)
        • 6. Jav Script errors (10)
        • 7. Dev Tools errors (9)
        • 8. Git errors (8)
        • 9. Jenkins Errors (4)
        • 10. airflow Errors (2)
        • 11. Aws errors (7)
      • 개인 (1)
        • 책 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 블로그 관리
    • 글쓰기
  • 링크

  • 공지사항

    • 간단한 블로그 소개
  • 인기 글

  • 태그

    linux
    에러
    java
    설치
    install
    API
    json
    Git
    자바
    파이썬
    Spring
    SQL
    python error
    node
    MySQL
    NiFi
    AWS
    리눅스
    Python
    error
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
쟈누
[CSS] html 상 STYLE로 CSS 적용하는 법에 대한 간단한 스터디
상단으로

티스토리툴바