[ CSS ] CSS 우선순위, color, text style, 박스모델, 위치지정방식

하루입니다.

 

 

---

 

 

오늘은 첨으로 CSS 배운 날. CSS 우선순위, color, text style, 박스모델, 위치지정방식을 공부하자. 

 

 

CSS

• CSS는 html 문서의 디자인을 담당한다.
• 문법 : Selector(선택자) Declaration(CSS 선언)
•                 h1         {color:blue;  font-size:12px;}
• 선택자
      스타일을 적용할 대상 엘리먼트(태그)를 지정한다.
• CSS 선언
      선택자에서 지정한 엘리먼트에 적용할 스타일을 선언한다.
      각각의 CSS선언은 세미콜론; 으로 구분한다.
• 아이디는 #으로, 클래스는 .으로, 전체는 *으로 선택한다.

 

 

 

CSS 적용하기

CSS 스타일은 inline, internal, external로 표현 가능하다. 

 

• 인라인 CSS  : 태그에 직접 스타일을 정의하는 것이다. 해당 라인에만 스타일이 적용된다. 
• Internal CSS : style태그를 사용해서 정의하는 것이다. 해당 페이지의 해당 요소에만 스타일이 적용된다.
• External CSS : 외부 css파일을 사용해서 스타일을 정의하는 것이다. 별도의 css파일에 CSS선언을 정의하고, <link>태그를 이용해서 css파일을 html문서와 연결시킨다. css파일만 변경하면 프로젝트 내 모든 HTML문서의 스타일을 변경할 수 있다.

 

CSS 적용 우선순위
    0. !important가 지정된 스타일
    1. 인라인 CSS
    2. internal / external CSS
    3. 브라우저 기존 스타일

 

엥 잠깐만. !important가 뭔가요?

 

최우선순위 적용입니다. 부모 엘리먼트고 뭐고간에 최우선으로 적용해야 하는 것. 예시를 들자면 아무리 글꼴을 바꿔도 button 요소들은 항상 특정 글꼴이면 좋겠다. 이럴 때 사용합니다. 

 

만약 우선순위가 겹친다면

 

이런 식으로 후순위 적용이 취소된다. 여기서 blue는 인라인 CSS, brown은 internal CSS였다. 

 

 

 

 

COLOR

색 표기하기

 

1. 색 이름으로 표기하기             --> "color: orange;"

2. RGB 색상값으로 표기하기      --> "color: rgb(0, 0, 0);"

    RGB값이 같다면 항상 무채색이다.

3. 16진수 색상값으로 표기하기  --> "color: #000000;" = "color: #000;"

    00 11 ff 처럼 색상값이 같은 경우는 줄여 적어도 된다. 

 

 

맨 마지막은 하얀색이라 안 보임

 

 

 

 

텍스트 스타일 관련 속성

color : 텍스트의 색상을 설정한다.
                p {color: red; }
                p {color: #ff0000; }
                p {color: #f00; }

text-align : 텍스트의 수평방향 정렬을 설정한다.
                p {text-align: left}         
                p {text-align: center}      
                p {text-align: right}        

text-decoration : 텍스트와 관련된 여러 효과를 설정한다.
                p {text-decoration: overline; }              // 텍스트 위에 선을 표시한다.
                p {text-decoration: line-through; }       // 텍스트를 가로지르는 선을 표시한다.
                p {text-decoration: underline; }           // 텍스트 아래에 선을 표시한다.
                p {text-decoration: none; }                   // 텍스트에 선을 표시하지 않는다.

 

<p style="text-align: left; color: darkturquoise; text-decoration: overline;">내용</p>
<p style="text-align: center; color: rgb(0, 255, 0); text-decoration: underline;">내용</p>
<p style="text-align: right; color: #8b00ff;; text-decoration: line-through;">내용</p>

 

박스모델

 

 

 

border-box 설정했음

 

 

margin

 

 

주황은 border, 초록은 padding, 내용은 content

 

 

 

위치지정방식

• 정적 위치지정(static position)
• HTML요소의 기본 위치지정 방식
• 위에서 아래의, 왼쪽에서 오른쪽으로 HTML 요소가 위치한다. 
• left, right, top, bottom의 영향을 받지 않는다.

                div {
                    position: static;
                    left: 10px;                 // 효과가 없다.
                }

 

• 절대 위치지정(absolute position)
• 위치가 지정된 부모 요소를 기준으로 위치를 설정할 수 있다. 
• 위치가 지정된 부모 요소가 없으면 body를 기준으로 설정된다. 
• 해당 엘리먼트의 위치는 left, right, top, bottom 속성으로 설정한다.
  
  
• 상대 위치지정(relative position)
• 해당 엘리먼트가 정적위치로 지정되었을 때의 위치를 기준으로 결정된 위치만큼 이동된 곳에 위치한다. 
• 해당 엘리먼트의 위치는 left와 top 속성으로 설정한다.
  
  
• 고정 위치지정(fixed position)
• 고정 위치치정으로 설정된 엘리먼트는 페이지가 스크롤되어도 해당 위치에 고정된다.

 

 

---

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!