Rgba
rgb에 불투명도(alpha)를 추가한 것, 불투면도는 0~1 사이의 소수점 숫자
크기 단위
%
부모 태그에 대해서 상대적인 크기, 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨
1em
부모 태그의 font-size
부모 태그의 글자크기가 16px일 때 2em은 32px 이다
1rem
최상위 태그(html)의 font-size
예를 들어 html 태그의 font-size는 8px 이고 부모는 16px
-> 자식은 8x2인 16px가 된다
텍스트 스타일링 정리
line-height
줄 높이 조절
줄과 줄 사이의 간격을 조절할 때 line-height를 통해 줄의 높이를 조정한다.
line-height는 단위가 없고 글자 크기에 상대적인 값
예를 들어 font-size가 16px이라고 하면 "line-height:1"은 line-height가 16px가 된다.
text-decoration
텍스트 꾸미기
텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는데 사용하는 속성
속성 값
- none: a 태그 같은 경우 기본적으로 밑줄 있으니 text-decoration:none을 통해 밑줄을 없앰
- underline : 밑줄 표시
- line-through : 중간에 선이 있는 취소 선 같은 느낌
배경 이미지
background-image:url("파일주소")
이미지 사진을 백그라운드로 쓰게 된다
background-position
기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 쓰면 된다
background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;background-repeat:no-repeat
백그라운드 이미지 배경의 반복 여부를 물음
속성 값
- no-repeat:반복이 없음
- repeatX: X축으로 반복
- repeatY: Y축으로 반복
background-size:cover
cover하면 해당 태그의 부분에 이미지 비율을 유지하며 이미지가 꽉참
- contain: 이미지가 잘리지 않는 선에서 최대 크기로 배치
그라디언트(그라데이션)
background-image:linear-gradient(gba(0,0,0,1),rgba(0,0,0,0))
rgba(0,0,0,1)에서 시작하고 rgba(0,0,0,0)에서 끝남
-> 아래로 갈 수록 그라데이션이 나타남
background-image:linear-gradient(90deg,rgba(0,0,0,1),rgba(0,0,0,0))
기본 값은 위에서 아래지만 만약 방향을 바꿔주고 싶으면 다음과 같이 90deg를 통해 각도를 정해줘서 90도로 각도를 수정할 수 있다
(단위가 deg이다)
background-image:linear-gradient(90deg,rgba(0,0,0,1) 40%,rgba(0,0,0,0))
그라디언트 비율을 다르게 하고 싶으면 다음과 같이 40%를 통해 앞부분을 40% 비율을 줄 수 있다
(gradient generator 페이지를 통해 그라디언트를 더 쉽게 이용할 수 있는 페이지가 있다)
background-image:linear-gradient(90deg,rgba(0,0,0,1) 40%,rgba(0,0,0,0)),url(“파일주소”)
다음과 같이 선언하면 이미지 위에 반투명한 그라디언트를 겁쳐 놓는다고 생각하면 된다
그림자
box-shadow:10px 15px 20px 5px rgba(0,0,0,0.4)
가로 10px 세로 15px 정도 경계가 20px정도 흐리게 (blur 작업) rgba(0,0,0,0.4)색으로 그림자를 만들 되 5px 정도 파스텔 느낌?으로 5px 퍼지게 설정
opacity:0.5
알파 값처럼 opacity도 값이 1에 가까울수록 불투명해지고 값이 0에 가까워 질수록 투명해지기 때문에 불투명도라고 부름
주의할점
태그 전체가 반투명해진다. 즉, 배경색만 반투명하게 하고 싶으면 rgha를 사용하면 됨
margin
영역 바깥쪽 여백을 넣을 때 사용, 특히 좌우 바깥 여백의 경우에는 auto라는 걸 사용해서 자동으로 채울 수 있다. 여기서 주의할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있다
border-radious
border이 없어도 border-radious는 사용가능
box-sizing:border-box
안에 content가 넘치는걸 방지 할 수 있다(border을 기준으로 너비를 지정할 수 있다)
원래 width:400px하면 padding,margin 값 까지 더해져서 border의 넓이가 정해졌는데 box-sizing을 통해 해당 귀찮은 문제점을 해결할 수 있다
-> 다음과 같이 상위 태그에 선언해 주면 된다
overflow
박스는 작아졌는데 내용이 넘쳤을 때를 말한다
해결방안
overflow:hidden 해서 넘치는 부분을 짜른다
overflow:scroll 해서 내용을 박스안에 가두어 스크롤이 가능하게 한다
overflow:auto 해서 내용이 넘치면 스크롤하게 만든다
마진 상쇄(margin collapsing)
두 태그의 마진이 합쳐져서 더 큰 마진이 적용 됨 (즉, 세로 마진은 서로 겹친다)
부모 요소에서 border이나 padding이 있어서 어떤 경계가 생기는 경우에는 세로 마진이 상쇄가 될 수도 있고 안될 수 도 있다
display
display 속성은 크게 block이랑 inline이 있다
block
<h1>,<p>,<div> 같은 것들, 블록은 위에서부터 아래로 배치됨, 너비랑 높이를 지정할 수 있다
inline
<a> <span> 같은 것들, 평소에 글 쓰는 것처럼 배치 됨, 기본적으로 화면에 꽉 차면 다음 줄로 넘어감, 그리고 크기를 정할 수 없다. 단, img 태그 처럼 외부적인건 크기를 지정이 가능
display:inline-block
inline은 원래 아무리 가로 세로 키워도 다른 영역을 안 밀어 냈지만 inline-block을 통해 가로 세로 크기를 밀어낸다
float
배치되는 방식에 벗어나서 블록의 왼쪽이나 오른쪽에 배치 가능
같은 클래스지만 변화를 주고 싶을 때
아래 코드처럼 selected 클래스를 추가하였다
<div class="menu">
<a class="menu-link" href="/">메인</a>
<a class="menu-link selected">소개</a>
<a class="menu-link" href="/blog">글</a>
</div>
.menu {
background-color: #000000;
padding: 16px;
}
.menu-link {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.menu-link.selected,
.menu-link:hover {
color: #aaaaaa;
}
캐스케이드
여러 css 가 적용이 될때 순서에 따라 합쳐지는것
상속되는 속성들
대표적으로 다음 속성들은 상속됨
color, font-family, font-size, font-weight, line-height, text-align, … .
