CH.1 CSS (Cascading Style Sheets) 기초
📌 CSS
🔸 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어로, 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 도움.
🔸 개발자는 이 CSS로 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface)를 만듦.
사용자 인터페이스 (UI; User Interface)
🔸 인터페이스(interface) : 컴퓨터와 교류하기 위한 연결고리.
🔸 예전에는 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI를 사용했었고, 키보드로 작성한 비밀 암호 같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었음. 하지만 오늘날에는 간단하게 마우스로 버튼 모양의 인터페이스를 누르면 실행시킬 수 있음.
🔸 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부름.
🔸 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용없기 때문에, 사용자가 애플리케이션을 사용하게 하려면 UI가 꼭 필요. 이처럼 중요한 UI를 만드는 것이 프론트엔드 개발자의 역할.
사용자 경험 UX (User Experience)
🔸 사용자가 제품, 서비스, 시스템 등을 사용하면서 느끼는 전반적인 경험.
🔸 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나옴.
📌 CSS의 문법 구성
🔸 Selector : 요소 이름이나 id, 또는 class를 선택.
🔸 중괄호({}) 내에 이 요소에 적용할 속성명, 속성값을 작성.
🔸 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분.
html과 css 연결하기
🔸 외부 스타일 시트
HTML 파일 외부에 css 파일을 따로 작성하는 것.
<link rel="stylesheet" href="index.css" /><link>: HTML 파일과 다른 파일을 연결하는 목적으로 사용.rel: 연결하고자 하는 파일의 역할이나 특징을 나타냄.href: 파일의 위치 추가. (다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력할 수 있음)
🔸 인라인 스타일
HTML 파일 내의 요소의 같은 줄에서 스타일을 적용하는 것. 작은 웹사이트나 간단한 HTML 페이지에서는 편리할 수 있지만, 대규모 프로젝트에서는 권장되지 않음.
- 복잡도가 증가로 유지보수성 감소.
- 코드 재사용성 감소
- 검색 엔진 최적화(SEO)에 불리.
- 디자인과 로직을 분리하지 못함.
<nav style="background: #eee; color: blue">...</nav>🔸 내부 스타일 시트
CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 것.
🔸 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않음. 하지만 파일로 굳이 구분하지 않아도 될 만큼의 적은 CSS를 사용할 경우, 직접 CSS 속성을 추가하는 방법이 있음.
📌 기본적인 선택자 (selector)
📌 텍스트 꾸미기
색상
🔸 color : 글자의 색상을 변경, 속성값은 HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있음.
🔸 background-color : 배경 색상
🔸 border-color : 테두리 색상
글꼴
🔸 font-family : 글꼴의 이름은 따옴표를 붙여서 적용할 수 있음.
🔸 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 경우, fallback 글꼴을 추가할 수 있으며, 쉼표로 구분하여 입력. 입력된 순서대로 fallback이 적용됨.
- 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술.
- 기본 사용법
@font-face규칙을 사용해 적용.font-family: 사용할 웹 폰트의 이름. 폰트 파일의 이름과 일치하지 않아도 되지만, 비슷하게 설정하는 것이 유지 보수에 좋음.src: 폰트 파일의 경로와 폰트의 형식.url폰트 파일 경로,format폰트 파일 형식.@font-face규칙을 설정한 다00음, 필요한 선택자(selector)의font-family속성에서 사용할 웹 폰트의 이름을 호출해 사용. 만약 웹 폰트 로딩이 실패하면 다음에 선언된 폰트가 렌더링되며, 이를 폴백 폰트(fallback font)라고 함.
기타 스타일링
🔸 font-size : 크기
🔸 font-weight : 굵기
🔸 text-decoration : 밑줄, 가로줄
🔸 letter-spacing : 자간
🔸 line-height : 행간
정렬
🔸 text-align : 가로로 정렬. (속성값: left, right, center, justify)
🔸 세로로 정렬할 경우, 부모 속성이 display : table-cell이어야 vertical-align을 할 수 있음.
🔸 세로 정렬은 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용 가능.
📌 절대 단위 & 상대 단위
🔸 절대 단위 : 일반적으로 항상 동일한 크기로 간주됨. px, pt 등
🔸 상대 단위 : 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기)와 관련이 있음. %, em, rem, ch, vw, vh 등
글꼴 사이즈를 정할 때
🔸 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우, px 사용.
- 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리.
- 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성에 불리.
- 모바일 기기처럼 작은 화면임과 동시에 고해상도인 경우에 적합하지 않음. 기본적으로 고해상도에서 1px이 모니터의 한 점보다 크게 업스케일되서 뚜렷하지 못한 형태로 출력되는 경우가 있음.
🔸 일반적인 경우, 상대 단위인 rem 추천.
- root의 글자 크기, 즉 브라우저의 기본 글자 크기가
1rem이며, 두 배로 크게 하고 싶다면2rem - 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리.
em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵지만,rem은 root의 글자 크기에 따라서만 상대적으로 변함.
화면 사이즈를 정할 때
🔸 반응형 웹(responsive web)에 기준점을 만들 때 px.
- 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트로, 디바이스 크기별로 css를 달리 적용해야 함.
- 디바이스 크기를 나누는 기준은 보통
px로 정함. (보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각하면 됨)
🔸 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh.
- 웹사이트의 보이는 영역을 viewport라 하며,
1vw는 보이는 영역 너비의 1/100을,1vh는 보이는 영역 높이의 1/100을 뜻함. - 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트는
100vw,100vh를 사용해 구현한 것. <body>태그에서의%는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때 비율임.
CH2. 박스모델
📌 박스모델 기초
🔸 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됨.
🔸 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가지고, CSS를 이용해 속성과 값으로 그 크기를 설정.
줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
🔸 block : 줄 바꿈이 되는 박스. <div>, <p>
🔸 inline : 줄 바꿈이 되지않고, 크기 지정을 할 수 없는 박스. <span>
🔸 inline-block : 줄 바꿈이 되지않고 block 박스의 특징을 가지는 박스.
- inline 박스의 경우
width,height속성이 적용되지 않음.- 만약 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가지고 싶게 하고 싶으면
display: inline-block를 적용.
📌 박스를 구성하는 요소
border (테두리)
🔸 속성값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color).
margin (바깥 여백)
🔸 속성값은 top, right, botton, left로 시계 방향, top/bottom, right/left 혹은 모든 방향에 적용.
🔸 음수 값을 지정하면, 다른 엘리먼트와의 간격이 줄어듬. 극단적으로 적용하면, viewport에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있음.
padding (안쪽 여백)
🔸 속성값은 top, right, botton, left로 시계 방향, top/bottom, right/left 혹은 모든 방향에 적용.
🔸 border를 기준으로 박스 내부의 여백을 지정.
박스를 벗어나는 콘텐츠 처리
🔸 박스 크기보다 콘텐츠 크기가 더 큰 경우, 콘텐츠가 박스 바깥으로 빠져나옴. 이를 해결하기 위해서 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듬.
🔸 overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성함. 가로 방향이나 세로 방향으로 스크롤할 수 있게끔 지정하려면 overflow-x 속성과 overflow-y 속성을 이용.
🔸 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때는 hidden값을 사용.
박스 크기 측정 기준
<div id="container">
<div id="inner">
안쪽 box
</div>
</div>
#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;
}🔸 여기서 id가 container인 박스의 넓이는 width 300px ➕padding 10px ✖️ 2 ➕border 2px ✖️ 2로 324px의 값을 가짐.
🔸 이는 박스에 적용할 여백을 고려하지 않았기 때문에 발생한 결과로, 모든 박스에서 여백과 테두리 두께를 포함해서 박스 크기를 계산하기 위해서 아래와 같이 작성함.
* {
box-sizing: border-box;
}🔸 box-sizing을 일부 요소에만 적용하는 경우 혼란을 가져올 수 있기 때문에, box-sizing은 일반적으로 HTML 문서 전체에 적용.
🔸 content-box는 박스의 크기를 측정하는 기본값. 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장.
CH3. CSS Selector
📌 다양한 CSS selector
기본 선택자
🔸 전체 선택자 - * : 문서의 모든 요소.
🔸 태그 선택자 : 같은 태그명을 가진 모든 요소. 복수로도 선택가능.
h1 { }
div { }
section, h1 { }🔸 ID 선택자 - #id
🔸 class 선택자 - .class
🔸 attribute 선택자 : 같은 속성을 가진 요소 선택.
a[href] { } // href 속성을 가진 <a>요소를 선택하는 것으로 모든 하이퍼 링크를 선택하는데 사용될 수 있음.
p[id="only"] { } // id가 only인 모든 <p>요소를 선택.
p[class~="out"] { } // class 속성 값에 out이라는 단어를 포함하고 있는 모든 <p>요소 선택.
p[class|="out"] { } // class 속성 값이 out으로 시작하는 ~~
section[id^="sect"] { } // id 속성 값이 sect로 시작하는 ~~
div[class$="2"] { } // class 속성 값이 2로 끝나는 ~~
div[class*="w"] { } // class 속성 값에 w라는 문자열을 포함하고 있는 ~~
/*
|= : 하이픈으로 구분된 값에서 첫 번째 부분이 특정 값과 일치할 때 선택.
^= : 값이 정확히 일치하는지 여부와 상관없이 특정 값으로 시작하는 경우 선택.
*/자식 / 후손 / 형제 선택자
🔸 자식 선택자 header > div : 첫 번째로 입력한 요소의 바로 아래 자식인 요소 선택.
<header>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
</header>
// <header> 요소 바로 아래에 있는 두 개의 <div> 요소는 선택되지만, <p> 요소의 자식인 <div> 요소는 선택되지 않음.🔸 형제 선택자 section ~ p { } : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택.
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>🔸 인접 형제 선택자 section + p { } : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소 선택.
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</header>기타 선택자
🔸 가상 클래스 선택자 : 요소의 상태 정보에 기반해 요소를 선택
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 { }