Front End/HTML

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

쟈누이 2020. 11. 3. 09:55
반응형

 

 


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

 

반응형

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

[HTML] 고급 암호화 표준 - aes  (0) 2020.09.28
[HTML] <input><label> 테그  (0) 2020.07.23
[html] HTML 공부한 내용 정리  (0) 2020.07.22