카테고리 없음

코드카데미 프론트엔드 코스 / CSS에 대해서 #5

Entkommen 2022. 11. 6.
728x90

HTML의 기초적인 부분들을 정리한 것이 대략 3-4 개의 포스팅으로 요약되었다.

이제는 CSS 진도로 넘어간다. 

 

CSS Anatomy

 inline CSS / rulese CSS 가 있는데, 인라인은 말그대로 html 코드에 직접 삽입해서 적용하는 방법의 css이고 ruleset은 css 독자적인 파일을 활용해서 적용하는 것으로 이해하고 있다. 

Ruleset 기준으로 이렇게 부름 .

Internal Stylesheet 

 html 코드 안에 style 태그를 활용하여 만들어진 구역, 이 기능덕에 한줄한줄 inline으로 다 수정할 필요없이 일괄적용이 가능해짐 . 다만 이게 최선의 방법은 아님 ,이후에 설명됨 

 

구조는 ruleset을 활용하는 것으로 기본적인 ruleset의 선언은 아래와 같다. 그 밑에는 실제 예시이다. head 태그 안에서 사용되고, 문서 내의 p 문장의 스타일을 지정하는 코딩이다. 

 

selector{} 

 

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

 

 

 위에 서술된 것처럼 HTML 문서 안에다가 CSS를 넣어서 만들 수 있지만, 보통 css 파일을 따로 만들어서 관리한다. 이름.css 이런식으로 만들면 된다. 

 

 이렇게 별도로 만들어진 문서에 css를 채워넣는 것으로 끝나는 것은 아니다. <link>를 활용하여 css와 html을 연결해야 적용한게 화면에 나타나게된다. 

 

<link> CSS파일과 HTML파일의 연결

 

 html의 <head> 안에 <link>를 삽입하면 되고, <link>는 self closing tag이므로 유의 

만약 같은 디렉토리안에 있는 파일이라면 

<link href='./style.css' rel='stylesheet'>
활용할 수 있음, 아래처럼 url 활용할 수 도 있음. 바로 위 예시의 경우 relative path라고 불림 

 

  1. href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
  2. rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.

<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>

 

Great work so far! By understanding how to incorporate CSS code into your HTML file, as well as learning some of the key terms, you’re on your way to creating spectacular websites with HTML and CSS.

Let’s review what you learned so far:

  • The basic anatomy of CSS syntax written for both inline styles and stylesheets.
  • Some commonly used CSS terms, such as ruleset, selector, and declaration.
  • CSS inline styles can be written inside the opening HTML tag using the style attribute.
  • Inline styles can be used to style HTML, but it is not the best practice.
  • An internal stylesheet is written using the <style> element inside the <head> element of an HTML file.
  • Internal stylesheets can be used to style HTML but are also not best practice.
  • An external stylesheet separates CSS code from HTML, by using the .css file extension.
  • External stylesheets are the best approach when it comes to using HTML and CSS.
  • External stylesheets are linked to HTML using the <link> element.
  •  

 

 

Type selector

 

 Selector로 어떠한 것을 설정할 지에 관한 내용인데, html에서의 요소들이 보통 들어간다. <p>를 사용하면 해당 문서의 p를 지정하여 스타일을 적용하는 것이다. 

 p를 사용하면 element type을 사용한 것이다. 

 

A selector is used to target the specific HTML element(s) to be styled by the declaration. One selector you may already be familiar with is the type selector. Just like its name suggests, the type selector matches the type of the element in the HTML document.

 

Universal Selector 

*

 

Attribute Selector

(출처 MDN Web docs)

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/*  elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

[href]{
   color: magenta;
}

 

이런식으로 href 들어가는 모든 것에 적용할 수도 있고

type[attribute]*='value' {

}

 

이런식으로 href 들어간 것중 , '특정단어'가 들어간 링크만의 색깔을 바꾸는 등 지정할 수 있다. 

예시) beijing이 들어가는 링크의 색깔을 lightlblue 로 지정

 

a [href*='beijing']{ color: lightblue; }

 

Pseudo-Class

콜론(:)뒤에 붙여서 사용하는 형태, 사용자와 웹사이트의 상호작용과 관련된 클래스이다. 

:focus, :visited, :disabled, :active 등이 있으며 , 어떠한 selector 뒤에도 붙여서 쓸 수 있다. 

 

p:hover {
  background-color: lime;
}
위 예시의 경우 마우스를 해당 단락(p)에 올려놓을 때 배경색깔이 라임색으로 변하게 한다. 
 

 

 

Class

Chaining

 Chaining 이라는 것은 , 서로 다른 종류의 selector를 연결해서 쓰는 것을 말한다. 

예를 들어 , 내가 특정 class 를 호출하고 싶으면 . class 이름을 활용하여 호출하지만, 동시에 특정 타입(anchor 등)을 지정해서 호출하고 싶다면, type.class 이런식으로 호출 할 수 있다. 

 

Specificity 

 ID > Class > Type 순으로 우선순위도를 말하는 것 같다. 

 CSS에서 호출했을 때 Selector의 우선순위대로 적용된다. 

 

 

 

Mutiple Selector의 경우 중복 코딩을 방지하고자, 겹치는 내용이 있으면 콤마(,)로 선택자들을 여러개 지정할 수 있는 기능이다. 

 

  • CSS can select HTML elements by type, class, ID, and attribute.
  • All elements can be selected using the universal selector.
  • An element can have different states using the pseudo-class selector.
  • Multiple CSS classes can be applied to one HTML element.
  • Classes can be reusable, while IDs can only be used once.
  • IDs are more specific than classes, and classes are more specific than type. That means IDs will override any styles from a class, and classes will override any styles from a type selector.
  • Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary.
  • Nested elements can be selected by separating selectors with a space.
  • Multiple unrelated selectors can receive the same styles by separating the selector names with commas.
  •  
728x90
저작자표시

'카테고리 없음'의 다른글

  • 현재글코드카데미 프론트엔드 코스 / CSS에 대해서 #5
댓글

티스토리툴바