CSS 박스모델 셀렉터 6/30

waymo·2022년 7월 3일
0
post-thumbnail

💻UNIT5

CSS 기초

1. CSS

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어. HTML로 웹페이지의 구조를 잘 만든뒤 CSS를 이용해 UI및 레이아웃 등 스타일을 설정 구성하여 웹페이지를 만들 수 있다
CSS를 사용하여 화면의 구성이나 배치(레이아웃)을 직관적이고 쉬운 UI로 만들어서 더 나은 사용자 경험(UX)을 제공하는 것이 프론트엔드 개발자의 기본소양이다

UI(User Interface)
UX(User Experience)

2. CSS의 문법

CSS RULE

selector { 
	property속성: value값;
}
h1 {
	color: purple;
}
img {
	width: 100px;
    height: 200px;
}

셀렉터는 요소의 이름이나, id 또는 클래스로 특정 요소를 선택 후에 중괄호 안에서 이 요소에 적용할 스타일 속성 내용을 적는다.

3. HTML과 CSS 연동

<link rel="stylesheet" href="index.css" />

외부에 있는 CSS파일을 HEAD태그 안에 LINK태그로 CSS파일을 로드하는 방식
가장 많이 사용된다

2. Embedding style

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 { color: black; }
      p  { background: magenta; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Give me some chicken.</p>
  </body>
</html>

HTML 내부에 style태그를 이용해서 CSS를 포함시키는 방식이다.

3. Inline 방식

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: black">Hello World</h1>
    <p style="background: magenta">Give me some chicken.</p>
  </body>
</html>

HTML 요소의 style 속성에 CSS를 기술하는 방식이다.


4. 텍스트 꾸미기

1.색상

color

  • 글자의 색상을 변경하는 속성
h1 {
  color: blue;
}
p { 
  color: #F08080;
}

색상값은 색상이름, HEX값으로 사용할 수 있다.

2.글꼴

font-family

  • 글꼴을 지정할 수 있다
.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴의 이름은 따옴표를 붙여서 적용하고, 사용하려는 글꼴이 존재하지 않거나 지원하지 않을 수 있을때를 대비하여 fallback 글꼴을 추가할 수 있다. ,쉼표로 구분하여 fallback글꼴을 입력한다. 마지막 자리에는 OS의 기본적으로 설치되어 있는 generic-family폰트를 추가해 대비한다.
GoogleFonts에서 원하는 글꼴을 link태그를 사용해서 embed할 수 있다.

3. 크기

font-size

  • 글자의 크기를 변경할 수 있다.
.title {
  font-size: 24px;
}

4. 굵기

font-weight

  • 글자의 굵기를 지정할 수 있다.
.title {
  font-weight: bold;
}
.thicker {
  font-weight: 900;
}

숫자는 100 - 900으로 설정하고 400크기가 normal 700크기가 bold
normal bold를 적어서 사용 가능하다.
bolder는 부모요소보다 더 두껍게 lighter는 부모요소보다 더 얇게 설정할 수 있다.

기타스타일링

text-decoration 밑줄

a {
  text-decoration: none;
}
  • a태그의 underline을 제거할 수 있다.
    none, underline, overline, line-through

letter-spacing 자간

  • 글자 사이의 간격을 지정한다.

line-height 행간

  • 텍스트의 높이를 지정한다. 텍스트의 줄 간격을 설정 텍스트 수직정렬에도 응용!
    unitless numbers를 사용하는 것을 권장한다.

text-align

  • 텍스트의 수평 정렬을 정의한다.

5. 절대단위와 상대단위

  • 절대 단위: px, pt
  • 상대 단위: %, em, rem, ch, vw, vh

1.글꼴 사이즈를 정할때

  • 기기나 브라우저 사이즈 등의 환경에 영향을 받지않는 절대적인 크기로 정하는 경우에는 px(픽셀)을 사용한다. px은 크기가 고정된 절대단위이다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

  • 일반적인 경우에는 상대 단위인 rem을 권장한다. root의 글자크기, 브라우저의 기본 글자 크기가 1rem이며 두배로 크게하려면 2rem, 작게하려면 소수점숫자로 ex) 0.7 로 조절해서 사용가능하다.

2. 화면사이즈를 정할때

  • 반응형 웹(reponsive web)에서 기준점을 만들때
    디바이스에 너비에 따라 유동적인 레이아웃이 적용되는 반응형 웹의 기준점을 만들때는 px을 이용한다.
  • 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
    vw,vh 를 사용하여 구현한다. ex) 100vw, 100vh

6. 박스모델

1. border (테두리)

  • 테두리는 심미적인 용도 외에도, 각 영역이 차지하는 크기를 파악하기위해, 레이아웃의 크기를 시각적으로 확인할 수 있게 한다.
p {
  border: 1px solid red;
}

