본문 바로가기

WEB

(75)
7. bootstrap5 image, helpers bootstrap image img 태그는 html 태그와 큰 차이가 없다. 하지만 여기에 class 속성값을 여러가지 주면 간편하게 이미지를 변화시킬 수 있다. 스타일 의미 .img-fluid 너비 100% .img-thumbnail 너비 100% + 라운드 테두리 .rounded 둥근 테두리 .rounded-circle 원 모양 이미지 .mx-auto d-block 좌우 마진을 이용한 가운데 정렬 마지막에서 마진을 설정하기 전 d-block을 준 이유는 img 태그는 인라인 레벨이기 때문이다. 인라인 레벨 태그 경우 마진, 패딩 같은 값이 적용이 안돼 block 레벨로 변경하였다. helpers clearfix, color, background, colord link, position, ratio, ..
6. bootstrap5 grid, columns, gutter, margin, padding bootstrap grid grid란 격자란 뜻으로 레이아웃을 바둑판처럼 나누는 방법이다. 앞에서 언급했듯이 bootstrap은 행을 12개 열로 나눌 수 있다. 나누는 방법은 간단하다. 행은 .row, 열은 .col-0~12 옵션없이 .col만사용해도 알아서 나눠쓴다. 열 뒤에는 0~12개 사이의 값을 넣어주면 된다. col-auto 같은 경우 내용물 크기만큼에 너비만 차지한다. 만약 숫자 옵션을 넣었을 때 12개를 넘기면 다음 행으로 자동으로 넘어간다. css에 있는 display: flex와 비슷하게 사용하면 된다. row columns 한 행에는 12개 열이 들어갈 수 있지만 이것 또한 변경 가능하다. row-cols-2 같은 스타일을 주면 한 행에 2개 열만 들어 갈 수 있다. col break..
5. bootstrap5 테이블로 커뮤니티 게시판, container breakpoint 정리 디시인사이드 게시판 따라 만들기 아래처럼 생긴 게시판을 bootstrap 테이블로 만들어 볼 생각이다. 게시글 제목과 글쓴이 같은 경우 임의로 작성해서 채워넣으면 된다. 생각해보기 어떻게 만들지 한번 생각해보자. 일단 맨 윗쪽 행은 thead tr th 셀로 만들어주면 될 것 같다. 나머지 밑 행들은 tbody tr td 셀을 이용해 똑같이 찍어내면 될 것이다. 반응형 작업 같은 경우 아직 잘 모르니 작성을 한 다음 창을 움직이며 설정해보자. 사실 이게 게시판 끝이다. 제목과 글쓴이 열 경우 a 태그로 만들어 href 속성을 걸었다. 그래서 a 태그에 text-body, text-decoration-none 스타일을 지정해주었다. bootstrap 테이블 같은 경우 width 값 100%로 스스로 줄었다..
4. bootstrap5 기존 리스트와 테이블 태그 리스트 태그 ul, ol, dl 리스트 태그는 단순하다. 블록레벨 텍스트를 순서대로 나열한게 리스트다. 태그1 태그2 의미 ul li 순서 없는 리스트 ol li 순서 있는 리스트 dl dt, dd 제목 설명 리스트 스타일 적용대상 의미 .list-unstyled ul, ol 부호나 숫자 제거 .list-inline ul, ol, dl 인라인 리스트 .list-inline-item list-inline 내부 li 인라인 리스트 dl 리스트 경우 row, col을 이용해서 정렬할 수도 있다. row는 행, col은 열이다. 한 행은 12열로 나눠진다. 테이블 태그 table 대량의 데이터는 표로 잘 정리된다. 그래서 다양한 테이블 스타일이 제공된다. 여기서 부터 bootstrap5의 본격적인 시작이라 봐도..
3. bootstrap5 텍스트 색, 배경색, 정렬 bootstrap 텍스트 색 bootstrap은 몇가지에 테마색들을 제공한다. 색키워드들은 다양한 색스타일을 적용할때 계속 사용되므로 기억해두는게 좋다. 기본적으로 제공되는 테마색들이다. 원한다면 이 색을 사용해 텍스트 색을 꾸밀 수 있다. bootstrap 텍스트 배경색 배경색은 블록 전체에 색을 입혀준다. 다른 블록에서도 같은 방식으로 배경을 지정할 수 있다. text-success와 똑같은 방식으로 bg-success 처럼 입력하면 된다. text-bg-success를 입력하면 자동으로 배경과 대비되는 텍스트 색을 지정해 준다. bootstrap 텍스트 정렬, 기타 스타일 텍스트를 정렬하는 방법과 몇가지 스타일을 지정하는 방법에 대해 정리를 했다. 스타일 의미 .text-start 왼쪽 정렬 .te..
2. bootstrap5 기존 텍스트 태그 기존 블록레벨 텍스트 h, p, blockquote, pre, br, hr은 블록 레벨의 텍스트 태그들이다. 태그 의미 h 제목용 p 문단 blockquote 인용문 pre 공백을 그대로 br 한줄 띄우기 hr 수평줄 여기까지는 기존 html과 큰 차이가 없다. 기존 인라인 레벨 텍스트 strong, b, em, i, q, mark, span, del, s, ins, u, small, abbr, cite, code, kbd, sub, sup 이 태그들은 인라인 레벨 태그들이다. 여기서부터 bootstrap 스타일이 드러나기 시작한다. 태그 의미 태그 의미 strong 중요 굵게 span 영역 묶기 b 굵게 small 부가 정보 em 중요 이태리체 abbr 약어 표시 i 이태리체 cite 참고 내용 mar..
1. bootstrap5 hello world 작성으로 시작하기 bootstrap5란 부트스크랩이란 강력한 기능들이 압축된 프론트엔드 툴킷이다. 5가 붙어있는 것처럼 이전 버전들이 존재하고 5.23이 최신 버전이다. 일단 시작을 하려면 준비물부터 준비한다. 준비하기 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and ..
33. html css, bootstrap5로 만들어 보고 비교하기 책으로 공부했던 실습 예제를 부트스트랩을 이용해 최대한 비슷하게 웹페이지를 만들어봤다. 글씨 크기나 마진 같은 걸 클래스 속성값으로 지정해 주니 원하는 크기로 설정하기 쉽지 않았지만 최대한 부트스크랩 프레임워크를 사용할 생각으로 css는 자제했다. html+css, bootstrap5 작성 후기 기존 html + css로 작성한 파일은 총 296줄이 나왔고 bootstrap5 경우 109줄로 비슷한 결과물을 만들 수 있었다. 특히 bootstrap5에서 편했던 점이 row, col 형태의 그리드 시스템이었다. 클래스 속성값만으로 간단하게 박스를 정렬하는 반응형 웹을 만들 수 있었다. html+css, bootstrap5에 대한 내 생각 지금은 처음이라 오래 걸렸지만 더 익숙해진다면 제작하는 시간도 엄청나..