CSS
CSS는 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.
HTML로 구조를 잘 세우고 나서, CSS로 UI및 레이아웃을 구성하여
웹페이지를 완성할 수 있다.
사용자 인터페이스(UI : User Interface)
사용자와 컴퓨터가 교류할 수 있는 연결고리 / 매개체
사용자 경험(UX : User Experience)
사용자가 어떤 시스템을 이용하면서 느끼고 생각하게 되는 총체적 경험
CSS 스타일 적용 방법
- 같은 줄에서 스타일을 적용하는 인라인 시트
- style 요소 내에 작성하는 내부 스타일 시트
- 별도의 파일로 구분하여 적용하는 외부 스타일 시트
id와 class를 이용한 CSS 적용
<!-- id 이용 -->
<!-- CSS -->
#navigation-title {
color: red;
}
<!-- HTML -->
<h4 id="navigation-title">This is the navigation section.</h4> <!-- class 이용 -->
<!-- CSS -->
.menu-item {
text-decoration: underline;
}
<!-- HTML -->
<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>| id | clasee |
|---|---|
# 으로 선택 | . 으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류에 사용 |
단위
- 절대 단위 :
px,pt등 - 상대 단위 :
%,em,rem,ch,vw,vh등
글꼴 사이즈 정할 때
1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적크기로 정하는 경우
px(픽셀)을 사용
픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.
글꼴의 크기를 픽셀로 설정하면 작은 글씨를 보기 힘든 사용자가 브라우저의
기본 글꼴 크기를 더 크게 설정하더라고 글꼴의 크기는 항상 설정된 픽셀로 고정된다.
픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리함
2. 일반적인 경우
rem을 추천
브라우저의 기본 글자 크기가 1rem이며 두배로 크게 하고 싶다면 2rem
작게하려면 0.8rem 등으로 조절해서 사용 가능하다.
사용자가 설정한 기본 글꼴 크기를 따르기 때문에 접근성에서 유리함
em은 부모 엘리먼트에 따라 상대적으로 크기 변하기 때문에 계산이 어려움
따라서, root 글자 크기에 따라 상대적으로 변하는 rem이 사용 편리
화면 사이즈 정할 때
1. 반응형 웹에서 기준점을 만들 때
반응형 웹 : 데스크탑, 스마트폰, 태브릿 등 디바이스의 width에 따라
유동적인 레이아웃이 적용되는 웹사이트
디바이스의 크기를 나누는 기준을 보통 px로 하기 때문에 px 사용
2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
vw, vh을 사용
화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트 구현할 때 사용한다.
예시사이트
https://www.tesla.com/
https://www.krause.studio/#one
https://redredefined.preciosacomponents.com/
박스모델
- 줄 바꿈이 되는 박스요소 :
<h1><p>-> block 박스 - 줄 바꿈이 되지 않는 박스 요소 :
<span>-> 인라인 박스
⚠️ 인라인 블록에는 width, heigth 적용x (자체적으로 고유의 크기를 가지기 때문)
관련 정보 : https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
박스를 구성하는 요소
1. border(테두리) 속성
border-width(테두리 두께)border-styple(테두리 스타일)border-color(테두리 색상)
2. margin(바깥여백) 속성
각 속성은 padding에도 적용됨!
- 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
p {
margin: 10px 20px;
}- 값을 두개 넣으면 각각 (top,bottom) (left, right)에 적용
p {
margin: 10px 20px;
}- 방향 특정도 가능하다
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}3. padding(안쪽 여백)
- margin과 같음
박스를 벗어나는 콘텐츠 처리
overflow 속성에 auto 값을 사용하면 됨
p {
height: 40px;
overflow: auto;
}박스 크기 측정 기준
➡️ 레이아웃 관련 이야기를 할 때 border-box 기준으로 한다.
처음 레이아웃 디자인을할 때 박스에적용할 여백을 고려하지 않고 박스의 크기를
디자인 하는 실수를 많이 할 수 있는데
박스의 크기를 크기를 디자인 할 때 콘텐츠 영역만 고려한다면
개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다
따라서, 꼭 여백을 고려한 레이아웃 디자인을 해야한다!
- 레이아웃 디자인을 조금 더 쉽게 하는 방법
여백과 테두리 두께를포함해서 박스 크기를 계산하게 만든다
* {
box-sizing: border-box;
}➡️ 이렇게 모든 요소에 속성을 적용한다면,
모든 박스에서 여백과 테두리를 포함한 크기로 계산이 된다.
CSS Selector
기본 셀렉터
- 전체 셀렉터 :
* - 태그 셀렉터 : 같은 태그명을 가진 모든 요소 선택 ex)
h1,div등 복수 선택 가능 - id 셀렉터 :
#id - class 셀렉터 :
.class - attribute 셀렉터 : 같은 속성을 가진 요소 선택
a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }
자식 / 후손 / 형제 셀렉터
- 자식셀렉터
>
첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택함
header > p { }
<header>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
</header>- 후손 셀렉터
공백
첫 번째로 입력한 요소의 후손을 선택 (자식의 자식 요소까지 모두 선택된다)
header p {}
<header>
<p><!-- 선택 -->
<span>
<p><!-- !!선택!! -->
</p>
</span>
</p>
<p><!-- 선택 -->
<span>
<p><!-- !!선택!! -->
</p>
</span>
</p>
</header>- 형제 셀렉터
~
같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택함
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 { }