[TIL] CSS_ 기초문법

8923 단어 TILCSSCSS

CSS(Cascading Style Sheets)란?
웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트로써, html에 수록된 내용을 디자인해주는 역할

html에서는 <style> </style>를 통해서 디자인 효과를 줬다.
style테그는 <head></head> 태그 사이에 존재해야하며 오프닝/클로징 태그로 이루어져있음. 그러나 일반적으로 스타일은 외부 스타일 시트에 작성하고 link로 연결해주는 편이 좋음

<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <h4>실행결과</h4>
</body>
</html>

실행결과

CSS 파일 연결하기

.css 파일을 불러오기 위해선 요소를 사용하여 파일을 연결해야함

<link>는 <head> 내에 위치.

  • href : css파일 주소 또는 경로
  • type : 문서유형. text/css 로 설정되어야 함.
  • rel : html과 css 파일 간의 관계를 설명. 스타일 시트에 링크하고 있으므로 값을 스타일 시트로 설정
<link rel="stylesheet" type="text/css" href="style.css">

만약 css 파일이 html 파일과 동일한 디렉토리 안에 저장되어 있으면

<link href="./style.css" type="text/css" rel="stylesheet">

Tag Name

css { }를 이용하여 html 요소를 선택. 예를들어 html에서 <p>를 선택하기 위해선
p { } 로 표현. 

p {
   font-family: Arial;
  }

​

Class Name

태그뿐만 아니라 class 요소도 선택가능하며 class 요소는 tag 요소보다 우선함.

html 에서 <p class="brand">Sole Shoe Company</p> 를 css로 가져오면
.brand { } 로 나타냄

​

Multiple Classes

하나의 html요소에 여러 css 클래스를 적용할 수 있음

html

<h1 class="title uppercase">Top Vacation Spots</h1>

css

.title {     
   color: teal;
 }   
.uppercase {    
  text-transform: uppercase;
}

​

ID name

id는 #을 이용하여 css 효과를 적용함 #id name {attribute}
class는 재사용이 가능하지만, id는 한 번만 사용 가능하며 가장 구체적임

즉 ID는 클래스의 모든 스타일을 재정의하고 class는 tag selector의 모든 스타일을 재정의함

html

<h1 class="title uppercase" id="article-title">Top Vacation Spots</h1>

css

#article-title {
  font-family: cursive;
  text-transform: capitalize;
}

​

Specificity

css 스타일의 순서를 결정하며 ID -> class -> tag 순임

​

Chaining Selectiors

예를들어 h1 요소에 대한 .special 이 있는 경우

h1.special { }

로 표시하면, p 요소에 special 클래스가 있더라도 스타일이 지정되지 않음

Nested Elements

<ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>

css 에서 .main-list li { }
로 사용하면 class 내에 있는 태그요소(li) 를 선택하여 css 스타일 적용
.class 내에 있는 요소가 밖의 요소보다 우선하기 때문에 css 적용 안됨

​

Multiple Selectors

반복되는 경우 , 를 통하여 코드를 줄일 수 있음

​

​

검지offer---끝에서 끝까지 체인 테이블 인쇄
Node에서.js에서 기본 ES 모듈 방법 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage