HTML, CSS (1)

김태완·2024년 11월 14일
CSShtml

<웹 퍼블리싱 시작하기>

  • HTML은 사이트의 내용을 작성하는 언어이다.

  • 그리고 원하는 디자인으로 꾸밀때는 CSS를 써야한다.
    (Cascading Style Sheets)

  • HTML로 내용을 적고 css로 꾸미고 웹을 띄우는 것이 기본 개념이다.

    • <!DOCTYPE html> // document 타입이 html이고, html언어로 작성할 거다.//
    • <> -> 시작태그
    • </> -> 종료태그
    • <title> 태그는 이 페이지의 내용이 아니라 이 페이지가 어떤 페이지인지 이름을 적어준 것이다.
    • 페이지에 대한 정보는 <head>라는 태그를 써서 여기 안에 관련 정보들의 태그들을 넣는다.
    • 그리고 페이지 내용에는 <body>라는 태그를 사용해서 내용을 넣어둔다.

  • 코드를 작성할때 들여쓰기(indentation)라고 하는 것을 사용한다.

    • 이유는 코드를 읽기 좋도록 만들기 위해서인데, 동작에 영향은 주지않는다.
    • 시작 태그와 종료태그의 들여쓰기를 일치시키고, 하위 태그에서는 들여쓰기를 한단계씩 추가한다.

      사실 prettier나 eslint 같은 포매터를 사용하면 코드를 작성할때 유의하면서 작성할 필요는 없지만, 알고있자

  • 한글이 깨지는 이유??

    • 인코딩(Encoding) -> 어떤 숫자가 어떤 문자에 해당하는지 정해 놓은 규칙이다.
    • 인코딩에 따라서 숫자를 문자로 바꿔서 보여주는 것이다.
    • 종류가 여러가지인데, 인코딩 잘못사용하면 엉뚱한 문자를 보여준다.
    • 그래서 한글을 지원하는 인코딩을 사용해야한다.
      <meta charset="utf-8"/>
      -> 이렇게 하면 모든 브라우저에서 한글이 제대로 나온다.

  • <h1> 태그는 화면안에 들어가는 내용의 제목을 붙이는 태그이다.

  • 내용을 줄 구분해서 보여주려면 <p>태그를 사용한다(패러그랩)

    • 창이 줄어들면 줄어드는 만끔 단락이 바뀌는데, 내 마음대로 단락 안에서 줄바꿈 하거나 제목에서 줄바꿈을 하고 싶을때는 <br>태그를 사용한다.(break line의 약자)
      meta 태그 처럼 내용없이 시작태그로만 사용되는 태그이다.

  • 꺾쇠 기호를 넣는 올바른 방법

    • 꺾쇠를 글자로 입력하고 싶을 때는 꺾쇠를 그대로 쓰는 게 아니라,
    • &lt;(앰퍼샌드 엘 티 세미콜론) &gt;(앰퍼샌드 지 티 세미콜론) 이렇게 입력해 줘야 합니다.
    • 여기서 lt라는 건 영어로 “~보다 작다”라는 뜻인 less than의 약자고 gt라는 건 “~보다 크다”라는 뜻인 greater than의 약자입니다.
    • 이거 안쓰면 글자가 안나온다. 태그 이름이랑 겹치기 때문이다.

  • 하이퍼링크

    • 클릭했을때 다른 페이지로 넘어가는걸 링크라고 하는데,
      <a href=" "></a>

    • 이렇게 태그안에 단어="", 그리고 따옴표 안에 값을 넣는 문법을 HTML속성이라고한다.

    • = 왼쪽에 있는게 속성 이름이고, 따옴표 안에 들어가는게 속성의 값이다.

    • href -> hypertext reference / 하이퍼텍스트 참조
      // 링크를 클릭했을때 이동하는 곳의 주소

    • <a href="https://www.codeit.kr/community/questions" target="_blank"></a>

    • 위와 같이 a 태그에 target="_blank" 속성을 이용해서 새창으로 이동하는 방법도 있다.

  • 이미지

    • <img>태그를 사용하고, src라는 속성으로 이미지의 경로, 주소를 지정해준다.
    • 시작태그만으로도 쓸수있다.

  • 영역 나누기

    • <div> <span> 태그를 사용하면 영역을 나눌 수 있다.

  • html 코드 편하게 입력하는 법

    • 매번 HTML 파일을 만들고 <html> , <head>, <title>, <body> ... 이런 태그를 쓰는 건 번거로운데요.
    • VS Code를 열고 빈 HTML 문서에서 느낌표(!) 를 입력하면 아래처럼 자동 완성 창이 뜬다.
    • 이 상태에서 엔터 혹은 탭(Tab) 키를 누르거나 마우스로 클릭하면 VS Code가 HTML 기본 코드를 완성해준다!

  • 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • 모바일 기기에서 보여줄 비율을 조정하는 코드
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 참고로 이 코드들은 일반적으로 자주 사용하는 코드니까 굳이 지우지 않고 그대로 활용해도 좋습니다.

