본문 바로가기

HTML15

한 페이지에 여러개 모달 팝업창 띄우기 1. 소스 [HTML] 팝업 버튼창 버튼1 버튼2 버튼3 버튼4 모달01 모달02 모달03 모달04 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyul) on CodePen. 2022. 10. 27.
text-align으로 문단 정렬하기 1. text-align? text-align은 문단을 정렬하는 속성이다. text-align 사용 시 주의할 점은 block요소에서만 적용할 수 있다는 점이며 block요소 안에 정렬되는 것은 inline요소인 텍스트뿐만 아니라 이미지도 정렬된다. 2. text-align 속성 text-align: left 왼쪽 정렬 text-align: right 오른쪽 정렬 text-align: center 중앙 정렬 text-align: justify 양쪽 정렬로 왼쪽과 오른쪽의 가장자리 끝에 맞춰 정렬되는 것이다. 3. 적용 예시 block요소인 div에 text-align을 적용했을 때 텍스트가 잘 정렬된다. block요소인 div에 text-align: center을 적용했을 때 inline요소인 span과.. 2022. 9. 16.
테이블 헤더와 1열 고정된 스크롤 테이블 만들기 (position: sticky) CSS의 position: sticky를 사용해 테이블 헤더와 첫 번째 열이 고정되어 있는 가로, 세로 스크롤 테이블을 만들어 보았다. position: sticky 사용 시 '주의할 점' 첫 번째는 부모 요소 안에서 위치 값을 고정시켜 준다는 점이다. 두 번째는 top, bottom, left, right 중에 하나는 필수적으로 꼭 넣어야 position: sticky가 작동한다는 점이다. 마지막으로 IE11 이하 버전은 지원하지 않는다는 점을 주의해야 한다. position: sticky의 브라우저별 대응 여부는 아래 링크 글을 통해 더 자세히 확인해 볼 수 있다. HTML, CSS 크로스브라우징 확인하는 사이트 * 사이트명을 클릭하면 해당 페이지로 이동합니다. Can I use 사이트 브라우저마다 .. 2022. 9. 15.
블록 요소와 인라인 요소 차이점 1. 블록 요소와 인라인 요소 [블록 요소] 블록 요소는 혼자 한 줄을 차지하는 요소로 너비가 100%이다. 즉, 블록 요소의 옆에 다른 요소가 올 수 없는 것을 의미한다. 블록 요소 안에는 텍스트와 인라인 요소가 포함될 수 있으며 다른 블록 요소 또한 포함될 수 있다. 패딩이나 마진 등을 이용해서 크기를 정하려면 블록 요소여야만 가능하다. [인라인 요소] 인라인 요소는 줄을 차지하지 않는 요소로 화면에 차지하는 만큼 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있다. 즉, 한 줄에 여러개 인라인 요소가 표시될 수 있다. 인라인 요소 안에는 텍스트와 인라인 요소가 포함될 수 있지만 블록 요소는 포함될 수 없다. 종류 태그 블록 요소 , , ~ , , , , , , , , , 등 인라인 요소 , , .. 2022. 9. 1.

티스토리툴바