CSS I

📌css에 대한 이해

1. CSS?
2. 기본문법
3. 속성과 값
4. 내부 CSS,외부 CSS,inline CSS

CSS :

• (Cascading style sheets): 웹 문서를 꾸미기 위한 style sheet 언어 스타일은 속성(property) 와 값(value) 로 이루어져 있다.

div { font-size(속성): 16px;(값)}

내부 css

-> 웹 문서 안에서 스타일을 작성

• head 태그 안에 style 태그를 사용하여 작성
• html5 부터 'type' 속성의 선언은 생략 가능

외부 css

-> 별도의 파일을 만들어서 스타일 코드 관리

• 스타일이 길어질 경우 하나의 문서 내에서 관리할 수 없기 때문에 분리 해서 관리를 하기 위함.
• "href" 속성에 분리한 스타일시트의 경로를 입력하여 사용.
• "ref" 속성에 stylesheet 를 넣어 스타일시트 파일을 불러오는 것을 정확히 명시

<lInk rel="stylesheet" href="./style.css" />

inline css

-> 태그에 직접 스타일 정의

• 전역 속성인 "style" 속성을 사용하여 스타일을 선언할 수 있음
• 코드 유저보수 어려움, 반응형 처리 불가능 등의 이유로 가능한 사용 지양

<div style="font-size: 16px;"> 콘텐츠 </div>

주석 (comment)

-> 스타일 시트 내에 개발자가 남기는 코멘트

• /* */ 사이에 내용을 입력할 수 있다.
• 줄바꿈을 통해 여러줄의 주석을 남길 수 있다.
• 주석 안에 주석은 작성할 수 없다.

📌선택자

1. 전체 선택자(*)
2. 유형(태그) 선택자(h1, div, ...)
3. ID, Class 선택자(#, .)
4. 속성 선택자([href], [src],...)
5. 의사(가상) 클래스 (:hover, :focus, :active,...)
6. 의사(가상) 요소 (::before, ::after, ...)
7. 상속과 초기화(inherit, initial)

전체 선택자

-> 모든 요소에 스타일을 적용할 수 있는 선택자

• 웹 문서 내의 모든 요소에 스타일이 적용된다.
• 모든 요소에 적용되기 때문에 나도 모르는새 의도하지 않는 요소에 스타일이 적용될 수 있기 때문에 사용에 주의!

유형(태그) 선택자

-> html 태그 이름으로 선택한다.

• 같은 이름의 태그를 모두 선택한다.

-id, class 선택자

-> 요소의 id, class 속성 값에 완전히 동일한 값을 가진 요소를 선택한다.

• id는 "#" 을 시작으로 선택한다.
• class 는 "." 을 시작으로 선택한다.
• id 값은 절대 중복되면 안된다.

속성 선택자

-> 요소가 가진 속성을 선택자로 한다.

• 대괄호 "[]" 안에 속성 이름을 넣어 서낵자로 사용할 수 있다.
• 속성과 값을 동시에 입력하면 값까지 동일한 요소를 선택할 수 있다.
• 대괄호 앞에 태그명을 붙이면 좀 더 강력하게 선택자를 제한할 수 있다.
  ex) a[href]

의사(가상) 클래스

-> 기존 "선택자"에 추가하는 특별한 상태를 선택하는 선택자

• 대표적인 의사(가상) 클래스
• 마우스를 올리면 적용되는 ":hover"
• 키보드의 텝(tab)키로 이동 시 focus 되는 ":focus"
• 리스트의 첫번째 요소만 선택하는 ":first-chilid"
• n번째 요소를 선택하는 :nth-child(n)"

a: hover {color: red }
li: first-child {color: blue; }

의사(가상) 요소

-> 기존 "선택자" 에 추가하는 선택한 요소의 일부를 스타일링 하는 선택자

• 대표적인 의사(가상) 요소
• 요소의 "앞"에 의사 요소를 생성하는 "::before"
• 요소의 "뒤"에 의사 요소를 생성하는 "::after"
• input 태그의 "placeholder" 속성을 스타일링 하는 "::placeholder"

📌상속과 초기화

상속

-> 부모 요소의 "스타일 값" 을 이어받아 자식 요소에 적용하는 것

• 샘플 코드에서,
  모든 h2 태그에 글씨색을 "빨간색" 으로 지정해도
  div 태그 안의 h2 태그는 "Inherit" 으로 인해 div 태그에 적용된 "파란색"이 적용된다.
