[CSS/코드잇] CSS 핵심 개념 : 오늘도 코드잇 - 3주차

기본 개념

CSS 규칙

html에서 css 선택자를 통해 스타일을 지정하는 것

• id 속성을 사용하여 원하는 태그만 스타일을 변경할 수 있음
  • head의 style에서 #으로 아이디값을 가져와서 수정
  • id 값은 중복해서 쓸 수 없음
• 여러개를 같은 스타일로 지정하고 싶을 때 ⇒ class = “place”라는 속성
  • css는 .place 로 작성

CSS 파일

css 파일을 만든다.. css는 보통 분리해서 사용함

• html에서는 link 태그로 불러옴
• ⇒ <link rel=”stylesheet” hraf=”style.css”>

색상 단위

• 색상 이름
  • red, yellow, white…
• 색상 코드
  • 숫자랑 알파벳으로 나타난 코드…
• rgba → rgb + 불투명

크기 단위

• 절대적인 단위
  • 픽셀
• 상대적인 단위
  • 퍼센트 : 부모 태그에 대한 상대적인 크기, 크기를 바꾸고 싶으면 부모의 크기만 바꾸면
  • em : 부모 태의 폰트 사이즈…
  • rem : 최상위 태그의 폰트 사이즈

… 참고로 block이 세로, inline이 가로이다…. 아 근데 그냥 margin 2.5em auto로 해도 됐음… ㅋㅋ

• 코멘트
  • /코멘트/ 즉 주석인 것이다!

자주 쓰는 CSS 속성

글꼴

• 글자 크기
  • font-size: 24px
• 글자 색
  • color: #F23030
• 폰트
  • font-family: Poppins, “Noto Sans KR”, sans-serif;
  • 웹 브라우저가 차례로 확인하며 적용 가능한 글꼴로 보여줌, noto sans는 띄어쓰기가 있어서 따옴표로 감싼 것
• 글자 굵기
  • font-weight : 600
• 줄 높이
  • line-height : 1.7
  • 단위 없이 쓰는 글자 크기에 상대적인 값
  • ⇒ font size = 16px이면 line-height: 1 == 16px
• 텍스트 꾸미기
  • text-decoration : none(밑줄 없애기) / underline(밑줄) / line-through(취소선)
• 텍스트 정렬
  • text-align : center;

배경이미지

background-image : url('pizza.png');/*파일 경로 설정*/
background-repeat : no-repeat; /*이미지를 반복할 건지 설정 -> 여기서는 X*/
background-position : center; /*어떤 위치를 기준으로 정렬할 것인지*/
background-size : cover;/*이미지 비율을 유지하며 꽉 차게 */
/*contain은 이미지가 잘리지 않는 선에서 최대 크기로 지정해 */

그라디언트

background-image로 넣을 수 있음

background-image : linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
/*방향을 바꾸고싶다면*/
background-image : linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
/*이미지를 넣고 싶다면*/
background-image : linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), 
									 url('pizza.png');

⇒ CSS Gradient generator 사이트에 들어가면 보다 쉽게 짤 수 있다

그림자와 불투명도

• 그림자
  • box-shadow: 가로 세로 blur spred rgba
• 불투명도
  • opacity : 투명도
  • 1이면 불투명 0이면 투명

박스모델

margin → border → padding → content

padding

• padding : 16px 8px // 상하 16, 좌우 8
• padding : 16px 8px 24px // 상 16, 좌우 8, 하 24

⇒ 시계방향으로 생각하면 된다!

margin

width가 정해져 있을 때 auto로 자동 설정 가능

border

border : 테두리굵기 테투리모양 색

테두리 모양 : solid, dotted, dashed…

border-radius : 픽셀 ⇒ 모서리 둥글게

box-sizing

box-sizing : border-box

→ border를 기준으로 box size를 정할 수 있음

*{

box-sizing : border-box

}

추가시 *은 모든 요소를 의미함!!

overflow

내용이 box보다 클 경우

overflow : hidden; → 넘치는 것 감추기

overflow : scroll;

→ 가로 스크롤 : white-space: nowrap으로 합니다! 왜냐면 css에서는 자동 줄바꿈을 해주는데 이걸 안 하겠다는 의미!!

overflow: auto; → 넘치면 스크롤하게 만들

마진 상쇄

세로 마진은 서로 겹친다!

위 아래 마진을 더하는 것이 아니라 더 큰 것의 마진을 가져간다.

Display

• inline
  • a, span
  • 평소에 글을 쓰는 방향
  • 화면에 꽉 차면 다음 줄로 넘어감
  • 너비나 높이를 지정할 수 없음
  • 여백은 가로로만 가능!
• block
  • h1, p, div
  • 위에서 아래로 배치됨
  • 너비와 높이를 지정할 수 있음

inline은 크기가 없다고 생각하기 때문에 다른 글과 겹쳐서 보일 수 있음

→ display : inline-block으로 하면 된다… inline이지만 크기가 있다고 생각하는 것

display : none은 감출 때 쓴다

• float
  • float : right;
  • ⇒ 오른쪽으로 배치된다… 나머지 inline들이 자리를 비켜줌!!

CSS 선택자

선택자 목록

• 같은 속성을 사용한다면 선택자를 컴마로 이어서 같은 속성을 표현한다

선택자를 여러 개 쓰는 법

• html
  • class = “ date bookmark” 처럼 띄어쓰기로 구분하면 됨

→ 두 개 다 선택자로 쓰는 애들의 속성을 바꾸고 싶을 땐

• css
  • .book-info.delay(순서 상관 X)

부모 - 자식 관계 선택자 지정

.book-container > .title

이러면 book-container의 자식 중 title을 의미 함

부모에서 자손을 부르는 법은…

.book .date (띄어쓰기로 구분)

가상 클래스(sudo class)

• 마우스를 올리면 밑줄 이 생기는 것!!

a:hover{
	text-decoration: underline;
}

⇒ hover : 마우스를 올렸을 때를 말하는 가상 클래스 미리 지정되어있음

• active : 링크를 클릭했을 때
• focus : 탭키를 누를 때…
• visited : 이미 방문한 링크의 경우

꿀 팁.

• .gallery의 모든 자식 요소 선택요런 느낌
• .gallery > * { width : 120px height : 90px; }
• n번째 자식 선택
  • first-child 도 되고
  • last-child도 됩니당
• .gallery : nth-childe(3) {...} /*또는*/ .gallery : nth-child(even) {...}
• 가로마진을 일정하게 두고 싶을 때
  • margin-left로 다 동일하게 마진을 주고
  • first-child나 last-child를 활용해서 양 끝 마진을 두면 됩니당

스타일 계산하기

캐스케이드

css 규칙을 어떻게 합칠 지 정해주는 것!!