border 속성에는 테두리 두께border-width, 테두리 스타일border-style, 테두리 색상border-color로 각각 개별로 값을 지정할 수도 있고 border속성을 통해 모두 지정할 수 있다.
border-radius
테두리 모서리를 둥글게 표현하도록 지정할 수 있다. px,em 등 과 %를 사용해야 한다.
50% 지정할경우 원 모양

2. margin (바깥 여백)

  • 테두리 바깥에 위치하는 요소의 외부 여백 영역이다. margin 값은 마진 영역의 두께를 의미하고 색을 지정할 수 없다.
p {
  margin: 10px 20px 30px 40px;
}

각각의 값은 top, right, bottom, left로 시계방향으로 지정 가능하다!

p {
  margin: 10px 20px;
}

값을 두개만 지정할 경우에는 상하 10px, 좌우 20px로 (상하, 좌우) 로 지정 가능하다!

3. padding (안쪽 여백)

  • 테두리 안에 위치하는 요소의 내부 여백 영역이다. padding 값은 마진 영역의 두께를 의미하고 요소의 적용된 배경색, 이미지는 패딩영역까지 적용된다.
p {
  padding: 10px 20px 30px 40px;
}

각각의 값은 top, right, bottom, left로 시계방향으로 지정 가능하다!

p {
  padding: 10px 20px;
}

값을 두개만 지정할 경우에는 상하 10px, 좌우 20px로 (상하, 좌우) 로 지정 가능하다!

4. 콘텐츠가 박스를 벗어난 경우

p {
  height: 40px;
  overflow: auto;
}
  • overflow 속성 auto를 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시한다.

5. box-sizing

  • box-sizing은 width, height 프로퍼티의 대상 영역을 변경할 수 있다.
    기본값은 content-box로 width와 height의 영역의 값이 content영역을 의미한다.
    border-box로 지정할 경우 width와 height의 영역의 값이 padding과 border를 포함한 영역으로 지정되어 레이아웃 디자인을 쉽게 할 수 있다.



7. 기본 Selector

1. 전체 셀렉터 (Universal Selector)

*

*{  }
  • 전체 셀렉터는 문서의 모든 요소를 선택한다.

2. 태그 셀렉터 (Type Selector)

h1 { }
div { }

section, h1 { }
  • 같은 태그명을 가진 모든 요소를 선택한다. ,을 이용해 복수로도 선택 가능하다.

3. ID 셀렉터 (ID Selector)

#only {  }
  • #id 로 입력하여 선택한다.

4. class 셀렉터 (Class Selector)

.widget { }
.center { }
  • .class로 입력하여 선택한다.

5. Attribute Selector

셀렉터[attribute="값"]
  • 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.
셀렉터[attribute~="값"] // 지정된 어트리뷰트의 값이 지정된 값을(공백으로 분리된) 단어로 포함되는 요소를 선택
셀렉터[attribute|="값"] //지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.
셀렉터[attribute^="값"] // 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.
셀렉터[attribute$="값"] // 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.
셀렉터[attribute*="값"] // 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.

8. 자식 / 후손 / 형제 셀렉터

1. 자식 셀렉터 (Child Combinator)

header > p { }
  • > 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.

2. 후손 셀렉터 (Descendant Combinator)

header p { }
  • 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다.

3. 형제 셀렉터(General Sibling Combinator)

section ~ p {  }
  • ~형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다.

4. 인접 형제 셀렉터(Adjacent Sibling Combinator)

section + p { }
  • 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다.

9. 기타 셀렉터

1. 가상 클래스 셀렉터 (Pseudo-Class Selector)

  • 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.

링크 셀렉터 / 동적 셀렉터

:link	//셀렉터가 방문하지 않은 링크일 
:visited	//셀렉터가 방문한 링크일 
:hover	//셀렉터에 마우스가 올라와 있을 
:active	//셀렉터가 클릭된 상태일 
:focus	//셀렉터에 포커스가 들어와 있을 때

UI 요소 상태 셀렉터

:checked	//셀렉터가 체크 상태일 
:enabled	//셀렉터가 사용 가능한 상태일 
:disabled	//셀렉터가 사용 불가능한 상태일 때

구조 가상 클래스 셀렉터

:first-child	// 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.
:last-child	// 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.

:nth-child(n)	//셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n)	//셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.

:first-of-type	// 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다.
:last-of-type	셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.
:nth-of-type(n)	셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.
:nth-last-of-type(n)	셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.

부정 셀렉터

:not(셀렉터)	// 셀렉터에 해당하지 않는 모든 요소를 선택한다.

정합성 체크 셀렉터

:valid(셀렉터)	// 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터)	// 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

2. 가상 요소 셀렉터 (Pseudo-Element Selector)

  • 가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다
::first-letter	// 콘텐츠의 첫글자를 선택한다.
::first-line // 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after	// 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before // 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection	// 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.
profile
FE 개발자(진)가 되고 싶습니다

0개의 댓글