[210705 TIL] CSS
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;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
font-weight: bold;
}
- hex 색상코드
- 여섯자리로 표현 ex) #0067a3
- rgb 값
- 빨강, 초록, 파랑으로 표현 ex) rgb(235, 70, 57)
- hsl
- 색상, 채도, 명도(hue, saturation, lightness)로 표현
ex) hsl(4, 82%, 57%)
- 색상, 채도, 명도(hue, saturation, lightness)로 표현
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>안녕 하세요</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
- border: 두께 선스타일 선색깔;
text-decoration: underline;
을 사용하면 밑줄의 두께나 색깔등을 완벽하게 커스터마이징 하기가 어렵다.border-bottom
을 사용해 내가 원하는 대로 커스터마이징 할 수 있다.border-bottom
을 사용하는 것을 선호한다.- 디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데, 디자인만 보고 코딩하려면 머리속으로 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
body {
color: pink;
font-size: 15px;
}
color:pink;
font-size: 15px;
을 가진다면, 자식 요소에게 스타일 속성이 존재하지 않더라도 부모의 스타일이 그대로 적용된다.color: red;
를 가지고 있을 때 자식 요소가 color
속성을 가지고 있지 않다면 부모 요소의 스타일 속성이 그대로 적용되지만, 만약 자식태그가 color: pink;
라는 똑같은 스타일 속성을 가지고 있다면 자신의 속성값인 pink가 적용된다.div, span {
color: blue;
}
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
- 거의 대부분의 요소에 class를 부여해주고,
<참고>
Author And Source
이 문제에 관하여([210705 TIL] CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rimi0108/210705-TIL-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)