본문 바로가기

code27

실습환경준비 - 웹서버 설치, 파이썬 설치 1. bitnami설치 2.127.0.0.1 접속 3. atom과 연동하기 위해서 (add project→bitnami→apache2→htdocs 디렉토리 선택) index.html에 문자를 입력하고 reload하면 입력한 글자가 나오게 된다. 파이썬을 설치하고 난 후 윈도우키+R을 누르면 실행창이 나타난다. 거기에서 cmd를 입력하면 이러한 창이 뜸. 이거는 그래픽적인 인터페이스가 아닌 경로를 입력해서 들어간는 것이다. = 명령을 입력한다는 뜻. 그리고 경로를 bitnami안에 htdocs로 변경을 해줘야 하는데 여기에서 바보같은 이유로 한참을 헤맸다. 계속 입력했는데 내부 또는 외부 명령, 실행할 수 있는 프로그램이 아니라고 떴는데 cd를 앞에 안붙여서 그런 것..허무했다.그래서 cd \Bitnami.. 2021. 2. 17.
css와 html로 크리스마스 초대장 보내기 배운것을 이용해서 크리스마스 초대장을 만들어보았다.코드첨부~ 완성이다 !! grid가 너무 어렵다 구글링 해봐도 사실 이해가 완벽히 되지는 않았다. 2021. 2. 16.
박스모델 써먹기 글자에 못생긴 투박한 박스 말고 세련된 줄을 어떻게 그어야 하는지 배워보겠다. 일단 제목에 줄을 긋기위해서는 style 안에 h1을 건드려야겠지? 위에와 똑같이 border:1px solid gray를 써주면 하지만 우리는 밑줄만 그어지기를 원한다. border 대신 border-bottom을 입력한다. (자동완성에서 알 수 있음) 그런데 밑줄의 위치가 너무 애매하다 저번 시간에 배운대로 margin값이나 padding 값을 조절해줘야 하는데 그렇게 접근하기 보다는 소스검사로 접근을 해보자 캡쳐를 못했지만 태그에 마우스를 갖다대면 밑줄은 저어기 보이는 살구색 margin 값에 의해 달라지는 것을 알 수 있다. margin값을 없애준다. 그러면 이렇게 바뀐다. 그다음엔 세로줄을 긋는 작업을 하고싶어질 것이.. 2021. 2. 16.
박스모델 글씨에 박스모델을 넣어보면 알수 있듯 h1태그는 화면 전체(block level element) a태그는 링크부분(inline element) 이라는 것을 알 수 있다. 요로코롬 참고로 박스를 만드는 코드는 색깔이 왜 사라진지는 모르겠다.. 그렇지만 h1상자 거슬린다. inline으로 박스를 만들고 싶다 하면 h1태그 안에 display:inline; 을 입력해준다 반대로 아마스빈 링크를 전체화면으로 바꾸고 싶다 하면 a태그 안에 display:block; 이라고 해주면 요상하게..변한다 그리고 중복은 저기있는 border가 너무 겹친다. 이렇게 바꿀수 있다. 순서는 상관없다. 이제 다시 중요한 박스에 관해서 이야기 해보자 이 박스모양을 바꿔 보도록 하자 테두리 사이의 여백을 넣어두고 싶다하면 paddi.. 2021. 2. 14.