Jade_o.o
[css] css 공부 정리1_css 기본 정의 본문
CSS - Cascading Style Sheet
웹 페이지를 디자인하기 위해 사용하는 스타일 시트 언어
개발자 도구 F12
• 브라우저에서 개발 편의를 위해 제공하는 도구
• 지금 보고 있는 웹페이지의 HTML, CSS, Javascript 등을 볼 수 있다
• 해당 코드를 수정하여 자기 마음대로 변경이 가능
• HTML 구조 및 CSS 값 등을 확인 가능하므로 자주 사용 예정
• 특정 요소 코드 보기 / 크기 줄이기 / 모바일 버전 확인 가능
HTML5에서의 스타일 적용
• HTML5 이전 버전에서는 HTML 자체에서 Style을 컨트롤 할 수 있는 태그 <font>, <center> 등을 사용
• HTML은 결국 텍스트를 전달하는 문서 이자 문서의 구조
• HTML 본연의 기능이 아닌 디자인 적 요소가 추가되면서 많은 혼란을 야기
<body>
<p>안녕하세요</p>
<p style="color:blue; font-weight: bold; background-color: yellowgreen;">안녕하세요</p>
</body>
<body>
<h1>KDT</h1>
<h1 style="color:aqua; background-color: blueviolet;">KDT</h1>
<h1 style="background-color: greenyellow; width: 500px;">KDT</h1>
<h1 style="background-color: greenyellow; width: 500px; padding: 10px;">KDT</h1>
<h1 style="background-color: greenyellow; width: 500px; margin: 10px;">KDT</h1>
</body>
인라인(inline) 방식은 불편하다
• 각각 태그마다 전부 스타일을 적어줘야 함
• 아래에서 같은 스타일을 가진 태그를 사용하려고 해도 코드를 복붙 필요
• 즉, 재사용이 전혀 불가능!
내장 Style
• HTML의 <head> 태그 내부에 사용할 Style을 <style> 태그로 미리 선언하여 사용
• 태그에 같은 스타일 적용이 가능
링크 방식
• 모든 Style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
• 재사용? OK
• 스타일 변경 발생? OK
@import 방식
3가지 CSS 참조 방식
• 그런데 3가지 방식이 겹치면 어떻게 될까?
• 기본 룰은 가장 늦게 읽히는 것이 우선으로 적용 된다.
• 인라인 방식은 내장, 링크 방식에 무조건 우선!
• 내장, 링크 방식은 늦게 쓰여진 것이 우선!
'CSS' 카테고리의 다른 글
| [css] display:flex (2) | 2024.01.11 |
|---|---|
| [css] background 속성 (0) | 2024.01.11 |
| [css] position (0) | 2024.01.11 |
| [css] 박스 모델 속성 (0) | 2024.01.11 |
| [css] 문자 관련 속성 (0) | 2024.01.11 |
'CSS' Related Articles
more
