[웹1]240117-6일차(텍스트 가로정렬, padding)

https://codepen.io/limyena/pen/gOEmMXx

힘이강한css복습

https://codepen.io/limyena/pen/PoLpGPB

텍스트 가로 정렬

https://codepen.io/limyena/pen/bGZqwWJ

padding

 

 

내가 쓴 코드펜 찾기

codepen.io

yourwork 탭에서 선택

 

 

inherit -> 기본상태로 커스텀

text-decoration -> 텍스트 줄 커스텀
none -> 없음

 

(추가적으로 공부하면 좋은 것들)
    - 구글에 text-decoration 검색해보기. 코드펜에 하나씩 실험해보기

 

[노멀라이즈]

커스텀 되어있는 태그를 기본상태로 돌려주는 행위

ex) a태그 노멀라이즈  a{color: inherit; text- decoration: none;}

 

-->주의사항

1.노멀라이즈와 커스텀은 따로 작성해줘야 한다.

ex)

a {

   color: inherit;

   text- decoration: none;

   커스텀 금지

}

a {

   color: red;

} ->예제풀이할 때 이유 설명

 

 

[line - height] ->행간 조절 속성

(사용처) 텍스트 세로 중앙 정렬

ㄴ사용방법 : 행간수치와 상자높이치수를 동일하게 작성

ㄴex) height: 50px; --> line - height: 50px;

ㄴ위아래 수치가 다른 텍스트들은 세로중앙정렬할대 line-height를 활용한다.

 

 

브라우저에서 도형취급 받는 요소

1.block(기본)

2.flex(최신)

 

브라우저에서 텍스트취급 받는 요소

1.inline

2.inline-block

3.텍스트

 

*도형요소인지 텍스트요소인지에 따라서 정렬 형태가 달라진다.

 

도형 정렬 속성(코드)

margin-left:auto; ->오른쪽 정렬

margin-right:auto;  ->왼쪽 정렬

margin-left:auto; + margin-right:auto;  -> 중앙정렬

 

텍스트요소 정렬 속성(코드)

text-align: left; ->왼쪽정렬 

text-align: right; ->오른쪽정렬

text-align: center; ->중앙정렬

 

[여백 속성]

margin과 padding 두가지로 이루어져있다.

margin -> 오브젝트와 오브젝트 분리

padding->버튼형태에 많이 사용 오브젝트 분리아 동시에 너비높이 포함