UIUX 디자이너, 프론트엔드 학습_CSS 01

이번 장에서는 CSS의 개요에 대한 학습 내용을 적어보려 한다.

---

CSS 개요

• 선택자 {속성:값;}
  • 선택자는 스타일을 어디에 적용(html에 정의해 둔 것)할지 정하는 대상이다.

 

 

선언 방식

• 내장 방식
  
  • <style></style>의 내용으로 스타일을 작성하는 방식
  • css의 내용을 html의 스타일이라는 태그 내부에다가 직접적으로 작성해서 html에 내장한다는 의미가 있다.
  • ex)
    • <style>
      div{
        color: red;
        margin: 20px;
      }
      </style>
• 링크 방식
  • link로 외부 css 문서를 가져와서 연결하는 방식
• 인라인 방식
  • 요소의 style 속성에 직접 스타일을 작성하는 방식
  • html의 요소에 전역 속성이 style을 직접 추가해서 css 직접 작성하는 것
  • css 우선순위라는 개념에서는 이 방법이 너무 우선순위가 높아 단점이 있음
  • ex)
    
    • <div style="color: red; margin:20px">
      </div>
• @import 방식
  • css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식
  • 고의로 해당 css가 늦게 연결되기 바라는 상황에 사용할 수 있음
    • 대도록 병렬 방식인 링크 방식을 권장

직렬 방식으로 box.css를 직접적으로 html에 연결할 수 없음

 

 

선택자_기본

• * : 모든 요소를 선택하겠다 - 전체 선택자
• 태그(html) 이름으로 css 부여 - 태그 선택자
• 클래스 선택자
  • html class 속성의 값인 것을 선택
  • ex) html에서 class='orange' 라면 css에서는 .orange 를 기입해 선택
• 아이디 선택자
  • html id 속성의 값인 것을 선택
  • ex) html에서 id='orange'라면 css에서는 #orange를 선택

 

 

선택자_복합

• 복합 선택자는 기본 선택자 4개를 조합해서 사용하는 것을 말한다.
• 일치 선택자
  • 기본 선택자 2개를 붙여 작성하는 것
  • 각각의 선택자를 동시에 충족시키며, 특별한 조치 없이 붙여 쓰면 된다.
  • 태그 선택자는 항상 맨 앞에 적어야 한다.
    • 이유는 클래스 선택자를 먼저 적을 경우 전체를 클래스로 인식하게 되기 때문이다.
    • ex) html : <span class="orange">오렌지</span>
      css 선택자 : span.orange (태그+클래스 선택자)
• 자식 선택자

<div>
    <ul>
       <li>사과</li>
       <li>딸기</li>
       <li class="orange">오렌지</li>
    </ul>

• 자식 선택자 예시
  • 다음과 같은 html 코드가 있을 경우
    • ul>.orange {
      color: red;
      }
      를 부여하면, <li class="orange">오렌지</li>에 컬러 레드가 부여되는 방식
  • 선택자 ul의 자식 요소인 class orange를 선택하는 것
• 하위(후손) 선택자

<div>
    <ul>
       <li>사과</li>
       <li>딸기</li>
       <li class="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
</div>

• 하위 선택자 예시
  • 다음과 같은 html 코드가 있을 경우
    • div .orange {
      color: red;
      }
      를 부여하면,  <li class="orange">오렌지</li> + <span class="orange">오렌지</span>에 컬러 레드가 부여되는 방식
  • 띄어쓰기가 선택자의 기호이다.
• 인접 형제 선택자

<ul>
   <li>딸기</li>
   <li>수박</li>
   <li class="orange">오렌지</li>
   <li>망고</li>
   <li>사과</li>
</ul>

• 인접 형제 선택자 예시
  • .orange + li {
    color: red;
    } 를 부여하면 망고 부분에 레드 컬러가 부여되는 방식
  • 선택자 .orange의 다음 형제 요소 li 하나를 선택하는 방식이다.
• 일반 형제 선택자

<ul>
   <li>딸기</li>
   <li>수박</li>
   <li class="orange">오렌지</li>
   <li>망고</li>
   <li>사과</li>
</ul>

• 일반 형제 선택자 예시
  • .orange ~ li {
    color: red;
    } 를 부여하면 망고와 사과 부분에 레드 컬러가 부여되는 방식
  • 선택자 .orange의 다음 형제 요소 li 모두를 선택하는 방식이다.