-
Web 프론트엔드 (5) / 부트스트랩 활용하기Programming/Web Programming 2023. 5. 5. 01:45
강의를 따라 부트스트랩을 활용해서 실제 웹사이트를 만들어보는 실습을 진행해보았다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무!
https://class101.net/ko/products/5f53ae772e3e0d001cd99667
[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교
📍웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 이런 분들이 개발자 사관학교를 수강하면 크게 도움됩니다! 1) 대체 뭐부터 개발해야할 지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작
class101.net
이번 실습은 투두리스트를 만들어보는 과정으로 진행됐다.
내 나름대로 조금 변형해서 투두리스트를 만들어보았다.
- 부트스트랩 컨테이너 활용하기
부트스트랩 컨테이너를 활용하지 않고 그냥 div만으로 하나하나 만들 수도 있겠지만
왠지 컨테이너를 활용하면 반응형 웹으로써 잘 반응하고 더욱 편리한 모양이다.
무언가 여러개 요소들을 담을 일이 있다면 컨테이너를 활용해보면 좋을 것 같다.
부트스트랩 Docs에서 왼쪽 바에 Containers를 눌러보면 다음과 같은 컨테이너 클래스들이 보인다.
가장 기본적인 .container를 이용해보자.
<body> 태그 안에 <div> 태그를 만들고 container클라스를 추가해주었다. (25번째 줄)
그리고 id도 따로 container로 이름 붙여 css스타일을 적용해주었다.
주의할 점은 class가 아닌 id를 달아주어야 부트스트랩 디자인과 충돌하지 않는다.
만약 container 클래스인 동시에 a라는 클래스에 속해 있다고 가정해보자.
우리가 볼 수는 없어도 container 클래스 안에 여러 속성값이 적혀있을 것이다.
만약 a라는 컨테이너 안에 같은 속성에 대한 값이 다르다면, 해당 태그에 큰 혼란이 생길 것이다.
가장 안전한 방법은 우리만의 id를 따로 만들어 꾸며주는 것이라고 한다.
div태그를 두개 만들어 상위 div태그(container 클래스 포함) 안에 다른 div태그가 속하도록 만들었다.
div태그 안에 div태그를 넣는 방식으로 진행했을 때의 장점은 상위 태그의 위치 안에 만들어진다는 것이다.
또한 상위 태그를 기준으로 크기도 정렬할 수 있다.
width: 100%
상위 태그와 가로 크기를 똑같이 하겠다는 의미이다.
(상위 태그의 가로 길이가 100%가 되는 것이다.)
- 투두리스트 안의 목록을 채워보자.
부트스트랩에서 제공하는 List group을 활용해보았다.
처음에 왼쪽 바에서 찾았을 때는 나오지 않았다.
상단 Search 부분에 List group를 검색하면 나타난다.
여러가지의 list group 중에서 투두리스트로 활용할 수 있는 디자인을 찾아 코드를 복사해준다.
<body> 안에 넣어주었다.
sub-container안에 ul리스트가 들어있는 구조인데, ul에 margin을 주기 위해 id를 list-grup로 붙인 후, 스타일을 입혀주었다.
또한 li 요소들을 꾸며주기 위해서 list-group-item 클래스를 커스터마이징 하기로 했다.
앞서 말했듯 부트스트랩의 클래스에 스타일을 직접 입혀주게 되면 충돌이 일어나 의도치 않은 디자인이 나올수도 있다.
하지만 기존의 요소들을 바꾸기 위해서는 직접 클래스에 접근해 바꿔줘야 한다.
(매번 li에 id를 붙여주는 것은 매우 효율이 떨어지기 때문에..)
주목할만한 부분은 !important 이다.
!important의 의미는 만약 list-group-item 내에 중복되는 내용이 있을 경우,
내가 작성한 이 css스타일을 우선적으로 입혀달라는 명령어이다.
물론 위 코드에서는 !important를 붙이지 않아도 정상적으로 작동하는 것을 확인할 수 있었다.
하지만 혹시 모를 충돌을 막기 위해서 붙여주는 것이 안정적일 것 같다는 생각이 든다.
리스트가 잘 적용된 것을 확인할 수 있다. - 하단에 투두리스트 항목을 추가할 수 있게 만들어보자.
부트스트랩에서 Input group을 선택한다.
두번째 예시가 만들고자 하는 요소와 비슷하니 해당 코드를 복사해 html 파일에 붙여 넣는다.
sub-container보다는 밖이지만 container안에 배치해주었다.
각각 스타일을 입히기 위해 input-group과 input-area 그리고 button-area라는 아이디를 붙여준다.
강사님의 코드를 기반으로 취향에 맞게 꾸며주었다.
삭제 버튼의 배경 색도 바꾸고 싶어 .bg-primary의 배경색도 바꿔주었다.
이 경우에는 !important를 쓰지 않자 적용이 되지 않았다.
이미 부트스트랩에서 만들어 놓은 클래스의 속성을 바꿀 때에는 !important를 쓰는 것이 확실하다는 것을 다시금 느낀다.
취향을 듬뿍 담아 만들었다. 간단한 투두리스트가 완성되었다.
아직 추가를 누르거나 삭제를 누른다고 해서 반영되지는 않는다.
이 부분은 JavaScript를 배우고나면 구현이 가능할 것 같다!
프론트엔드 개발은 눈으로 볼 수 있으니 더욱 재밌다.
디자인도 개발도 뛰어나진 않지만 좋아하는 나에게는 둘 다 즐길 수 있어 좋다!
물론 깊게 들어가면 무척이나 어려울 것 같다는 생각이 든다...
그래도 늘 나만의 결과물을 만드는 것은 즐거운 일인 것 같다.^ㅁ^!!
출처: 클래스101 / [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 프론트엔드 (7) / JavaScript 자바스크립트 기초 문법2 (0) 2023.05.06 Web 프론트엔드 (6) / JavaScript 자바스크립트 기초 문법 (1) 2023.05.05 Web 프론트엔드 (4) / CSS 속성들과 Bootstrap 사용 (2) 2023.05.04 Web 프론트엔드 (3) / HTML과 태그, 실습해보기 (0) 2023.05.03 Web 프론트엔드 (2) / 웹 개발 이론 및 배포 과정 (0) 2023.05.02