[TIL] 04 -CSS Basic

5376 단어 WeCodeCSSTILCSS

CSS

Cascading Style Sheets의 약자로 HTML을 꾸며주는 언어이다.

문서를 꾸미는 즉시 User가 바로 확인할 수 있는 UI요소라서 되게 중요하다.

기본구조

selector: {properties}

selector은 시멘틱 테그나 개발자가 지정한 id나 class이름을 적는 란이다.
properties은 선택한 태그에 여러 속성값을 지정할 수 있는 부분이다.

CSS 작성방법

1. 내부 스타일 시트(Internal Style Sheet)

HTML파일 head부분에 <style>태그를 사용하는 방법
간단한 구조를 가진 웹사이트에는 따로 CSS파일을 만들지 않고 간단하게 사용하기 편하다.
ex)

<haed>
  <style>
    ul {
     text-decoration: none;
    }
    ul > li {
     display: inline-block;
    }
  </style>
<head>

2. 외부 스타일 시트(External Style Sheet)

HTML파일 head 부분에 CSS파일을 link태그로 연결하는 방법
ex)

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

본격적으로 만들 때는 이 방법으로 많은 양인 CSS파일을 적절히 개발자가 나눠서 여러개 파일을 링크를 걸어 사용한다.

3. HTML 내에 스타일 지정(Inline Styles)

세 가지 방법 중 가장 간단한 방법으로 style속성을 태그안에 바로 넣는 방법
ex)

<h1 style="display: none">이것은 없는 문구입니다.</h1>

style 속성으로, 다른 속성들처럼 =을 붙인 다음 property: value 의 값을 넣는다.

CSS 우선순위

  1. !important
  2. Inline Styles attribute
  3. id
  4. class, 다른 attribute, 수도 클래스(:first-child)
  5. tag element, 수도 엘리먼트(::before)

기본적으로 CSS는 뒤에 나오는 값이 더 우선순위가 높다.
!important는 css 값 뒤에 붙여진 키워드를 의미한다.

div: {font-size: 20px !important}

인라인 스타일 속성은 태그에 주어진 style 속성 내용을 뜻한다.
!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많기에 최대한 사용하지 않는 습관을 가지도록 한다. (정 필요할 때는 써도 가능하다)
그리고 중요한 부분은 id, class, 일반 태그인데 id보다 class의 css 속성 갯수가 아무리 많다라고 해도 id가 우선적으로 적용된다.
만약 개수가 똑같으면 뒤에 나오는 것이 높은 CSS의 우선순위 기본적인 특성을 가진다.

3주차 과제 Review
디자인 모델 - 구조 형의 향원 모델

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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