앱 만들기/CSS study

브라우저 기본 스타일 이란?

나도처음이야 2023. 5. 10.

'스타일'이란 HTML 웹 문서에 글꼴, 색상, 정렬 등의 디자인 요소들을 설정하는 것을 의미합니다.

그리고, 여러개의 스타일을 모아둔 것을 '스타일 시트'라고 부릅니다.

CSS(Cascading Style Sheet) 에는 2가지 스타일 이 있습니다.

'제작자(auther) 스타일' 과 '브라우 기본(default) 스타일'이며,  '제작자 스타일'은 3가지 로 구성 되어 있습니다. 

여기서 제작자 란 웹사이트 개발자가 되겠습니다.

 

1. 인라인 스타일

 

CSS 인라인 스타일 이란?

CSS 인라인 스타일 이란? 특정 태그에만 CSS 스타일을 적용하는 것을 말합니다. 인라인 이란 표현 그대로, 특정 태그 내부에 전역 속성인 style 지정해서 사용할 수 있습니다. 그렇기에 해당 요소에

soo0100.tistory.com

2. 내부 스타일 시트

 

 

CSS 내부 스타일 시트 란?

CSS 내부 스타일 시트 란? HTML 파일의 내부스타일 시트 예제를 만들어 보겠습니다. head 태그 안에 h1 과 p 태그에 적용될 스타일 정보를 코딩 합니다. 내부 스타일 시트에서 선언된 태그들은 모두

soo0100.tistory.com

3. 외부 스타일 시트

 

CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기

외부 스타일 시트 란? 외부에 별도의 파일로 저장된 스타일을 의미 합니다. 외부 CSS 파일을 사용하게 되면, 여러 웹문서에서 동일한 CSS 스타일 링을 한번에 적용할 수 있습니다. 즉, 내부 스타일

soo0100.tistory.com

브라우저 기본 스타일 이란,

개발자가 아무런 코드를 명시하지 않아도 브라우저에서 HTML 태그를 해석하여 보여주는 기본 타입을 의미합니다. 

하기와 같은 HTML 코드가 있고, 별도의 CSS 작업을 하지 않았다면 기본 브라우저 스타일로 보이게 됩니다.

<body>
  <h1>브라우저 기본 스타일 입니다.</h1>
  <p>
    브라우저 기본 스타일에서는 CSS 코딩이 없더라도 해당 브라우저에서 HTML 태그를 해석하고 <br>
    브라우저 자체의 스타일로 태그를 보여줍니다.
  </p>  
</body>

브라우저에서 결과를 확인해보겠습니다.

[브라우저 기본 스타일 브라우저 확인결과]

브라우저 기본 스타일에 개발자가 CSS 스타일을 추가 코딩을 한다면  

개발자가 의도한 개발자 스타일이 적용되는 것 입니다. 

span 태그내 style 전역속성을 추가하여 인라인 스타일을 적용한 코드 입니다.

<body>
  <h1>브라우저 기본 스타일 입니다.</h1>
  <p>
    브라우저 기본 스타일에서는 <span style="color:red">CSS 코딩이 없더라도</span> 해당 브라우저에서 HTML 태그를 해석하고 <br>
    브라우저 자체의 스타일로 태그를 보여줍니다.
  </p>  
</body>

개발자 인라인 스타일이 추가된 코드 결과값

 

브라우저 기본스타일은 영어 원본 문서에서는 "Default style" 이라고 표현 합니다.

즉, 브라우저 자체에서 기본으로 보여주는 타입 이라고 생각 하시면 됩니다.

오늘은 브라우저 기본 스타일을 알아보았습니다.

감사합니다. 

반응형

댓글