공학도의 잡다한 시선

코딩야학 5기 - final 190104 : ~ 웹서버와 HTTP, 향후 나아갈 길만든 날짜:2019-01-04 오전 10:08본 글은 에버노트에서 작성되었습니다.웹서버 운영하기 하나의 문제를 해결하는데 몇일이 걸릴 수 있다. 그러나 해결과정에서 수많은 지식과 보답을 얻게된다. 우리의 컴퓨터에 웹서버 라는 프로그램을 설치해보자. 웹서버라는 제품군에는 여러 가지가 있다. 우리는 아파치를 사용할 것이다. 사용량 1위를 꾸준히 지키고 있다. 아파치를 우선 설치하자. 검색 : how to install apache http server [YOUR_OS] 윈도우에 웹서버 설치 how to easy install apache on window이것을 사용할 것이다. bitnami wamp stack Window Ap..

코딩야학 5기 - 2일차 190103 : ~웹호스팅 (github pages) 까지만든 날짜:2019-01-03 오전 9:30본 글은 에버노트에서 작성되었습니다. 기본문법 - 태그 태그에 대해서 설명혁명적인 변화 우리는 모르는 것이 뭔지만 알면 인터넷을 통해 1분만에 알 수 있는 시대에 살고 있다. 통계에 기반한 학습통계에 기반을 둬서 공부하는 방법. https://www.advancedwebranking.com/html/ 150여개의 태그 중. 통계를 기반으로 공부를 하면 효율적이다. ex)frequency of english wordshttps://www.wordfrequency.info/free.asp?s=y 시험을 보게되면 어려운 것은 중요한 것이고,쉬운 것은 사소한 것이라는 해로운 인식이 생긴다..

코딩야학 5기 - 1일차 190102 : WEB1 ~HTML코딩과 실습환경 준비 만든 날짜:2019-01-02 오후 6:03본 글은 에버노트에서 작성되었습니다.WEB1 - 1. 수업소개 7년전에 이고잉이 직면했던 문제를 우리가 엔지니어가 되어 해결한다. 공부의 효용을 뇌에게 자주 보여준다면, 뇌가 반응할 것이다. 공부와 친해지는 계기가 될 수 있는 수업이 될 수 있었으면 좋겠다. Youtube 재생목록으로 바로가기진도표 WEB1 - 2.프로젝트의동기 SQL을 가리키며 시작하여 일반인 까지도 들을 수 있게 강의를 만들었다. 한계에 부딪히자 직접 만들었다. WEB1 - 3.기획 이런 형태의 웹페이지를 만들어보고 싶었다. WEB1 - 4.코딩과 HTML어떤것이 원인이고 결과인지.어떤것이 컴퓨터가하고 사람이 하..

[css] 링크(link) 클릭했을 때, 마우스올렸을 때 (visited, hover, active)이번 글에서는 css에서 링크를 꾸며주는 속성을 알아보도록하겠습니다.원래 html에서는 a태그를 사용해서 속성을 주게되면 링크를 걸 수 있었습니다.a에 href에 주소를 입력해서 말이죠. target을 통해서 클릭시액션도 지정할 수 있었습니다. 하지만 css에서는 링크의 기본색상 그리고 클릭했을 때 색상클릭을 할 때 그 순간색상, 이미 방문한 링크일 때 색상을 설정할 수 있습니다.이것을 해보도록 하겠습니다.저 같은 경우는 위와 같이 코드를 짯습니다.첫번째 a:link 선택자를 사용하면 기본 링크의 스타일을 지정할 수 있습니다.색상은 파란색을 주었고요. 원래 링크에는 기본으로 밑줄이 생기는데text-deco..

[css] 글자에 그림자 넣기 text-shadow (+글꼴, 크기 : font-family-size)css를 사용하면 글자에 그림자도 넣을 수 있습니다.원래는 css3 전에는 그림자효과가 없었다고합니다.그런데 업그레이드되어서 이제 text-shadow속성을 사용하면무려 그림자를 나타낼 수 있게됩니다.. 신기하네요!사용 방법은 위와 같습니다.css스타일 시트에서 속성으로 text-shadow를 주면됩니다.그런데 왜 값이 4개나 될까요?왜냐하면 각각 나타내는 값이 있기 때문입니다.첫 번째로 오는 녀석은 오른쪽그림자길이두 번째로 오는 놈은 아래쪽그림자길이세 번째로 오는 녀석은 흐린정도그리고 마지막은 그림자 색상을 나타냅니다. 위 와 같이 코드를 작성하고 실행해주게되면,결과는 이렇게 나오게됩니다.저는 h3선택..

