CSS

외부 css 문서 연결

<link href="style.css" rel="stylesheet" type="text/css" />

• link : link 태그로 작성할 css 파일 링크
• href : css 파일 경로 작성
• rel : HTML 파일과 CSS 파일과의 관계를 설명하는 속성, CSS 파일 링크할 때는 항상 "stylesheet" 값 대입
• type : 링크로 연결될 파일이 어떤 것인지를 알려줌, CSS 파일의 type 값은 항상 "text/css"

font style

font-family

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

• 브라우저가 Georgia라는 폰트를 지원한다면 폰트 Georgia 적용
• Georgia 폰트 지원 하지 않을 시, Times New Roman 폰트 적용
• 앞의 두 폰트 모두 지원하지 않을 시 Times 폰트 적용
• 앞의 세 폰트 모두 지원하지 않을 시 serif 적용
• "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄어쓰기 가 되어있으면 ""(쌍따옴표) 사용!!
• 사용자가 어떤 브라우저를 사용할 지 모르기 때문에 보통 font-family 에는 여러 폰트를 넣는다.
• 가장 뒤에 위치한 폰트는 모든 브라우저에서 지원하는 폰트이다.
• 만약 class나 id에 css 값이 있다면 해당 스타일을 우선순위로 적용하게 된다.

font-weight

• 글자 두께를 조절하는 속성
• bold, normal, 400, 700 등의 값을 지정할 수 있다.

h2 {
  font-weight: bold;
}

font-style

• 글씨 스타일을 변경할 수 있음

color

• 글씨 색상을 변경할 수 있음
• 색상을 표현하는 방법에는 여러가지가 있다.
  • hex 색상코드
    • 여섯자리로 표현 ex) #0067a3
  • rgb 값
    • 빨강, 초록, 파랑으로 표현 ex) rgb(235, 70, 57)
  • hsl
    • 색상, 채도, 명도(hue, saturation, lightness)로 표현
      ex) hsl(4, 82%, 57%)

문구 스타일

text-align

• 텍스트 정렬
• 속성값에는 left, center, right가 있음

p {
  text-align: center;
}

• 모든 요소의 기본 정렬은 왼쪽 정렬이다.
• 아무 text-align을 주지 않은 요소와, text-align: left; 를 준 요소는 같다.
• <span> 태그는 inline-element 이므로 텍스트만큼 영역을 차지 하고 있어 text-align 속성이 적용되지 않는다.

text-indent

• HTML 문서에서 스페이스와 엔터를 추가해도, 실제 화면에서는 적용되지 않는다.
• 이 때 text-indent를 사용해 띄어쓰기를 할 수 있다.

p {
  text-indent: 20px;
}

*참고 <blockquote> 태그는 인용구문을 사용할 때 넣는 태그이다. 이 태그를 사용하면 양쪽 여백이 자동으로 사용된다.

•   이용해서 공백을 넣을 수도 있다.

<p>안녕 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;하세요</p>

안녕       하세요

blockquote

• blockquote를 가운데 정렬하는 방법에는 두 가지가 있다.
  • 이미 index.html에 작성해놓은 center 클래스를 부여한다.
  • blockquote 태그를 selector로 하여 새로운 css를 추가한다.

Border

• border 속성값 순서
  • border: 두께 선스타일 선색깔;
• border도 margin과 마찬가지로 top, right, bottom, left를 선택해서 적용할 수 있다.
• text-decoration: underline; 을 사용하면 밑줄의 두께나 색깔등을 완벽하게 커스터마이징 하기가 어렵다.
• 이 때 border-bottom 을 사용해 내가 원하는 대로 커스터마이징 할 수 있다.
• CSS 문법적으로는 밑줄이 아니라 아래쪽 테두리이지만 내가 원하는 대로 디자인 할 수 있어 개발자들은 border-bottom 을 사용하는 것을 선호한다.

box-sizing

• 디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데, 디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 된다.
• 수많은 개발자는 이것이 불편하다는 것을 알고 새로운 CSS 프로퍼티를 만든다.
• box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.
• box-sizing: content-box | border-box | initial | inherit
  • content-box : 콘텐트 영역을 기준으로 크기를 정한다.
  • border-box : 테두리를 기준으로 크기를 정합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

div {
  width: 500px;
  box-sizing: border-box;
}

• 만약 width 값을 500px로 주고 box-sizing 속성값을 content-box로 주면 border값을 제외한 넓이가 500px이 된다.
• 만약 box-sizing 속성값을 border-box로 주면 border값을 포함한 넓이가 500px이 된다.

상속, 그룹

상속

• 상속은 CSS가 가진 특성이다.
• 말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된 다는 의미이다.

body {
 color: pink;
 font-size: 15px;
}

• 만약 HTML 문서의 body 태그안에 p 태그가 존재한다면, body 태그는 p 태그의 부모 요소이며 p 태그는 body 태그의 자식요소이다.
• 위에서 부모 요소인 body 태그가 스타일 속성 color:pink; font-size: 15px;을 가진다면, 자식 요소에게 스타일 속성이 존재하지 않더라도 부모의 스타일이 그대로 적용된다.
• 하지만 자식 요소가 그 스타일 속성을 가지고 있다면 자신의 스타일 속성이 적용된다.
• 만약 부모 요소가 color: red; 를 가지고 있을 때 자식 요소가 color 속성을 가지고 있지 않다면 부모 요소의 스타일 속성이 그대로 적용되지만, 만약 자식태그가 color: pink; 라는 똑같은 스타일 속성을 가지고 있다면 자신의 속성값인 pink가 적용된다.

그룹

• 각자 다른 태그나 클래스에 같은 스타일을 적용하고 싶을 때 selector에 똑같은 스타일을 적기 보다는 한꺼번에 스타일을 적용할 수 있다.

div, span {
  color: blue;
}

CSS selector

p.myself {
  font-size: 15px;
}

• class나 id가 selector일때 태그와 결합할 수 있다.
• 위는 p태그이면서, class myself 이다.
• 클래스, 아이디, 태그를 모두 조합할 수도 있지만, 클래스 값은 문서에 오직 하나만 존재할 수 있으므로 과한 표현이다.

div .profile {

}

• 위는 selector들이 한 칸 띄워져 있다.
• 위는 div 안의 class profile에 속성을 적용한다는 뜻이다.
• 여러 개도 사용 가능하다.

CSS specificity

• CSS 우선순위
• 우선순위는 점수 단위로 계산된다.
  • inline styling(13줄에 style 요소로 직접): 1000점
  • id: 100점
  • class: 10점
  • tag: 1점
  • 우선순위
    • inline styling > id > class > tag
• 그럼, 우선순위를 계산하면서 코딩해야하나?
  • 거의 대부분의 요소에 class를 부여해주고,
    class를 selector로 styling해주어, 최대한 중복을 피할 수 있도록 작성한다.
  • 점수의 gap이 워낙 크기 때문에 아래의 개념정도만 알면 된다.
    • inline css >>>>>> id >>>> class >>>>> tag

<참고>

• https://www.codingfactory.net/10630