[HTML/CSS] 컴알못의 도전기 11일차

 

 

 

문자, 요소의 정렬

 

 

text-align

텍스트의 위치에 영향을 주는 속성(좌, 중간, 우), 정렬

 

div 태그의 내용을 웹 화면의 중간에 오도록 설정하려면,

css에서 div { text-align: center; }을 입력해준다. 유의점)) 자신이 인라인인 경우, 해당 공간에 있는 경우만 가능

 

🤷‍♀️ span, inline에 text-align을 써도 아무 변화가 없다.

가로 크기가 span에 맞춰져 있기때문 --> 해결방안 : span { display: inline-block; width: 50%; text-align: right; }

 

 

 

 

🦔 태그안에 태그

span은 인라인, 출력 시 우측으로 차곡차곡

 

 

🦔 div안에 div class

 

겉 div가 중앙 정렬이지만, 내부 a class를 가진 div는 text-align: left;이고, width가 100%이므로 좌측에 출력

width가 달라져도 그대로임. 블록요소는 text-align의 영향을 받지 않는다. a

 

class에 display, inline-block 설정을 해주면 가운데로 텍스트가 이전된다.

.a { display: inline-block; width: 50%; text-align: left;} 

 

인라인, 바깥 태그의 text-align 속성에 영향을 받는다.

display가 inline-block 아닌 inline인 경우 width 설정 50%가 100%나 마찬가지라고 인식한다. span가 다르지 않음 (내부 태그가 inline일 경우만 가능, block이면 내부 태그의 설정이 바깥 태그의 width나 height보다 작더라도 text-align 영향받지 않음)

 

a class의 display가 inline-block, inline으로 바뀌어야만 text-align의 영향을 받게 된다.

 

 

 

 

 

완전 블록요소여서, 출력 시 텍스트는 좌측에 보인다.

 

 

 

✍ inline- 정렬, block- 정렬 x

내부 태그 블록 요소에 text-align: center; (중앙 정렬) 입력해도 실행되지 않음