WEB7 [mini project 1] HTML, CSS 웹페이지 3 1. 이미지 요소에 패딩 적용되지 않는 문제 픽사 사이트를 참고하면서 작업하다 보니 이미지에 패딩을 적용하고 싶었는데 개발자 도구로 확인해도 보이지 않는 문제가 있었다. 우선 이미지라서 display: block, margin 등 여러 시도를 하다가 생각해보니 common.css에서 box-sizing: border-box를 적용하여 이미지에 패딩이 포함되어서 보이지 않는 건가 싶었다. 그래서 해당 요소들에만 content-box로 변경하여 해결했다. box-sizing 요소의 전체 너비와 높이를 어떻게 계산하는지 설정 즉 요소를 늘리거나 줄이거나 혹은 padding 값 등을 추가할 경우 어떻게 요소의 너비와 높이 적용 여부를 설정 content-box, border-box 설정 가능 ** content.. 2024. 3. 21. [mini project 1] HTML, CSS 웹페이지 2 둘째 날 회고 폰트 적용 다운 받은 폰트 적용은 됐으나 어색한 부분이 있었는데 웹폰트 사이트를 찾아서 적용할 수 있게 됐다. 본래 사이트와 같은 폰트사이즈를 적용하면 비슷한 크기가 되는 것을 확인했다. 다른 조원 분이 폰트 적용이 되지 않는다고 물어보셨는데 이전의 경험을 토대로 웹폰트 사이트에서 제공하는 폰트 이름을 그대로 사용하면 된다고 알려드렸다. https://www.cdnfonts.com/futura-pt.font 해결 : 설치한 ttf파일명과 동일한 이름을 font-family 속성에서 사용하면 적용된다. 이미지 위치 조정 이전 페이지를 참고하면 6개의 사진 중 오른쪽 하단의 사진(HTML 태그 상 마지막) 만 인물이 가운데에 오도록 조정된 것을 볼 수 있다. 해결 : 개별 클래스를 부여했고 l.. 2024. 3. 20. [mini project 1] HTML, CSS 웹페이지 1 1. Git & Roll 간단한 미니 프로젝트로 웹사이트를 HTML과 CSS만을 사용해 각자 한 페이지씩 따라 만들어보게 됐다. Git 을 활용해 모르는 사람과 협업하게 되었는데 아주 간단한 방식으로 진행하려고 한다. 팀장을 정해 Git organization 으로 리포지토리를 생성 후 README.md, common.css 등 기초 설정을 한 뒤 Git clone을 통해 가져와 각자의 브랜치에서 작업하기로 했다. 따라하기로 한 웹사이트는 픽사 그 중에서 내가 고른 페이지는 CAREERS 페이지 사진과 텍스트가 모두 적절히 섞여 있어 선택했다. Pixar Animation Studios A COLLABORATION BETWEEN ART & TECHNOLOGY At Pixar, our goal is to .. 2024. 3. 19. 이전 1 2 다음
