ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [TIL] - 230829 css 기초
      TIL 2023. 9. 18. 19:54
      반응형

      # 부스트캠프 멤버십 8기

      📌Facts

      CSS 기초

      • CSS 작성법
        • inline
        • internal
        • external
      • CSS 특징
        • CSS의 Cascading
        • CSS 상속
      • CSS Selector
        • html tag로 지정
        • id로 지정
        • class로 지정
        • 기타

      📚 Findings

      CSS는 Cascading Style Sheets의 약자이고 cascade는 계단식이라는 뜻을 갖고 있다. 이와 관련한 우선순위 개념과 상속 개념을 이해해보자. 

       

      CSS 기초

      css는 layout이 특히 어렵다. styling은 검색을 하면서 필요한 것을 적용하면 되는데, layout은 어느정도 속성들에 대한 기본 개념이 있어야 원하는대로 스타일링이 가능하다. 대략적인 html태그에 대한 css 적용법, layout 옵션, css의 여러 특징에 대해 알아보겠다.

       

      CSS 기본 사용법

      inline - HTML 태그 안에서 적용

      <!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;">Inline: HTML 태그 내에서 스타일 적용 </h1>

</body>
</html>

       

      예시와 같이 html 태그 내에 쉽고 빠르게 css를 삽입할 수 있다. inline 방식은 html 구조가 복잡해질 수록 스타일링도 복잡해지기 때문에 소규모 페이지나, 테스팅 용도에 적합하다.

      internal - <style> 태그로 지정

      <!DOCTYPE html>
<html>
<head>
  <meta charset=”utf-8” /> 
  <title>rainyCode</title>
  <style>
    h1 { 
        color :red;   
    }
  </style>
</head>

<body>
  <h1> hello world! </h1>  
</body>
</html>

       

      internal 방식은 html 문서 안에 위치한다는 점은 inline방식과 동일하지만, 태그 안에 작성하는 것이 아닌 style 태그로 따로 분리해서 모아놓는다. 클래스와 id 선택자를 사용해 작성할 수 있다.

       

      하나의 파일로 관리할 수 있지만, 그렇기 때문에 html 파일의 길이가 너무 길어질 수 있다.

      external - 외부 css 파일

      <!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
<link rel=”stylesheet” type=”text/css” href=”main.css” />
</head>

<body>
  <h1> Hello World! </h1>  
</body>
</html>
      h1 {
  color: white;
}

      css 코드가 별도의 파일로 존재해서 HTML 파일 구조가 깔끔해지고, 전체 길이가 작아진다. 마찬가지로 class와 id 선택자를 사용해 스타일링 가능하다.

      나중에 규모가 큰 프로젝트에 대해 여러 html 파일로 분리했을 때 동일한 css 파일을 가지고 link만 걸어도 되는 장점이 있다.

       

      규모가 있는 프로젝트에 가장 많이 이용하는 방법이다.

      CSS의 특징 - Cascading

       

      inline > internal = external > browser default(user agent)

      CSS 스크립트 내의 우선순위

       

      1. 소스 순서: 먄약 코드가 중복되었다면 더 나중에 선언한 것이 적용된다

      h1 {
  color: black;
}

h1 { /* 적용 */
  color: red;
}

       

      2. specificity: 구체적인 것이 있다면 먼저 적용됨 

      body > h1 { /* 적용 */
  color: green;
}

span {
  color: blue;
}

       

      3. 같은 element에 아이디, 클래스에 대해서 둘 다 코드가 있다면 아이디가 최우선 적용된다.

      #left-dropDown { /* 적용 */
  color: white;
}

.dropDown {
  color: yellow;
}

div {
  color: black;
}

      id > class > element 순으로 우선순위를 가진다.

       

      상속(Inheritance)

      css 속성은 하위 태그에 상속된다.

       

      부모 요소에서 설정된 일부 태그들은 자식 요소에도 상속이 된다. 

      box 관련 스타일은 상속되지 않는다.(border, padding margin)

       

      css는 상속을 제어하기 위해서 4가지 특수 속성 값을 제공하고 모든 css 속성에서 이 값을 사용할 수 있다.

       

      상속 제어

      inherit

      부모 요소의 속성 값과 동일하게 설정한다.

       

      initial

      브라우저 기본 설정으로 설정한다.

       

      unset

      속성을 natural 값으로 재설정 한다.

      all: unset;을 사용하면 모든 스타일을 없앨 수 있다.

      이 밖에도 all 속성은 inherit, initial, revert 값으로도 설정 가능하다.

      CSS Selector

      <div>
  <p id="hello" class="hello">hello</p>
  <p id="world" class="world">world</p>
</div>

      HTML Tag로 지정하기

      div p {
  color: red;
}

      Id로 지정하기

      #hello {
  color: red;
}

      Class로 지정하기

      .hello {
  color: red;
}

      그룹 선택

      #hello, #world {
  color: red;
}

      하위요소 선택

      <div id=”first-page”>
 <div> 
     <p> first paragraph </p>
 </div>
 <p> second paragraph </p>
</div>
      #first-paragraph p {
  color: blue
}

      first paragraph랑 second graph 모두에 color: blue가 적용된다.

       

      n번째 자식요소를 선택: nth-child, nth-of-type

      <div id=”first-paragraph”>
  <h1>제목</h1>
    <p>첫번째 문단</p>
    <p>두번째 문단</p>
    <p>세번째 문단</p>
    <p>네번째 문단</p>
</div>
      #first-paragraph > p:nth-child(1) { /* 첫번째 문단 */
  color: blue
}

#first-paragraph > p:nth-of-type(1) { /* 두번째 문단 */
  color: blue
}

      :nth-child는 부모 요소의 n번 째 자식 요소를 의미한다. 

      :nth-of-type은 부모 요소의 자식 요소 중 type 조건을 만족하는 n번째 자식 요소를 의미한다.

       

      두 선택자의 차이점은 type 조건의 만족 여부이다.

       

      전자는 모든 자식 요소 중 순서에 따라서 해당 요소를 선택하고, 후자는 type 조건을 만족하고 순서를 만족하는 대상을 선택한다.

       

      😁 Feelings

      css를 공부하면서 느낀 건, html 구조를 잘짜는 게 정말로 중요하겠구나 느꼈다. 최대한 css의 중복을 없애고 깔끔하게 짜려면, html에서 class이름과 id를 적절하게 쓰고, 중복되는 건 같은 class로 묶어주는 등 html 과 css는 하나라는 것을 느꼈다.

       

      🧭 Future

      내일은 css 기초 속성들에 대해서 공부할 것이다. CSS 스타일링, CSS box model은 어떻게 하는지 알아볼 것이다.

      반응형

      'TIL' 카테고리의 다른 글

      [TIL] - 230920 <table> 태그  (0) 2023.09.21
      [TIL] - 230918 mvc + service 구조  (0) 2023.09.20
      [TIL] - 230828 html 기초  (0) 2023.09.02
      [TIL] - 230705 자바 제어문, 캡슐화, 반복문, 배  (0) 2023.07.05
      [TIL] - 230704 data type, 메모리 할당, has a relation, 묵시적 초기화  (0) 2023.07.04

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바