본문 바로가기

html & css7

2020.10.21_nav tag, flex-self, img tag, select tag 2020.10.21_nav tag, flex-self, img tag, select tag 오늘은 기초나, 자세히 하나하나 부족했던 것들 나름대로 정리.. 개연성, 연관성 없음 주의 css 보단 html 태그의 요소별로 정리를 했음.. 사실 카테고리 하나 더 팔까하다가 그냥 제목에다가 몽땅 정리한거 적었다... 기초적인 것들이 나중에 또 더 정리해야할 필요 있으면 그냥 하나 더 파야지.. 티스토리 css 를 클론 코딩 ( 실제 서비스 직접 하나하나 따라해보면서 구현해보는 것 ) 하면서 얻은 것들 정리 위주! nav 요소 - nav 는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구간. - 자주 쓰이는 예로는 메뉴 , 목차 , 색인 ( index - 중요한 항목 등을 뽑아서 어느.. 2020. 10. 22.
2020.09.12_django_summernote 2020.09.12_django_summernote적용_정리노트 오늘은 글을 입력받을 때 아무래도 글을 입력받는 느낌이 안들어서 장고에서 만들어진 위젯을 사용하여, 붙여주기로 했다. 시작을 해봅씨다.. 과연 제대로 할 수 있을 것인가. summer note 설치 pip install django-summernote 를 사용하여, 설치를 해주고, settings.py의 INSTALLED_APPS 으로 가서 이렇게 django_summernote 를 추가해줌미다 또한 django 3.X.X 버전 부터 새로 추가된 옵션이 있는데, 클릭재킹이라는 옵션에 대한 기본 설정 변경으로 하나를 더 settings.py 에 추가해주어야하는데, 클릭재킹 UI 수정공격이라고도 하는데, 사용자가 자신이 클릭하고 있다고 인지하는.. 2020. 9. 13.
2020.09.11_css_글쓰기 페이지 꾸미기 2020.09.11_css_글쓰기 페이지 꾸미기_정리노트 오늘은 두개를 이어지게 포스팅해서 조금 더 심화로 장고 모델폼을 커스텀하고 css 도 조금 더 입혀보기로! 먼저 내가 하고 싶은 것은, 여기서 그림첨부 텍스트와 파일 선택 input 태그를 한줄에 합치고 싶다. 근데 내가 따로 클래스를 지정해주었어도 결국 맨 위 form-wrapper로 둘러 쌓여 있기 때문에, myimage 클래스를 inline으로 지정해주어도, form-wrapper가 블록을 먹어 버리기 때문에, 그 하위 클래스안 myimage와 input-box 중 3번째 i 요소는 같이 합쳐지지 않는다. 그러면 우리가 결국 html에서 클래스를 따로 빼주어야 한다. 코드 수정을 해봅씨다. 최종 커스텀 html.......... 이번엔 els.. 2020. 9. 11.
2020.09.11_django_modelform_custom 2020.09.09_django_modelform_custom_정리 노트 하루에 한포스팅......지켜야지 열시미해야지.....오늘은 어제 하다가 멘붕온 모델폼을 html 상에서 커스텀하는 방법... ㅠㅠㅠㅠㅠ 그동안 알고리즘 푼거는 다 어디가고 내가 평소에 맨날 쓰던 if 와 for문 가지고 너무 새벽내내 고통받았다... 정신차리고 정리정리... 먼저 우리가 처음에 create.html 에서 단순히 모델폼을 뷰에서 가져와서 써주었다면, 우리는 오늘 얘를 하나하나 분리해서 커스텀 해줄 것이다. 실행창을 한번 봅씨다. 지금 평소와 약간쓰 다른 느낌은 내가 어제 우당탕탕 css 를 먹이면서 일단 초기화 코드로 폰트사이즈와 마진 패딩을 0 으로 줘서 그런거고 쨋든 지금 이렇게 잘 불러와지는데, 오늘은 여기에서.. 2020. 9. 11.
2020.09.06_css 기본 세팅_ 여러 기능 2020.09.06_css 여러 가지 정리 노트 오늘은 배운 거 이것 저것 기본 세팅 부터 css 를 어떻게 사용해야할지..? 같은 것들의 정리 노트 이것 저것 잡다한 느낌의 정리 노트이다. 먼저 우리가 사람마다 쓰이는 웹 브라우저가 각각 다르고 그에 맞는 html 기능들은 점점 변화하고 생겨나고 있기 때문에, 현 시점에서 내가 쓸 기능들이 어떤 웹브라우저에서 작동할까 할 때 쓰는 페이지가 있다. Can I Use 그럴 때 쓰이는 사이트로 Can I Use 를 들어가게 되면 현재 시간 기준으로 브라우저 별 기능을 지원하는지 안하는지를 알 수가 있다. 예를 들어서 float 태그를 친다면 여러가지 브라우저가 나오는데, 숫자는 버전, 색깔은 사용 가능 여부 이다. ( 참고로 IE 는 인터넷 익스플로러임. ).. 2020. 9. 7.
2020.09.04_css_게시판 목록 만들기 2020.09.04_css_게시판 목록 만들기_정리노트 바로 네비바 이어서 게시판 목록 css 도 정리! 여기서 쓸 클래스와 태그는 post_wrapper, p,img, h1 태그! 다시 캡쳐했지만,,, 증맬 별거가 없균... 일단 하나하나 정리를 또 해봐야겠다!! 먼저 상자..? 게시글을 꾸며보았다! flex를 여기서는 어떻게 썼느냐, 이렇게 사이트를 실행시키고 개발자 도구를 들어가서 보면 flex 때문에 이쁘게 가로로 p태그들이 공간을 잘 나뉘어 가지게 되었다! 그리고 또 내가 길게 쓴 글도 p태그에 다가 플렉스를 줬기 때문에 비율로 인해 잘 다음 줄로 넘어가게 됨! relative 는 뭔가 설명하고 싶어서 가져왔는데, 만약 저걸 써주게 되면, 약간 스크롤이 내려갈 때 상단 고정된, 네비바와 뭔가.... 2020. 9. 5.
2020.09.04_css_네브바 만들기 2020.09.04_css_네브바 만들기_정리 노트 드디어.........css 게시물을 가져왔지만......... 지금까지 있던 css 총 정리지만...예 별거 없습니다.... 오늘 한 화면에 쓰였던 css 를 총 정리해보겠습니다. 총총 먼저 네비바부터! 오늘은 부트스트랩을 쓰지 않고 ( 다덜 게시판 치니까 부트스트랩꺼 가지고 오더라그여... ) css 만 써서 이렇게 구현을 해보았습니다.. 예 별거 없어요.. 그래도 하나하나 설명을 해보게씀미다. 먼저 네비바로 갑시다!! 오늘 총 쓰일 클래스와 태그들은 nav_container, nav_bar, nav_bar 안에 있는 a태그 입니다 클래스를 잘 정해주고 그에 맞게 하나씩 css 를 입히는 게 참 중요하더라 일단 네비바를 index.css 안에 넣어놨.. 2020. 9. 5.

티스토리툴바