css

  • 보통 색상코드를 사용한다.

  • 구글에서 'Color Picker'라고 검색하면 아래 같은 색상 선택 도구가 나옵니다.

    • 16진수 HEX를 사용한다. -> 대소문자 구분 안한다.

  • 문법은 css 속성이름: css 속성 값 이렇게 사용하면 된다.

  • 글자색을 주려면 해당 태그에 color이라는 속성을 주면된다.

    • 페이지 전체에 글자색을 주려면 전체를 감싸는 태그(body)에 글자색을 부여하면 된다.

  • style 속성을 여러개 주려면 ;으로 구분한다.

  • 글꼴

    • font-family: A, B, C 라는 속성을 사용한다.
    • A가 적용되지않는 경우, B를 / 둘다 없으면 C를 적용해라.

  • <link> 태그는 외부에서 데이터를 가져오는 태그 -> head 태그 안에 사용한다.

  • 픽셀(pixel)이란?

    • CSS에서는 크기를 설정할 때 픽셀이라는 단위를 씁니다.
    • 이미지의 일부를 확대해서 보니까 작은 정사각형 단위로 되어 있는데, 이때 각 정사각형을 픽셀(Pixel)이라고 부릅니다.
    • 픽셀의 원래 이름은 Picture Element인데요. 그림의 기본 요소라는 뜻이다. 이걸 줄여서 Pics + El = Pixel이라고 합니다.
    • 이 정사각형을 화면에서 크기의 단위로 쓰기도 하는데요.
    • 코드에서 크기의 단위로 쓸 때는 px라고 쓰고 픽셀이라고 읽으면 된다.
    • 만약 어떤 이미지의 너비가 100px이라고 한다면, 가로로 저 작은 정사각형 100개만큼 있다는 뜻이다.

  • 글자 크기

    • 글자의 크기도 픽셀로 설정하는 경우가 많다.
    • 글자 크기가 24px라고 하면 글자의 세로 길이가 24px이라는 뜻입니다.
    • font-size 는 글자 크기를 주는 css이다.
    • font-weight 는 글자 굵기를 주는 css / 100~900까지 100단위로 사용한다.

  • 기본적으로 웹페이지는 좌측정렬인데, 중앙으로 정렬하려면
    text-align: center 라는 css를 준다.

  • 이미지와 본문크기 조절

    • 이미지에 너비랑 높이 지정하기
      너비는 width, 높이는 height라는 css를 적용하면 된다.
      px로 하면 크기가 고정되니깐 아쉽다. 왜? 웹브라우저 크기는 항상 다를 수 있다.
      -> 그래서 100%와 같이 비율을 써주면 해당 영역안에서 비율만큼 이미지의 크기를 준다.
      너비를 비율로 주고 높이를 주지않는다면 이미지가 비율대로 변한다.

      이럴때 height는 auto를 주면 비율대로 알아서 높이값을 조절해준다.

    • padding 속성을 주면 해당 영역 안쪽에 여백이 생겨버린다.
      padding: A B 라고 css를 준다면 세로는 A만큼 여백, 가로는 B만큼 여백

    • margin은 바깥 영역에 여백을 주고 싶을때 사용한다.
      최초에 기본값이 설정되어있기에 body 태그에 margin: 0을 넣어주면 깔끔하게 다 붙는다.

      그래서 global style에 *{ margin: 0; } 를 주면 편하다.

  • 바깥 여백 중에서 가로 여백을 자동으로 채우는 기능
    -> margin: 0 auto -> 세로는 0 가로는 알아서 가운데로!!

  • 소셜 공유 미리보기??

    • <head> 태그 안에 <meta>태그를 추가할 수 있는데,
      <meta name="description" content="금요일에 만나는 코딩 한 스푼">
    • 이렇게 페이지에 대한 메타데이터를 지정할 수 있다.
    • 그중 가장 많이 쓰이는게 페이스북에서 만든 오픈 그래프이다.
    • 오픈 그래프를 추가하려면
      <meta property:"og:title" content="Weekly Codeit"> // 페이지 제목
      <meta property:"og:url" content="주소"> // 페이지 주소
      <meta property:"og:type" content="website"> // 페이지가 어떤 유형인지
      <meta property:"og:image" content="이미지 주소"> // 미리보기 이미지
      <meta property:"og:description" content="Weekly Codeit"> // 제목 밑에 들어갈 설명
      더 자세한 내용은 주소 참고(https://ogp.me/)
    • 페이스북 디버거에서 내용을 페이스북과 주고받을 수 있다.(https://developers.facebook.com/tools/debug/)

  • 구글 애널리틱스로 방문자 수 확인하기
    -> 구글에서 만든 방문자 분석 도구

그래서 HTML/CSS를 공부하는 법???

  • 자주 쓰게되면 외워진다 하지만 모르겠는건 찾아봐야지
    ㅋㅋ
  • 표준기구에서 이것을 만드는데, whatwg라는 사이트에 들어가서 찾아본다
  • 여긴 좀 어려울 수도 있어서 mdn이라는 사이트가 좀더 쉽게 나와있다.
    -> 그래서 여기서 찾아서 쓴다!

<CSS 핵심 개념>

  • 관심사의 분리(Separation of concerns)

    • 내용과 스타일을 분리하는 것이다.
      따로 고치기도 편하고, 코드가 나눠져 있어 저장하기도 편하다.
    • 코드의 가독성을 위해서 분리하면 더 좋겠지?
    • 그런데 styled components 같은 건... 뭐 장단점이 다 있으니깐

  • css 규칙
    h3  {    //h3는 선택자(Selector)
        color: black;    // 이 부분은 css 선언(css Declaration)
    }

  • 아이디

    • id를 활용해서 선택자 들 중 특별하게 다른 css로 할 수 있다.
    • 태그에는 id라는 속성을 지정해주고, css 파일에서는 #id이름 으로 css를 줄 수 있다.
    • id를 만들때 주의할 점은 중복해서 사용할 수 없다는 것! 고유한 이름을 지어줘야한다.

  • 클래스

    • 아이디는 하나만 적용할 수 있었는데, 여러개를 한번에 스타일링 하려면 클래스를 써야한다.
    • class="클래스이름"으로 태그 안에 속성을 넣고, css 에는 .클래스이름 으로 선언해준다.
    • 특별한 경우가 아니라면 아이디 보다는 클래스를 쓰는 것을 추천한다.

  • CSS 파일

    • 보통 css 파일을 따로 저장한다.
      그래서 head 태그 안에 link 태그를 써서 파일을 불러온다.
      <link rel="stylesheet" href="경로">
    • 여기서 rel은 relationship의 약자, 불러올 파일과의 관계를 나타낸다.

  • 색상을 나타내는 4가지 방법

    1. 색상이름(Color Names) : 빨강, 노랑 등등, 영어로 된 색상 이름을 사용, 세세하게 나타내기 힘들어 잘 안씀
    2. 색상코드(Color Codes): 가장 많이 사용하는 방식, #으로 시작해서 숫자 문자(a~f)로 조합된 6자리//
      CSS는 모니터에서 보는 것이므로 빛의 삼원색을 사용한다. 255는 ff이고 2자리씩 빨 초 파
    3. RGB : 16진수 대신 평소 쓰는 10진수로 표시, 0~255 사이 값을 쓴다. ex) rgb(255, 0, 0) -> 빨강, 초록, 파랑
    4. RGBA: 마지막 Alpha인 불투명도를 추가한것. 0~1사이의 소수점 숫자

  • 다양한 크기 단위

    • 픽셀
    • 화면을 표시하는 기준이 되는 가장 작은 정사각형
      • PPI(Pixel Per Inch)
        모니터에서 1인치 정사각형 안에 픽셀이 몇개 들어가는지를 나타냄. 촘촘할수록 세밀한 표현이다.
      • 해상도
        가로로 몇 px, 세로로 몇 px을 보여주는지 알려주는 것.
      • 퍼센트(%)
        부모 태그에 대해서 상대적인 크기. 크기를 바꾸고 싶을때 부모의 크기만 바꾸면 된다는 장점이 있다.
        100%라는 값은 자주 사용하기 때문에 잘 알아두자!!
      • em, rem
        글자 크기를 기준으로 상대적인 크기를 정한다.
        em
        인쇄에서 전통적으로 대문자 M의 크기, 1em은 부모 태그의 font-size값이다.
        rem
        rem은 최상위 태그의 크기, html의 font-size를 말한다.

  • 코멘트(주석)는 /* 로 시작해서 */ 로 끝나는 코드인데요.
    코드를 읽는 사람들을 위한 거고, 실행에는 아무런 영향을 주지 않습니다.
    코멘트는 실행에 영향을 주지 않으니까 얼마든지 사용할 수 있는데요.
    코멘트를 너무 많이 달아도 읽기 어려운 코드가 됩니다.
    그럼 언제 코멘트를 달아야 할까요?

    • CSS 선택자를 쉽게 이해할 수 있도록 고쳐 본다.
      그래도 이해가 어려울 거 같으면 코멘트를 단다.
    • .zzim-button은 .wishlist-button이라고 이름을 정할 수 있다. 이렇게 하면 클래스 이름만 봐도 어떤 것인지 대충 짐작할 수 있기 때문에 굳이 코멘트를 달지 않아도 될 거 같아.

  • 줄 높이 line-height

    • 줄과 줄 사이의 간격을 조절할 때 CSS에서는 줄의 높이로 조절합니다.
    • 줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값인데요. 예를 들어서 font-size가 16px이라면 line-height: 1은 16px 1 = 16px이 되고, line-height: 1.5는 16px 1.5 = 24px이 되는 식입니다.

  • 텍스트 꾸미기 text-decoration

    • 텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성입니다.
    • 속성 값으로는 none, underline, line-through 등이 있는데요.
    • 이 중에서도 none은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용합니다. 그 외에 underline도 많이 쓰고, 가끔 line-through를 사용하기도 합니다.

  • 배경이미지 background-image

    • background-image: url('경로')
    • background-repeat: no-repeat;
    • background-position: center;
    • background-size: cover
      -> 이미지 비율을 유지하면서 꽉 채운다. 이미지 잘릴 수 있음
      -> contain도 있는데 이 속성은 이미지가 잘리지 않는 선에서 최대 크기로 키우는 것이다. 이미지 잘리지 않는다.
      -> 100px 50px 처럼 값을 지정해 줄 수 도 있다.
    • url(...)이라는 문법으로 배경 이미지를 넣습니다.
      background-image: url('flowers.png');
    • 참고로 배경 이미지는 여러 개 넣을 수 있습니다.
      아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png가 깔리고, 맨 밑에는 c.png가 깔립니다. (a가 제일 위)
      background-image: url('a.png'), url('b.png'), url('c.png');

  • 그라디언트 linear-gradient

    • 구글에서 gradient-generate를 활용한다.
    • 팁!
      - 배경위에 반투명한 그라디언트를 겹친다. 이미지와 그라디언트를 같이 쓰면 시각적으로 훨씬 좋은 효과를 얻을 수 있다.

      background-image:
         linear-gradient(90deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0)
      ),url('pizza.

  • 그림자 box-shadow

    • 그림자는 영역에 생기는건데 위치와 색을 정하고 어느정도 흐리게 할지 정한다음 퍼지는 크기를 정할 수 있다.
    • box-shadow generate를 활용하자.
      box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
      /
      가로: 5px
      세로: 10px
      흐린 정도(Blur): 15px
      퍼지는 정도(Spread): 8px
      색상: rgba(0, 0, 0, 0.6)
      /

  • 불투명도 opacity

    • 요소 전체를 불투명하게 만들때 사용한다.
    • 자주 쓴다!

  • 박스모델

    • 박스모델은 총 4가지로 이루어져있다.
    • 가장 바깥에는 margin, 그 안에는 border가 있는데 테두리라고 생각하면 된다.
    • border라고 부르는 테두리 영역이 있고 그안에는 padding, 안쪽 여백이 있다.
    • 가장 안쪽에는 내용이 들어가는 content가 있다.
      Margin
      - 영역 바깥쪽 여백을 넣을 때 사용한다.
      - 특히 좌우 바깥 여백의 경우에는 auto라는 걸 사용해서 자동으로 채울 수 있다.
      - 여기서 주의할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있습니다.
      border
      - border: 1px solid gray
      로 한다면 1px은 테두리 굵기 이다.
      - 중간에 solid는 선의 모양을 뜻한다. dot 등등 다른 것도 있다.
      - 마지막은 테두리의 색상이다.
      - border-radius 모서리를 둥글게 만들수있다.
      - border가 없어도 border-radius를 사용할 수 있다. 너무 자주 사용하는 css다. 꼭 기억해야한다.
      box-sizing
      - 사실 우리가 주는 너비나 높이는 content의 값을 주는 것이다.
      - 그래서 값을 일일이 계산하기 귀찮기에 box-sizing: border-box를 준다.
      - 이렇게 하면 border를 기준으로 너비를 지정할 수 있다.
      - 그래서 content의 값이 알아서 계산되어서 들어가있다.
      - 모든 요소에 이 css를 추가해주는 추세이다.
      그래서

      *{ box-sizing }
      이거부터 쓰고 시작해라!

  • overflow

    • 넘친내용을 감추거나 스크롤 할 수 있게 한다.
    • overflow: hidden or scroll
    • 스크롤 가로로 할때는
      white-space: nowrap // content안에 있는 공백 문자를 말하는데 띄어쓰기나 줄바꿈을 말함. nowrap은 줄바꿈 안하겠다.

  • 마진상쇄 margin collapsing

    • 2영역이 겹쳤을때 각각의 마진을 더하는게 아니라 더 큰 마진을 적용하는 것
    • 이웃하는 요소들끼리는 마진 상쇄가 일어나고, 부모 자식 사이에도 마진 상쇄가 일어날 수 있다.
    • 부모 요소에 border 나 padding이 있어서 어떤 경계가 생기는 경우에는 마진이 상쇄되지 않는다.(자식태그에 있는 것은 상관음슴)
    • 세로 마진이 내가 원하는대로 나오지않는다면 마진이 상쇄된 게 아닌지 확인하자!

  • 디스플레이 display

    • 디스플레이라는 속성은 크게 2가지, 블록(block)과 인라인(inline)으로 나누어진다.
      블록(block)
      <h1>, <p>, <div> 등등은 위에서 아래로 배치된다.
      너비와 높이를 지정할 수 있다.
      인라인(inline)
      <a>, <span> 등 평소에 글쓰는 방향과 같다.
      화면에 꽉 차면 다음줄로 넘어간다. 너비나 높이를 지정할 수 없다 단, 예외적으로 img은 외부데이터를 보여주는 애들은 가능하다.
      여백은 가로로(글쓰는 방향)만 가능하다.
      인라인 블록(inline-block)
      배치는 인라인처럼 하면서 크기도 정하고 싶을때는 display속성으로 인라인 블록을 준다.
      배치는 인라인 처럼 되지만 블록처럼 크기가 있다.

  • float

    • 블록 왼쪽이나 오른쪽으로 배치할 수 있다.
    • float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다.

  • css 선택자

    • 여러개를 , 로 사용해서 표현할 수도 있다는 것이다.
      그래서 중복되는 css는 따로 쓰지말고 , 를 사용해서 선택자 목록(Selector List)를 만든다.
      , 로 바로 이어서 쓰기도 하고 , 뒤에 줄을 바꿔서 쓰기도 한다.

      그렇지만 이렇게 여러개를 사용하는 것보단, 공통 클래스 네임을 추가로 지정해서 css 속성을 주고, 요소별 추가되는 스타일은 별도의 클레스 네임으로 주는 것을 추천!!!

  • 선택자 붙여쓰기

    • HTML에서 클래스를 여러개 쓰는 방법은?
    • class = "A B" // 띄어쓰기로 구분한다.
      css 파일에서는 클래스 이름을 이어서 쓰면됩니다
      .A .B 이런식으로 // 아이디 선택자랑 같이 쓸수도 있고,
      p.delay .book-info 이렇게 하면 p태그이면서 delay클래스랑 book-info 클래스를 가지고 있는 것을 지칭한다.

  • 정리하자면 클래스를 쭉 이어서쓰면 이 클래스를 모두 갖고 있는 걸 선택하는 것이고,
    맨앞에 태그 선택자를 붙이면 이 태그에 해당하고 이런 클래스, 아이디를 갖고 있다는 것이다.
    아이디랑 클래스를 같이 쓰면 이 아이디에 해당하고 이 클래스에 해당하는 요소를 선택할 수 있다.

ex)
.book-info, .book
.book-info .book
차이는?

  • 첫번째는 .book-info와 .book을 선택, 두번째는 .book-info 하위의 .book을 선택합니다.

  • 자식, 자손 선택하기

    • 부모자식 요소를 잘 조합해서 선택하자
    • 그래서 > 를 잘 활용한다. >는 자식 결합자(Child Combinator)라고 한다.
    • 근데 만약 자식이 아니라면? 자손 결합자(Desceendant Combinator)를 사용한다.
    • 스페이스로 구분해서 적어주면 book이라는 클래스 자손 중 date라는 클래스를 가지고 있는 태그를 선택한다.
      -> 대신 스페이스를 주로 사용한다.

  • 가상 클래스(Psuedo Class)

    • 마침표 대신 콜론으로 시작하고 이름이 미리 정해져 있다.
      :hover(마우스를 올렸을때) 와 같은 것들이다.
    • 마우스를 올리면 가상 클래스가 선택되어서 해당되는 css가 실행될 것이다.:active :focus :visited 등등

  • 전체 선택자 (Universal Selector)

    • * 라는 선택자는 모든 요소를 선택하는 선택자입니다.
    • 모든 요소를 선택하기

