CSS
- HTML(마크업 언어)를 꾸며주는 언어
- html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할
CSS 적용
1. Inline 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법입니다. 코드의 재활용이 되지 않기 때문에 자주 사용하지 않습니다.
<div style="color:red;">내용</div>2. Internal
문서에 <style>을 활용한 방법입니다. <style>은 <head> 내부에 들어갑니다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 합니다. 페이지가 많고 스타일 규칙 내용이 많아지면 이것도 한계가 있습니다.
<style>div{color:red;}</style>3. External
외부 스타일 시트 파일을 이용한 방법입니다. 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식입니다. 외부 파일은 확장자가 .css가 되며 css 파일이라고 부릅니다.
우선 style.css 파일을 하나 만들고 스타일 규칙을 선언합니다. 그 다음 <link>를 이용해서 CSS 파일을 연결하면 됩니다.
<link href="./css/style.css" rel="stylesheet"><head> 내부에 <link>를 선언한 후, href 속성을 이용해 CSS 파일의 경로를 적습니다. rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 ‘stylesheet’ 라고 적어야 합니다. 외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있습니다. 또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있습니다.
외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.
박스 모델 (boxmodel)
1) border 속성
-
border-width (기본값 medium)
- border-width:[top][right][bottom][left];
- thin, medium, thick / px, em, rem (%, 정수 단위 사용 불가)
-
border-style (기본값 none)
- none, solid, double, dotted
-
border-color
2) padding 속성
- length, percent
- padding-top, padding-right, padding-bottom, padding-left
padding:[-top][-right][-bottom][-left];
0 10px 20px 30px /*상,우,하,좌 다름*/
0 10px 20px /*좌,우 같음*/
0 10px /*상,하 같음 & 좌,우 같음*/
0 /*상,우,하,좌 모두 같음*/3) margin 속성
- length, percent, auto
- margin-top, margin-right, margin-bottom, margin-left
위의 padding과 동일하게 축약하여 사용할 수 있고, auto 기능으로 수평 중앙 정렬을 할 수 있습니다. 이 때, width 값을 꼭 가지고 있어야합니다.
-
margin collapse(마진 병합)
- 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미.
- 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다.
margin과 padding의 비교
| + | - | auto | 단위 | |
|---|---|---|---|---|
| margin | o | o | o | px, %… |
| padding | o | x | x | px, %… |
예를 들어, 우리 몸의 뼈를 content이고, 피부를 border라고 생각해보면, 뼈와 피부 사이의 지방이 padding이 되는 것입니다. 지방을 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없기 때문입니다. 그럼 사람과 사람 사이의 간격이 margin이 되는데, 사람과 사람 사이는 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다.
지금까지 박스 모델은 content, padding, border, margin의 총 4가지 영역으로 나누어진다는 걸 배웠습니다. 추가적으로 content 영역의 너비는 width, 높이는 height을 통해서 제어할 수 있으며, width와 height 그리고 padding, border을 모두 더한 것이 요소의 전체 크기가 된다는 것에 대해 배웠습니다. 또한, margin은 상하 요소 사이의 병합 현상이 일어나고, 이 때는 큰 값을 기준으로 병합한다는 걸 기억해야합니다.
CSS 문법
h1 {color: yello; font-size: 2em;} - 선택자(selector) : “h1”
- 속성(property) : “color”, “font-size”
- 값(value) : “yellow”, “2em”
- 선언(declaration) : “color:yellow;”, “font-size: 2em;”
- 선언부(declaration block) : “중괄호 안에 선언된 부분”
- 규칙(rule set)
CSS의 속성(Property)과 HTML의 속성(Attribute)은 전혀 다른 것입니다. 잘 구분하셔야 합니다.
1. 선택자
class 선택자
<style>
.foo{font-size: 30px;}
.bar{color: blue;}
</style> <p class="foo bar">...</p>id 선택자
<style>
#id-selector{background-color: yellow;}
</style> <p id="id-selector">...</p>id와 class의 가장 큰 차이점은 id는 문서 내에서 유일해야 한다는 점입니다. id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐입니다.
선택자의 조합
/* 요소와 class의 조합 */
p.bar {...}
/* 다중 class */
.foo.bar {...}
/* id와 class의 조합 */
#foo.bar {...} 속성 선택자
-
단순 속성으로 선택
<style> p[class]{color: silver;} p[class][id]{text-decoration: underline;} </style><p class="foo">Hello</p> <p class="bar">CSS</p> <p class="baz" id="title">HTML</p>—> p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두 적용됩니다.
—> p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당되기 때문에 마지막 요소에만 적용됩니다.
-
정확한 속성값으로 선택
<style> p[class="foo"]{color: silver;} p[id="title"]{text-decoration: underline;} </style>—> 첫 번째 규칙은 첫 번째 요소에 해당되고, 두 번째 규칙은 세 번째 요소에 해당합니다.
-
부분 속성값으로 선택
- [class~=“bar”] : class 속성의 값이 공백으로 구분한 “bar” 단어가 포함되는 요소 선택
- [class^=“bar”] : class 속성의 값이 “bar”로 시작하는 요소 선택
- [class$=“bar”] : class 속성의 값이 “bar”로 끝나는 요소 선택
- [class*=“bar”] : class 속성의 값이 “bar” 문자가 포함되는 요소 선택
<style> p[class~="color"]{font-style: italic;} /*1, 2번째 요소*/ p[class^="color"]{font-style: italic;} /*1, 3번째 요소*/ p[class$="color"]{font-style: italic;} /*2번째 요소*/ p[class*="color"]{font-style: italic;} /*1, 2, 3번째 요소*/ </style><p class="color hot">red</p> <p class="cool color">blue</p> <p class="colorful nature">rainbow</p>
문서 구조 관련 선택자
-
자손 선택자
div span{color: red;}자손 선택자 사이에 아무 기호없이 그냥 공백으로 구분합니다.
-
자식 선택자
div > h1 {color: red;}선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다. 꺽쇠 기호와 선택자 기호 사이에는 공백이 있거나 없어도 상관이 없다.
-
인접 형제 선택자
div + p{color: red;}선택자 사이에 + 기호를 넣습니다. 자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없다. 인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다.
가상 클래스 선택자
가상 클래스(pseudo class)는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다.
예를 들어, <p>가 있다고 가정하고, 이 p 태그에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요? 이 때 가상 클래스로 제어할 수 있습니다.
-
문서 구조와 관련된 가상 클래스
-
:first-child : 첫 번째 자식 요소 선택
-
:last-child : 마지막 자식 요소 선택
<ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul>li:first-child{color: red;} # 첫 번째 요소 li:last-child{color: blue;} # 마지막 요소 -
-
앵커 요소와 관련된 가상 클래스
-
:link : 하이퍼링크이면서 아직 방문하지 않은 앵커
-
:visited : 이미 방문한 하이퍼링크를 의미
a:link{color: blue;} a:visited{color: gray;} -
-
사용자 동작과 관련된 가상 클래스
-
:focus : 현재 입력 초점을 가진 요소에 적용
-
:hover : 마우스 포인터가 있는 요소에 적용
-
:active : 사용자 입력으로 활성화된 요소에 적용
a:focus{background-color: yellow;} a:hover{font-weight: bold;} a:active{color: red;}focus는 마우스 클릭해서 커서 초점을 받은 상태 hover는 마우스 커서를 올렸을 때 active는 링크를 눌렀을 때, 버튼을 눌렀을 때 순간 활성화 된 상태
-
가상 요소 선택자
가상 요소(pseudo element)는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있습니다. CSS3부터는 가상 클래스와 가상 요소를 구분하기위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다. 하지만 하위 브라우저에서 지원하지 않는 문제가 있으므로 상황에 따라 사용해야 합니다.
-
:before : 가상 앞에 요소를 삽입
-
:after : 가장 뒤에 요소를 삽입
-
:first-line : 요소의 첫 번째 줄에 있는 텍스트
-
:first-letter : 블록 레벨 요소의 첫 번째 문자
2. 구체성
만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요?
선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있습니다. 이 규칙을 ‘구체성’ 이라고 합니다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용이 됩니다.
값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다.
-
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
-
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
-
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
-
전체 선택자는 0, 0, 0, 0을 가진다.
-
조합자는 구체성에 영향을 주지 않는다. (>, + 등)
h1{...} /*0,0,0,1*/
body h1{...} /*0,0,0,2*/
.grape{...} /*0,0,1,0*/
*.bright{...} /*0,0,1,0*/
p.bright em.dark{...} /*0,0,2,2*/
#page{...} /*0,1,0,0*/
div#page{...} /*0,1,0,1*/
<p id="page" style="color:blue">I love you.</p> /*1,0,0,0*/인라인 스타일 구체성 값은 1,0,0,0 이며 규칙들 중 가장 큰 구체성을 갖습니다.
important
import 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.
p#page{color: red !important}3. 상속
보통은 속성이 상속되지만, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않습니다.
4. 캐스케이딩 (Cascading)
cascading 3가지 규칙
-
중요도(!important)와 출처
- CSS 출처 (제작자, 사용자, 사용자 에이전트)
-
구체성
-
선언 순서 (가장 밑에 선언된 규칙이 적용)
5. 속성 (Property)
단위
-
절대 길이
-
px (1px = 1/96th of 1 inch)
-
pt (1pt = 1/72 of 1 inch)
-
-
상대 길이
-
% : 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.
-
em : font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
-
rem : root의 font-size를 기준으로 값을 환산합니다.
-
vw : viewport의 width값ㅇ르 기준으로 1%의 값으로 계산됩니다.
-
색상
-
컬러 키워드 : black, red, blockquote
-
16진법 : #000000 ~ #ffffff (#RRGGBB)
-
16진법 : #RGB 3자리로 축약 가능 (#aa11cc -> #a1c)
-
rgb() : rgb(0,0,0) ~ rgb(255,255,255)
-
rgba() : rgba(0,0,0,0) ~ rgba(255,255,255,1)
- a 값은 투명도를 뜻하고 0은 투명 / 1은 불투명 입니다. 0.5는 반투명
background
-
background-color : 기본 값 (transparent)
-
background-image : 기본 값 (none)
-
background-repeat : 기본 값 (repeat)
- repeat : x,y축 모두 반복
- repeat-x : x축 방향으로만 반복
- repeat-y : y축 방향으로만 반복
- no-repeat : 이미지를 반복하지 X
-
background-position : 기본 값(0% 0%)
- 키워드 : top, botton, left, right, center
- %
- px
-
background-attachment : 기본 값(scroll)
- scroll : 내용과 함께 스크롤 되지 않습니다.
- local : 내용과 함께 스크롤 됩니다.
- fixed : 뷰포트를 기준으로 고정되어 스크롤에 영향을 받지 않음
타이포그래피 (typography)
font-family
font-family:family-name | generic-family (|initial | inherit)family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 generic-family 폰트를 필수로 선언해 주어야 좋습니다.
Generic-Family에는 대표적인 서체로 serif, sans-serif 가 있습니다. serif는 삐침이라는 뜻이고, 글자 획에 삐침이 있는 폰트로 대표적으로 명조체, 바탕체입니다. sans는 프랑스어로 ‘~이 없이’라는 의미가 가지고, 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있습니다.
line-height
줄 간격이 아닌, 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미
font-size
font-weight
font-style
font-variant
글꼴 변환(소문자를 작은 대문자 형태로 표현) 한글에는 적용이 당연히 안됨.
font
font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성
-
font-size와 font-family는 반드시 선언해야 하는 필수 속성
-
각 속성의 선언 순서를 지켜야 함
-
시스템 폰트
- font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우
-
이미지 폰트
- 글꼴 대신 이미지를 이용해서 표현하는 경우
-
웹 폰트
- 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트
- @font-face : 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성 (font-family, src 필수)
vertical-align
요소의 수직 정렬을 지정하는 속성. 인라인 요소만 가능
text-align
인라인 레벨에만 적용 가능.
-
가운데 정렬
-
인라인 요소 : text-align(center)
-
블럭 요소 : margin(auto)
-
text-indent
텍스트의 들여쓰기를 지정하는 속성
text-decoration
텍스트의 장식을 지정하는 속성.
단어 관련 속성
-
white-space
-
letter-spacing
-
word-spacing
-
word-break
-
word-wrap
display 속성
요소의 렌더링 박스 유형을 결정하는 속성
- none / inline / block / inline-block …
| width | height | margin | padding | border | |
|---|---|---|---|---|---|
| inline | x | x | 좌/우 | 좌/우(상/하) | 좌/우(상/하) |
| block | o | o | o | o | o |
| inline-block | o | o | o | o | o |
※ inline-block
- inline level 요소처럼 배치
- block level처럼 box model 속성 적용 가능
주의! inline level 요소의 경우, 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline, inline-block의 경우 요소들 태그를 선언할 때 공백이나 개행이 있을 경우 약 4px의 여백을 가지고 display됩니다.
visibility
-
visible : 화면에 표시
-
hidden : 화면에 표시되지 않음 (공간은 차지함)
-
collapse : 셀 간의 경계를 무시하고 숨김 (테이블 관련 요소에만 적용 가능)
“display: none” vs “visibility: hidden”
- “display: none” : 요소가 렌더링 되지 않음(DOM에 존재하지 않음) / 스크린 리더기는 해당 영역에 있는 내용을 읽어주지 않는다.
- “visibility: hidden” : 요소가 보이지는 않지만 렌더링 되며, 화면에 공간을 가지고 있음(DOM에 존재함) / 화면에 보이지는 않지만 내용을 제공해야 하는 내용이 있으면 이 속성을 사용하면 된다.
float 속성
요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성
-
요소를 보통의 흐름에서 벗어나 띄어지게 함
- 주변 텍트스나 인라인 요소가 주위를 감싸는 특징이 있음
- 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외 : inline-table, flex 등)
예를 들면,
<div class="container" style="width:400px;">
<span style="float:left;">inline1</span>
<span>inline2</span>
</div>원래 span 태그는 inline 레벨 요소이므로 display 속성 값이 inline 입니다. float 속성을 추가로 설정해주면, display 값은 block으로 변경됩니다.
따라서 첫 번째 span 태그의 display 값은 block이 되고, 두 번째 span 태그의 display 값은 inline이 됩니다.
clear 속성
요소를 floating 된 요소의 영향에서 벗어나게 하는 속성
-
block-level 요소만 적용 가능
-
float 속성이 선언된 부모의 자식 태그를 더 생성해서 clear를 선언해준다.
부모들이 float된 자식들이 가출을 했지만, 이 소식을 다른 집안에 영향을 미치지 않도록 우리 집안의 일은 우리가 해결한다. 라는 뜻으로 하나의 태그를 더 생성을 해서 clear를 선언해주면 된다.
float와 clear 속성은 거의 하나의 세트처럼 많이 쓴다.
position 속성
요소의 위치를 정하는 방법을 지정하는 속성
-
static
- offset 값이 적용되지 않는다.
-
relative
- 자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치
- 부모의 position 속성에 영향을 받지 않는다.
- Normal-flow의 흐름에 따른다.
- 주변 요소에 영향을 주지 않으면서 offset 값으로 이동
-
absolute
- 부모 요소의 위치를 기준으로 offset에 따라 배치 (parent relative)
- * 부모의 position 값이 static인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼는다.
- Normal-flow의 흐름에서 벗어난다. —> float됨 display:block 됨
-
fixed
- 뷰포트(브라우저 창)를 기준으로 offset에 따라 배치 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타남
- 부모의 위치에 영향을 받지 않음
z-index 속성
요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성
- auto : 쌓임 순서를 부모와 동일하게 설정(기본값)
- number : 해당 수치로 쌓임 순서를 설정(음수 허용)
<특징>
-
position 값이 static이 아닌 경우 지정 가능
-
순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
-
부모가 z-index 값이 있을 경우 부모끼리 경쟁
-
큰 값이 가장 위쪽
6. HTML/CSS 유효성 검사
유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에 도움이 됩니다.
링크 주소 : https://validator.w3.org/
[ Viewport 이해 ]
다양한 미디어 기기로 뷰포트의 크기와 스케일을 조정하는게 중요해졌습니다.
대부분의 모바일 웹 사이트의 뷰포트 설정은 아래와 같습니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0">viewport meta tag to control layout on mobile browsers
Responsive Web Design Viewport
> 자료 링크 <
-
CSS Zen Garden: The Beauty of CSS Design
- 하나의 HTML이 다양한 CSS를 통해 바뀌는 것을 확인할 수 있는 사이트
출처 : 부스트코스