• 샘플 코드에서 "css 셀렉터" 를 2개이상 div h2 잡은 것을 "자손 결합자" 라고 한다.

  <style>
  h2 {color: red;}
  div {color: blue;}
  div h2 {color: inherit;}
  </style>
  <h2>제목</h2>
  <div>
  <h2>div 안의 제목</h2>
  </div>

  초기화

  -> 브라우저가 지정한 속성의 초기값을 요소에 적용한다.
• 샘플 코드에서,
  em 태그의 글자는 p 태그의 자식 요소이기 때문에 p 셀렉터에 선언한 color 속성으로 인해 "빨간색"이 될 것 같지만. em 셀렉터에 선언된 "initial" 값으로 인해 브라우저가 지정한 초기값이 적용된다.
• 초기값은 예상치 못한 값일 수 있으니 주의해야한다.

  <style>
  p {color: red;}
  em {color: initial;}
  </style>
  <p>
  <em>프로그래머스에 오신걸</em>
  환영합니다.
  </p>

📌결합자,우선순위

1. 자손 결합자
2. 자식 결합자
3. 인접 형제 결합자
4. 일반 형제 결합자
5. 우선 순위(명시도)

자손결합자

-> 한 칸의 공백을 주어 앞 셀렉터의 자식 요소를 선택한다.

• 샘플코드에서, div 태그 안에 있는 모든 span 태그의 글자에 "빨간색"이 적용된다.

<style>
div span {color: red;}
</style>
<div>
<span>빨간글자</span>
<span>나도 빨간글자</span>
<p>
<span>여기도 빨간글자</span>
</p>
</div>

자식결합자

-> 앞 셀렉터의 직계 자식 요소를 선택한다.

• 샘플 코드에서, div 태그의 바로 자식 요소인 span 태그의 글자에만 "빨간색" 이 적용 된다.
  같은 div 태그의 자식인 p -> span 태그는 div 의 "직계 자식" 이 아니기 때문에 빨간색이 적용되지 않는다.

<style>
div > span {color: red;}
</style>
<div>
<span>첫번째 문단</span>
<p>
<span>HTML 계층</span>
</p>
</div>

인접 형제 결합자

-> 앞 셀렉터의 바로 다음에 위치한 형제 요소를 선택한다.

• 샘플 코드에서, a 태그의 바로 다음 p 태그의 글자에만, "빨간색"이 적용된다.

<style>
a + p {color: red;}
</style>
<a href="https://naver.com">네이버</a>
<p>바로가기</p>
<p>검은 글자</p>

일반 형제 결합자

-> 앞 셀렉터의 다음에 위치한 모든 형제 요소를 선택한다.

• 샘플 코드에서, a 태그의 다음부터 위치한 동등한 형제 p 태그의 글자에 "빨간색" 이 적용
• div 태그 안의 p 태그는 형제가 아니기 때문에 빨간색이 적용되지 않음

<style>
a ~ p {color: red;}
</style>
<a href="https://naver.com">네이버</a>
<p>바로가기</p>
<p>빨간 글자</p>
<div>
<p>검은 글자</p>
</div>

우선순위(명시도)

-> 작성 순서, 결합, 선택자에 따라 우선순위는 변경된다.

• 기본 우선 순위
  • 아래로 내려갈 수록 높은 우선순위를 가진다.
    1.유형(태그) 선택자 및 의사(가상) 요소
    2.class 선택자, 속성 선택자, 의사(가상) 클래스
    3.id 선택자
    4.lnline css
• !impoertant
  • 샘플코드에서,우선 순위에 따르면 "id" 셀렉터가 가장 강력한 우선순위를 가지지만 important 로 인해 실제 글자색은 "파란색"이 적용

    <style>
    #fontcolor {color: red;}
    div{color: blue !important;}
    </style>
    <div id="fontcolor">글자색 변경</div>

📌단위

1. 고정단위
2. 상대 길이 단위

고정단위

px

-> 픽셀은 정확한 크기를 나타내야 할 때 사용된다.

• 웹 문서에서 고정값을 나타낼 때 가장 일반적으로 사용되는 단위이다.
• 보통 웹 브라우저의 기본 폰트 크기는 16px이다.
• os, 모니터, 기기성능 등에 따라 픽셀의 처리가 조금씩 다르기 때문에 "소수점"은 사용하지 않기를 권장한다.

pt

-> point 는 일반적으로 문서 등에서 사용되는 단위.

• 보통 웹 브라우저의 pt단위 기본 폰트 크기는 12pt이다.
• 픽셀과 마찬가지로 '소수점'은 사용하지 않기를 권장한다.

상대 길이 단위

em