* {
box-sizing: border-box;
}

  • .gallery의 모든 자식 요소 선택하기
    .gallery > * {
    width: 120px;
    height: 90px;
    }
  • n번째 자식 선택자 n-th child Selector
    • :nth-child()를 사용합니다.
      괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있는데요. 혹시 다른 프로그래밍 언어를 쓰신 경험이 있다면 0부터 시작할 거라고 생각하실 수도 있지만, 여기서는 1부터 시작합니다. (첫 번째 자식은 1이고, 세 번째 자식은 3임)
      .gallery의 세 번째 자식
      .gallery :nth-child(3) { ... }//
      .gallery의 짝수 번째 자식
      .gallery :nth-child(even) { ... }//
      .gallery :nth-child(2n) { ... }
      .gallery 의 홀수 번째 자식
      .gallery :nth-child(odd) { ... }
      .gallery :nth-child(2n+1) { ... }//
      특히 첫 번째 자식, 마지막 자식은 아래처럼 선택합니다
      .gallery :first-child { ... }
      .gallery :last-child { ... }

  • 캐스케이드 cascade -> 종속이라고 한다.

    • 통상 개발자모드에서 내가 작성한 css를 styles시트에서 확인할 수 있다. 그런데 user agent stylesheet라고 웹 브라우저에서 기본적으로 적용되는 css 규칙이 있다.
      이것을 합쳐서 하나로 만들고 화면에 보여준다.
      그런데 겹치는 속성도 있다.
    • 이럴때는 어떤값을 쓰는게 좋을까??
      그래서 이거를 어떻게 합칠지 정해주는 방식이 바로 캐스케이드(Cascade)이다.
    • 계단식 작은 폭포처럼 css 를 규칙을 순서에 따라서 계단식으로 합치는 걸 캐스케이드라고 한다.
      그래서 개발자모드의 style시트에서 보이는 순서대로 적용이된다. 위에 있는게 최종 적용된다.
    • element.style이라고 되어있는 것은 HTML 태그에다가 직접 스타일 속성으로 넣는 것이랑 동일하다.
    • 따라서, 정리하자면 여러 css규칙이 적용될때 순서에 따라서 합쳐지는 것이다.

  • 그렇다면 순서는 어떻게 정해지나요???

    1. 스타일 시트 종류
    • 브라우저 기본 css는 user agent stylesheet / 우리가 만든 style.css보다 우선순위가 낮다.
    • HTML에 직접 css 작성하는 것은 인라인 스타일이다 / 가장 우선순위가 높다
    • 선택자의 명시도(specificity) 선택자마다 점수가 있고 점수가 높을 수록 우선순위가 높다.
      -> 경로를 자세하게 써주는게 명시도가 높다. css에 마우스 올려보면 나온다.
      -> specificity calculator
      명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.

  • 상속

    • 개발자 도구에 styles 시트에 inherited from이라는 것이 보이는데, 조상한테서 css 속성을 물려받은 것이다.
    • 흐릿하게 적힌 글자는 상속되지 않은것이다.
    • 상속된 속성들은 가까운 조상일수록 높은 우선순위이고, 선택자로 선택된 css규칙이나 웹 브라우저 기본 스타일 시트보다는 우선순위가 낮다.
profile
김태완
중고
이전 포스트

타입스크립트 (2) - 기본형, 배열, any, 함수

다음 포스트

HTML, CSS (2)

0개의 댓글