[CSS] CSS 기초, 박스모델, 셀렉터

1. CSS 기초

1. CSS : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

• 좋은 사용자 경험을 제공하기 위한 도구

2. CSS 기본구조

• 셀렉터 : 요소 이름이나 id, 또는 클래스를 선택
• 선언 블록 : 중괄호 안에서 요소에 적용할 내용을 작성
• 속성 : 요소에 적용할 수 있는 내용, 속성에 적용할 적절한 값을 입력하여 스타일을 표현

3. CSS를 HTML과 연결하기

• 태그 안에서 href 속성을 통해 파일을 연결
• rel : 연결하고자 하는 파일의 역할이나 특징을 나타냄

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

• 모든 요소를 선택해서 스타일링할 수 있음

li {
  text-decoration: underline;
}

• id가 있는 요소를 선택할 때는 # 기호 사용

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
  color: red;
}

• class를 지정해서 스타일링할 때는 .을 사용

<!-- 바른 예제 -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}

• 여러 개의 class를 하나의 엘리먼트에 적용 : 띄어쓰기로 구분

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

4. 텍스트 꾸미기

기능	속성	기능	속성
글자 색상	color	굵기	font-weight
배경 색상	background-color	밑줄, 가로줄	text-decoration
테두리 색상	border-color	자간	letter-spacing
글꼴	font-family* google font 활용	행간	line-height
크기	font-size	정렬	가로 : text-align세로 : vertical-align

• 정렬 관련 유의사항
• 가로정렬 text-align - 유효한 값 : left, right, center, justify(양쪽 정렬)
• 세로정렬 vertical-align - 부모 요소의 display 속성이 반드시 table-cell이어야 함, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용
• 를 사용하지 말아야 하는 이유 : 관심사 분리. 구조설계는 html에서.

5. 절대 단위와 상대 단위

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

글꼴 사이즈를 정할 때

• 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 : px(픽셀)
• 일반적인 경우 : 상대 단위인 rem

화면 사이즈를 정할 때

• 반응형 웹(responsive web)에서 기준점을 만들 때 : px
• 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw, vh1vw : 보이는 영역 너비의 1/1001초 : 영역 높이의 1/100

2. 박스모델

1. block vs inline-block vs inline

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비 (width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용가능 여부	가능	가능	불가능

• block 엘리먼트 목록 : https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
• inline 엘리먼트 목록 : https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Block-level elements - HTML: HyperText Markup Language | MDN
developer.mozilla.org

Inline elements - HTML: HyperText Markup Language | MDN
developer.mozilla.org

2. CSS 박스를 구성하는 요소

!https://blog.kakaocdn.net/dn/bbW5Ny/btrKURDdcBu/kakiW0LFPda8I94WJLF031/img.png

• Border : 테두리각각의 값 : 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)

  p {
    border: 1px solid red;
  }

• margin : 바깥 여백

  p {
    margin: 10px 20px 30px 40px;
  }

• 각각의 값 : top, right, bottom, left (시계방향)

  p {
  	margin: 10px 20px;
  }

• 값을 두 개만 넣을 경우 : 각각 top bottom / right left

  p {
  	margin: 10px;
  }

• 값을 하나만 넣을 경우 : 모든 방향의 바깥 여백에 적용

  p {
  	margin-top: 10px;
  	margin-right: 20px;
  	margin-bottom: 30px;
  	margin-left: 40px;
  }

• 방향을 특정한 속성도 존재

  p {
    margin-top: -2rem;
  }

• 음수 값을 지정할 경우 : 다른 엘리먼트와의 간격이 줄어들거나 겹치게 만들 수 있음
• padding : 안쪽여백값 설정은 margin과 동일

  p {
    padding: 10px 20px 30px 40px;
  }

3. 박스를 벗어나는 콘텐츠 처리

• 박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옴
• p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에 스크롤을 표시할 수 있음
• overflow: hidden;을 사용하면 초과한 컨텐츠를 보이지 않게 할 수 있음

