[ CSS ] 인라인 스타일 이해(Inline Style)
2024. 4. 1. 22:38ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
[ 인라인 스타일(Inline Style) ]
CSS( Cascading Style Sheets)에서 inline style은 HTML 요소에 직접 스타일 속성을 지정하는 방법이다.
- 모든 태그는 style 속성이 존재한다
- 작성한 태그에만 영향을 미친다
- 디자인을 여러 개 하고 싶은 경우
- 디자인을 여러 개 하고 싶은 경우 세미콜론(;)으로 구분해야 한다
- (단점) 태그별로 디자인을 모두 해야한다
유지보수 측면에서 비효율적일 수 있음
└ 외부 CSS 파일이나 내부 <style> 태그를 사용하여 스타일을 정의하는 것이 권장 - 어떤 방식의 디자인보다도 우선순위가 높다(디자인 수정 시 사용)
[ 인라인 스타일 적용 예 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일</title>
</head>
<body>
<h1 style="color:lightcoral;">Hello CSS Design</h1>
<h1 style="color:cornflowerblue;">Hello CSS Design</h1>
<h1 style="color:deeppink; background-color: black;">Hello CSS Design</h1>
<h1 style="color: lightpink; text-decoration: underline;">Hello CSS Design</h1>
<h1 style="border: 1px solid black">Hello CSS Design</h1>
<h1 style="color: palevioletred;">Hello CSS Design</h1>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] 테꾸. 테이블 태그 꾸미기 (0) | 2024.04.11 |
|---|---|
| [ CSS ] 미리 정해두고 꺼내 먹기 (0) | 2024.04.04 |
| [ CSS ] form 디자인을 해보자 - 인스타그램 로그인 화면 디자인 해보기 (0) | 2024.04.03 |
| [ CSS ] form 디자인을 해보자 (0) | 2024.04.03 |
| [ CSS ] <Style> 태그를 활용해 디자인 해보자 (+ <input> 태그) (0) | 2024.04.02 |