안녕하세요 SsunDev입니다
예의라면 제가 꽉 잡고 있숨다!
모자를 받아드릴 끄아요?
게시판을 만들어드릴 끄아아요?
오늘은 저와 함께 드디어 그럴싸한 페이지를 한번 만들어 보겠습니다.
기나긴 싸움이 될것만 같군요...
오늘 만들어볼 페이지는
이런식으로 게시판 페이지를 만들어 보려고 합니다.
마우스를 올리면 해당 게시글 목록이 노랗게 바뀌는 기능도 넣구요!
어떻게 만들지 살짝 감이 잡히시나요?
한번 시작해 보도록 하겠습니다.
html과 css 파일 만들고 내용물 채워주시고 시작해 보도록 하겠습니다.
페이지를 만드실 때 보통은 이렇게 페이지의 전체를 감싸는 div를 하나 두고 시작합니다.
이를통해 해당 홈페이지의 width 나 정렬을 명시해 줄 수 있기 때문입니다.
wrap 이나 컨테이너등등 추후에 알아보기로 하고 하여튼 전체적으로 감싸주는 큰 틀이 하나 있구나 정도만 일단 생각하시면 좋습니다.
추 후 영역을 나누는것들 배우긴할건데...
일단 그런게 있구나 정도만 알아두고 계속 가보겠습니다.
자 그다음 제목과 테이블을 들어 보도록 하겠습니다.
바로 alt + b!
어우야..자 이제 테이블이 테이블답게 보이도록 만들어볼까요?
css로 가보도록 하겠습니다.
자 아까 설정한 배경의 크기를 1000px로 설정해 보겠습니다.
그 후
테이블을 배경의 크기를 다 사용하도록 100%로 설정해 보겠습니다.
바로 alt + B!
이런 요소의 상세설명이 나오는 기능은 나중에 알려드릴텐데 일단 보시면
테이블이 1000만큼 채워지게 되었습니다 신기하죠?
자 여기서 각각 컬럼들의 width 를 설정해주고 tbody도 만들어줘보겠습니다.
각 컬럼의 width 를 설정해줄 수 있는 colgroup 기억나시나요? 7화에서 설명드렸는데 기억들 하시려나 모르겠습니다 ㅎㅎ
하여튼 각 컬럼을 적당히 퍼센트로 맞춰서 주었습니다.
그리고 tbody도 넣고 데이터 하나를 기입해보았습니다.
다 기억나시죠?
그럼 바로 alt + b!!!
이게 므지?? 게시판임.. 하여튼 게시판임 아 몰라 일단 게시판임...
우리가 목표로 하는 게시판을 보면 게시판의 맨위와 맨 아래는 선이 더블로 있는걸 볼 수 있습니다. 또한 모든 글자들이 가운데정렬이 되어있군요! 한번 설정해볼까요?
저희 두쓰컬 하면서 요소의 테두리 선을 한번에 정의도 가능했고 상하좌우 각각 정의해 줄 수 있었던거 기억하시나요?
이렇게 위 아래에는 2px짜리 더블줄 회색을 정의해주고 좌우는 없는걸로 만들어보겠습니다
추가로 글 정렬을 중앙으로 주었구요
바로 alt + b!!
오오 뭔가 그럴싸해! 아주 좋습니다!
자 그리고 여기보시면 thead 영역, 그러니까 저 회색 헤더부분을 분석해봅시다.
일단 회색으로 배경을 칠해주면 될거같고 border-bottom부분만 solid 를 해주면 될것같지 않나요?
이렇게 자식 선택자를 사용하여 thead의 바로 아래 tr을 선택하였습니다. 그럼 해당 row가 다 선택이 되겠죠?
바로 alt + b!
그런데 뭔가 좀 이상합니다?
각 칸들이 미묘한 흰색 선으로 구분되어 나뉘어져있습니다!????
이렇게 외부선과 내부선이 나뉘어 있는걸 보실 수 있습니다.
그래서 이런 경계선이 생기고 thead>tr 을 한번에 묶어서 border-bottom 속성도 들어가지 않은것입니다.
그래서 테이블 자체에 border-collapse 라는 속성으로 collapse 를 넣어주면 내 외부선이 하나로 합쳐져서 깔끔한 테이블이 생성되게 됩니다.!
근데 이거 발음 뭐라고하는지 아직도 모르겠네요 전 그냥 콜랍쎄 라고 했는데 하여튼 이 콜라를 선언해주면 어떻게 되나 봅시다!
alt + b!!
이렇게 내부 외부선이 하나로 합쳐지면서 깔끔하게 바뀐걸 보실 수 있습니다!
콜랍세 외워야겠죠??
자 그럼 얼추 완성되어가고있으니 하단의 데이터를 4개 더 추가해보겠습니다!
이렇게 body영역에 데이터를 5개 기입해주었습니다
또 a테그를 통해 각 페이지로 이동할 수 있게 링크도 걸어주었구요!
그럼 alt + B!!
뭔가 허전하죠? tbody 아래의 각 row들도 바닥공사를 해주어야겠습니다
이렇게 tbody 아래의 tr에도 1픽셀의 점선 회색 선을 만들어주었습니다.
alt + b!
아주 그럴싸해졌습니다!
마지막 tr의 경우는 테이블의 테두리속성을 이기지못하고 뭍혔군요
이렇게 우선적으로 적용되는 속성들이 있기도합니다.
마지막으로 마우스를 올리면 해당 row가 노랗게 바뀌는 속성까지 넣어볼까요?
hover를 넣으면 되겠죠?
이렇게 tbody영역의 tr전체에 hover를 주어 마우스를 올리면 골드색상으로 바뀌도록 해보았습니다
바로 alt + B!!
잘 동작 하는군요!
추가로 다양한 기능들도 넣어볼 수 있겠죠?
예를들어 컬럼 하나 더 넣어서 삭제버튼을 넣어본다던가 클릭시에 색깔이 바뀐다던가 하는?
그래서 오늘은 이렇게 그동안 배운 css속성들을 조금씩 찍먹하여 간단한 게시판을 만들어보았습니다.
배운것들은 유기적으로 다양하게 조합하여 다양한 결과물들을 내실 수 있겠죠?
한번 따라쳐보시면서 어떻게 만들었고 나중에 어떤걸만들꺼고 어떻게 만들어야할까 생각해보심을 추천드립니다.
'1.비전공에서 취업까지!![HTML,CSS]' 카테고리의 다른 글
| 비전공에서 취업까지!! [23화] 앞으로 개발에 사용될 유용한 기술 몇가지! -입니다.- (0) | 2023.03.26 |
|---|---|
| 비전공에서 취업까지!! [22화] CSS 빽그라운드를 꾸며보자!! -입니다.- (1) | 2023.03.19 |
| 비전공에서 취업까지!! [20화] CSS 가상클래스 -입니다.- (0) | 2023.03.12 |
| 비전공에서 취업까지!! [19화] CSS 박스2!!! -입니다.- (2) | 2023.03.07 |
| 비전공에서 취업까지!! [18화] CSS 박스모델!! -입니다.- (0) | 2023.02.23 |
