CSS 기초 / SASS / 반응형 웹 기초

HTML : 웹 문서의 콘텐츠를 구성하는 언어

CSS: 웹 문서의 콘텐츠를 꾸며주는 언어

 

- CSS ( Cascading Style Sheets  )

선택자 {
	속성명: 속성값;
}

ex)
p {
	color: red;
}

 

적용방식

1. 인라인 스타일: 태그에 직접 기술

2. 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술

3. 문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결

<p style='color: red;'>
	인라인 스타일
</p>

/* 스타일 태그 */
<style>
p { color: red;}
</style>

// 문서 간의 연결
<link href='./style.css' ref='stylesheet'>

 

 

- 선택자

전체 선택자
* {
	color: blue;
}

태그 선택자 or 유형 선택자
p {
	color: blue;
}

클래스 선택자
.text {
	color: blue;
}

아이디 선택자
#topic {
	color: blue;
}

그룹 선택자
h1, p, div {
	color: blue;
}

특성 선택자
[class] {
	color: blue;
}
[class='item'] {color: blue;} /*클래스값이 item 이면*/
[class *= 'it'] {color: blue;} /*포함되는*/
[class ^= 'it'] {color: blue;} /*시작하는*/
[class $= 'it'] {color: blue;} /*끝나는*/

결합 선택자
div p {color: blue;} /*div 요소 안에 위치하는 모든 */
div > p {color: blue;} /* div 요소의 바로 아래에 위치하는 모든 */
h1 ~ p {color: blue;} /* h1 요소의 뒤에 오는 형제 중 모든 */
h1 + p {color: blue;} /* h1 요소의 바로 뒤에 오는 형제(붙어있어야) */

선택자가 겹치는 경우, 나중에 작성된 스타일이 적용된다.

선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용된다.

태그 선택자 < 클래스 선택자 < 아이디 선택자(1순위)

 

- 속성

텍스트 관련 속성

font-family : 글꼴 정의
font-size : 글자 크기 
px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem : html태그의 font-size에 대응하는 상대적인 크기(배수)
em : 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기(배수)

text-align : 정렬 방식
left/right/center/justify : 왼쪽,오른쪽,가운데,양끝 정렬

color : 글자색

 

- 인라인 / 블록

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. div, p, h1

 

인라인 요소

자기에게 필요한 만큼의 공간만 차지한다. span, a

/*
블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶다면
*/
div{ display: inline; }
/*
인라인 요소인 a 요소를 블록 레벨로 처리하고 싶다면
*/
a{ display: block; }

 

border 

요소가 차지하고 있는 영역에 테두리를 그린다.

 

- 박스모델

콘텐츠 영역: width, height

안쪽 여백: padding

바깥쪽 여백: margin

테두리: border-width

 

- box-sizing: 요소의 너비와 높이를 계산하는 방법을 지정한다.

속성값

content-box: 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다.

border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.

 

- float

요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

필요한 만큼 공간을 차지한다.

속성값

none: 기본값, 원래 상태

left: 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함.

right: 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함.

 

- clear

float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.

속성값

none: 기본값, 아래로 이동되지 않음을 나타내는 키워드

left: float이 left인 요소의 아래로 내려가겠다

right: float이 right인 요소의 아래로 내려가겠다.

both: float이 left  및 right 인 요소의 아래로 내려가겠다.

 

- position

요소를 배치하는 방법을 정의

속성값

static: 기본값. 일반적인 문서흐름에 따라 배치

relative: 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다.

absolute: 일반적인 문서 흐름을 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다.

fixed: 일반적인 문서 흐름을 제거하고,  지정한 위치에 고정된다.

sticky: 일반적인 문서 흐름에 따라 배치하되,  스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋을 적용한다.

 

오프셋: 위치를 얼마간 이동시키는 것을 의미. 시작 위치.

 

- flexbox

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.

행, 열만을 다룬다.

flex 컨테이너라고도 한다. 기본적으로 행 방향으로 정렬한다.

display: flex; 로 적용한다.

주축(main-axis)과 교차축(cross-axis)이 있다.

 

flex-direction

flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

속성값

row: 기본값, 주축은 행

row-reverse: 주축은 행, 반대방향

column: 주축은 열

column-reverse: 주축은 열, 반대방향

 

주축 배치 방법: justify-content

교차축 배치 방법: align-items

교차축 개별요소 배치 방법: align-self

줄 바꿈 여부: flex-wrap

 

- 의사클래스

요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

선택자:의사클래스 {
	속성명: 속성값;
}
h1:hover {
	color: red;
}

hover: 마우스 포인터가 요소에 올라가 있다.

active: 사용자가 요소를 활성화했다. ex. 마우스로 누르면

focus: 요소가 포커스를 받고 있다.

disabled: 비활성 상태의 요소이다.

nth-child(): 형제 사이에서의 순서에 따라 요소를 선택한다.

