CSS
스타일 (스타일 시트 언어)
효율적인 UI (User Interface)를 통하여 UX (User Experience) 를 사용자에게 제공하는게 주 목적
정보전달력 & 가독성 향상 / 색약기능, 다크모드 등
HTML 안에서의 CSS 적용
>
HTML 태그에 직접 CSS 속성을 적용 할 수 있지만 헷갈릴 우려가 크고 구조와 내용을 담당하는 HTML과 디자인인 CSS를 분리하는 관심사 분리 측면에서 비권장 된다.
(즉 HTML 파일에서 구조와 틀에 관련된 내용만 작업하고 디자인은 CSS파일에서 한뒤 연결 해서 쓴다.) (3번 코드)
다만, CSS 코드가 길지 않으면 HTML 요소에 직접 CSS 속성 추가가 가능하다. (1번, 2번 코드)
1. Inline CSS style
<nav style="background: #f9f9f9; color: red">.....</nav>
2. Internal CSS style
// <style>......</style>
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightyellow; }
h1 { color: red; }
</style>
<head>
<body>
<h1> bck color is light yellow </h1>
<p> paragraph </p>
</body>
</html>
3. External CSS style
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css"> //css파일 링크
<head>
<body>
<h1> bck color is light yellow </h1>
<p> paragraph </p>
</body>
(mystyle.css)
body { background-color: lightyellow; }
h1 { color: red; }
CSS syntax의 구성
>
CSS의 selector는 연결되어있는 html의 selector를 따라간다. 즉 위의 코드는 HTML 파일안의 h1 selector를 찾아서 글자색 blue, 폰트 사이즈 12px로 바꾼다.
하지만 저렇게만 하면 파일 안의 모든 h1 sector들의 스타일을 바꿔버리기 때문에 다른 포스팅에 있는 id나 class를 이용해서 필요한 파트만 적용시킬 수 있다.
id 와 class 선택자
id vs class # 으로 적용 . 으로 적용 한문서에 하나의 태그에만 같은 이름으로 동일한 값을 갖는 요소가 많음 특정 태그에 이름 붙이는 용도 스타일 분류 용도 로고, 상단메뉴, 하단정도 등 반복적
danc9921.tistory.com
'web > CSS' 카테고리의 다른 글
| flex 컨테이너 (Parent) 의 속성 (0) | 2022.04.28 |
|---|---|
| Layout with Flex Container (0) | 2022.04.28 |
| BOX MODEL (0) | 2022.04.27 |
| FONT (0) | 2022.04.27 |
| Id & Class Selectors (0) | 2022.04.27 |