▶준비물

· 불필요하게 중복된 코드가 많은 상태

h1 {
  border-width: 5px;
  border-color: green;
  border-style: solid;
}
a {
  border-width: 5px;
  border-color: green;
  border-style: solid;
}

 

▶줄이기

h1, a {
      border-width: 5px;
      border-color: green;
      border-style: solid;
    }

 

▶더 줄이기

h1, a {
      border:5px solid green;
    }

 

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 선택자(Selector), css의 속성(Property)  (0) 2021.06.25
[css] html문서에서 css 연결하기  (0) 2021.05.13
[css] css 시작하기  (0) 2021.05.10

 

▶생활코딩 WEB2 CSS 5 - 혁명적 변화

 

▶선택자

· 선택자(Selector)

 

· 선언문(Declaration)

 

· 속성(Property)

 

· 속성값(Value)

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] html문서에서 css 연결하기  (0) 2021.05.13
[css] css 시작하기  (0) 2021.05.10

 

css 코드가 짧을 경우(html 문서 내에서 해결하고자 할 때)

 

html문서 내에서 <style></style>태그를 이용한다.

 

css 코드가 길 경우(css 파일을 연결하고자 할 때)

 

html문서에서 스크립트 파일로 저장된(별도의 파일로 저장된) css파일(.css)을 연결시키고자 할 때

html문서에서 <link>태그의 href속성, 즉 <link href>를 이용해서 css파일을 연결시킨다.

· <link rel="stylesheet" href="css파일경로">

 

▶예시

· <link>태그 + href속성

· <link rel="stylesheet" href="anniversary-calculator.css">

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>aniversary calclulator</title>
	<link rel="stylesheet" href="anniversary-calculator.css">
</head>
<body>
...

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] 선택자(Selector), css의 속성(Property)  (0) 2021.06.25
[css] css 시작하기  (0) 2021.05.10

 

CSS(Cascading Style Sheet)

 

종속형 스타일 시트.

웹 브라우저에 정보를 나타내기 위해서는  html을 이용함

이 html을 시각적으로 꾸며주는 역할을 하는 것이 css.

 

웹 브라우저에 관한 디자인 작업시, html문서를 건드릴 필요 없이 css만으로 작업이 가능하다.

 

도서관 프로그래밍 코너에서 서성일 때

css 모음집이라는 두꺼운 책을 본 적이 있다.

당시에는 css 지식 자체가 방대하고 무거워 이에 비례해 두께가 두꺼운 게 아닐까, 하고 생각했는데

지금에 와서는 디자인적 요소에 따른 여러가지 예시가 많을 수 밖에 없기에 두꺼웠던 거라고 생각한다.

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] 선택자(Selector), css의 속성(Property)  (0) 2021.06.25
[css] html문서에서 css 연결하기  (0) 2021.05.13

+ Recent posts

티스토리툴바