HTML, CSS, JS
웹(HTML, CSS, JS)(07.17) - display, text-align, hover
yeosang0508
2024. 7. 17. 22:04
웹 페이지를 이루는 3요소
HTML(배우)
CSS(스타일리스트)
- block (div, section, nav, article의 기본값)
- 너비 최대화
- 한줄 무조건 혼자 씀 -> 레고 블럭
- inline-block
- 너비 최소화
- 한 줄에 최대한 여러개 -> 글자
JS(감독)

div {
/* 글자의 두께 조절 */
font-weight:normal;
font-weight:bold;
/* 기본폰트의 3배 */
font-size:3rem;
font-size:140px;
/* 자간조절 */
letter-spacing:-10px;
color:#787878;
}
section {
font-size:10rem;
/*
rgba 함수의 인자
인자 1(red) : 0 ~ 255 까지 넣어서 실험
인자 2(green) : 0 ~ 255 까지 넣어서 실험
인자 3(blue) : 0 ~ 255 까지 넣어서 실험
인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
*/
color:rgba(255,0,0,0.5);
}
<a href= ""></a> -> 링크
<br> -> 줄 바꿈
<img src="" alt="">
<hr> -> 구분선
div a {
color : red;
}
div > a {
color : red;
}
// 둘의 결과값 다름
text-align
- 텍스트 정렬
- 영역정렬X
section {
text-align:center;
width:100px;
display:inline-block;
border:20px solid blue;
padding:20px;
}
section의 display는 inline-block으로 너비가 최소화이기에 적용이 되지 않는다. 따라서 가운데 정렬로 보내기 위해서는 section에 div를 감싸고 div에 align을 주어 텍스트로 인식시켜 가운데로 보낸다.
hover
CSS의 hover 선택자를 사용해서 마우스를 요소 위에 올렸을 때 적용되는 스타일을 정의합니다.
div:hover{
background-color : blue;
transform: rotate(45deg);
}
div:hover > section{
background-color: pink;
}
div > section:hover{
background-color: pink;
}
div + nav -> div의 인접동생 nav
div ~ nav -> div의 동생 nav
'&'nbsp -> 스페이스바
Text-decoration in CSS