CSS의 등장, 효용, 기본 문법, 속성, 선택자

7459 단어 WEB2생활코딩웹WEB2

HTML을 이용하면 전 세계의 누구나 볼 수 있는 전자 문서를 만들 수 있었음
+CSS를 이용하면 웹페이지를 아름답고 보기 좋게 만들 수 있음

CSS의 등장

HTML을 이용한 디자인

font

  • 현재는 쓰이지 않는 태그

font

<font color="red">font</font>
  • font 태그는 포함하는 글자에 대해 검색엔진에 제공할 어떠한 정보(제목이라든가, 링크라든가…)도 가지고 있지 않고, 단지 디자인을 나타낼 뿐임
    → 정보를 나타내는 코드와 그렇지 않은 (디자인을 나타내는) 코드가 섞여 웹 페이지가 정보로서의 가치를 상당히 잃게 될 수 있음

📌 HTML 주석 처리

<!-- 주석 처리할 내용 -->

style

  • 웹 브라우저가 처음 나왔을 때 웹 브라우저는 HTML만을 해석해서 처리하는 프로그램이었음
    → 웹 브라우저는 기본적으로 코드를 HTML이라고 여김
  • CSS는 HTML과는 완전히 다른 컴퓨터 언어

✅ <style> 컴퓨터가 CSS의 문법에 맞게 해석해서 처리하게 할 코드 </style>
➡ <head> 코드 안에 넣어줄 것!

a {
color: red;
text-decoration: none;
}

→ 해당 웹 페이지에 있는 a 태그에 대해 font color를 red로!
📌 위 코드에서 a: 선택자 → 중괄호{} 안의 효과(declaration)를 웹 페이지에서 어떤 태그에게 줄 지 선택
📌 style 태그에서 모든 효과 뒤에는 세미콜론; 써줄 것

CSS의 효용

  • 코드의 중복을 제거하여 웹 페이지의 크기를 줄일 수 있음
  • 코드의 가독성이 높아지므로 유지보수하기 쉬워짐
  • 디자인과 관련된 코드는 CSS로 <style> 태그 안에 가둬 분리시켜줌 → HTML의 정보로서의 가치 ↑

CSS의 기본 문법

style 속성

웹 브라우저는 style 속성의 값을 css의 문법에 따라 해석한 결과를 style 속성이 위치하고 있는 태그에 적용

style 속성 

<h4 style="color:red; text-decoration: underline"> style 속성 </h4>

📌 style 은 HTML의 속성이며 그 값으로 반드시 CSS의 효과가 들어와야 함

📌 같은 부분에 style 태그와 style 속성이 동시에 있다면
→ 속성이 태그를 덮어씌움

🌙 공부 Point :: 선택자의 종류, 속성의 종류

CSS 속성

폰트 사이즈 변경

🔎 CSS font size property

  h1 {
    font-size: 50px;
  }

폰트 정렬

🔎 CSS text align property

  h1 {
    text-align: center;
  }

📌 align: 정렬하다
📌 속성은 띄어쓰기로 구분

h1 {
    border: 5px solid red;
  }

CSS 선택자

선택자의 우선 순위

클래스 선택자

  • 클래스 값은 여러 개가 들어올 수 있으며, 띄어쓰기로 구분

모든 링크는 기본적으로 검은색, 사용자가 방문한 적 있는 링크는 회색, 현재 방문 중인 링크는 빨간색

.saw {
  color: gray;
}
.active {
  color: red;
}
…
<a href="1.html" class="saw">active</a>
<a href="2.html" class="saw active">saw active</a>

id 선택자

  • id의 값은 단 한 번만 등장해야 함!

🌙 더 나은 방법!

.saw {
  color: gray;
}
#active {
  color: red;
}
…
<a href="1.html" class="saw">active</a>
<a href="2.html" class="saw" id="active">saw active</a>

📌 .@: class가 @인 웹 페이지의 모든 태그 선택
📌 우선 순위: 구체적인 것 > 포괄적인 것 → id 선택자 > class 선택자 > 태그 선택자
📌 같은 종류의 선택자일 경우 순차적으로 적용됨 → 가장 마지막에 온 선택자의 우선 순위가 가장 높음
📌 태그: element

📌 선택자는 콤마로 구분

h1, h2 {
  color: red;
}
TIL#20 ALGORITHM (크레인 인형뽑기 게임)
백준#7490 0만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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