[html-css] 줄간격 정렬, 밑줄 (text-align-decoration,line-height)웹프로그래밍 입니다.CSS는 캐스케이딩 스타일 시트의 약자로 HTML과 함께 사용되어페이지를 더 효율적으로 꾸밀 수 있게 해줍니다.이를 활용하면 더 풍부한 디자인가 사이트 유지보수가 가능합니다.위와 같이 작성된 CSS는 라인 8번에서 17번까지 작성되어있습니다.style태그로 감싸서 설정해 주면되고이때 사용 방법은 선택자{ 속성 : 값; . . .} 이런 식으로 적용하면됩니다.위에작성된 방식은 내부스타일시트 방식입니다.내부스타일 시트는 html문서의 head태그 안에 스타일시트가 삽입된 것을 뜻합니다.추가적으로 바디태그 안에서 속성 에서 바로 style을 적용시켜주는 것과외부스타일 시트로 CSS를 삽입하..

시험을 위한 html정리를 끄적여봤습니다 본, 포스팅은 제가 학교에서 볼 중간고사를 대비하기 위해 작성되었습니다. 중간고사는 전체 성적의 30%센트이고 앞 챕터라서 난이도도 쉬운편이니 기말때 더 힘차게 공부를 해야한다. 과제는 20%이다. 중간고사랑 거의 맞먹는 펀센티지라서 과제도 소홀히해서는 안된다.HTML의 문서구조살펴보기 html의 기본 형식이다.css는 아직 안배웠기 때문에 사용하면 안된다.meta 태그에 마지막에있는 /는 엄격한 문장을 위해 삽입하지만,수업특성상 고급지게 하면 쓴소리 듣기 일수이니그냥 '/'는 생략하고 작성하자.(사실 없어도 정상적으로 실행이 가능하다.) 문자세트는 utf-8로 설정한다.텍스트 저장시 국제표준이기 때문이다. title태그는상단탭제목을 쓸 때 쓴다고 보면된다. 그 ..

html - H태그 모든 문서에는 제목이 있기 마련입니다. 제목이 없는 책을 본 적이 있나요? 없을 겁니다. 마찬가지로 웹페이지도 타이틀이있고 본문에도 제목이있습니다. 이때 사용하는 태그가 바로 html에서 h태그입니다. 헤드라인이라고 생각하시면 되겠습니다. 지금 저기 위에 보이는 큰 글자도 바로 h1태그를 사용한 모습입니다. 태그 사용방법은 간단합니다. 위 처럼 제목을 감싸주도록 h태그를 열고닫아주면 됩니다. 또 H태그는 h1부터 h6까지 있습니다. 이건 제목에 매겨지는 수준이라고 생각하시면되는데요? 1이가장 높은수준(순위)의 제목이고 6이 가장 낮은수준의 제목이라고 생각하면되겠습니다. 이건 이렇게 생각하시면됩니다. 문서에는 주제목이 있으면 부제목이 있기 마련이죠 또 소제목도 있을 수 있고요. html..

HTML a태그 속성(href, target,id 속성) html의 a태그라고하면 기본적으로 우리가 인터넷에서 쓰는 링크를 생각하면되겠습니다. 속성이라고 하는 이 a태그를 이용하게 되면 간단하게 클릭만 하면 해당 주소로 이동할 수 있게 할 수 있습니다. (텍스트나 이미지를 클릭해서 이동이 가능하게 해준다.) 링크를 걸기위해서는 속성으로는 href를 사용해서 위와 같이 쓰시면되고, target속성은 해당 속성링크를 눌렀을 때 창을어디다가 띄울지 정하는 거라고 보면 되겠습니다.태그속성href 속성a태그에서 href 값으로 정해준 주소로 이동한다.Hypertext Reference의 약자이기도 하다.target 속성웹페이지에서 새창에서 열거나 현재창에서 여는 것을 정할 때 쓰는 속성이다._self, _pare..

HTML 기본 태그와 문서 구조 웹프로그래밍이라고 하면 보통 html과 css를 사용해서 하게됩니다.1학년 때 공부했었지만 군대다녀오니 까먹었고 css는 맛도 못보고 끝나버려서 다시 수강하게되었네요.블로그를 하며 많이 봐왔던게 html이고 배워두면 확실히 쓸일이 많기 때문에 학습시작합니다.(cf. 학습으로 사용되는 기본교재는 HTML&CSSforBeginner(ISBN:979-11-5664-279-4(93000)을 사용함.) 이번 포스팅에서는 html의 기본적인 태그와 문서구조를 알아보겠습니다. 가장 먼저보이는 !DOCTYPE 이 녀석은 html문서 버전을 알려줍니다.맨위에 저런 코드를 입력해두면 아 이게 html5로 작성된 문서구나 하고 컴퓨터가 알아먹는겁니다.앞으로 공부하게될 것도 html5이니 자주..