프로그래밍 공부 일기

2020년 5월 25일~2020년 5월 26일

머리글과 바닥글

헤더와 바닥글 태그는 자주 사용되므로 HTML5에서는 <header></header> 와 <footer></footer> 태그가 준비되어 있다. (클래스로 이름을 지정할 필요가 없습니다.

배경 이미지 지정 : background-color url(画像のURL)
이 상태에서는 지정된 화상이 표시 범위를 채울 때까지 반복적으로 표시된다.
　→ background-size:cover;
요소를 중앙에 배치

margin의 좌우에 auto를 지정한다(margin에 auto를 지정할 때는 width를 맞추어 지정한다)
텍스트 등의 인라인 요소나 인라인 요소의 배치를 지정한다 text-aligin 프로퍼티를 사용해 text-align:center (왼쪽 정렬: left 오른쪽 정렬: right)

문자 간격 지정: letterspacing 속성

버튼 만들기
<a> 태그를 지정하지만, 인라인 요소에는 width나 height, 상하의 margin가 지정할 수 없다. 따라서 인라인 블록 요소가 사용됩니다.

인라인 블록 요소

이름대로 인라인 블록 요소란 블록 요소와 인라인 요소의 특징을 겸비한 요소를 말한다. 인라인 요소와 마찬가지로 옆에 늘어서 있지만 블록 요소처럼 폭과 높이를 가진다.
display 속성에서 block (블록 요소), inline-block (인라인 블록 요소) 및 inline (인라인 요소)을 지정할 수 있습니다. ex) display:inline-block;이를 이용하여 <a> 태그로 버튼을 만들 때 <a> 태그를 블록 요소로 함으로써 텍스트뿐만 아니라 전체를 클릭할 수 있다. (크기가 부모 요소 가득 퍼지기 때문에)

커서가 올랐을 때의 상태:hover(셀렉터:hover로 사용)

둥근 모서리: border-radius 속성
border-radius:値; 로서 사용한다. 숫자가 커질수록 모서리가 둥글게 된다.

요소를 투명화
opacity 프로퍼티:투명도는 0.0(완전히 투명)~1.0(완전히 불투명)의 수치로 지정하고 있다. 내용물 모두를 투명하게 하는 성질이 있다.
→ 배경만 투명하게 하는 경우는 rgba 를 이용한다.
rgba : 4 개의 값을 쉼표로 구분하여 넣습니다. 처음 세 값은 rgb로 표시되는 색상 조합을 사용하여 마지막 네 번째 값이 투명하게 만드는 정도 (0.0 ~ 1.0)를 지정합니다. (그 색만을 투명하게 할 수 있다)

애니메이션 붙이기
transition 로 「변화의 대상」이나 「변화에 걸리는 시간」등을 지정할 수 있다. 변경 대상에는 color 등의 속성을 사용하지만 all을 지정하면 모든 속성에 적용할 수 있다. (hover와 함께 사용되는 경우가 많음)

/*カーソルがのったときに背景の色が赤くなる*/
div{
  transition:all 1s;
}
div:hover{
  background-color:red; 
}

행 사이 지정: line-height 속성

행의 높이를 지정할 수 있다. (값이 클수록 행간은 커진다) 또, 요소의 세로 방향의 중앙에 문자를 배치하는데도 사용할 수 있다.


문자 두께 지정: font-weight 속성

normal 또는 bold를 지정한다. 제목의 <h1> 요소는 초기 상태에서 font-weight:bold;입니다.

요소를 겹쳐서 표시
position:absolute : 사이트 전체의 좌상 부분을 기준으로 top, left 등을 이용한다.position:relative : 부모 요소의 좌상 부분을 기준으로 top, left 등을 이용한다. 또한 요소의 위치를 ​​변경하는 데에도 사용할 수 있습니다.

그림자 추가: box-shadow 속성
box-shadow:水平方向　垂直方向　影の色를 지정한다.

요소가 클릭된 상태: active

클릭되었을 때만 CSS를 적용할 수 있다.