반응형 It Study/웹 개발 프로젝트 (임시 기록 중단)4 도전과제- position과 flexbox를 연습해보자 - 개인 해답 (feat:코딩알려주는 누나/ HTML CSS) 최대한 저의 힘과 방식으로 풀어보고, 잘안되는 것은 풀이를 보고 만들어봤습니다. 다음 클론 코딩 시작하기 전 몸풀기 과제입니다. ps: 참고하시길 바랍니다. 0.현해 스크린샷에서 빨간 테두리 라인은 각 박스가 어느 영역에 속해있는지를 쉽게 보기 위하여, border를 활용하였습니다. 1.부모태그에서 display:flex를 통해 현재 태그가 부모태그임을 명시해주고, justify-content:......등을 통해 자식태그를 조종한다라고 이해해주셔도 좋습니다. 2.position은 조종하려는 태그에서 속성값을 입력해 조종한다. 단 부모태그가 static이냐 relative 속성이냐에 따라 결과가 틀려지고 관련 문제는 3번입니다. 1번문제 html 박스1 박스2 박스3 css html { height: 1.. 2024. 2. 11. Google 클론코딩 연습 인강을 들어가며, 만들어봤습니다. 겉보기에는 복잡한 것 같으면서도, 간단하다는듯한 느낌이 들어 오묘하네요 ㅎㅎ 만들어 가는 과정에서 float, position, hover, active, cdn 링크, 크롬에서 f12(또는 마우스 우클릭 후 검사(inspect))를 활용한 사이트 분석 등등 다양한 것을 알 수 있어 좋았던 것 같습니다. 다음 목표는 조금 더 세밀하고, 다양한 기능을 활용해 웹 사이트(겉 표지)를 만들어보는 것입니다. 그 다음 목표는 만들어 놓은 웹사이트에 데이터베이스(백 단)를(을) 연결해서 실제 기능을 가져보는 것이고요... 그렇게만 된다면 제 첫번째 목표를 달성할 수 있을듯 싶습니다. 새벽이라 잡소리가 길어졌네요ㅋㅋㅋ 결과물 올리고 글을 마치도록 하겠습니다. PS: 특정 아이콘을 f.. 2024. 2. 11. css 연습1 css 과제가 있었기에 한번 연습해봤습니다 매우 간단했음에도, 강의 하루 뒤에 연습한다고 바로 가물가물한 거 봐서 어떤 학습이든지 바로 복습해주는 게 좋기는 하네요... 그리고 보너스 과제도 있었으나 이것은 글로 올리지 않겠습니다 내용은 display: none과 visibility:hidden을 실험해보는 것인데, 해보실 분들은 구글링해서 사용법 익혀 해보시는 것도 좋다고 생각합니다. css 코드는 다음과 같습니다. html { .box { border: 50px solid red; width: 200px; padding-top: 50px; padding-bottom: 50px; text-align: center; margin-top: 20px; } .box-green { border: 50px sol.. 2024. 2. 5. HTML 기초 연습1 최근에 일하면서 공부도 블로그도 많이 소홀해졌네요ㅎㅎ 이제 다시 조금씩 기록을 남겨보도록 하겠습니다. 이제는 웹개발을 본격적으로 해나가려 하는데, 그 첫번째로 간단하게 모든 프로그래밍의 기초영역? 교양?이라 할 수 있는 HTML을 한번 연습해봤습니다. 코드는 다음과 같습니다. 일부러 연습삼아 각 태그를 효율보다는 계속해서 반복적으로 써봤습니다. ps:확실히 기존에 이론 공부한답시고 책만 보고 하는 것보다..... 뭐라도 써보고 만들어보니 괜찮네요... 최종적으로는 프론트에 백단을 연결시켜, 그동안 생각만 해왔던, 상용화 가능 서비스를 실제로 만들어 보려 합니다. 참고로 본 연습은 replit 이라는 사이트를 활용하였으며(다양한 언어를 공부 및 개발을 시험해보는데, 유용한 사이트인 것 같습니다.) 학습에서.. 2024. 1. 29. 이전 1 다음 반응형
