반응형 html css 반응형 (2) 썸네일형 리스트형 [html/css - table 태그 사용법] 기본 테이블 깔끔하게 만들기 - border (테두리), 간격, nth-child 등 기본 속성 사용법 표 작성을 위한 아주아주 기본 태그와 정의 보통 데이터를 보여줄 때 테이블을 많이 쓰는데요 너무 기본 태그인지라 포스팅하기가 좀 그릏지만 제가 좋아하는 언니를 위해서 열심히 끄적끄적해봅니다. 인터넷 오픈 소스에서 가져온 그림이지만 이렇게 이쁘게 뭔가 정보를 보여줄 때 태그를 사용해요 그 외에도 활용도가 높은 기본 템(?) 이죠 그냥 여러 예시 구현해보면서 진행할게요 테이블에 사용되는 태그 테이블은 기본적으로 태그를 사용합니다 테이블을 구현하기 위해서 알아야하는 기본 태그가 몇 개 있는데요~ ◆ tr태그 일반 행은 table row의 약자 태그를 사용합니다. 위의 그림의 경우 총 6개의 행이 있으니 이 6개 사용됐겠네요 ◆td태그란 첫 번째 데이터 행안에는 몇 개의 데이터가 있나요 4개의 데이터가 들어있네.. [html/css] element 또는 요소(div) 가운데 정렬시키는 몇 가지 방법 (position, margin, flex 등등) div table 등등 가운데 정렬시키기~ 이번에는 상황에 따라(?) 요소를 가운데 정렬시키는 법을 정리해보려고 해요. 먼저 화면에 요소를 가운데 정렬시키고 싶을 때! 1. position 속성 사용 [inline-block] 간단하게 또 로그인 예제를 사용해서 살펴봅시다. Welcome to login site 아이디 비밀번호 로그인 부모인 body를 기준으로 위치를 맞출것이므로 position 속성을 absolute 로 맞춰줍니다 absolute 절대적이라는 의미로 자신의 위치를 부모 객체를 대상으로 맞춥니다. (다른 요소들에게 영향받지 않아요) position이라는 속성들의 조합은 레이아웃을 디자인하는데 엄청난 사용성(?)을 발휘하는 데 나중에 따로 다뤄보도록 할게요 css를 이렇게 바꿔줄게요 di..
최신 댓글