p {
  height: 40px;
  overflow: auto;
}

4. 박스 크기 측정 기준

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

위 코드에서 #container의 넓이는 300px가 아니라 324px, #inner의 100%는 300px가 아니라 364px

#container	#inner
300px (콘텐츠 영역)+ 10px (padding-left)+ 10px (padding-right)+ 2px (border-left)+ 2px (border-right)	300px  (300px의 100%)+ 30px (padding-left)+ 30px (padding-right)+ 2px (border-left)+ 2px (border-right)

• (모든 요소를 선택하는 셀렉터)로 box-sizing 속성값을 border-box로 지정하면 여백과 테두리 두께를 포함해서 박스 크기를 지정할 수 있음

* {
  box-sizing: border-box;
}

3. CSS selector

전체 셀렉터 참고 : https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference
www.w3schools.com

요약

종류	명칭	표기	종류	명칭	표기
기본	전체	* { }	자식 / 후손 / 형제	자식	header > p { }
	태그	h1 { }		후손	header p { }
	ID	#id { }		형제	section ~ p  { }
	class	.class { }		인접 형제	section + p { }
	attribute

1. 기본 셀렉터

전체 셀렉터 : 문서의 모든 요소 선택

* { }

태그 셀렉터 : 같은 태그명을 가진 모든 요소 선택 (복수선택 가능)

h1 { }
div { }
section, h1 { }

ID 셀렉터 : #id, 해당 id의 요소 선택

#id { }

class  셀렉터 : .class, 같은 class를 가진 모든 요소 선택

.widget { }
.center { }

attribute 셀렉터 : 같은 속성을 가진 요소를 선택

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

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

자식 셀렉터 : 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택

header > p { }

후손 셀렉터 : 첫 번째로 입력한 요소의 후손을 선택. 자식뿐만 아니라 자식의 자식들 중의 같은 요소(아래 예시에서는 p요소) 까지 선택

header p {}

형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

section ~ p { }

• 아래 예시의 경우 : 요소 뒤에 있는 세 개의

  요소를 모두 선택

<header>‌
	<section></section>‌
	<p></p><!-- 선택 -->
	‌<p></p><!-- 선택 -->‌
	<p></p><!-- 선택 -->
</header>

인접 형제 셀렉터 : 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택

section + p { }

3. 기타 셀렉터

가상 클래스 셀렉터 : 요소의 상태 정보에 기반해 요소를 선택

a:link { }/*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { }/*사용자가 방문한 <a>요소를 선택합니다. *
/a:hover { }/* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { }/* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { }/* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 셀렉터

input:checked + span { }/*체크 상태일 때 선택합니다. */
input:enabled + span { }/*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { }/*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 셀렉터

p:first-child { }/*p엘리먼트 중에서 첫 번째 자식 엘리먼트*/
ul > li:last-child { }/*ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택*/
ul > li:nth-child(2n) { }section > p:nth-child(2n+1) { }/* section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택*/
ul > li:first-child { }li:last-child { }div > div:nth-child(4) { }/* div의 자식 엘리먼트 중에서 네 번째 자식 엘리먼트가 li인 것*/
div:nth-last-child(2) { }/* 엘리먼트가 div인 것 중 마지막에서 두 번째 자식인 것*/
section > p:nth-last-child(2n + 1) { }/* section의 자식 엘리먼트 중에서, 마지막에서 홀수 번째 자식 엘리먼트가 p인 것*/
p:first-of-type { }/* p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택 ((first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택) */
div:last-of-type { }/* div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택 */
ul:nth-of-type(2) { }/* ul 엘리먼트의 형제 엘리먼트 중 두 번째 ul 엘리먼트를 선택 */
p:nth-last-of-type(1) { }/* p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택 */

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }/*div 엘리먼트의 형제 엘리먼트 중 두 번째 div 엘리먼트를 제외한 모든 div 엘리먼트를 선택*/
p:not(#only) { }/*p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택*/

정합성 확인 셀렉터