포트폴리오 35
[html] <colgroup>을 이용해 테이블 비율 고정 하기
안녕하세요. 플입니다. 오늘은 테이블 칸의 비율을 고정해보겠습니다. 1. 기본 우선 비율을 고정하지 않았을 때 모습입니다. 비율을 정해두지 않는다고 테이블 태그가 큰 문제가 있는 것은 아니지만 나중에 내용이 길어질 때마다 비율이 틀어지는 것을 방지할 수 있습니다. 2. colgroup 을 이용해 칸의 비율을 정해줍니다. 은 태그 안쪽에 태그 시작 전에 넣어줍니다. 다른 태그처럼 태그를 넣어준 뒤 안쪽에 을 이용해 칸의 비율을 정해줍니다. 을 칸 개수만큼 만들어 준 뒤 입력값을 width:10%처럼 가로 비율을 정해주면 됩니다. 다 합쳐서 100이 되는 게 계산하기 좋기는 하지만, 상황에 따라 조금씩 조절해주셔도 됩니다. 그럼 이만. 총총.
[css] tr태그 여백 주기
안녕하세요. 플입니다. 오늘은 태그에 여백을 줘보겠습니다. 1. 칸 간격 주기 table{ border-collapse: separate; } 확인을 위해 테두리 색을 임시로 넣어주었습니다. border-collapse를 이용해 칸마다 간격을 줍니다. 값은 separate를 넣어줍니다. sepatate는 '분리된, 따로 떨어진'이라는 뜻으로 칸이 따로따로 분리되어 보입니다 table{ border-collapse: collapse; } 다른 값인 collapse와 비교해보면 어떻게 다른지 확실히 와 닿으시죠? 2. 여백 주기 table{ border-spacing: 0 40px; } 칸마다 간격을 주었으면 테두리에 여백을 줍니다. border-spacing을 이용합니다. 값은 위아래로 여백을 주고 싶으면..
[영상] html 코딩
안녕하세요. 플입니다. 오늘은 html코딩 영상을 찍어봤어요. 1. html 코딩 메인 페이지 목록과 동일한 디자인으로 포트폴리오 페이지도 코딩해봤습니다. html작업이라 별도의 설명없이 빨리감기만 해봤어요. 2. 섬네일 섬네일 글씨를 좀 키워봤어요. 전보다 잘 보이는 것 같아서 만족입니다. 그럼 이만. 총총.
[css] 나란하게 배열
안녕하세요. 플입니다. 오늘은 float을 이용해 요소를 나란하게 만들어보겠습니다. 1. float float을 이용해 연도 부분과 내용 부분을 한 줄에 넣을 것입니다. p{ float:left; } float은 띄우다 라는 뜻으로 이것을 사용했을 때 '띄웠다'라고 표현하기도 합니다. left 즉, 왼쪽으로 띄웠으니 오른쪽 공간이 빕니다. 비는 공간으로 내용 부분이 올라오는 것입니다. 아니면 왼쪽으로 붙었다고도 표현할 수 있습니다. 2. 팁 사실 오른쪽에 있는 요소가 inline이었기 때문에 오른쪽에 있는 것이지 block요소였다면 여기에도 float을 줘야 합니다. float이 안 먹었을 때는 이렇게 뒤쪽까지 자리를 차지하게 됩니다. 띄웠다는 것은 레이어 층이 나눠졌다는 말과 같아서 두 요소는 다른 레..
[css] 타이틀 코딩하기
안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀 코딩을 해보겠습니다. 저번 포스팅에 이어서 오늘은 css코딩을 해보겠습니다. https://ssimplay.tistory.com/90 [html] 타이틀 코딩하기 안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀을 코딩을 해보겠습니다. 1. 전체 디자인 확인하기 우선 시안을 보고 전체 디자인을 확인합니다. 제 시안을 살펴보면 세 가지 특징을 알 수 있습니다.. ssimplay.tistory.com 저번 포스팅 링크를 걸어두겠습니다. 1. 전체 디자인 확인하기 시안을 계속 참고해가며 진행하는 것은 중요합니다. 가야 하는 길의 지도와 같다고 생각해요. html에서 코딩해준 대로 div, h3, p 태그에 디자인을 넣어줘야겠네요. 2. div..