STUDY (My Job)/TIL25 TIL_20230201_1과목 소프트웨어 설계_가볍게 1독 2023. 2. 2. 반응형 게시판 만들기 7 - 글쓰기(수정) 페이지 반응형 스타일 적용 https://www.youtube.com/watch?v=5KcgVMY7xT0 결과화면 Before After Chrome브라우저로 요소들의 위치를 파악하고 바로 스타일 적용해보기 - (아래사진) Chrome 브라우저로 - 소스파일에 들어가서 위치 확인 후 - 해당 코딩 부분 보면서 수정 - (아래사진) cf. display : none; //보이지 않게 하는 것. 파일목록 🔴edit.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 7 ) 🔴list.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 7 ) 🔴view.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 7 ) 🔴write.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현.. 2022. 12. 22. 반응형 게시판 만들기 6 - 글 보기 페이지 반응형 스타일 적용 https://www.youtube.com/watch?v=0WdXdYeWu7Q 결과화면 Before After 파일목록 🔴edit.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 6 ) 🔴list.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 6 ) 🔴view.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 6 ) 🔴write.html : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 6 ) 🔵style.css : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 6 ) 🔵css.css : 이전게시글(반응형 게시판 4) 과 변화 없음. ( 현재 6 ) 🔵media.css @media (max-width: 1000px) { .boa.. 2022. 12. 22. 반응형 게시판 만들기 5 - 게시판 목록 반응형 스타일 적용 (영상 수정필요) https://www.youtube.com/watch?v=fJGMA8xxK0E&list=PLDVUy8tEIMVVM4CKC2lt4zhZ5ssbnOEJY&index=5 결과화면 Before After 파일목록 🔴edit.html : 이전게시글(반응형 게시판 4) 과 변화 없음. (현재 5) 🔴list.html : 이전게시글(반응형 게시판 4) 과 변화 없음. (현재 5) 🔴view.html : 이전게시글(반응형 게시판 4) 과 변화 없음. (현재 5) 🔴write.html : 이전게시글(반응형 게시판 4) 과 변화 없음. (현재 5) 🔵style.css : 이전게시글(반응형 게시판 4) 과 변화 없음. (하지만 설명 겹치는 부분이 있어서 코드 첨가) (현재 5) * { margin: 0; padding: 0.. 2022. 12. 22. react_todo 8.2 프로그램 진행 팁 react todo 글 1 [ 8.2 프로그램 진행 팁 ] step1. 무언가 만들려고 한다면 거기에 필요한 모든 기능들을 작성해 본다. ㄴ 기능별로 리스트 만들기 (Before - 기능분류) 투두앱 1.전체 리스트 보여주기 2. 아이템 삭제 3. 아이템 체크박스 4. 아이템 추가 5. 아이템 필터링 6. 다크모드 지원 (step2. 일단 필요한 기능들을 순서 상관없이 작성해본다. ) 기능별로 조금씩 , 단계별로 나누어서 , 필수로 구현해야하는 것 들을 가장 먼저 구현 할 수 있도록 목록을 재배열한다.(우선순위매기기) +조금조금씩 기능들 덧붙이기 +그리고 리액트를 사용해서 작성하는 것이므로, 한꺼번에 구현하는 것이 아니라 어떻게 컴포넌트로 나누어서 만들어 갈 것인가 고민하기 ㄴ (만약 컴포넌트로 나누기 .. 2022. 12. 19. 반응형 게시판 만들기 4 - 글쓰기, 글 수정 페이지 [Youtube_렛츠코딩앤플레이] https://www.youtube.com/watch?v=bAGyiJ2xVYI 만든 파일 목록 🎯목표로 하는 화면 1. html 까지 구현 🟠write.html 공지사항 공지사항을 빠르고 정확하게 안내해드립니다. 제목 글쓴이 비밀번호 등록 취소 를 이제 CSS 해야한다. 그런데, ⛔문제발생 문제 ① input 너비 80% 로 시키는대로 크기 지정해 주었는데...적용이 되지 않는다. 문제 ② text area도 마찬가지. 적용이 안된다고 느끼는 지점의 코드 ⛔style.css .board_write .title input[type="text"] { /*🟡⛔input 은 css 에서 타입을 지정해 줄 수가 있다. 위처럼 4강 18:15 */ width: 80%; } .board_write .cont { bo.. 2022. 12. 18. 반응형 게시판 만들기 3 - 글 보기 페이지(+가상선택자를 이용해서 라인 만들기) https://www.youtube.com/watch?v=q9VbxQoR6go 결과화면 http://127.0.0.1:5500/list.html http://127.0.0.1:5500/view.html 파일목록 🔴list.html 공지사항 공지사항을 빠르고 정확하게 안내해드립니다. 번호 제목 글쓴이 작성일 조회 5 글 제목이 들어갑니다. 김아름 2022.12.16 33 4 글 제목이 들어갑니다. 김아름 2022.12.16 33 3 글 제목이 들어갑니다. 김아름 2022.12.16 33 2 글 제목이 들어갑니다. 김아름 2022.12.16 33 1 글 제목이 들어갑니다. 김아름 2022.12.16 33 목록 🔴view.html 공지사항 공지사항을 빠르고 정확하게 안내해드립니다. 글 제목이 들어갑니다. 번호.. 2022. 12. 16. 반응형 게시판 만들기 2 - 게시판 목록과 페이지 버튼 https://www.youtube.com/watch?v=HvrOnjX__jE 결과화면 🔴index.html 공지사항 공지사항을 빠르고 정확하게 안내해드립니다. 번호 제목 글쓴이 작성일 조회 5 글 제목이 들어갑니다. 김아름 2022.12.16 33 4 글 제목이 들어갑니다. 김아름 2022.12.16 33 3 글 제목이 들어갑니다. 김아름 2022.12.16 33 2 글 제목이 들어갑니다. 김아름 2022.12.16 33 1 글 제목이 들어갑니다. 김아름 2022.12.16 33 목록 🔵style.css * { margin: 0; padding: 0; } html { font-size: 10px; } ul, li { list-style: none; } a { text-decoration: none; c.. 2022. 12. 16. 반응형 게시판 만들기 1 - 전체 구조 설계, 타이틀과 버튼 스타일 https://www.youtube.com/watch?v=UbCpnAasblc 🔴list.html 공지사항 공지사항을 빠르고 정확하게 안내해드립니다. 목록 수정 🔵style.css * { margin: 0; padding: 0; } html { font-size: 10px; } ul, li { list-style: none; } a { text-decoration: none; color: inherit; /* ㄴ 컬러 상속받아라 */ } .board_wrap { width: 1000px; margin: 100px auto; /* 가로는 1000픽셀, 위아래로는 100픽셀 & 가운데정렬 */ } .board_title { margin-bottom: 30px; /* 공지사항 밑으로 30픽셀 여백 주는 것 *.. 2022. 12. 16. 이전 1 2 3 다음 728x90 반응형
