CSS 기초 - [Codestates] Section1

CSS 기초

학습목표 

• CSS의 사용 목적을 이해한다.
• CSS의 기본 문법과 구조를 이해한다.
• CSS를 HTML에 적용하는 방법에 대해서 이해한다.
• HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.
  • 각 단위가 적합한 경우를 구분할 수 있다.
• MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

---

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

- 사용자 인터페이스(UI; user interface) ;  인터페이스는 컴퓨터와 교류하기 위한 연결고리. (원래는 불편한 CLI 사용) 

- 좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다. 

- 무료 아이콘 검색어 'free app icon'

 

- css 내용 분해 

 >> 셀렉터는 요소 이름이나 id, 또는 클래스를 선택합니다. 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다. 요소에 적용할 수 있는 내용을 속성이라고 합니다. 색상, 글자 크기 등 다양한 속성이 있습니다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현합니다.

 

- CSS 파일 추가 

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

  >>  <link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. <link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가합니다. href 속성에는 파일의 위치를 추가해야 합니다. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일 이름만 입력합니다. 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.

 

- CSS스타일 적용방법 3가지 ; 인라인스타일(같은줄에 작성) , 내부스타일시트(<style>태그 안에 작성) , 외부스타일시트

- CSS 셀렉터 ; id 셀렉터 '#idname'  , class 셀렉터 '.classname' ,

- CSS 셀렉터 여러 class에 한번에 적용; 

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

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

  >> 여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분합니다. 다음 예제를 통해 <li> 요소에 2개의 class가 적용된 내용을 확인할 수 있습니다.

텍스트 꾸미기

- 색상 : 글자의 색상을 변경하는 속성은 color 입니다. 속성에 삽입할 수 있는 값은, HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있습니다.

- 글꼴 : font-family 속성을 통해 글꼴(폰트)을 설정할 수 있습니다.

글꼴의 이름은 따옴표를 붙여서 적용할 수 있습니다. 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있습니다. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있습니다. fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책입니다. 입력된 순서대로 fallback이 적용됩니다.

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

 - 웹 폰트 기술 ; 개발자가 표현하고 싶은 글꼴을 기기에 바로 적용하도록 필요에 따라서 웹에서 다운로드 하게 하는 기술 

https://fonts.google.com/

Google Fonts

  >> 구글폰트 ; 한글 글꼴도 많이 있고, embed를 위한 코드도 제공돼, 쉽게 사용할 수 있습니다.

 

- 크기 ; 글자의 크기를 변경하기 위해서는 font-size 속성을 사용합니다.

- 기타 스타일링 ;

• 굵기: font-weight  >> 얇100~ 900굵  >> 보통 400 
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

- 정렬 ; 가로로 정렬할 경우 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.

절대단위 , 상대단위 

• 절대 단위: px, pt 등   >> 고정된 단위이므로 사용자 접근성 불리 
• 상대 단위: %, em, rem, ch, vw, vh 등  >> 일반적으로 추천 , 브라우저 기본 글자크기에 따라 조절 https://www.daleseo.com/css-em-rem/

CSS 상대 단위 - em과 rem

---

박스모델

 >> 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됩니다. 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가집니다. CSS를 이용해 속성과 값으로 그 크기를 설정합니다.

 

줄바꿈이 되는 박스 ( Block) vs 옆으로 붙는 박스 ( inline, inline-block)

- 줄 바꿈이 되는 요소: <h1>, <p>

- 줄 바꿈이 되지 않는 요소: <span>

박스를 구성하는 요소  ( 마-보-패-콘)

- border ; 테두리 

- margin 바깥 , padding 안쪽 

p {
  margin: 10px 20px 30px 40px;
}  <!-- 위,오른쪽, 아래, 왼쪽 시계방향 -->

p {
  margin: 10px 20px;
}  <!-- 위아래, 양옆 -->

p {
  margin: 10px;
}  <!-- 사방통일 -->

p {
  margin-top: -2rem;
}   <!-- 특이하게 음수값 지정도 가능 다른엘리먼트와 겹치도록 -->

 

박스 벗어나는 콘텐츠 처리 ( 스크롤 ) 

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

<!--  p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시합니다.-->

박스크기 측정기준

처음 레이아웃 디자인을 할 때 가장 많이 하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

레이아웃 디자인을 조금 더 쉽게 하는 방법이 있습니다. 여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것입니다. 한 번 적용해보겠습니다. *은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.

* {
  box-sizing: border-box;
}
마진은 포함 x

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 일반적으로 box-sizing은 HTML 문서 전체에 적용합니다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다. 앞으로 레이아웃과 관련된 이야기를 할 때는 border-box 계산법을 기준으로 이야기합니다. 박스 크기 측정 기준 두 가지를 항상 기억해 주세요.

* content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.

 

---

CSS Selector

학습목표

• 다양한 CSS selector 규칙을 이해한다.
• 후손 selector와 자식 selector의 차이를 이해한다.
• 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.

 

다양한  CSS selector

- 전체 셀렉터 

* { }

- 태그 셀렉터 

h1 { }
div { }

section, h1 { }

- ID 셀렉터 

#only { }

- class 셀렉터 

.widget { }
.center { }

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

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

 

자식 / 후손/ 형제 셀렉터 

자식 셀렉터 ; 첫번째 입력요소의 바로 아래 자식을 선택 

header > p { }

후손 셀렉터 ; 첫번째 입력요소의 후손을 선택 -> 자식과 자식의 자식인 <p>를 모두 선택 

header p {}

형제 셀렉터 ; 같은 부모 아래  '첫번째 요소' 뒤에오는 '두번째 요소'를 모두 선택 

section ~ p { }

인접 형제 셀렉터 ; 같은 부모 아래 '첫번째 요소' 바로 뒤의 '두번째 요소' 선택 

section + p { }

 

기타 셀렉터 

가상 클래스 셀렉터 

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 { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터 

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

적합성 확인 셀렉터 

input[type="text"]:valid { }
input[type="text"]:invalid { }

 

---

TIP 

- 초기화 ( 많이들 사용하는 css 기본세팅)

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

- VScode 사용 편의성 ; google 'emmet' 검색 

https://velog.io/@rain98/VSCode-Emmet-%EC%82%AC%EC%9A%A9%EB%B2%95

VSCode Emmet 사용법