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

 

 

 

 

 

<블록, 인라인 요소_웹 개발의 기본>

 

확인할 때 봐야할 페이지 불러오기 : F12 개발자 콘솔

 

 

 

 

 

h1 태그에 커서를 올렸을 때, 좌측에 파란색 영역은 태그의 실제 크기, 빨간색 영역은 여백

 

 

✨ 디스플레이 요소 (블록, 인라인 요소)

 

 

블록 요소

: 한 줄 전부 차지

 

 

📌 여백 없는 블록 요소 사용 : div 태그(레이아웃 구성에 활용)

div 태그 안에 span 태그 삽입 가능

 

 

 

 

인라인 요소 

콘텐츠 크기만큼 가로 크기가 제한, 공간 부족으로 인해 추가되는 요소는 우측 확장

텍스트도 인라인 요소!

📌 여백 없는 인라인 요소 사용 : span 태그 (레이아웃 구성에 활용)

button 인라인에 속한다!

 

 

 

 

✅

 

이전의 br 태그(줄 바꿈 용도) 사용 대신 CSS 추천

 

텍스트&태그의 구성 좋지 않음-> 텍스트 스타일 설정 시 태그가 씌워져 있어야 함

 

: div 태그로 ID, PW(input 태그), 로그인(button 태그) 

div 태그를 활용하는 이유는 br 태그 대신 줄 바꿈 적용 목적