서론
4일차 pt.2 - 강의 시간이다.
참고로 pt.1은 특강 시간의 내용, pt.2는 강의 시간의 내용이다.
프로그래머스 데브코스 3일차를 끝나고 이제 4일차부터는 CSS에 대한 학습이 이뤄질 예정이다. 구조를 짜는 HTML에서 벗어나 내부적인 무언가를 채우는 CSS라니, 걱정도 되고 기대도 된다. 옛날에 CSS 만질 때 꽤 재미있었는데, 이번에도 부디 그랬으면 좋겠다.
참고로 CSS는 총 2일차로 구성될 예정이다. 아무래도 디자인 분야에 가깝다보니 그리 길지는 않다. 더 자세한 것은 아마 내 스스로 익히거나, 이리저리 부딛치면서 해보는 게 맞아보인다.
그리고 첨언하자면 원래는 제목1(h1)을 해당 시간에 배우는 영역으로 놓았었는데, 아무래도 그렇게 하다보니 하위 제목이나 리스트가 부족해지는 것 같다. 그래서 시작 전에 배우는 영역을 적어놓고 기존의 제목2(h2)로 놓았던 학습 내용을 제목1(h1)으로 끌어올릴 것이다. 조금 양식이 달라졌다면 이해해주면 좋겠다.
이번 일차는 CSS 학습이다.
CSS 기초
CSS(Cascading Style Sheets).
문서를 시각적으로 꾸미기 위한 스타일 시트(Style Sheets) 언어로, HTML로 정의된 요소들의 레이아웃과 디자인을 조절하여 웹 페이지를 예쁘게 표현하는 것이 주 역할이다. 사실 원래는 HTML에서 CSS 기능을 어느 정도 병행하기는 했으나, 시간이 지나면서 점차 HTML과 CSS 역할이 분리되어 지금과 같은 역할 담당을 맡게 된 것이다.
최신 CSS 버전은 2016년에 나온 2.2버전이다. 사족으로 몇 년 내로 CSS 3가 나오지 않을까 싶기도 하다. 2버전이 1998년에 나오고 그걸 2016년까지 패치해서 썼는데, 슬슬 대규모 업데이트를 하긴 해야지.
기본적인 문법
CSS는 위의 이미지와 같은 형태의 구조를 갖는다. 속성 간의 구분과 마지막에는 세미콜론(;)을 활용하는 방식으로, 이러한 방식을 통해 하나의 효과나 기능을 만들어낼 수 있다.
당연하지만 자바스크립트를 통해 동적 컨텐츠나 다양한 디자인을 만들어낼 수도 있다. 그리고 CSS는 그 서로 다른 기기라도 문서가 알아서 맞춤형으로 변하는, 반응형 디자인(Responsive Design)을 구현하는데 핵심이 되는 언어이다.
주석
/* 이런 식으로
여러 줄에 많은 주석 내용을
담아낼 수 있습니다 */
div {
color: red;
}참고로 HTML과 다르게 CSS의 주석은 타 프로그래밍 언어와 비슷한 '/*'(열기)과 '*/'(닫기)로 구성된다. 해당 열기-닫기 사이에 내용을 입력하면 되며, 한 번에 여러 줄의 주석을 남길 수 있다. 물론 주석 안에 주석은 불가능하다.
원래 주석은 저기 뒤에 나와야 할 내용인데, 그냥 어차피 계속 나오니까 이곳에 적었다.
CSS 적용 스타일
CSS는 사용(선언) 위치에 따라 총 3종류로 나뉜다.
1. 인라인 스타일(Inline style)
<!-- 인라인 스타일(Inline style) -->
<body>
<h1 style="color:red;">빨간색 h1 태그</h1>
</body>
HTML 요소에 직접적으로 style 속성을 적용함으로써 CSS를 사용하는 방법이다.
다만, HTML 요소들 사이에 섞여 있기에 한 번 설정하면 나중에 찾기 힘들 수도 있으므로 사용을 자제하는 것이 좋다.
2. 내부 스타일(Internal style)
<!-- 내부 스타일(Internal style) -->
<head>
<style type="text/css"> <!-- type css 생략 가능 -->
h1 { color: red; }
</style>
</head>HTML 문서 내부의 <head> 태그 안에 <style> 태그를 사용하여 작성하는 방법이다.
본래는 style 태그에 type 속성으로 CSS 여부를 지정해줘야 했으나, HTML5부터 type 속성의 선언은 생략이 가능해졌다.
구분을 쉽게하고자 내부 스타일 시트(Internal style sheet)라고도 종종 부른다.
3. 외부 스타일(External style)
<!-- 외부 스타일(External style) -->
<!-- HTML 문서 일부(index.html) -->
<head>
<link rel="stylesheet" href="style.css">
</head>/* index.html에 연결된 외부 스타일 파일(style.css) */
h1 {
color: red;
}
HTML 문서 내부의 <head> 태그 안에 <link> 태그를 사용하여 별도의 CSS 파일을 연결하는 방법이다.
link 태그의 'href' 속성에는 분리한 CSS 파일의 경로를 입력, 'rel' 속성에는 'stylesheet'를 기입해 스타일시트(CSS) 파일을 불러오는 것을 정확하게 명시한다. 그리고 별도의 CSS 파일에 스타일 내용을 작성 및 저장해서 불러온다.
선택자(Selector)
위 이미지에 있는 p 태그 부분이 바로 선택자이다. 셀렉터라고도 한다.
선택자는 css를 적용할 HTML 요소를 선택하는 문법이다. 이러한 선택자는 다음과 같이 나뉜다.
전체 선택자(Universal selector)
* {
color: red;
}HTML 문서의 모든 요소를 가리키는 선택자다.
선택자로 애스터리스크(asterisk)라고 불리우는 별표(*)를 사용한다.
요소 선택자(Type selectors)
p {
color: red;
}가장 기본적이고 간단한 선택자다.
선택자로 HTML 요소의 태그 명칭을 사용한다.
워낙 기본적인 선택자다보니 유형 선택자, 타입 선택자, 태그 선택자, 기본 선택자 등 다양한 명칭으로 불린다.
아이디 선택자(ID selectors)
#id_name {
color: red;
}
HTML 문서 내에서 단 한 번만 사용되는 ID가 지정된 요소를 가리키는 선택자다.
선택자로 HTML 요소 내 ID를 사용한다.
단 한 번만 선언되는 ID 특성 상, 재사용성이 낮다.
클래스 선택자(Class selector)
.class_name {
color: red;
}HTML 문서 내에서 여러 개 존재할 수도 있는 클래스가 지정된 요소를 가리키는 선택자다.
선택자로 HTML 요소 내 클래스를 사용한다.
여러 곳에 선언되는 클래스 특성 상, 재사용성이 높다.
그룹 선택자(Group selector)
p, h1, h2, b {
color: red;
}다양한 선택자를 묶어서 속성을 부여하는 목적으로 사용되는 선택자다.
이어주는 선택자로 쉼표(,)를 사용한다.
속성 선택자(Attribute selector)
/* [속성] 선택자 */
/* 가장 기초적인 형태의 속성 선택자다. */
a[target] {
color: red;
}
/* [속성="값"] 선택자 -->
/* 속성 뿐만 아니라 값을 지정하는 선택자다. */
a[target="_blank"] {
color: red;
}
/* [속성~="값"] 선택자 -->
/* 해당 속성 내에 특정 단어를 포함하고 있는지 확인 후 적용하는 선택자다. */
/* 다만 단어 구분이 깐깐해서, 앞뒤로 공백 이외의 다른 단어가 있으면 거짓으로 판단한다. */
[alt~="tree"] {
border: 20px solid red;
}
/* [속성|="값"] 선택자 -->
/* 해당 속성 값과 완전히 동일하거나, 속성 값 바로 뒤에 하이픈(-)이 포함되어 있는지 확인 후 적용하는 선택자다. */
/* 단어 선택 위주의 [속성~="값"]와는 다르게, 지정 속성을 골라내기 위한 목적이 있다. */
[id|="texted"] {
color: red;
}
/* [속성^="값"] 선택자 -->
/* 해당 속성 값으로 시작하는 모든 것들을 확인 후 적용하는 선택자다. */
/* 다만 중간부터 시작되는 건 포함하지 않고, 오직 첫 부분 시작부터 해당 값의 일부가 있어야 한다. */
[id^="texted"] {
color: red;
}
/* [속성$="값"] 선택자 */
/* 해당 속성 값으로 끝나는 모든 것들을 확인 후 적용하는 선택자다. */
/* [속성^="값"]의 반대다. 거꾸로 보았을 때 해당 속성 값이 존재해야 적용된다. */
[id$="texted"] {
color: red;
}
/* [속성*="값"] 선택자 */
/* 해당 단어가 조금이라도 들어가 있으면 무조건 적용하는 선택자다. */
/* 가장 강력한 속성 선택자다. */
[id*="texted"] {
color: red;
}HTML 요소의 속성과 그 값 자체를 선택자로 쓸 수 있게 해주는 선택자다.
선택자로 대괄호([ ])와 대괄호 내부에 들어가는 속성을 사용한다.
이러한 속성 선택자는 종류가 다양한 편이다.
참고로 코드블럭 예시에는 HTML 태그가 속성 선택자에 많이 없는데, 실제로는 상황에 따라 넣어도 되고 안 넣어도 된다.
결합자(Combinator)
/* 자손 결합자 (Descendant Selector) */
/* 1번째 요소 아래의 '모든 자손 노드' 중에서 2번째 요소가 있는지 확인 후 적용한다. */
div p {
background-color: red;
}
/* 자식 결합자 (Child Selector) */
/* 1번째 요소 아래의 '1번째 자손 노드'에 2번째 요소가 있는지 확인 후 적용한다. */
div > p {
background-color: red;
}
/* 인접 형제 결합자 (Adjacent Sibling Selector) */
/* 1번째 요소의 아래 인접한 곳에 2번째 요소가 있는지 확인 후 적용한다. */
/* 빈 개행 상태, 1번째 요소 코드가 안 끝난 지점은 탐색에서 제외다. */
div + p {
background-color: red;
}
/* 일반 형제 결합자 (General Sibling Selector) */
/* 1번째 요소의 아래에 2번째 요소가 있는지 확인 후, 발견되는 2번째 요소마다 전부 적용한다. */
/* 인접한 곳 외에 다른 태그에 의해 분리되었다가 같은 요소가 나타나도 적용된다. */
div ~ p {
background-color: red;
}선택자 간의 관계를 설명하는 목적으로 사용되며, 복합 선택자라는 이름으로도 불린다.
결합자는 여러 종류가 존재한다.
가상 클래스(Pseudo-class)
/* link: 방문하지 않은 링크 상태일 때 */
a:link {
color: red;
}
/* visited: 방문한 링크 상태일 때 */
a:visited {
color: green;
}
/* hover: 무언가에 마우스를 올림(호버) */
a:hover:{
color: pink;
}
/* active: 링크를 선택하고(누르고) 있음 */
a:active {
color: blue;
}선택한 요소가 특수 상태를 만족할 때 작동되는 선택자이다.
의사 클래스라고도 한다.
'선택자:의사_클래스_이름'이 기본 구조이다. (콜론(:)은 1개만 사용한다.)
또한 클래스라고 하지만, 실제로는 id 선택자에도 붙일 수 있다. 그냥 명칭에 클래스가 들어가 있을 뿐이다.
더 다양한 가상 클래스들은 w3schools나 기타 문서를 참고하자.
- https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
- https://www.w3schools.com/css/css_pseudo_classes.asp
- https://tcpschool.com/css/css_selector_pseudoClass
가상 요소(Pseudo-element)
/* ::first-line */
/* 현재 보이는 화면을 기준으로 텍스트 요소의 첫번째 '줄'을 선택. */
p::first-line {
color: red;
}
/* ::first-letter */
/* 현재 보이는 화면을 기준으로 텍스트 요소의 첫번째 '글자'를 선택. */
p::first-letter {
color: red;
}
/* ::before */
/* 요소의 콘텐츠 '뒤'에 새로운 콘텐츠를 추가. */
p::before {
content: '_비포 추가_';
color: red;
}
/* ::after */
/* 요소의 콘텐츠 '앞'에 새로운 콘텐츠를 추가. */
p::after {
content: '_애프터 추가_';
color: red;
}
/* ::marker */
/* 리스트의 마커(앞에 붙는 도형)의 스타일을 지정함. */
p::marker {
font-size: 50px;
color: red;
/* ::selection */
/* 사용자가 마우스 드래그로 선택한 영역 자체를 선택함. */
::selection {
background: blue;
color: red;
}요소의 지정된 부분에 스타일을 지정하는 데 사용되는 선택자이다.
의사 요소라고도 한다.
'선택자::의사_클래스_이름'이 기본 구조이다. (가상 클래스와 다르게 콜론(:)이 2개다.)
가상 클래스와 다르게 특별한 상태가 아니라 특정한 부분을 스타일링하는 걸 목표로 한다.
더 다양한 가상 클래스들은 기타 문서를 참고하자. (모질라 MDN이 가장 많다.)
- https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
- https://www.w3schools.com/css/css_pseudo_elements.asp
- https://tcpschool.com/css/css_selector_pseudoElement
선언부(Declaration)
아래의 속성과 속성 값 쌍을 선언부라고 묶어서 부른다.
각 선언부는 세미콜론(;)으로 구분된다. 속성과 속성 값은 콜론(:)으로 연결된다.
이러한 선언부에서는 대소문자를 구분하기에 주의해야 한다.
또한, 내부에 오는 공백은 무시한다.
선언부는 중괄호({ }) 형태의 선언 블록(Declaration blocks)으로 감싸져 있다.
어떤 경우에는 선언 블록을 중첩할 수도 있기에 중괄호가 잘 맞아 떨어지는지 주의해야 한다.
속성(Property)
속성은 식별자, 즉 인간이 읽을 수 있는 명칭이다. 대략적으로 어떠한 css 기능을 구현해서 적용할 것인지 결정한다.
속성 값(Property value)
속성이 어떤 식으로 나타날지 수치나, 각종 정보를 작성하는 공간 값이다. 해당 값에 따라 브라우저 엔진은 사용자에게 보여지는 CSS를 렌더링한다.
캐스케이드(Cascade; 계단식)
CSS의 전체 이름은 Cascading Style Sheets. 즉, 첫 단어를 보면 알겠지만, 이름 자체에 Cascade가 진행형으로 들어가 있다. 캐스케이드는 그만큼 CSS에서 큰 비중을 차지하는 물건이라고 해도 무방하다. 한데, 대체 어떤 개념이길래 이름에도 붙은 것일까.
캐스케이드는 CSS의 메커니즘이라 보면 된다. 쉽게 말하자면 CSS 규칙의 순서이지만, 조금 더 파고 내려가면 그보다 훨씬 복잡한 내용이 나온다. 단순하게 딱딱 순서가 나아가는 것이 아닌, 각 요소에 따라 복잡한 고민이 이뤄지고 그에 따라 순서가 정해진다는 뜻이다.
이런 것이 있는 이유는 당연하지만, 스타일을 적용하다보면 겹치는 일이 종종 발생하기 때문이다. 쉽게 말하자면 1개의 요소에 'color' 같은 속성이 다양한 곳에서 선언되버린 것이라고 보면 된다. 그래서 어느 것 하나를 정해야 할 때, 이 캐스케이드가 줄을 세워놓고 가장 우선시되는 걸 적용한다.
캐스케이드가 선택자 적용 순서를 정하는 요소는 다음과 같다.
1. 중요도(Importance)
2. 특수성(Specificity)
3. 순서(Source order)
지금부터 하나씩 설명하도록 하겠다.
중요도(Importance)
중요도는 모든 순위의 으뜸이라고 할 수 있다. 쉽게 말하자면 강제로 1등으로 만들어주는 핵(치트)와도 같은 문법이다. 해당 문법의 사용법은 아래와 같다.
p {
color: red !important;
}'!important' 선언이 값 옆에 붙는 순간, 해당 선언은 항상 최우선 적으로 적용된다.
당연하지만, 이는 강력한 만큼 사용이 비권장되는 요소이기도 하다. 이것 하나 때문에 모든 것이 꼬일 수도 있기 때문이다.
특수성(Specificity)
해당 특수성은 우선 순위라고도 불린다. 이러한 캐스케이드의 특수성은 한 요소에 여러 개의 스타일이 적용되는 상황이 왔을 때 빛을 발한다. 정확하게는 한 요소에 겹치는 여러 개의 스타일이 적용되었을 때 캐스케이드가 작동하며, 특수성에 따라 분류하는 것이다. 예를 들자면 다음과 같다고 보면 된다.
<div>
<h1 class="main">h1 태그임.</h1>
</div>.main {
color: red;
}
h1 {
color: blue;
}
청색이 나와야 할 것 같은데 적색이 나왔다. 이는 캐스케이드 규칙이 요소 선택자보다, 클래스 선택자가 구체적이라고 판단하고 있기 때문이다.
캐스케이드에서는 구체적인 형식의 자료일수록 선택자의 순서가 높아지게 된다. 그렇기에 h1 태그보다 더 구체적이라서 순위가 높은 클래스 선택자가 색을 결정하게 된 것이다.
그리고 이러한 구체적인 자료의 순위는 이미 명시되어 있다. 정확하게는 각 자료마다 부여받는 점수가 명시되어 있다.
1위: !important = 점수가 의미없음
2위: 인라인 스타일 = 1000점
3위: 아이디 선택자(#id) = 100점
4위: 클래스 선택자(.class) 및 의사 클래스(:hover, :visited 등등), 속성 선택자 = 10점
5위: 요소 선택자(태그) 및 의사 요소(::before, ::after 등등) = 1점
6위: 전체 선택자 및 부정 선택자 = 0점...
당연하지만, 여러 요소가 겹치거나 할 수도 있다. 클래스 선택자에 요소 선택자를 끼얹는 식으로 말이다.
이런 경우에는 해당 점수가 합산되어 계산된다. 즉 클래스 선택자가 10점, 요소 선택자가 1점 이므로, 11점을 갖게 되는 것이다.그냥 클래스만 있는 타 선택자들보다는 우위에 설 수 있다.
순서(Source order)
그러나 점수가 같은 일이 발생할 수도 있다. 이런 경우에는 다음 요소인 순서에 의해 순위가 결정된다.
<h1>이건 H1 태그</h1>h1 {
color: red;
}
h1 {
color: blue;
}
파란색 텍스트 결과를 보면 알 수 있다시피, 겹치는 선언부로 인해 나중에 선언된 뒤쪽 선언부를 우선시하는 모습을 보여준다.
즉, 위쪽보다 아래를 우선시하여 보여주는 것.
이러한 앞뒤를 정해놓은 것이 바로 Source order, '순서'이다.
상속(Inheritance)
CSS의 상속은 부모의 스타일 값을 자식이 이어받는 것을 뜻한다. 정확하게는 자식에게 특정 CSS 속성을 명시하지 않은 경우, 부모에게 적용되어 있는 스타일이 자식에게 내려오는 것을 뜻한다.
<section>
<h1>이건 H1 태그</h1>
</section>section {
color: red;
}
다만, 모든 것이 이런 식으로 상속되는 것은 아니다. 일부 속성은 상속이 되지 않는다. 해당 속성들은 MDN 같은 문서에서별도로 찾아볼 필요가 있다. 혹은 애당초 상속 전에 상속할 속성을 찾는 것이 방법이 될 수도 있다.
강제적인 상속(Inherit)
속성 여러 개가 동시에 적용되려고 하는 경우에는 캐스케이드에 모든 걸 맡기는 수밖에 없다. 이런 경우에는 강제적인 상속인 상속(Inherit) 키워드를 속성 옆에 붙이게 된다.
<section>
<h1>이건 아무튼 H1 태그</h1>
</section>section {
color: red;
}
h1 {
color: blue;
}
section h1 {
color: inherit;
}
이와 같은 inherit를 이용하면 부모의 것을 자식의 것으로 빠르게 만들수 있다.
초기화(Initial)
말 그대로 초기화다. 브라우저가 지정한 기본값으로 요소의 속성들을 초기화해버린다. 다만, 전부는 아니고 설정한 CSS 속성에 한정해서 지운다.
<section>
<h1>이건 아무튼 H1 태그</h1>
</section>
section {
color: red;
background-color: green;
}
h1 {
color: blue;
}
section h1 {
color: initial;
}
'color' 속성에 initial을 한정한 탓에 'background-color: green'(배경색)은 초기화가 적용되지 않은 모습이다. 그러나, 어쨌거나 color는 브라우저의 기본값으로 돌아갔다.
다만 이러한 초기화는 예상치 못한 값일 수도 있으니까. 항상 주의해야 한다. 개인적인 생각에는 이걸 쓰는 일이 없도록 시작부터 코드를 잘 짜두는 것이 중요할 것 같다.
unset & revert
번외로 'unset'라는 키워드가 있는데, 이는 inherit와 initial처럼 사용한다. 다만, 기능적으로 조금 특이한 면이 있다.
부모로부터 받을 상속값이 있음 -> 상속(inherit)적용.
부모로부터 받을 상속값이 없음 -> 초기화(initial) 적용.
또한, 'revert'라는 키워드도 있다. 해당 키워드도 다른 것들과 비슷하게 사용하지만, 기능적으로는 살짝 차이가 있다.
명칭에서 알 수 있다시피 '되돌리기'가 주 기능이다. 한데, 대체 뭘 되돌리냐고 할 수도 있다.
revert 속성은 기본값으로 되돌리는 걸 목표로 한다. 이는 부모 요소에게 영향을 받는 녀석들에 한정해 user-agent 값으로 초기화하는 것이다. 즉, 현재 부모에게 상속(Inheritance) 받고 있는 녀석들의 선택한 속성을 초기화하는 것이다. 참고로 특정 사이트만의 css 속성이 지정되어 있으면 그것이 곧 초기화값이기에 그걸로 초기화한다.
사실 revert는 여전히 조금 헷갈린다. 자칫 아닐 수도 있을 것 같기는 한데... 일단 이리저리 조사한 걸 보면 저 의미가 맞지 않나 싶다.
꾸미기
글꼴 꾸미기
말 그대로 글꼴을 꾸밀 때 사용되는 속성들이다.
font-size
<p>폰트 사이즈~~~~~ 폰트!!!!!</p>p {
font-size: 30px;
}
font-size 속성은 텍스트의 크기를 변경한다.
기본 구조는 'font-size: 크기;' 이다.
크기는 [숫자]px 구조가 기본이지만, px 대신 %를 넣을 수도 있다.
당연하게도 cm 등의 단위도 쓸 수 있으며, small, medium, large 등의 단어도 크기에 사용 가능하다.
font-family
<p>폰트 패밀리~~~~~ 폰트!!!!!</p>p {
font-family: "궁서", "맑은 고딕", sans-serif;
}
font-family 속성은 한 개의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있다.
기본 구조는 'font-family: 폰트가족|속성가족;' 이다.
여기서 '폰트가족'은 그냥 폰트명이고(폰트 명에 띄어쓰기가 있으면 쌍따옴표 안에 적을 것), '속성가족'은 앞에 지정한 폰트들이 없으면 대충 이런 형태의 폰트들이라도 급히 쓰라고 알려주는 것이다.
글꼴이 여러 개이면 위에서부터 아래로 글꼴을 읽어들이며, 해당 글꼴이 없을 때는 다음 글꼴로 넘어간다.
font-weight
<p>폰트 웨이트~~~~~ 폰트!!!!!</p>p {
font-weight: 700;
}
font-weight 속성은 텍스트의 두께를 변경할 수 있다.
기본 구조는 'font-weight: 두께값;' 이다.
두께값은 숫자 혹은 문자로 지정할 수 있다.
숫자 속성은 100부터 900까지 백단위로 지정가능하다.
문자 속성은 normal(보통), bold(두꺼움), bolder(부모보다 두껍게), lighter(부모보다 얇게)가 있다.
color
<p>이건 그냥 텍스트!!!</p>p {
color: #0000ff;
}
color 속성은 텍스트의 두께를 변경할 수 있다.
기본 구조는 'color: 색;' 이다. 입력 가능한 색의 형식은 다음과 같다.
- 키워드: red, blue, green, transparent...
- RGB(함수형): rgb(255, 0, 0), rgb(255, 0, 255)...
- RGB(16진수): #0000ff, #ff0000...
이렇게 다양한 형식으로 지원된다. 참고로 transparent는 투명화 키워드이다.
text-align
<p>이건 그냥 텍스트!!!</p>p {
text-align: right;
}
text-align 속성은 텍스트의 정렬 상태를 변경할 수 있다.
기본 구조는 'text-align: 정렬 상태;' 이다.
정렬 상태로는 left(왼쪽), right(오른쪽), center(가운데), justify(너비 맞춤 정렬)이 있다.
line-height
<p>이건 그냥 텍스트!!!</p>
<p>이건 그냥 텍스트!!!</p>
<p>이건 그냥 텍스트!!!</p>p {
line-height: 550%;
}
line-height 속성은 텍스트의 줄 간격을 변경할 수 있다.
기본 구조는 'line-height: 간격값;' 이다.
간격값에는 normal(기본값 키워드), px, pt, cm, em, %, 단위없는 그냥 숫자값이 있다.
참고로 단위없는 그냥 숫자값은 말 그대로 숫자만 쓰는 것인데, 이는 %와 동일하게 동작한다.
letter-spacing
<p>이건 그냥 텍스트!!!</p>
<p>이건 그냥 텍스트!!!</p>
<p>이건 그냥 텍스트!!!</p>p {
letter-spacing: 15px;
}
letter-spacing 속성은 텍스트의 자간(좌우 너비)을 변경할 수 있다.
기본 구조는 'letter-spacing: 자간값;' 이다.
자간값에는 normal(기본값 키워드), px, pt, cm, em, %가 있다.
참고로 보통 em 단위를 사용해 부모 폰트 크기에 따라 함께 유동적으로 조절되게 한다.
배경 꾸미기
말 그대로 배경을 꾸밀 때 사용하는 속성들이다.
background-color
배경 색을 지정할 수 있다.
기본 구조는 ' background-color : 색;' 이다. 입력 가능한 색의 형식은 다음과 같다.
- 키워드: red, blue, green, transparent...
- RGB(함수형): rgb(255, 0, 0), rgb(255, 0, 255)...
- RGB(16진수): #0000ff, #ff0000...
이렇게 다양한 형식으로 지원된다.
background-image
url에 경로를 넣어 배경 이미지를 지정할 수 있다.
기본 구조는 ' background-image : url('경로');' 이다.
참고로 url('경로') 대신 'none'을 넣으면 배경을 사용하지 않는다고 할 수 있다.
background-repeat
배경 이미지의 반복을 지정할 수 있다.
기본 구조는 ' background-repeat : 반복형태;' 이다.
- repeat : 가로, 세로로 반복한다. 기본값이다.
- repeat-x : 가로로 반복한다.
- repeat-y : 세로로 반복한다.
- no-repeat : 반복하지 않는다.
- round: 반복되는 이미지가 잘리지 않게 늘려서/줄여서 반복한다.
- space: 이미지가 잘리지 않게 고르게 분배한다.
기본적으로는 바둑판 형태로 반복되며, 위처럼 여러 설정이 있다.
background-size
배경 이미지의 크기를 지정할 수 있다.
기본 구조는 ' background-size' : 크기;' 이다.
- auto : 원래 배경 크기대로 표시(기본 값)
- 수치: 가로, 세로 값을 추가할 수 있다. 값을 하나만 넣으면 나머지 값은 자동으로 맞춰진다. (% 사용가능)
- cover : 배경 요소를 무조건 다 덮도록 이미지를 확대하거나 축소한다. 단, 가로 세로 비율을 유지한다.
- contain : 배경 요소를 넘어가지 않는 최대 크기로 이미지를 확대하거나 축소한다. 단, 가로 세로 비율을 유지한다.
자칫 배경이 어그러질 수도 있기에 조심해야 한다.
background-position
배경 이미지의 위치를 제어할 수 있다.
기본 구조는 ' background-position' : x축 y축;' 이다.
x축: left, center, right, 수치, %
y축: top center, bottom, 수치, %
각축은 위와 같은 키워드 혹은 숫자를 넣을 수 있다.
background
background: no-repeat left center/cover url("image.png")위에 나온 배경 속성들을 한 번에 제어할 수 있는 단축 속성이다.
기본 구조는 ' background: 속성들;' 이다.
공백으로 구분하여 배경 조건을 쓸 수 있다.
작성 순서는 상관없지만, 위치와 크기는 슬래시를 기준으로 서로 이어서 작성해야 한다.
사용 가능한 속성은 다음 문서 혹은 위의 정보를 참고한다.
- https://developer.mozilla.org/ko/docs/Web/CSS/background
사족
오늘은 코드량이 많다보니 다소 늦게 업로드됐다. 아니, 그냥 갈수록 늦게 업로드 하는 느낌이기도 하다. 아무래도 내가 아는 건 앞으로 좀 간략화하면서 진행하든지 해야 할 것 같다. 사실 간략화의 여파가 폰트 부분부터 시작된 탓에, 이전 내용에 비하면 많이 간략화된 편이다.
생각해보니 캐스케이드에 대해 조사하다가 시간을 너무 많이 보낸 것이 늦게 올리는 원인 같다. 내용이 어려운 것도 어려운 것이지만, 애당초 em, rem 같은 단위도 같이 정리했어야 했는데, 못했으니... 일단 그건 추후 글을 올리던지 해야겠다.
그리고 최근 들어서 한파가 몰아쳐서 그런가 너무 춥다. 방 안이 따뜻하기는 한데, 키보드에 한기가 배어서 몸은 따뜻하고 손가락은 차갑다.
이게 대체 뭔... 손가락이 물리적으로 굳어가는 걸 난생 처음 보는 것 같다. 타자가 갈수록 느려지는 경험은 끔찍하다. 내일 중으로 아무래도 키보드를 바꿔보든지 해야겠다.
그래도 특강은 꽤 유익했다. 나중에 개발 때 유의하던지 해야지.
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 5일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.03 |
|---|---|
| 5일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.23 |
| 4일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (0) | 2023.12.21 |
| 3일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.21 |
| 2일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.20 |