• em 은 요소의 글꼴 크기에 상대적인 단위
• div 태그에 선언된 "font-size: 16px; 을 기준으로, div의 내부 여백을 정의 하는 "padding" 은 1em -> 16px 가 된다.
• 앞으로 나올 모든 상대 길위 단위는 계산에 따라 소수점 단위가 사용될 수 있다.
• 또한 합성값 이기도 하다. p 태그가 16px * 2em 32px 이라면,
  그 자식인 span 태그는 64px 가 된다.

rem

• 알이엠은 합성을 회피하기 위해 만들어진 단위(자주 사용)

%

• 퍼센트는 부모 크기에 따라 상대적으로 백분율 된다.
• 샘플 코드에서, div 태그의 "font-size" 가 32px 기 때문에 자식 요소인 p 태그에 선언한 "font-size: 50% "는 16px 가 된다.

  <style>
   div {font-size: 32px;}
   p {font-size: 50%}
  </style>
  <div>
   <p>글씨 크기는 16px가 됩니다.</p>
  </div>

vw

• view port width(뷰포트 너비)는 화면의 너비에 따라 결정된다.
• vw는 웹 브라우저의 너비 또는 스마트 기기 가로 너비에 따라 결정된다.
  • 1vw = 1%
  • 100vw = 100%

vh

• 뷰포트 높이는 화면의 높이에 따라 결정된다.
  • 1vh = 1%
  • 100vh = 100%

vmin(너비 높이 상관 없이 제일 작은 기준)

• 화면에서 가장 '작은' 크기에 따라 결정
• vmin은 웹 브라우저의 높이 또는 스마트 기기의 화면 중에서 가장 '작은 ' 크기에 따라 결정된다.
• 웹 브라우저가 가로 1000px, 세로 100px 일 경우
  • 1vmin = 10px(100px 의 1 %)
  • 100vmin = 100px(100px 의 100%)

vmax(너비 높이 상관 없이 제일 큰 기준)

• 화면에서 가장 '큰' 크기에 따라 결정

📌꾸미기- 폰트

1. 글꼴 꾸미기
2. 배경 꾸미기
3. 리스트 꾸미기

font-size

• 글자 크기를 변경할 수 있다.
  • 앞에서 배운 '단위'를 사용하여 글자 크기를 변경할 수 있다.

font-family

• 글씨체를 변경할 수 있다.
  • 여러개의 글씨체를 동시에 지정할 수 있다
    • 이 경우 앞서 지정한 순서대로 글꼴이 적용
    • 앞의 폰트가 지원하지 않는 문자가 나타나면 그 뒤 폰트가 적용
    • 마지막에 'sans-serif 또는 serif 를 작성하여 모든 os 에 공통 사용되는 세리프체를 추가해 글꼴이 없는 경우 대비
  • 사용하고자 하는 글꼴 이름에 '공백'이 들어갈 수 있기 때문에 쌍타옴표 또는 홀따옴표로 감싸준다.

font-weight

• 글짜 두께를 변경
  • 숫자 또는 문자로 정의 가능
  • 숫자표기는 백단위로 100~900
  • 문자 표기는 normal, bold
  • 부모 요소의 상대적 크기
    • 부모 보다 얇게: lighter
    • 부모 보다 굵게: bolder

color

• 글자 색상 변경
• 키워드 'transparent' 를 쓰면 투명이 된다.

text-align

• 글자의 가로 정렬
  • left,center, right 값을 사용

line-height

• 글자의 줄 간격을 변경할 수 있다.

letter-spacing

• 자간을 변경 할 수있다.
  • normal 키워드를 기본으로 가진다.
  • css 단위 사용해 값 입력
  • 보통 em 단위를 사용해 부모 폰트 크기에 따라 같이 조절되게 한다.

📌꾸미기-background

background-color

• 배경 색을 지정할 수 있다.
• currentcolor 값을 사용하면 부모 요소의 글꼴 color 를 상속 받는다.

background-image

• 배경 이미지를 지정할 수 있다.
• url(이미지 경로)를 사용해 원하는 이미지를 배경으로 넣을 수 있다.

background-repeat

• 배경 이미지의 반복을 지정
  • 지정 가능한 값
    • repeat: 반복(기본값)
    • round: 반복되는 이미지가 잘리지 않게 늘려서/ 줄여서 반복
    • space: 이미지가 잘리지 않게 고르게 분배
    • no-repeat: 반복 하지 않음

background-size

• 배경 이미지의 크기 지정
  • 단일 값 입력 시 배경 이미지의 너비가 조절
  • contain: 부모 크기에 맞게 비율에 맞춰짐
  • cover: 이미지의 제일 작은 크기가 부모의 크기의 비율에 맞게 맞춰지며 나머지 커진 영역은 잘라낸다.

background-position

• 배경 이미지의 위치를 제어