HTML, CSS, JS

웹(HTML, CSS, JS)(07.17) - display, text-align, hover

yeosang0508 2024. 7. 17. 22:04

웹 페이지를 이루는 3요소

HTML(배우)

CSS(스타일리스트)

  1. block (div, section, nav, article의 기본값)
  • 너비 최대화
  • 한줄 무조건 혼자 씀 -> 레고 블럭
  1. 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