본문 바로가기

HTML, CSS5

[HTML, CSS] background 속성 (+ Flex-grow 추가예정) 1. 과제 회고 2. 과제 FLOW 1. 과제 회고 🦄 과제 회고 🦄 잘한 것은 무엇인가? - 성급히 코드 치지 않고 특성을 생각하면서 하나씩 작은 단위로 생각하면서 작성하자는 목표를 지켰다. 잘못한 것은 무엇인가? - 화면 크기를 작게 해놓은 상태로 작업을 하였는데, 화면이 커졌을 때의 모습을 확인하지 않아서 주어진 과제와 다르게 된 점이 있었다. 무엇을 배웠는가? - grow와 basis를 이해하고 사용할 수 있었다. 아직도 안풀린 궁금증은 무엇인가? - 없다. 이전과는 어떻게 다르게 할 것인가? - 반응형을 위한 grow에 대한 생각을 해볼 것이다. 2. 과제 FLOW 📌 과제 - 주어진 링크의 페이지를 따라 만들기 - 과제의 세부 조건에 따라 작성하기 💬 계획 과제 페이지를 보고 html 구조를 .. 2022. 7. 19.
[CSS] <table> 사용하지 않고 달력 만들기 / CSS text 속성 1. 과제 회고 2. 과제 FLOW 1. 과제 회고 🦄 과제 회고 🦄 잘한 것은 무엇인가? - 주어진 태그를 어떻게 사용할지 고민한 후 HTML 구조를 잡아보았다. 잘못한 것은 무엇인가? - 태그가 갖고 있는 기본 속성에 대해 파악하지 않고 CSS작업을 진행하였다. - 정해진 틀안에서 나만의 디자인 느낌을 입힐 수 있어서 즐겁게 작업하였다. 무엇을 배웠는가? - 태그가 갖고 있는 기본 속성에 대해 학습할 수 있었고, 문자 속성에 대해 복습할 수 있었다. 아직도 안풀린 궁금증은 무엇인가? - 가상 요소 선택자를 사용하여 CSS를 준 후 위치조절은 어떻게 하면 좋을까? - 텍스트가 들어간 div 와 들어가지 않은 div의 여백 및 위치 조절은 어떻게 하면 좋을까? 🧩 vertical-align참고 이전과는 .. 2022. 6. 25.
[CSS] CSS선택자(셀렉터 조합) 사용하기 1. 과제 회고 2. 과제 FLOW 1. 과제 회고 🦄 과제 회고 🦄 잘한 것은 무엇인가? - 학습한 선택자를 다양하게 적용해보았다. 잘못한 것은 무엇인가? - 선택자를 넣겠다는 생각에 코드를 깔끔하게 작성하지 못한 것 같다. 무엇을 배웠는가? - 다른 선택자들은 친숙하게 사용해 볼 수 있었고 속성 선택자를 새롭게 알게 되었다. 아직도 안풀린 궁금증은 무엇인가? - .bus_pick::after 적용 하면서 추가한 '추천'글자가 .bus_pick의 백그라운드 색깔에 포함되서 작성이 된다. 그것을 따르지 않고(백그라운드 색상이 안 이어지도록) '추천'글자만 추가하려면 어떤 방법이 있을까? 🧩 이전과는 어떻게 다르게 할 것인가? - 그동안 CSS를 작성하면서 부모요소와 자식요소간의 관계를 정확히 파악하지 않.. 2022. 6. 20.
[HTML] HTML 태그 사용하여 HTML문서 만들기 1. 과제 회고 2. 과제 FLOW 1. 과제 회고 🦄 과제 회고 🦄 잘한 것은 무엇인가? - 교육에서 배운 것을 복습하고 적용해 볼 수 있었다. 잘못한 것은 무엇인가? - 없다. 무엇을 배웠는가? - 사용해보지 않았던 태그들(pre 등)을 알게되고 적용해 볼 수 있었다. - 에서 _blank , _self 를 알게 되었다. 아직도 안풀린 궁금증은 무엇인가? - 없다. 이전과는 어떻게 다르게 할 것인가? - 알고 있는 내용이라면 스스로 응용해서 코드를 적용해보도록 할 것이다. 2. 과제 FLOW 📌 과제 - 금일 배운 HTML 태그를 전부 사용하여 자신이 원하는 HTML 문서 만들기 - 깃허브에 임의의 Repository를 Public으로 만들기1의 HTML 파일을 3에서 만든 깃허브 Repository.. 2022. 6. 16.
[HTML, CSS]Html과 css로 달력 만들기 1) 태그 공부하기 2) 태그를 이용해서 특정 날짜 배경색을 원하는 색으로 변경하기 3) 각각의 날짜에 마우스를 올리면 날짜가 커지도록 하기(30px) 4) 6월에 있는 공휴일 및 휴일은 날짜를 빨간색으로 변경 5) 6월 13일 클릭하면 자신이 원하는 페이지로 이동하도록 연결. 단, 클릭 시 새로운 창이 열리면서 링크가 열리도록 할 것 6) 13일 해당 날짜에는 마우스를 올려도 날짜가 커지지 않고 폰트가 두꺼워 지도록 변경 1. 구조 calendar.html calendar.css 2. ​ 3. 구조 더보기 // 달력 전체 컨테이너 // 달력의 이미지 공간 // 달력의 달 글자 공간 // 달력의 날짜 글자 공간 // 달력의 머리인 요일을 넣기 위하여 thead설정 (중앙정렬, bold) // 달력의 날짜.. 2022. 6. 1.