nth-child(3): 3번째 형제 사이에서의 순서에 따라 요소를 선택한다.

nth-child(n): n번째 형제 사이에서의 순서에 따라 요소를 선택한다.

nth-child(2n): 2n번째 형제 사이에서의 순서에 따라 요소를 선택한다.

nth-child(2n-1): 2n-1번째 형제 사이에서의 순서에 따라 요소를 선택한다.

 

- 의사 요소

선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

선택자::의사요소 {
	속성명: 속성값;
}
li::first-letter {
	font-size: 20px;
}

after: 요소의 앞에 의사 요소를 생성 및 추가

before: 요소의 뒤에 의사 요소를 생성 및 추가

first-line: 블록 레벨 요소의 첫 번째 선에 스타일을 적용

marker: 목록 기호의 스타일을 적용

placeholder: 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용

 

- 상속

하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.

상속됨: color, font-family, font-size, font-weight, text-align, cursor 등

상속 안됨: background-color, background-image, background-repeat, border, display 등

 

- 공용 키워드

모든 CSS 속성에 사용 가능한 키워드, 전역값이라 표현하기도 한다.

inherit: 상위 요소로부터 해당 속성의 값을 받아 사용한다.

initial: (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다.

unset: 상속 속성에 대해서는 inherit, 상속되지 않는 속성에 대해서는 initial처럼 적용

 

- z-index

요소의 쌓임 순서(stack order)를 정의한다.

정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.

위치 지정 요소(positioned element)란, position 속성이 정의되어 있는 요소를 말한다.

 

---

- SASS(Syntactically Awesome StyleSheets)

CSS 전처리기

SCSS -> SASS 전처리기 -> CSS

 

- 중첩 규칙(nesting)

div {
    p {
        span {
        }
    }
}

 

- 단축 속성

여러 가지 CSS 속성의 값을 함께 지정할 수 있는 속성으로, 같은 주제를 가진 여러 공통 속성을 묶기 위해 정의하는 속성

단축 속성의 하위 속성을 그룹화할 수 있다.

네임스페이스 속성 중첩
p {
    font: {
        family: sans-serif;
        size: 1em;
        style: normal;
        weight: 900;
    }
}

 

- 상위 선택자 참조하기

& 을 사해서 상위 선택자를 참조할 수 있다.

button {
    &:active {
        color: red;
    }
}
-- 컴파일
button:active {
	color: red;
}

 

- 변수

$ 기호를 사용한다.

$main-color: red;

div {
	color: $main-color
    background-color: $main-color
    box-shadow: 10px 10px 10px $main-color
    text-shadow: 10px 10px 10px $main-color
    border-radius: $main-color
}

 

- 믹스인

비슷하거나 동일한 스타일을 반복해서 사용하는 경우, 믹스인을 사용하면 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다.

@mixin 지시자를 사용한다.

@include 지시자를 사용하여 해당 믹스인을 호출한다.

@mixin my-font {
    font-family: sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600
    color: orange;
}

h1 {
	@include my-font;
}

p {
	@include my-font;
}

 

- 믹스인 인자 / 믹스인 인자 기본값

@mixin my-font($font-color, $bg-color:yellow) {
    font-size: 32px;
    font-weight: 600
    color: $font-color;
    background-color: $bg-color;
}

h1 {
	@include my-font(red);
}

p {
	@include my-font(blue, purple);
}

 

---

- 반응형 웹 기초

컴퓨터웹, 모바일웹, 태블릿웹 화면들..

 

- 뷰포트

현재 화면에 보여지고 있는 영역을 의미한다.

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

 

- px

절대 길이 단위, 어떤 상황에서도 동일한 값을 유지, 가변성이 없다.

 

- em & rem (배수)

박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다.

em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.

 

- vw, vh, vmin, vmax

font-size: 1vw; /* 뷰포트 너비의 100분의 1 */
font-size: 1vh; /* 뷰포트 높이 100분의 1 */
font-size: 1vmin; /* 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 */
font-size: 1vmax; /* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */

 

- 가변 레이아웃

% 백분

 

- 함수 / calc()

계산식의 결과를 속성값으로 지정할 수 있다.

width: calc(100%-20px)

 

- 미디어쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어 들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다.

@media 미디어타입 and (조건에 대한 물음) {
    /*
    미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일시트
    */
}
@media screen and (min-width: 768px) {
    /*
    화면(screen)의 너비가 768px 이하일 경우에 여기에 정의된 스타일시트 적용
    */
}

link 태그 이용
<link rel='stylesheet' href='style.css' media='screen and (min-width: 768px)'>

@import 구문 이용
@import url('style.css') screen and (min-width: 768px);

 

- 모듈화 디자인

html 엔티티

 

입문자를 위한 반응형 웹 기초 강의 #10 모듈화 디자인 (youtube.com)