Colors(색상 표현)
p {
color: darkblue;
}
/* rgb */
/* color: rgba(999, 0, 0); red */
/* color: rgba(0, 0, 0, 0.5); */
/* hex code */
/* color: #FF0000; =#F00 red*/
/* color: #00FF00; =#0F0 green */
/* color: #0000FF; =#00F blue */
/* color: #333; 한자리 숫자 pair로 되어 있는 색상일 경우 축약 */
/* hsl(hue 색상, saturation 채도, lightness 명도) */
/* color: hsl(0, 100%, 50%); */
/* color: hsl(0, 0%, 100%); white */
/* color: hsla(0, 100%, 50%, 100%); */
- 색상을 지정하는 방법은 named color, rgb, 헥스코드, hsl이 있다.
- named color
- rgb
color: rgba(999, 0, 0, 0.5);- 투명도를 추가하기 위해서는 마지막에 알파값(a)를 덧붙여주면 된다.
- hex code
- hsl
color: hsla(0, 100%, 50%, 100%);- 투명도를 추가하기 위해서는 마지막에 알파값(a)를 덧붙여주면 된다.
Unit(크기 단위)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* header {
width: 50%;
} */
h1 {
border: 2px dashed red;
width: 50%;
font-size: 3rem;
padding: 0.5em;
/* padding의 em은 font-size의 비례 */
}
main {
font-size: 2rem;
background-color: skyblue;
}
p {
font-size: 2rem;
width: 40ch;
}
body {
min-height: 100vh;
}
- mdn 문서
- 절대 길이 단위(absolute length units)
px- 유저가 지정하는 브라우저 셋팅에 맞춰지지 않는 절대 길이 단위로 지정하는 것은 권하지 않는다.
- 상대 길이 단위(relative length units)
- %로 설정할 경우 부모 태그 기준의 %로 계산되어 설정됨
rem의 r은 root를 의미한다.
2rem 설정시 기본 폰트 크기의 2배 크기가 된다.2em 설정시 부모 태그 폰트 크기의 2배 크기가 된다.
ch는 character를 의미한다.
vw, vh의 v는 현재 화면 사이즈인 viewport를 의미한다.
- vw 사용시 horizontal scroll bar가 생길 수 있다.
- vh를 min-height에 쓸 경우 화면을 100%로 잡아둘 수 있다.
- Modern CSS에서는 rem으로 통일하여 사용하는데, 이유는 root 폰트 사이즈를 바꾸면 자동으로 모든 사이즈들이 바뀌는 장점이 있기 때문이다.
- 화면 사이즈별로 크기를 일괄 변경하고 싶을 때도 미디어쿼리로 root 폰트 사이즈만 바꿔주면 모든 사이즈가 자동으로 조절되는 장점이 있다.
Font(글꼴 설정)
CSS font-family 속성
body {
padding: 10%;
font-size: 2rem;
font-family: serif;
}
- font-family: 여러 개 작성시 fallback 으로 활용
- Arial, Vernada 등 자주 쓰이는 그룹이 있으므로 적절히 활용
웹폰트 사용법 1) HTML link 태그
...
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lora&family=Open+Sans:wght@300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
웹폰트 사용법 2) CSS @import
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lora&family=Open+Sans:wght@300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap');
글꼴 꾸미기 관련 속성
p {
text-decoration: none;
text-transform: capitalize;
text-align: justify;
text-indent: 2em;
}
text-decoration: <span> 태그로 원하는 단어만 감싸서 사용하는 것 일반적이다.text-indent: 문단 시작시 인덴트 넣어주는 용도로 사용할 수 있다.
p {
line-height: 1.5;
letter-spacing: 0.1em;
word-spacing: 2em;
}
line-height: 줄 간격letter-spacing: 자간
p {
font-weight: 300;
font-style: italic;
}
font-weight: 숫자나 bold, lighter, normal 등 예약어로 사용 가능하다.
Link(a 태그 꾸미기)
a {
text-decoration: none;
cursor: pointer;
color: blue;
}
- web links / hypertext links를 사용하기 위해서 HTML의 a 태그를 사용한다.
cursor 링크에 커서를 갖다댔을 때의 포인터
Psuedo sellector(가상 선택자)
a:visited {
color: purple;
}
a:hover, a:focus {
color: dodgerblue;
}
a:active {
color: red;
}
:link: 방문하지 않은 링크:visited: 방문한 링크:active: 클릭하고 있는 순간:focus: 포커스된 순간, screen reader accessibility와 관련이 있다.:hover: 마우스 오버된 순간- cascading 규칙이 적용되는 경우를 주의해야한다.
- 가상 선택자는 태그 선택자보다 specificity score가 높다.
- hover가 visited 위에 있는 경우 visited 된 링크에 hover가 적용되지 않는다.
List(ul, ol, li 태그 꾸미기)
<article>
<h2>Ordered List</h2>
<ol start="5" reversed>
<li>Step One</li>
<li value="26">Step Two</li>
<li>Step Three</li>
</ol>
</article>
<article>
<h2>Unordered List</h2>
<ul>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ul>
</article>
ol {
list-style-type: lower-alpha;
padding: 0;
}
ul {
list-style-type: square;
text-align: center;
list-style-position: inside;
color: #00f;
line-height: 1.6;
/* list-style-image: url('../images/checkmark.png'); */
/* overwrite or fallback */
/* list-style: square url('../images/checkmark.png') inside; */
}
ul li:nth-child(even) {
color: red;
}
ul ::marker {
color: red;
font-family: fantasy;
font-size: 1em;
content: "only $5 >> ";
/* content에 svg 넣는 것 가능 */
}
list-style-type: none;일 경우 마커를 없앨 수 있다.
- none인 경우에도 ::marker의 content 속성을 넣어주면 화면에 노출된다.
List 스타일 예시
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0.5rem;
font-family: "Roboto", sans-serif;
text-align: center;
}
nav {
border: 2px solid #333;
border-radius: 2rem;
margin: 0 auto 1rem;
max-width: 600px;
font-size: 3rem;
line-height: 7rem;
}
h2 {
padding: 1rem;
background: gold;
border-radius: 2rem 2rem 0 0;
}
ul {
list-style-type: none;
}
li {
border-top: 1px solid #333;
}
/* 마우스 오버 시에 전체 칸이 선택됨, 클릭할 수 있는 범위가 넓어짐 */
li a {
display: block;
}
li a,
li a:visited {
text-decoration: none;
color: #333;
}
li a:hover,
li a:focus {
background: #333;
color: whitesmoke;
cursor: pointer;
}
li:last-child a {
border-radius: 0 0 2rem 2rem;
}
Related
