FrontEnd/CSS5 부트스트랩 부트스트랩(Bootstrap)은 트위터(Twitter)를 개발하면서 만들어졌으며 현재 지속적으로 관리되고 있는 오픈소스 프로젝트로, 웹 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들 수 있게 도와주는 프레임워크이다. 다음과 같이 질문 목록 페이지와 상세 페이지에 부트스트랩을 적용하여 SBB 게시판 서비스를 좀 더 멋지게 만들어 보자.부트스트랩 설치하기부트스트랩 적용하기부트스트랩 설치하기1) 우선 다음 URL에서 부트스트랩을 내려받자.https://getbootstrap.com/docs/5.3/getting-started/download/부트스트랩은 3.x, 4.x, 5.x 등의 버전이 존재하고 메이저 번호(3, 4, 5)에 따라 사용 방법이 다르다. 이 책은 부트스트랩 버전.. 2024. 12. 17. align-self 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. 정의 alingn-self ? display: flex 아이템 중 개별 아이템의 정렬 상태를 설정 .container{ width:100%; display:flex; justify-contents:center; align-items:center; align-self:'...' }` /* cf) align-item와 align-content는 플렉스 컨테이너에 설정 /* option auto 기본 값 stretch 가로 영역 값을 최대 center 정렬을 가운데로 설정 flex-start 정렬을 시작점으로 설정 flex-end 정렬을 끝점으로 설정 baseline 정렬을 폰트를 기준으로 설정 inherit 상위 요소한테 상속 2024. 2. 13. BoxModel 문서의 요소를 하나의 직사각형 박스 로 여기는 모델입니다. CSS는 박스의 크기, 위치, 속성( 색, 배경, 테두리 모양 등 ) 을 결정합니다. 내용 영역 ( Content Area ) : 글, 이미지, 비디오 등 요소처럼 실질적인 내용 부분 입니다. 패딩 영역 ( Padding Area ) : 내용과 테두리 사이의 간격입니다. ( 눈에 보이지 않습니다.) 테두리 영역 ( Border Area ) : 내용과 패딩 주변을 감싸는 테두리 입니다. 마진 영역 ( Margin Area ) : 테두리 영역과 인근 요소 사이의 빈 공간까지 포함합니다. ( 눈에 보이지 않습니다.) box-sizing 기본값은 content-box 이며, 상속, 애니메이션 은 적용되어 있지 않습니다. box-sizing: conten.. 2022. 12. 5. CSS ( Cascading Style Sheets ) What ?CSS ( Cascading Style Sheets )브라우저 에서 페이지 외형을 결정하는 선언형 언어 입니다.웹 페이지의 스타일을 지정하고 레이아웃을 지정하는 데 사용 됩니다. 웹의 핵심 기술 HTML , JS , CSS 중 하나로 HTML 요소의 스타일 을 결정합니다. 구성중괄호 는 코드 오류를 줄이기 위한 선택사항입니다.사용 방법1. 속성 처럼 Style 적용합니다.ex) // style 속성 사용 예시입니다.2. Style Tag 를 적용합니다.ex) // style-tag 사용함 h1{color : yellow, text-align : center;}3. css 파일을 별도로 만들어 HTML 파일에 연결합니다.ex) //css파일 (확장자 .css)을 만듭니다.// text.c.. 2022. 12. 1. CSS CSS(Cascading Style Sheets) What ?CSS" Cascading Style Sheets "의 약어로, HTML 요소들을 스타일하는 언어입니다. 디자인 외에도 프린트 시 디자인, 스크린 리더의 음성 스타일도 디자인할 수 있습니다. 2022. 7. 19. 이전 1 다음
