CSS 핵심개념
CSS규칙
h3 {
color : #f56513;
}CSS규칙은 '선택자'와 '선언'이라는것으로 이루어져 있다.
위 코드에서 'h3'에 해당하는것이 선택자이다.
쉽게 말해서, 어떤 요소에 규칙을 적용할지 선택하는것이다.
또, 선언은 위 코드에서 color : #f56513; 과 같이 글자색을 지정한 부분을 선언이라고 한다.
선언은 [css속성, 콜론, 속성값, 세미콜론]으로 쓰면 된다.
아이디
body태그 안에서 여러개의 h3태그가 있는데
h3 {
color : #123456;
}이런식으로 설정해놨을때, 여러개의 h3태그중 하나의 h3태그만 바꿀 수 있게 해준다. 그리고
<h3>감자</h3>
<h3 id="goguma">고구마</h3> /* */그리고
#goguma {
color : #f587051;
}이렇게 선택자 부분에 #id이름을 써주면 해당 id에 대한 선언이 가능해진다.
클래스
id는 하나밖에 선택할 수 없다는 한계점이 있다.
하지만 여러개를 선택하려면 id가 아닌 클래스를 사용하면 된다.
즉, 아이디를 쓰면 여러개의 태그 중 하나만 딱 바꿀 수 있는반면, 클래스를 사용하면 여러개를 바꿀 수 있다.
<h3 class="place">강릉</h3>
<h3 class="place">속초</h3>
<h3 class="place">삼척</h3># style.css
.place {
font-size: 16px;
font-weight : 400;
}이런식으로 .class이름을 적어주고 선언하면 해당하는 class에 모두 선언된다.
CSS파일
원래는 html파일 내에 <head>태그 안에 style태그를 넣어주고 그 안에 css태그들을 사용했지만, 이렇게 사용하면 번거롭고 유지보수가 힘들기때문에 따로 css파일을 만들어서 관리해준다.
style.css파일을 만들어주고, (이름.css파일) 그 안에
.place {
font-size: 16px;
font-weight: 400;
}
#goguma {
color : #f56500;
}와 같이 정의해준뒤, html파일의 <head>태그 안에
<link rel="stylesheet" href="style.css"> 해준다. (import)
rel은 relation의 약자인데, stylesheet. 즉, 우리가 불러올 파일이 스타일시트 (css파일)
href는 css파일의 경로를 적어주면 된다.
크기단위
절대적인 크기 단위 : px
상대적인 크기 단위 : %
%는 부모태그의 크기에 상대적으로 지정할 때 쓴다. 예를 들어서 부모 태그의 height의 절반값을 쓰고 싶다면, height 50%처럼 쓸 수 있다. (부모태그는 항상 현재태그의 상위태그)
<div id="parent">
높이가 320px입니다.
<div id="child">
높이가 160px입니다.
</div>
</div>#parent {
height : 320px;
}
#child {
height : 50%;
}em
css에서 em은 부모태그 font-size의 크기인데, 만약 부모태그 글자크기의 4배를 하고 싶다면, 4em을 하면 된다.예를 들어, #child는 #parent의 자식인데, #parent의 글자크기가 16px이라면, #child 는 4em 즉, 4em이라고 하면 16px * 4 = 64px가 된다.
++ 코드에 대한 설명을 적고 싶다면 (코멘트) /* */로 써주면 된다.
줄 높이 (line-height)
텍스트 상자의 전체 높이가 증가한다. 줄과 줄 사이의 간격을 조절할때 css에서는 줄 높이로 조절하는데, 줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값이다. 물론, 고정값(ex. 30px)도 된다.
예를들어서, font-size가 16px라면, line-height : 2는 16px * 2. 즉, 32px가 된다.
텍스트 꾸미기 (text-decoration)
텍스트에 밑줄을 넣거나, 밑줄을 삭제하거나, 취소선을 넣거나 하는데 사용하는 속성이다.
속성값으로는 none, underline, line-through등이 있는데, 이 중에서 none은 <a>태그에 기본으로 들어간 밑줄을 삭제하는데 자주 사용한다.
배경이미지 (background-image)
.card {
background-image : url('이미지 경로');
}이렇게 사용하는데, 배경이미지는 기본적으로 타일처럼 사진이 반복되서 나타난다.
그래서 배경이미지를 꽉차게 따로 수정해줘야 하는데,
.card {
background-image : url('이미지 경로');
background-repeat : no-repeat; /* 배경을 반복할것인지 정하는데, no-repeat(반복x) */
background-position : center; /* 이미지를 어떤 위치를 기준으로 정렬할것인가(center 가운데 정렬) */
background-size : cover; /* 이미지의 크기는 꽉 차게 cover (꽉차게) */
}그라디언트 (linear-gradient)
그라데이션을 넣을때 사용한다.
그라데이션도 background-image;를 사용하는데, url이 아닌 linear-gradient()를 사용한다.
.card {
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
/*각도를 넣고 싶을때*/
.card {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /*90deg는 오른쪽으로 가면서 그라데이션*/
.card {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1)40%, rgba(0, 0, 0, 0)),
url('이미지 경로'); /*이미지에 그라데이션을 넣어줄때 (linear-gradient 다음으로 url)*/
}
}그리고 그라데이션이 이미지를 덮어써버리는 경우에는
.card {
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url('이미지 경로');
background-blend-mode: overlay;
}background-blend-mode라는 속성을 줘서 두 배경을 겹쳐보여주게 해주면 된다.
일일히 적기엔 복잡하기도 하고 외우기도 어렵기 때문에 구글에 'gradient generator'를 검색해서 사용하는것이 편하다.
그림자 (box-shadow)
box-shadow
box-shadow속성으로 그림자 효과를 넣어줄 수 있는데,
box-shadow: 10px 15px 20px 5px rgba(0, 0, 0, 0.4)
=> 가로 10px, 세로 15px, blur(흐림효과)20px, 그림자가 퍼지는 크기 5px, 그림자 색깔rgba(...)
이것도 구글에 'box shadow generator'를 검색해 사용하는것이 편하다.
불투명도 (opacity)
요소를 반투명 혹은 불투명하게 만들 수 있다.
주로 매진이나 품절등에 사용하는 옵션이다.
.product {
opacity : 0.5; /*1에 가까워질수록 불투명해지고, 낮아질수록 투명해진다.*/
}박스모델
웹 페이지에서 모든 요소들은 박스모델을 따른다.
눈에 보이지 않는 박스가 있다고 생각하면 된다.
지금부터 박스모델에 대해 자세히 알아보겠다.
다양한 padding, margin 표기법
순서는 시계방향 순서이다. (상 -> 우 -> 하 -> 좌)
padding : 안쪽 여백을 넣을때 사용
margin : 바깥 여백을 넣을때 사용
padding먼저 살펴보자면
상하좌우 한번에
padding : 8px; 상하좌우에 8px만큼 안쪽 여백을 줌
상하 좌우 각각
padding : 8px 4px; 상하로 8px, 좌우로 4px만큼 안쪽 여백을 줌
상 좌우 하
padding : 8px 4px 16px; 상으로 8px, 좌우로 4px, 하로 16px만큼 안쪽 여백을 줌
상 우 하 좌
padding : 8px 4px 8px 4px; 상 우 하 좌 각각 8px 4px 8px 4px 안쪽 여백을 줌
padding의 속성으로도 사용이 가능한데,
padding-top : 16px;
padding-right : 5px;
padding-left : 1px;
padding-bottom : 1px;이런식으로 따로도 사용이 가능하다.
margin도 padding과 사용법은 같다. 단지 margin은 padding과 반대로 바깥쪽 여백을 주는데 사용한다. 특히 좌우 바깥 여백의 경우에는 auto라는것을 사용해서 자동으로 채울 수 있는데, 여기서 주의할 점은 요소의 width속성이 정해져 있어야 자동으로 채울 수 있다.
/*가운데 정렬*/
.divBox {
width : 960px;
margin : 0 auto;
}border와 border-radius
div박스를 만들었을때 보이지 않는 사각형 박스가 생길것이다.
이 테두리 부분을 border라고 하는데,
.divStyle {
border : 1px solid #dedede;
}border 1px라는것은 박스의 테두리 굵기이다.
solid는 테두리의 모양인데, solid, dashed등이 있다.
마지막의 색상코드는 테두리의 색깔이다.
또
.divStyle {
border : 1px solid #dedede;
border-radius : 5px;
}border-radius는 테두리를 둥글게 만들어준다.
참고로 border가 없더라도 border-radius를 사용할 수 있다.
box-sizing
그냥 width속성을 주게 되면
width : 400px 라면 해당하는 content의 너비가 400px가 되는것이다.
content는 박스의 가장 내부에 위치해있는데, 그러면 의도한 박스 전체의 너비가 아니게 된다. 그래서 어떠한 기준으로 박스를 만들고 싶다면
width : 400px;
box-sizing: border-box; /*가장 테두리인 border를 기준으로 400px짜리 박스가 만들어진다.*/이게 편하다 보니 모든 요소에 적용하게 되는데 모든 요소에 적용하려면
* {
box-sizing : border-box;
}를 해주면 된다.
overflow
하나의 박스의 안에 내용이 너무 많으면 박스 바깥으로 내용이 빠져나오게 되는데, 이것을 overflow라고 부른다. 그래서 그 빠져나온 부분을 보통 박스내에서 스크롤해서 보거나 숨겨버리는데,
.overflowBox {
height : 324px;
overflow : hidden; /*빠져나온 부분을 없애줌*/
}
.overflowBox {
height : 324px;
overflow : scroll; /*빠져나온 부분이 해당 overflowBox내에 스크롤이 생긴다.*/
}
.overflowBox {
height : 324px;
overflow : scroll;
white-space : nowrap; /*가로로 스크롤바가 생긴다.*/
}자잘한 팁
요소와 요소 사이의 간격을 조절할대
margin-bottom : 8px;이런식으로 아랫쪽 여백을 주어 간격을 조절할 수 있다.
예를들어,
/*label과 input입력 필드 사이의 간격을 8px로 둔다.*/
label {
margin-bottom : 8px;
}
input {
margin-bottom : 16px; /*이건 그 다음 요소와의 간격*/
}display
display라는 속성은 크게 두가지
block, inline이 있다.
block
- h1, p, div같은 태그
- 위에서부터 아래로 차례로 배치됨
- 너비와 높이를 지정할 수 있다.
inline
- a, span, br같은 태그
- 평소에 글쓰는 방향으로 배치된다.
- 화면에 꽉차면 다음줄로 넘어간다.
- 너비와 높이를 지정할 수 없다. (img태그는 예외로 가능)
- 여백은 가로로만 가능하다.
인라인블록
인라인은 기본적으로 크기를 줄 수 없다. width나 height값을 줘봐도 기본적으로 크기가 없다고 생각하기 때문에 적용되지않는다. 하지만, 배치는 인라인처럼 하면서 크기도 정하고 싶을때는, display속성으로 inline-block을 쓰면 된다.
display : inline-bolck을 쓰게 되면, width나 height값을 줬을때 다른 요소들이 씹히지 않고, 밀어내며 크기도 줄 수 있게 된다.
css를 작성하다가 다른 요소들이 자리를 안비켜주거나, 너비나 높이가 적용되지않는다면 그 요소가 inline인지 확인해보자.
float
.image {
width : 200px;
float : right;
margin-left : 10px;
}float이라는 속성을 사용하면, 요소가 배치되는 방식에서 벗어나서 블록 왼쪽이나 오른쪽으로 배치할 수 있다. 즉, float속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소를 배치할 수 있다.
선택자 목록
똑같이 중복되는 코드를 또 쓴다면, 오타가 날 확률도 높고, 가독성도 떨어지게 된다. 그래서 사용하는것이 선택자 목록인데,
.book-description,
.book-info {
font-size : 12px;
font-weight : 700;
line-height : 17px;
}
.book-info {
background-color : #dedede;
}이렇게 하면 book-description의 속성들이 book-info의 속성에도 들어가게 된다.
선택자 붙여쓰기
우선 html코드에서 클래스를 2개 쓰는법부터 알아보자면
<p class="delay book-info">book</p>
이런식으로 delay와 book-info사이에 띄어쓰기를 해줌으로 class를 2개로 만들 수 있다.
그리고 css코드는
.delay.book-info {
background-color : #c76546;
}.class명.class명으로 붙여서 쓸 수 있다.
이것말고도 클래스 선택자랑 태그 선택자를 같이 쓰거나
아이디 선택자랑 태그 선택자를 같이 쓸 수도 있는데,
만약에 p태그이면서 delay클래스랑 book-info클래스를 둘 다 갖고있는것을 선택하고 싶으면
p.delay.book-info {
background-color : #c76546;
}와 같이 해줄 수 있다.
아이디 선택자와 태그 선택자도 마찬가지다.
p#shoping {
background-color : #c76677;
}태그 선택자와 클래스 선택자도
#shoping.delay.book-info {
background-color : #c76546;
}가상 클래스
가상클래스는 의사 클래스, 가짜 클래스라고도 부르는데, 요소의 상태같은것을 선택할 때 사용하는 클래스이다. 정해진 이름앞에 콜론(:)을 붙여서 사용한다. 대표적으로
:hover /*마우스를 올렸을때*/
:active /*꾹 클릭한 상태*/
:visited /*방문한적이 있는 링크일때*/
:focus /*Tab키 등으로 포커싱 됐을때*/등이 있다. 예를 들어서 밑줄이 없는 링크에 마우스를 올렸을때 밑줄이 생기게 하고 싶으면, :hover를 쓰면 된다.
a {
text-decoration : none;
}
a:hover {
text-decoration : underline;
}캐스케이드
여러 CSS규칙이 적용될때 순서에 따라서 합치는것이 캐스케이드라고 할 수 있다. 그럼 합쳐지는 순서는 어떻게 되는가
html코드내에서 style코드를 쓰는것은 인라인 스타일이라고 하는데 이것이 가장 우선순위가 높다.
두번째로 우선순위가 높은것은 코드상의 순서이다. 똑같은 선택자를 쓰는 경우에는 나중에 쓸수록 우선순위가 높다. 예를들어,
.description {
color : #818181;
font-size : 16px;
}
.description {
color : #121212;
}이렇게 적었다면, 위에 있는 color : #818181은 씹히게 되고, #121212가 적용된다. (font-size는 16px그대로임)
마지막 우선순위는 선택자의 명시도이다.
쉽게 말해, 선택자마다 점수가 있고 점수가 높을수록 우선순위가 높다. (대충 구글에 계산기 검색하면 나옴)
Ingerited from body
개발자도구에서 Ingerited from body라고 적혀있는 규칙들이 물려받은 규칙이고, 여기서 진하게 보이는 속성들이 상속된 속성이다. 상속받은 속성들은 가까운 조상일수록 우선순위가 높다.
